:root {
  /* ==================================================COLORS */
  --wid-mob1: 479px;
  --wid-tab1: 768px;
  --clr-main-grey: rgb(23, 25, 28);
  --clr-sec-grey: rgb(34, 38, 48);
  --clr-sec-greyTP: rgba(34, 38, 48, 0.411);
  --clr-roseGold: rgb(255, 143, 110);
  --clr-roseGold2: rgb(253, 88, 37);
  --clr-btn-blu: rgb(86, 118, 255);
  --clr-light-grey: rgb(96, 96, 96);
  --clr-font-main1: #0034dda7;
  --clr-font-main: #003567;
  --clr-font-maintp: #2d6eaa;
  --clr-main-red: rgb(34, 38, 48);
  --clr-B4: #b95404;
  --clr-B4tp: #a25d24;
  --clr-orange-main: #E08100;
  /* ===================================================Font Weight */
  --fw-3: 400;
  --fw-5: 500;
  --fw-7: 700;
  --fw-9: 900;
  /* ===================================================LINE HEIGHT */
  --lh-default: 125%;
  /* ===================================================RESPONSiVE FONT SIZE */
  --fs-responsive: clamp(2rem, 5vw, 4rem);
  --background-color: rgb(250, 250, 250);
}

/* ========================================================Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =========================================================Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/*========================================================== Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/*========================================================== Set core body defaults */
body {
  text-rendering: optimizeSpeed;
}

html {
  overflow-x: hidden;
}

/*============================= A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.5ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.5ms !important;
    scroll-behavior: auto !important;
  }
}
/* ................................................ */
/* ============================================================DEFAULT CSS END */
nav {
  width: 100%;
  height: 12vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2rem;
  position: fixed;
  top: 0;
  background-color: #003567;
  clear: both;
  z-index: 1000000000001;
}
nav .logo {
  font-weight: 700;
}
nav .logo img {
  width: 80px;
  height: auto;
}
nav .logoMob {
  display: none;
}
nav .menu {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  clear: both;
}
nav .menu li {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  clear: both;
}
nav .menu li a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  font-family: monospace;
}
nav .menu-toggle {
  display: none;
  cursor: pointer;
}
nav .menu-toggle .bar {
  display: block;
  width: 35px;
  height: 4px;
  margin: 3px auto;
  background-color: white;
  transition: all 0.3s ease;
}
nav .cta {
  margin-left: 2rem;
  border-radius: 5px;
  border: 1px solid black;
  background-color: transparent;
  padding: 0.4rem 1.4rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  nav .menu {
    position: fixed;
    right: -50%;
    top: 0;
    flex-direction: column;
    width: 50%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease;
    background-color: rgba(255, 255, 255, 0.693);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
  }
  nav .menu li {
    margin: 1.2rem 0;
  }
  nav .menu li a {
    color: black;
  }
  nav .logo img {
    display: none;
  }
  nav .logoMob {
    display: block;
    justify-content: flex-start;
  }
  nav .logoMob img {
    width: 80px;
    height: auto;
  }
  nav .menu-toggle {
    display: block;
    cursor: pointer;
  }
}
.rotate-down {
  transform: rotate(45deg) translate(5px, 5px);
}

.rotate-up {
  transform: rotate(-45deg) translate(7px, -8px);
}

.hide-bar {
  opacity: 0;
}

.heroSection {
  width: 98%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 13vh;
  background-image: url(./images/electrician3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 8px 8px 12px #E08100;
}
.heroSection .hero {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.heroSection .hero .heroTxt {
  background-color: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: white;
  border: 1px solid #E08100;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
}
.heroSection .hero .heroTxt h1,
.heroSection .hero .heroTxt p {
  text-shadow: 1px 1px black;
}
.heroSection .hero .heroTxt h1 {
  font-size: 3rem;
  color: #003567;
}
.heroSection .hero .heroSocialMedia {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
}
.heroSection .hero .heroSocialMedia img {
  width: 35px;
}
.heroSection .hero .heroTxtRight {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 1rem;
  color: white;
  font-size: 1rem;
  font-size: 1.4rem;
  filter: drop-shadow(1px 1px 2px black);
}
.heroSection .hero .heroTxtLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  color: white;
  font-size: 1.4rem;
  filter: drop-shadow(1px 1px 2px black);
}
.heroSection .hero .heroTxtLeft h4 {
  color: white;
}

@media (max-width: 768px) {
  .heroSection {
    height: 60vh;
    margin-top: 13vh;
    background-image: url(./images/electrician3.jpg);
    border-radius: none;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 8px 8px 12px black;
  }
  .heroSection .hero {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .heroSection .hero .heroTxt {
    background-color: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: white;
    border: 1px solid white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
  }
  .heroSection .hero .heroTxt h1,
  .heroSection .hero .heroTxt p {
    text-shadow: 1px 1px black;
  }
  .heroSection .hero .heroTxt h1 {
    font-size: 1.4rem;
  }
  .heroSection .hero .heroSocialMedia {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
  }
  .heroSection .hero .heroSocialMedia img {
    width: 40px;
  }
  .heroSection .hero .heroTxtRight {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5rem 1rem;
    color: white;
    font-size: 1rem;
    display: none;
  }
  .heroSection .hero .heroTxtLeft {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;
    color: rgb(255, 187, 0);
  }
  .heroSection .hero .heroTxtLeft h4 {
    color: white;
  }
}
.largeTxtSection {
  width: 100vw;
  position: relative;
  padding: 2rem;
}
.largeTxtSection .largeTxt {
  text-align: center;
  position: relative;
}
.largeTxtSection .largeTxt h2 {
  font-size: calc(1rem + 10vw);
  color: #003567;
}
.largeTxtSection .largeTxt2 {
  text-align: center;
  position: relative;
  padding: 0 2rem 2rem 2rem;
  color: var(--clr-orange-main);
  font-size: 1.8rem;
  filter: drop-shadow(1px 1px 1px black);
}
.largeTxtSection .largeTxt2 p:nth-child(1) {
  position: absolute;
  left: 0;
}
.largeTxtSection .largeTxt2 p:nth-child(2) {
  position: absolute;
  right: 0;
}

@media (max-width: 768px) {
  .largeTxtSection {
    margin: 4rem 1rem;
  }
  .largeTxtSection .largeTxt2 p:nth-child(2) {
    display: none;
  }
}
.aboutCtaSection {
  width: 100%;
  height: auto;
  margin: 8rem 0;
  position: relative;
  overflow-x: visible;
}
.aboutCtaSection .aboutCta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: auto;
}
.aboutCtaSection .aboutCta .aboutCtaImg1 {
  background-image: url(./images/girl-call.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  z-index: 10011;
}
.aboutCtaSection .aboutCta .aboutCtaImg1 h3 {
  color: black;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1rem 2rem;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.368);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  margin: 7% 0 0 60%;
  border: 1px solid white;
}
.aboutCtaSection .aboutCta .aboutCtaImg2 {
  background-image: url(./images/el1.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
}
.aboutCtaSection .aboutCta .aboutCtaTxt {
  height: 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: white;
}
.aboutCtaSection .aboutCta .aboutCtaTxt h3 {
  font-size: 1.5rem;
  padding: 1rem;
}
.aboutCtaSection .aboutCta .aboutCtaTxt .aboutCtaTxt1 {
  display: block;
  height: 100%;
  text-align: start;
  background: var(--clr-sec-greyTP);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  padding: 1rem;
  background-repeat: no-repeat;
  background-position: left top;
}
.aboutCtaSection .aboutCta .aboutCtaTxt .aboutCtaTxt1 img {
  width: auto;
  height: 60px;
}
.aboutCtaSection .aboutCta .aboutCtaTxt .aboutCtaTxt2 {
  height: 100%;
  text-align: end;
  background: var(--clr-sec-greyTP);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  padding: 1rem;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.aboutCtaSection .aboutCta .aboutCtaTxt .aboutCtaTxt2 img {
  width: auto;
  height: 60px;
}

.aboutCtaSection::after {
  content: "Services";
  display: block;
  position: absolute;
  top: 280px;
  left: 10%;
  z-index: 1000000;
  color: #003567;
  overflow: hidden;
  font-size: calc(1.4rem + 15vw);
}

.aboutCtaSection::before {
  content: "";
  display: block;
  width: 600px;
  height: 600px;
  background-color: #E08100;
  border-radius: 50%;
  position: absolute;
  top: -50%;
  right: -20%;
  z-index: -1;
}

@media (max-width: 768px) {
  .aboutCtaSection {
    width: 100vw;
    height: auto;
    margin: 6rem 0;
    position: static;
    clear: both;
  }
  .aboutCtaSection .aboutCta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    height: auto;
  }
  .aboutCtaSection .aboutCta .aboutCtaImg1 {
    height: 30rem;
    background-image: url(./images/girl-call.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    z-index: 10011;
  }
  .aboutCtaSection .aboutCta .aboutCtaImg1 h3 {
    color: black;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 1rem 2rem;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.368);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    margin: 80% auto 20%;
    border: 1px solid white;
  }
  .aboutCtaSection .aboutCta .aboutCtaImg2 {
    background-image: url(./images/kitExt.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
  }
  .aboutCtaSection .aboutCta .aboutCtaTxt {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
  .aboutCtaSection .aboutCta .aboutCtaTxt .aboutCtaTxt1 {
    display: block;
    height: 100%;
    text-align: start;
    background: var(--clr-sec-greyTP);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    padding: 1rem;
    background-repeat: no-repeat;
    background-position: left top;
  }
  .aboutCtaSection .aboutCta .aboutCtaTxt .aboutCtaTxt2 {
    height: 100%;
    text-align: end;
    background: var(--clr-sec-greyTP);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    padding: 1rem;
    background-repeat: no-repeat;
    background-position: right bottom;
    position: relative;
  }
  .aboutCtaSection::before {
    display: none;
  }
  .aboutCtaSection::after {
    display: none;
  }
}
.productsSection {
  width: 100%;
  height: auto;
  padding-top: 8vh;
  text-align: center;
}
.productsSection h2 {
  display: none;
}
.productsSection h3 {
  font-family: monospace;
  margin: 1rem 0;
  font-size: 3rem;
  color: #003567;
}
.productsSection p {
  margin: 0 8rem 4rem 8rem;
}
.productsSection .productsAllCategory {
  width: 98%;
  margin: 0 auto 5rem;
}
.productsSection .productsAllCategory .productsAll {
  width: 100%;
}
.productsSection .productsAllCategory .productsAll .product-category {
  display: none;
  width: 98%;
  margin: 2rem auto 2em;
  flex: 0 0 20px;
  flex-wrap: wrap;
}
.productsSection .productsAllCategory .productsAll .product {
  margin: 1rem 0rem;
  text-align: center;
  padding: 1rem;
  font-family: Tahoma, sans-serif;
}
.productsSection .productsAllCategory .productsAll .active {
  display: flex;
  justify-content: center;
  align-items: center;
}
.productsSection .productsAllCategory .productsAll .product img {
  width: 220px;
  height: 160px;
}
.productsSection .productsAllCategory .productsAll .product:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}
.productsSection .productsAllCategory .productsAll .product h3 {
  font-size: 1rem;
  font-weight: 700;
}
.productsSection .productsAllCategory .productsAll a {
  color: black;
  text-decoration: none;
}
.productsSection .productsAllCategory .productsAll a:hover {
  color: blue;
  cursor: none;
}
.productsSection .productsAllCategory .productsAll button {
  background-color: #003567;
  color: white;
  font-weight: 700;
  border: 1px solid #003567;
  padding: 0.8rem 2.2rem;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 2px;
  font-family: Tahoma, sans-serif;
}
.productsSection .productsAllCategory .productsAll button:active,
.productsSection .productsAllCategory .productsAll button:focus {
  background-color: none;
  padding: auto;
  transform: scale(1.2);
  color: var(--clr-orange-main);
}
.productsSection .productsAllCategory .productsAll .cateButtons {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 4rem;
}
.productsSection .productsAllCategory button {
  background-color: #003567;
  color: white;
  padding: 0.6rem 3rem;
  cursor: pointer;
  border: none;
  font-family: Tahoma, sans-serif;
}

@media only screen and (max-width: 768px) {
  .productsSection {
    padding-top: 3vh;
  }
  .productsSection h2 {
    display: block;
    color: #003567;
    font-size: calc(1.4rem + 15vw);
  }
  .productsSection p {
    margin: 1rem;
  }
  .productsSection .productsAllCategory .productsAll .product-category {
    margin: 3rem auto;
  }
  .productsSection .productsAllCategory .productsAll .product img {
    width: auto;
    height: 15rem;
  }
  .productsSection .productsAllCategory .productsAll .product:hover {
    transform: scale(1.3);
    transition: transform 0.2s ease-in-out;
  }
  .productsSection .productsAllCategory .productsAll .product h3 {
    font-size: 1.4rem;
    font-weight: 700;
  }
  .productsSection .productsAllCategory .productsAll a {
    color: black;
  }
  .productsSection .productsAllCategory .productsAll a:hover {
    color: blue;
  }
  .productsSection .productsAllCategory .productsAll button {
    background-color: white;
    color: black;
    font-weight: 700;
    border: 2px solid var(--clr-orange-main);
    padding: 0.8rem 2.2rem;
    border-radius: 5px;
  }
  .productsSection .productsAllCategory .productsAll button:active,
  .productsSection .productsAllCategory .productsAll button:focus {
    background-color: var(--clr-orange-main);
    padding: auto;
    transform: scale(1.6);
    color: white;
  }
  .productsSection .productsAllCategory .productsAll .cateButtons {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
  }
}
.sectorsSection {
  width: 100%;
  height: auto;
  margin: 2rem 0;
}
.sectorsSection .sectors {
  width: 90%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  line-height: 2rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  filter: drop-shadow(1px 1px 5px black);
}
.sectorsSection .sectors .sector {
  max-width: 360px;
  padding: 2rem;
  border-radius: 10px;
  background-blend-mode: darken;
  color: white;
}
.sectorsSection .sectors .sector h3 {
  font-size: 1.6rem;
}
.sectorsSection .sectors .sector1 {
  background: #003567;
}
.sectorsSection .sectors .sector2 {
  background: #003567;
}
.sectorsSection .sectors .sector3 {
  background: #003567;
}

@media (max-width: 768px) {
  .sectorsSection {
    width: 100%;
    height: auto;
    margin: 2rem 0;
  }
  .sectorsSection .sectors {
    width: 98%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    line-height: 2rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
  }
  .sectorsSection .sectors .sector {
    max-width: 100%;
    padding: 2rem;
    border-radius: 10px;
    background-blend-mode: darken;
    color: white;
  }
  .sectorsSection .sectors .sector h3 {
    font-size: 1.6rem;
  }
  .sectorsSection .sectors .sector1 {
    background: url(./images/chairs.jpg), rgba(128, 0, 128, 0.584);
  }
  .sectorsSection .sectors .sector2 {
    background: url(./images/chairs.jpg), aqua;
  }
  .sectorsSection .sectors .sector3 {
    background: url(./images/chairs.jpg), chocolate;
  }
}
.midBannerSection {
  height: auto;
  z-index: 1;
  position: relative;
  z-index: 1001;
}
.midBannerSection .midBanner {
  width: 98%;
  margin-inline: auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-sec-greyTP);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.midBannerSection .midBanner .midBannerTxt {
  margin-top: 1rem;
}
.midBannerSection .midBanner .midBannerTxt span {
  color: white;
}
.midBannerSection .midBanner .midBannerTxt h3 {
  font-size: 2.2rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
  font-family: Tahoma, sans-serif;
  line-height: 2.6rem;
  color: var(--clr-font-main);
}
.midBannerSection .midBanner .midBannerTxt p {
  line-height: 1.4rem;
  color: white;
}
.midBannerSection .midBanner .midBannerImg img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 2px black);
  filter: hue-rotate(30deg);
}

@media (max-width: 768px) {
  .midBannerSection {
    height: auto;
    z-index: 1;
    position: relative;
    z-index: 1001;
  }
  .midBannerSection .midBanner {
    width: 98%;
    margin-inline: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column-reverse;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-sec-greyTP);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
  }
  .midBannerSection .midBanner .midBannerTxt {
    margin-top: 1rem;
  }
  .midBannerSection .midBanner .midBannerTxt h3 {
    font-size: 2.2rem;
    margin: 0 0 1rem 0;
    font-family: Tahoma, sans-serif;
    line-height: 2.6rem;
  }
  .midBannerSection .midBanner .midBannerTxt p {
    line-height: 1.4rem;
  }
  .midBannerSection .midBanner .midBannerImg img {
    width: 100%;
    height: auto;
    filter: drop-shadow(2px 2px 2px black);
  }
  .midBannerSection::after {
    display: none;
  }
}
.servicesAdvantage li {
  list-style: none;
}
.servicesAdvantage li span:nth-child(1) {
  color: rgb(17, 0, 255);
}

.servicesAdvantagesSection {
  margin: 5rem 0;
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;
}
.servicesAdvantagesSection h6 {
  color: var(--clr-orange-main);
  font-size: 1rem;
}
.servicesAdvantagesSection h3 {
  font-weight: 700;
  font-size: 2.2rem;
  font-family: Tahoma, sans-serif;
  margin-bottom: 1rem;
  color: var(--clr-font-main);
}
.servicesAdvantagesSection .servicesAdvantages {
  width: 98%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: left;
  gap: 1rem;
}
.servicesAdvantagesSection .servicesAdvantages .servicesAdvantage {
  box-shadow: 2px 2px 8px rgb(114, 114, 114);
  padding: 1rem 1rem 2rem 1rem;
}
.servicesAdvantagesSection .servicesAdvantages .servicesAdvantage img {
  max-width: 100%;
  height: 220px;
}
.servicesAdvantagesSection .servicesAdvantages .servicesAdvantage h4 {
  margin: 1rem 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-font-main);
}
.servicesAdvantagesSection .servicesAdvantages .servicesAdvantage p {
  margin: 1rem 0;
}

@media (max-width: 768px) {
  .servicesAdvantagesSection {
    margin: 5rem 0;
    width: 100%;
    height: auto;
    text-align: center;
    position: relative;
  }
  .servicesAdvantagesSection h6 {
    color: red;
    font-size: 1rem;
  }
  .servicesAdvantagesSection h3 {
    font-weight: 700;
    font-size: 2.2rem;
    font-family: Tahoma, sans-serif;
    margin-bottom: 1rem;
  }
  .servicesAdvantagesSection .servicesAdvantages {
    width: 98%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: 1rem;
  }
  .servicesAdvantagesSection .servicesAdvantages .servicesAdvantage {
    box-shadow: 2px 2px 8px rgb(114, 114, 114);
    padding: 1rem 1rem 2rem 1rem;
  }
  .servicesAdvantagesSection .servicesAdvantages .servicesAdvantage img {
    max-width: 100%;
    height: 220px;
  }
  .servicesAdvantagesSection .servicesAdvantages .servicesAdvantage h4 {
    margin: 1rem 0;
    font-size: 1.4rem;
  }
  .servicesAdvantagesSection .servicesAdvantages .servicesAdvantage p {
    margin: 1rem 0;
  }
}
.ctActionSection {
  background-color: rgba(226, 226, 226, 0.518);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  width: 200px;
  padding: 1rem 1rem 3rem 1rem;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  border-radius: 30px;
  border-radius: 30px 30px 30px 80px;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-bottom: 50px;
  z-index: 1000000000001;
  border: 1px solid white;
}
.ctActionSection .ctAction {
  display: block;
  text-align: center;
  color: black;
  font-family: monospace;
}
.ctActionSection .ctAction h3 {
  font-size: 1.2rem;
}
.ctActionSection .ctAction h4 {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .ctActionSection {
    background-color: #003567;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    width: 100vw;
    padding: 1rem;
    -webkit-clip-path: none;
            clip-path: none;
    border-radius: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    margin-bottom: 0px;
    z-index: 1000001;
    border: none;
  }
  .ctActionSection .ctAction {
    display: block;
    text-align: center;
    color: var(--clr-orange-main);
    font-family: monospace;
  }
  .ctActionSection .ctAction h3 {
    font-size: 1.2rem;
  }
  .ctActionSection .ctAction h4 {
    font-size: 1.2rem;
  }
}
.clientsSection {
  width: 100%;
  height: auto;
  padding: 4rem 0;
}
.clientsSection h2 {
  text-align: center;
  color: #fe4f4f;
  font-size: 1.6rem;
  font-weight: 600;
}
.clientsSection .clients {
  width: 100%;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.clientsSection .clients .aboutImg {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: no-wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.clientsSection .clients .aboutImg img {
  width: 13rem;
  height: auto;
  border: 1px solid black;
}

.slider {
  width: 100%;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: 90rem;
  animation: scroll 25s linear infinite;
  animation-delay: 0ms;
  white-space: nowrap;
}

.slide {
  width: 300px;
  height: auto;
  flex-shrink: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.midHeadingSection {
  height: 40vh;
  background: url(./images/about_us_banner.jpeg), var(--clr-orange-main);
  background-blend-mode: darken;
  display: flex;
  align-items: center;
  justify-content: center;
}
.midHeadingSection .midHeading {
  text-align: center;
  color: white;
}
.midHeadingSection .midHeading h2 {
  font-size: 1.8rem;
}
.midHeadingSection .midHeading button {
  padding: 0.7rem 3rem;
  background-color: transparent;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.844);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  margin: 1rem;
}

@media (max-width: 768px) {
  .midHeadingSection {
    height: auto;
    padding: 3rem 0;
    background: url(./images/about_us_banner.jpeg), var(--clr-orange-main);
    background-blend-mode: darken;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .midHeadingSection .midHeading {
    text-align: center;
    color: white;
  }
  .midHeadingSection .midHeading h2 {
    font-size: 1.8rem;
  }
  .midHeadingSection .midHeading button {
    padding: 0.7rem 3rem;
    background-color: transparent;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.844);
    margin: 1rem;
  }
}
.newsSection {
  grid-template-columns: 1fr 1fr;
  width: 90%;
  height: auto;
  margin: 0 auto;
  gap: 0.5rem;
}
.newsSection .news-img-txt img {
  width: 100%;
  height: auto;
}
.newsSection .news-img-txt .news1 {
  padding: 1em;
  background-color: var(--clr-sec-grey);
  color: var(--clr-blu2);
}
.newsSection .news-img-txt .news1 p {
  margin: 1em 0em;
  color: white;
}
.newsSection .news-txt {
  height: 100%;
}
.newsSection .news-txt .neus {
  background-color: var(--clr-sec-grey);
  padding: 1em;
  margin-bottom: 2rem;
}
.newsSection .news-txt .neus h4 {
  line-height: 1.3em;
  color: var(--clr-blu2);
}
.newsSection .news-txt .neus p {
  margin: 1em 0em;
  color: white;
}

.fontgap {
  line-height: 2rem;
}

@media only screen and (max-width: 768px) {
  .news-headingSection .news-heading2 {
    grid-template-columns: 1fr;
  }
  .newsSection {
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
  }
}
.newsSection {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 4rem;
  background-image: linear-gradient(150deg, var(--clr-sec-grey) 55.66%, rgb(174, 174, 174) 45.33%);
  background-blend-mode: lighten;
  overflow-x: hidden;
}
.newsSection .news {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 1rem;
  gap: 1rem;
  place-items: center;
  background-image: linear-gradient(150deg, var(--clr-sec-grey) 45.33%, var(--clr-roseGold) 55.66%, var(--clr-sec-grey) 55.33%);
}
.newsSection .news img {
  width: 40px;
  height: auto;
  padding-left: 1rem;
}
.newsSection .news h3 {
  font-size: 1.2rem;
  padding: 1rem;
  font-weight: 600;
  color: #fefefe;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.newsSection .news p {
  padding: 0 1rem;
  color: #fefefe;
}
.newsSection .news .news1 span {
  color: var(--clr-roseGold);
}
.newsSection .news .news1 h3 {
  font-size: 2rem;
  padding: 0rem;
  font-weight: 700px;
  color: white;
}
.newsSection .news .news2 {
  padding: 1rem;
  border: 0.5px solid black;
  box-shadow: 1px 1px 4px black;
  background-color: rgba(255, 255, 255, 0.372);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.newsSection .news .news2 div {
  padding: 1rem;
  font-size: 14px;
  color: whitesmoke;
}
.newsSection .news .news3 {
  padding: 1rem;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.newsSection .news .news4 img {
  width: 340px;
  height: auto;
}
.newsSection .news .news5 {
  padding: 1rem;
  box-shadow: 1px 1px 4px black;
  background-color: rgba(255, 255, 255, 0.884);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.newsSection .news .news6 {
  padding: 1rem;
  box-shadow: 1px 1px 4px black;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

@media only screen and (max-width: 800px) {
  .newsSection {
    padding: 0.5rem;
    margin: 4rem 0rem;
  }
  .newsSection .news {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 0.3rem;
    gap: 1.2rem;
  }
  .newsSection .news img {
    padding-left: 0.3 rem;
  }
  .newsSection .news h3 {
    padding: 0.5rem;
  }
  .newsSection .news p {
    padding: 0 0.5rem;
  }
  .newsSection .news .news1 h3 {
    padding-bottom: 2rem;
  }
}
.news-headingSection {
  width: 80%;
  height: auto;
  margin: 6em auto 2em auto;
  color: var(--clr-blu3);
}

.footerSection {
  background-color: #003567;
  text-align: center;
  padding-top: 3.2rem;
  font-family: monospace;
}
.footerSection .upperFooterSection {
  width: 96%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid white;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.6rem;
}
.footerSection .upperFooterSection .form {
  display: flex;
  flex-direction: column;
}
.footerSection .upperFooterSection .form h2 {
  margin: 1.6rem 0;
  color: var(--clr-orange-main);
  font-size: 2rem;
}
.footerSection .upperFooterSection .form input {
  border: none;
  border-bottom: 1px solid white;
  margin-bottom: 1rem;
  background-color: transparent;
  color: black;
}
.footerSection .upperFooterSection .form button {
  width: -moz-max-content;
  width: max-content;
  border: none;
  padding: 0.96rem 3.2rem;
  margin: 1.6rem 0;
}
.footerSection .upperFooterSection .footerLogo img {
  width: auto;
  height: 8rem;
  padding: 1rem;
}
.footerSection .upperFooterSection .footerLogo h3 {
  color: var(--clr-orange-main);
  font-size: 1.4rem;
}
.footerSection .upperFooterSection .socialMedia {
  color: white;
}
.footerSection .upperFooterSection .socialMedia h3 {
  color: var(--clr-orange-main);
  font-size: 1.4rem;
}
.footerSection .upperFooterSection .socialMedia img {
  width: 6rem;
  height: auto;
  padding: 1.6rem;
}
.footerSection .upperFooterSection .socialMedia .usefulLinks ul {
  list-style: none;
  display: flex;
}
.footerSection .upperFooterSection .socialMedia .usefulLinks ul li {
  margin: 2rem 1rem;
  text-decoration: none;
  list-style: none;
}
.footerSection .upperFooterSection .socialMedia .usefulLinks ul li a {
  color: white;
  text-decoration: none;
}
.footerSection .upperFooterSection .socialMedia .usefulLinks h3 {
  font-size: 1.4rem;
}
.footerSection .lowerFooterSection h4 {
  font-size: 1rem;
  padding: 1.6rem;
  color: orange;
}

@media only screen and (max-width: 768px) {
  .footerSection {
    background-color: #003567;
    text-align: end;
    padding: 3.2rem 0 6rem 0;
    font-family: monospace;
  }
  .footerSection .upperFooterSection {
    width: 96%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border-bottom: 1px solid white;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.6rem;
  }
  .footerSection .upperFooterSection .form {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }
  .footerSection .upperFooterSection .form h2 {
    margin: 1.6rem 0;
    color: var(--clr-orange-main);
    font-size: 2rem;
  }
  .footerSection .upperFooterSection .form input {
    border: none;
    border-bottom: 1px solid white;
    margin-bottom: 1rem;
    background-color: transparent;
    color: black;
  }
  .footerSection .upperFooterSection .form button {
    width: -moz-max-content;
    width: max-content;
    border: none;
    padding: 0.96rem 3.2rem;
    margin: 1.6rem 0;
  }
  .footerSection .upperFooterSection .footerLogo img {
    width: auto;
    height: 10rem;
    padding: 1rem;
  }
  .footerSection .upperFooterSection .footerLogo h3 {
    color: var(--clr-orange-main);
    font-size: 1.2rem;
  }
  .footerSection .upperFooterSection .socialMedia {
    color: white;
  }
  .footerSection .upperFooterSection .socialMedia h3 {
    color: var(--clr-orange-main);
    font-size: 1.6rem;
  }
  .footerSection .upperFooterSection .socialMedia img {
    width: 6rem;
    height: auto;
    padding: 1.6rem;
  }
  .footerSection .upperFooterSection .socialMedia .usefulLinks {
    margin-top: 2rem;
  }
  .footerSection .upperFooterSection .socialMedia .usefulLinks ul {
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .footerSection .upperFooterSection .socialMedia .usefulLinks ul li {
    margin: 2rem 1rem;
    list-style: none;
  }
  .footerSection .upperFooterSection .socialMedia .usefulLinks ul li a {
    text-decoration: none;
    color: white;
  }
  .footerSection .upperFooterSection .socialMedia .usefulLinks h3 {
    font-size: 1.4rem;
  }
  .footerSection .lowerFooterSection {
    text-align: center;
  }
  .footerSection .lowerFooterSection h4 {
    font-size: 1.3rem;
    padding: 1.6rem;
    color: orange;
  }
}
.elecMainBannerSection {
  height: 90vh;
  padding-top: 10vh;
}
.elecMainBannerSection .elecMainBanner {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
}
.elecMainBannerSection .elecMainBanner .elecMainBannerTxt h1 {
  font-size: 2.6rem;
  color: white;
}
.elecMainBannerSection .elecMainBanner .elecMainBannerTxt h1 span {
  color: #b95404;
  font-size: 5rem;
}
.elecMainBannerSection .elecMainBanner .elecMainBannerTxt p {
  font-size: 1.2rem;
  color: white;
  margin: 1.2rem 0;
}
.elecMainBannerSection .elecMainBanner .elecMainBannerTxt button {
  background-color: #b95404;
  padding: 0.8rem 2.8rem;
  margin-right: 1rem;
  color: white;
  font-size: 1.4rem;
  border: none;
}

@media (max-width: 768px) {
  .elecMainBannerSection {
    margin-top: 11vh;
    height: 70vh;
    padding-top: 10vh;
    background-image: url(./images/electrician2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .elecMainBannerSection .elecMainBanner {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    align-items: center;
  }
  .elecMainBannerSection .elecMainBanner .elecMainBannerTxt {
    text-align: center;
    width: 98%;
    margin: 0 auto;
  }
  .elecMainBannerSection .elecMainBanner .elecMainBannerTxt h1 {
    font-size: 2.6rem;
    color: black;
  }
  .elecMainBannerSection .elecMainBanner .elecMainBannerTxt h1 span {
    color: #b95404;
    font-size: 5rem;
  }
  .elecMainBannerSection .elecMainBanner .elecMainBannerTxt p {
    font-size: 1.2rem;
    color: black;
    margin: 1.2rem 0;
  }
  .elecMainBannerSection .elecMainBanner .elecMainBannerTxt button {
    background-color: #b95404;
    padding: 0.8rem 2.8rem;
    margin-right: 1rem;
    color: white;
    font-size: 1.4rem;
    border: none;
  }
  .elecMainBannerSection .elecMainBanner .elecMainBannerTxt button:nth-child(1) {
    display: none;
  }
}
.ourExpertisesSection {
  padding: 4rem 0;
  height: auto;
  text-align: center;
}
.ourExpertisesSection h2 {
  color: #b95404;
  font-size: 1.4rem;
}
.ourExpertisesSection button {
  background-color: #b95404;
  padding: 0.8rem 2.8rem;
  margin-right: 1rem;
  color: white;
  font-size: 1.4rem;
  border: none;
}
.ourExpertisesSection .ourExpertises {
  padding: 2rem 10rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.ourExpertisesSection .ourExpertises .ourExpertise h3 {
  color: #b95404;
  font-size: 1.2rem;
  margin: 1rem 0;
}
.ourExpertisesSection button {
  background-color: #b95404;
  padding: 0.5rem 1.8rem;
  margin-right: 1rem;
  color: white;
  font-size: 1.2rem;
  border: none;
}

@media (max-width: 768px) {
  .ourExpertisesSection {
    padding: 4rem 0;
    height: auto;
    text-align: center;
  }
  .ourExpertisesSection h2 {
    color: #b95404;
    font-size: 1.4rem;
  }
  .ourExpertisesSection button {
    background-color: #b95404;
    padding: 0.8rem 2.8rem;
    margin-right: 1rem;
    color: white;
    font-size: 1.4rem;
    border: none;
  }
  .ourExpertisesSection .ourExpertises {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin: 2rem auto;
    gap: 1rem;
  }
  .ourExpertisesSection .ourExpertises .ourExpertise h3 {
    color: #b95404;
    font-size: 1.2rem;
    margin: 1rem 0;
  }
  .ourExpertisesSection button {
    background-color: #b95404;
    padding: 0.5rem 1.8rem;
    margin-right: 1rem;
    color: white;
    font-size: 1.2rem;
    border: none;
  }
}
.whoWeSection {
  width: 100vw;
  height: auto;
  padding: 5rem 0rem;
  color: white;
}
.whoWeSection .whoWe {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 50vh;
  justify-content: center;
}
.whoWeSection .whoWe .whoWeTxt {
  background-color: #003567;
  padding: 2rem;
}
.whoWeSection .whoWe .whoWeTxt h3 {
  color: #E08100;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.whoWeSection .whoWe .whoWeTxt h4 {
  color: orange;
  padding: 1rem 0 1rem 1rem;
}
.whoWeSection .whoWe .whoWeTxt p {
  padding: 0rem 0 0rem 1rem;
}
.whoWeSection .whoWe .whoWeImg img {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .whoWeSection {
    height: auto;
    padding: 5rem 0rem;
    color: white;
  }
  .whoWeSection .whoWe {
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }
  .whoWeSection .whoWe .whoWeTxt {
    background-color: #003567;
    padding: 2rem;
  }
  .whoWeSection .whoWe .whoWeTxt h3 {
    color: #E08100;
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .whoWeSection .whoWe .whoWeTxt h4 {
    color: orange;
    padding: 1rem 0 1rem 1rem;
  }
  .whoWeSection .whoWe .whoWeTxt p {
    padding: 0rem 0 0rem 1rem;
  }
  .whoWeSection .whoWe .whoWeImg img {
    width: 100%;
    height: 100%;
  }
}
.latestUpdatesSection {
  height: auto;
  background: linear-gradient(to bottom, white 40%, rgb(238, 238, 238) 50%);
  padding: 2rem 0;
  text-align: center;
}
.latestUpdatesSection h3 {
  font-size: 1.2rem;
}
.latestUpdatesSection h2 {
  font-size: 2rem;
  color: var(--clr-orange-main);
  margin: 1rem;
}
.latestUpdatesSection p {
  margin: 0 8rem;
}
.latestUpdatesSection .latestUpdates {
  width: 80%;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.latestUpdatesSection .latestUpdates .latestUpdate {
  max-width: 300px;
  width: auto;
  box-shadow: 2px 2px 5px rgb(198, 198, 198);
  padding-bottom: 1rem;
  text-align: start;
}
.latestUpdatesSection .latestUpdates .latestUpdate img {
  width: 100%;
  height: auto;
}
.latestUpdatesSection .latestUpdates .latestUpdate h4,
.latestUpdatesSection .latestUpdates .latestUpdate p {
  margin: 1rem 0;
  padding: 0rem 1rem;
}
.latestUpdatesSection .latestUpdates .latestUpdate button {
  margin-left: 1rem;
  padding: 0.5rem 1.2rem;
  background-color: var(--clr-orange-main);
  border: none;
  color: white;
}

@media (max-width: 768px) {
  .latestUpdatesSection {
    height: auto;
    background: linear-gradient(to bottom, white 40%, rgb(238, 238, 238) 50%);
    padding: 2rem 0;
    text-align: center;
  }
  .latestUpdatesSection h3 {
    font-size: 1.2rem;
  }
  .latestUpdatesSection h2 {
    font-size: 2rem;
    color: var(--clr-orange-main);
    margin: 1rem;
  }
  .latestUpdatesSection p {
    margin: 2rem;
  }
  .latestUpdatesSection .latestUpdates {
    width: 98%;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
  .latestUpdatesSection .latestUpdates .latestUpdate {
    max-width: 400px;
    width: auto;
    box-shadow: 2px 2px 5px rgb(198, 198, 198);
    padding-bottom: 1rem;
    text-align: start;
  }
  .latestUpdatesSection .latestUpdates .latestUpdate img {
    width: 100%;
    height: auto;
  }
  .latestUpdatesSection .latestUpdates .latestUpdate h4,
  .latestUpdatesSection .latestUpdates .latestUpdate p {
    margin: 1rem 0;
    padding: 0rem 1rem;
  }
  .latestUpdatesSection .latestUpdates .latestUpdate button {
    margin-left: 1rem;
    padding: 0.5rem 1.2rem;
    background-color: var(--clr-orange-main);
    border: none;
    color: white;
  }
}
.aboutBannerSection {
  width: 100vw;
  height: 70vh;
  background-image: url(./images/electrician3.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.aboutBannerSection .aboutBanner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aboutBannerSection .aboutBanner h1 {
  font-size: 3rem;
  color: white;
  filter: drop-shadow(1px 1px 1px black);
  padding: 0rem;
}

.aboutUs .about {
  font-family: monospace;
}

@media only screen and (max-width: 800px) {
  .aboutBannerSection {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
  }
  .aboutBannerSection .aboutBanner h1 {
    padding: 2rem;
  }
}
.galleryBannerSection {
  width: 100vw;
  height: 60vh;
  background-image: url(./images/about_us_banner.jpeg);
  background-position: center center;
  background-size: cover;
}
.galleryBannerSection .galleryBanner {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.galleryBannerSection .galleryBanner h1 {
  font-size: 3rem;
  color: white;
  filter: drop-shadow(1px 1px 2px black);
}

.gallery {
  width: 100%;
  height: auto;
  padding: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.gallery img {
  width: 300px;
  height: 300px;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.2s;
}

.gallery img:hover {
  transform: scale(1.1);
}

.expanded-img-container {
  display: none;
  position: fixed;
  top: 12vh;
  left: 5%;
  width: 90%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  text-align: center;
}

.expanded-img-container img {
  width: 500px;
  max-width: 90vw;
  height: auto;
  max-height: 500px;
  margin-top: 5%;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

@media only screen and (max-width: 800px) {
  .galleryBannerSection {
    width: 100vw;
    height: 60vh;
    background-image: url(./images/about_us_banner.jpeg);
    background-position: center center;
    background-size: cover;
  }
  .galleryBannerSection .galleryBanner {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .galleryBannerSection .galleryBanner h1 {
    font-size: 3rem;
    color: white;
    filter: drop-shadow(1px 1px 2px black);
  }
  .gallery {
    width: 100%;
    height: auto;
    padding: 2rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .gallery img {
    width: 300px;
    height: 300px;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .gallery img:hover {
    transform: scale(1.1);
  }
  .expanded-img-container {
    display: none;
    position: fixed;
    top: 12vh;
    left: 5%;
    width: 90%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    text-align: center;
  }
  .expanded-img-container img {
    width: 500px;
    max-width: 80%;
    height: auto;
    max-height: 500px;
    margin-top: 5%;
  }
  .close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    cursor: pointer;
  }
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  .prev {
    left: 0;
    border-radius: 3px 0 0 3px;
  }
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
}
.contactSection {
  width: 100vw;
  height: auto;
  padding: 10rem 0 2rem 0;
  font-family: brandon-grotesque, sans-serif;
  background-color: var(--clr-D1);
}
.contactSection .contact {
  width: 80%;
  margin: 0 auto;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.contactSection .contact .contactTxt h1 {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--clr-golden);
}
.contactSection .contact .contactTxt p {
  font-size: 1.2rem;
  margin: 2rem 0;
  color: whitesmoke;
}
.contactSection .contact .contactTxt h3 {
  margin: 1rem 0;
  color: var(--clr-golden);
}
.contactSection .contact .contactTxt h4 {
  color: whitesmoke;
}
.contactSection .contact .contactForm {
  height: 100%;
}
.contactSection .contact .contactForm h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--clr-golden);
}
.contactSection .contact .contactForm .form {
  display: flex;
  flex-direction: column;
}
.contactSection .contact .contactForm .form input {
  border: none;
  border-bottom: 1px solid var(--clr-golden);
  margin-bottom: 2rem;
  height: 2rem;
  background-color: transparent;
  color: white;
}
.contactSection .contact .contactForm .form textarea {
  background-color: transparent;
  border: 1px solid var(--clr-golden);
  height: 3rem;
  margin: 1rem 0 2rem 0;
  color: white;
}
.contactSection .contact .contactForm .form button {
  background-color: transparent;
  border: 2px solid var(--clr-golden);
  padding: 0.6rem 1.8rem;
  width: -moz-max-content;
  width: max-content;
  color: whitesmoke;
}

@media only screen and (max-width: 800px) {
  .contactSection {
    width: 100vw;
    height: auto;
    padding: 10rem 0 2rem 0;
    font-family: brandon-grotesque, sans-serif;
    background-color: var(--clr-D1);
  }
  .contactSection .contact {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contactSection .contact .contactTxt h1 {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--clr-golden);
  }
  .contactSection .contact .contactTxt p {
    font-size: 1.2rem;
    margin: 2rem 0;
    color: whitesmoke;
  }
  .contactSection .contact .contactTxt h3 {
    margin: 1rem 0;
    color: var(--clr-golden);
  }
  .contactSection .contact .contactTxt h4 {
    color: whitesmoke;
  }
  .contactSection .contact .contactForm {
    height: 100%;
  }
  .contactSection .contact .contactForm h2 {
    margin-bottom: 2rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--clr-golden);
  }
  .contactSection .contact .contactForm .form {
    display: flex;
    flex-direction: column;
  }
  .contactSection .contact .contactForm .form input {
    border: none;
    border-bottom: 1px solid var(--clr-golden);
    margin-bottom: 2rem;
    height: 2rem;
    background-color: transparent;
  }
  .contactSection .contact .contactForm .form textarea {
    background-color: transparent;
    border: 1px solid var(--clr-golden);
    height: 3rem;
    margin: 1rem 0 2rem 0;
  }
  .contactSection .contact .contactForm .form button {
    background-color: transparent;
    border: 2px solid var(--clr-golden);
    padding: 0.6rem 1.8rem;
    width: -moz-max-content;
    width: max-content;
    color: whitesmoke;
  }
}
.successBannerSection {
  height: 75vh;
  padding-top: 8vh;
  background-image: url(./images/electrician1.jpg);
}
.successBannerSection .successBanner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
}
.successBannerSection .successBanner .successBannerImg {
  position: relative;
}
.successBannerSection .successBanner .successBannerImg img {
  width: 265px;
  height: 200px;
}
.successBannerSection .successBanner .img8 {
  position: absolute;
  width: 690px;
  height: 200px;
  background-color: var(--clr-d-blue);
}
.successBannerSection .successBanner .img8 p {
  color: white;
  font-size: 1rem;
  padding: 1rem;
}
.successBannerSection .successBanner .img8 h1 {
  color: white;
  font-size: 3.4rem;
  padding: 0 1rem;
}

.successBanner::after {
  content: "Thousands of Smiles Stamped For Lifetime";
  font-size: 1.4rem;
  display: block;
  position: absolute;
  width: 60%;
  height: auto;
  background: var(--clr-orange-main);
  padding: 1rem;
  top: 55%;
  left: 20%;
  color: black;
  border-radius: 2rem;
  text-align: center;
  font-size: 1.6rem;
}

@media only screen and (max-width: 890px) {
  .successBannerSection {
    margin-top: 10vh;
    min-height: 45vh;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .successBannerSection .successBanner {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
  .successBannerSection .successBanner .successBannerImg img {
    width: 130px;
    height: 110px;
  }
  .successBanner::after {
    font-size: 2.2rem;
    font-weight: var(--fw-7);
    width: auto;
    height: auto;
    top: 30%;
    left: 0%;
    color: Black;
    border-radius: 0rem;
    padding: 3rem;
  }
}
.successPageAboutSection {
  width: 100%;
  height: auto;
  margin-top: 10vh;
}
.successPageAboutSection .successPageAbout {
  display: grid;
  grid-template-columns: 0.2fr 1fr;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  gap: 2rem;
  height: 100%;
}
.successPageAboutSection .successPageAbout .successAboutTxt p {
  line-height: 1.5rem;
  color: rgb(55, 55, 55);
}
.successPageAboutSection .successPageAbout .successAboutTxt p span {
  font-size: 3rem;
  color: var(--clr-d-blue);
  font-weight: var(--fw-7);
}
.successPageAboutSection .successPageAbout .successAboutTxt h2 {
  font-size: 2rem;
  margin: 1rem 0;
  color: var(--clr-orange-main);
}
.successPageAboutSection .successPageAbout .successAboutImg h2 {
  font-size: 2rem;
  font-weight: var(--fw-7);
  color: var(--clr-orange-main);
}

@media only screen and (max-width: 890px) {
  .successPageAboutSection {
    width: 100vw;
    height: auto;
  }
  .successPageAboutSection .successPageAbout {
    grid-template-columns: 1fr;
    padding: 2rem 1rem;
    gap: 1rem;
  }
}
.weCertifiedSection {
  width: 100%;
  height: auto;
  background-color: #003567;
  padding: 1rem;
  margin: 2rem 0;
}
.weCertifiedSection h2 {
  font-size: 2rem;
  text-align: center;
  padding: 2rem;
  color: white;
}
.weCertifiedSection .weCertified {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  gap: 1rem;
}
.weCertifiedSection .weCertified .certifications img {
  width: 280px;
  height: 180px;
}

@media only screen and (max-width: 890px) {
  .weCertifiedSection {
    width: 100vw;
    padding: 1rem;
  }
  .weCertifiedSection h2 {
    font-size: 2rem;
    padding: 2rem;
  }
  .weCertifiedSection .weCertified {
    flex-direction: column;
  }
}
.weWhyChooseSection {
  width: 100%;
  height: auto;
}
.weWhyChooseSection h2 {
  text-align: center;
  font-size: 2rem;
  padding-top: 2rem;
}
.weWhyChooseSection .weWhyChoose {
  padding: 4rem;
}
.weWhyChooseSection .weWhyChoose .weWhyTxt {
  width: 100%;
}
.weWhyChooseSection .weWhyChoose .weWhyTxt h3 {
  background-color: #003567;
  color: white;
  font-size: 1.4rem;
  padding: 1rem;
  text-align: center;
}
.weWhyChooseSection .weWhyChoose .weWhyTxt p {
  padding: 1rem 3rem;
}
.weWhyChooseSection .weWhyChoose .weWhyTxt span {
  font-size: 3rem;
  color: var(--clr-d-blue);
  font-weight: var(--fw-7);
}
.weWhyChooseSection .weWhyChoose .weWhyImgTxt {
  padding: 2rem;
  gap: 2rem;
}
.weWhyChooseSection .weWhyChoose .weWhyImgTxt img {
  background-color: var(--clr-ora);
  padding: 8px;
  border-radius: 10px;
  margin-right: 1rem;
}

@media only screen and (max-width: 890px) {
  .weWhyChooseSection {
    width: 100vw;
  }
  .weWhyChooseSection .weWhyChoose {
    padding: 0.5rem;
  }
  .weWhyChooseSection .weWhyChoose .weWhyTxt p {
    padding: 1rem 1rem;
  }
  .weWhyChooseSection .weWhyChoose .weWhyImgTxt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    gap: 3rem;
  }
}
.contactPageBannerSection {
  width: 100%;
  height: 30vh;
  padding-top: 2vh;
  background-color: #003567;
}
.contactPageBannerSection .contactPageBanner {
  height: 100%;
}
.contactPageBannerSection .contactPageBanner h1 {
  font-size: 3rem;
  text-align: start;
  color: white;
  background-color: var(--clr-d-blue);
  padding: 7rem 4rem 4rem 4rem;
}

.form-callSection {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  background-color: #003567;
  margin-top: 1rem;
  padding: 3rem 4rem;
  gap: 2rem;
  color: white;
}
.form-callSection .formTxt #conForm {
  display: flex;
  flex-direction: column;
}
.form-callSection .formTxt #conForm input {
  background-color: transparent;
  height: 2rem;
  border: none;
  margin-bottom: 1rem;
}
.form-callSection .formTxt #conForm input input:active {
  border: none;
}
.form-callSection .formTxt #conForm .inpu {
  border-bottom: 1px solid white;
}
.form-callSection .formTxt #conForm textarea {
  background-color: transparent;
  height: 2rem;
  border: none;
  margin-bottom: 1rem;
}
.form-callSection .formTxt #conForm .formButton {
  background-color: var(--clr-orange-main);
  font-weight: 700;
  font-size: 1.2rem;
  width: 200px;
}
.form-callSection .callTxt {
  width: 100%;
  text-align: start;
  border-left: 1px solid orange;
  padding-left: 3rem;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.form-callSection .callTxt h2 {
  font-size: 1.6rem;
  padding-bottom: 1rem;
  text-align: center;
  color: var(--clr-orange-main);
}
.form-callSection .callTxt h3 {
  padding: 1rem;
  font-size: 1.4rem;
}
.form-callSection .callTxt h4 {
  padding: 1rem;
  font-size: 1.4rem;
}
.form-callSection .callTxt div h4 {
  text-align: center;
}
.form-callSection .callTxt div img {
  width: 50px;
  padding: 0.8rem 0.3rem;
}

.contactContactsSection {
  width: 100vw;
  height: auto;
  padding: 2rem;
}
.contactContactsSection .contactContacts {
  width: 100%;
  padding: 2rem;
}
.contactContactsSection .contactContacts h2 {
  font-size: 1.6rem;
  font-weight: var(--fw-7);
  text-align: center;
  padding: 1rem;
  background-color: var(--clr-ora);
  color: black;
  margin-bottom: 2rem;
}
.contactContactsSection .contactContacts .contactsIndia {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  padding: 2rem;
}
.contactContactsSection .contactContacts .contactsIndia .contactIn {
  text-align: center;
  margin-bottom: 2rem;
}
.contactContactsSection .contactContacts .contactsIndia .contactIn h3 {
  font-weight: var(--fw-5);
  font-size: 1.2rem;
  background-color: var(--clr-d-blue);
  padding: 6px 0;
  margin-bottom: 1rem;
  color: white;
}
.contactContactsSection .contactContacts .contactsIndia .contactIn p {
  font-size: 1.1rem;
  color: black;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}
.contactContactsSection .contactContacts .contactsIndia span {
  width: 100%;
  display: flex;
  width: 100%;
  height: 2px;
  background-color: #003567;
}
.contactContactsSection .contactContacts .contactsAbroad {
  width: 100%;
}
.contactContactsSection .contactContacts .contactsAbroad .contactAb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.contactContactsSection .contactContacts .contactsAbroad .contactAb h3 {
  font: var(--fw-7);
  font-size: 1.2rem;
  background-color: var(--clr-ora);
  padding: 6px;
  margin-top: 2rem;
}
.contactContactsSection .contactContacts .contactsAbroad .contactAb p {
  font-size: 1.1rem;
  margin: 1rem 0;
  color: black;
}
.contactContactsSection .contactContacts .contactsAbroad span {
  width: 100%;
  display: flex;
  width: 100%;
  height: 2px;
  background-color: #003567;
}

@media only screen and (max-width: 890px) {
  .contactPageBannerSection {
    height: 10vh;
  }
  .contactPageBannerSection .contactPageBanner h1 {
    text-align: center;
    padding: 16vh 4rem 1rem 4rem;
  }
  .form-callSection {
    grid-template-columns: 1fr;
    margin-top: 4rem;
    padding: 6rem 2rem;
    gap: 2rem;
  }
  .form-callSection .callTxt {
    text-align: center;
    border-left: none;
    padding: 1rem;
  }
  .form-callSection .callTxt h3 {
    font-size: 1.2rem;
  }
  .contactContactsSection {
    padding: 1rem;
  }
  .contactContactsSection .contactContacts {
    width: 100%;
    padding: 1rem;
  }
  .contactContactsSection .contactContacts h2 {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
  .contactContactsSection .contactContacts .contactsIndia {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  .contactContactsSection .contactContacts .contactsIndia .contactIn {
    text-align: center;
    margin-bottom: 2rem;
  }
  .contactContactsSection .contactContacts .contactsAbroad .contactAb {
    grid-template-columns: 1fr;
  }
}/*# sourceMappingURL=style.css.map */