@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.row {
  margin: 0 !important;
}
:root {
  /* --primary-color: #fdcb35; */
  --primary-color: #facc06;

  --secondary-color: #0a4595;
  --yellow-color: #fee59a;
  --hover-color: #fda212;
  --white-color: #fff;
  --black-color: #000;
  --text-color: #5d5b56;

  /* --border-color:#a09d96; */
  --fs-60: 60px;
  --fs-42: 42px;
  --fs-36: 36px;
  --fs-30: 30px;
  --fs-24: 24px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-8: 8px;
}

/* ////////////////////////////////////////// Dark Mode //////////////////////////////////// */

:root {
  --bg-color: white;
  --switch-width: 50px;
  --switch-height: 25px;
  --switch-round: 50px;
  --switch-padding-x: 5px;
  --switch-bg: linear-gradient(to bottom, #73bbff, #a2d1fd);
  --switch-dark-bg: linear-gradient(to top, #2b3347, #181d27);
  --border-width: 2px;
  --border-gradient: linear-gradient(to bottom, #a2d1fd, #cde7ff);
  --border-dark-gradient: linear-gradient(to bottom, #000000, #6c7384);
  --sunmoon-size: 20px;
  --transition: all 0.75s ease;
}

body {
  background-color: var(--bg-color);
  transition: background-color 1.5s ease;
}

body.dark nav,
body.dark,
body.dark .about-sec .mySwiper2 {
  padding-block: 10px;
  background-color: #24221e;
  color: var(--white-color);
}

body.dark .about-sec .mySwiper2 .swiper-slide i {
  color: var(--primary-color);
}

body.dark .about-sec .mySwiper2 .swiper-slide {
  border: none;
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
  background-color: #2c2a26;
}
body.dark .about-sec .content-sec,
body.dark .services-sec .crd,
body.dark .contact-sec .main-crd {
  border: none;
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.1);
}
body.dark .services-sec .crd:hover {
  background-color: #34322f;
  /* box-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1); */
  border: 1.5px solid rgb(93, 81, 81);
  cursor: pointer;
  box-shadow: none;
}
body.dark .contact-form input,
body.dark .contact-form textarea {
  background-color: #34322f;
  /* border-color: #24221e; */
  color: var(--white-color);
}
body.dark .contact-form input::placeholder,
body.dark .contact-form textarea::placeholder {
  color: #fff;
}
body.dark .contact-form input[type="submit"] {
  background-color: var(--primary-color);
  color: #000;
}
body.dark footer {
  background-color: #2c2a26;
}
body.dark header.scrolled {
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
}
body.dark p,
body.dark #counter-section p,
body.dark ul li a,
body.dark footer ul li a,
body.dark .icons-container i {
  color: var(--white-color);
}
body.dark .icons-container i:hover,
body.dark footer li a:hover {
  color: var(--primary-color);
}
.switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-round);
  cursor: pointer;
  transition: var(--transition);
  background: var(--switch-bg);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.switch::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--switch-round);
  opacity: 0;
  background: var(--switch-dark-bg);
  transition: var(--transition);
}

body.dark .switch::before {
  opacity: 1;
}

.switch .border {
  position: absolute;
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  border-radius: var(--switch-round);
  background: var(--border-gradient);
  z-index: -1;
  transition: var(--transition);
}

.switch .border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--switch-round);
  background: var(--border-dark-gradient);
  opacity: 0;
  transition: var(--transition);
}

body.dark .switch .border::after {
  opacity: 1;
}

.switch input {
  display: none;
}

.sunmoon {
  position: absolute;
  width: var(--sunmoon-size);
  height: var(--sunmoon-size);
  border-radius: 50%;
  transition: var(--transition);
  left: var(--switch-padding-x);
  z-index: 1;
  background-color: #ffc187;
  box-shadow: 0px 0px 11.7px 0px #ffc187, 0px 0px 20px 0px #ffc18768,
    -2px -2px 5px 0px #ffab5c inset;
}

body.dark .sunmoon {
  left: calc(100% - var(--sunmoon-size) - var(--switch-padding-x));
  background-color: #dee5f3;
  box-shadow: none;
}

.darkside {
  position: absolute;
  top: 2px;
  left: 0px;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background-color: #ffc187;
  transition: var(--transition);
}

body.dark .darkside {
  background-color: #565c6b;
}

.clouds {
  border-radius: var(--switch-round);
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.cloud {
  position: absolute;
  width: 60%;
  transition: var(--transition);
}

.cloud-1 {
  bottom: -55%;
  left: 0;
}

.cloud-2 {
  bottom: -45%;
  left: 25px;
}

.cloud-3 {
  bottom: -40%;
  right: 0px;
}

.cloud-4 {
  bottom: -16%;
  right: -25px;
}

body.dark .cloud-1 {
  bottom: -35%;
  left: -110px;
}

body.dark .cloud-2 {
  bottom: -15%;
  left: -110px;
  transition: all 0.7s ease;
}

body.dark .cloud-3 {
  bottom: -15%;
  right: -110px;
}

body.dark .cloud-4 {
  bottom: -5%;
  right: -110px;
  transition: all 0.7s ease;
}

.stars {
  position: absolute;
  top: 150%;
  left: 0;
  transform: translateY(-50%);
  pointer-events: none;
  transition: var(--transition);
}

body.dark .stars {
  top: 50%;
}
/* ///////////////////////////////////////////dark mode end ////////////////////////////////*/
.svg__color {
  fill: var(--primary-color);
}
img {
  width: 100%;
  height: 100%;
}
h2 {
  font-size: var(--fs-42);
  font-weight: 600;
}
h3 {
  font-size: var(--fs-36);
}
h3 span {
  color: var(--primary-color);
  position: relative;
}

h4 {
  font-size: var(--fs-30);
}
h5 {
  font-size: var(--fs-24);
}
p {
  font-size: var(--fs-18);
  color: var(--text-color);
  font-weight: 500;
}
.btn-primary {
  color: var(--black-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 50px;
  width: fit-content;
  font-size: var(--fs-16);
  padding: 12px 24px;
}

.btn-primary:hover {
  background-color: var(--hover-color);
}
/* /////////////////////////////////////////////// Header /////////////////////////////////////// */
header {
  width: 100%;
  background-color: var(--white-color);
  position: fixed;
  top: 0px;
  left: 0;
  transition: 0.5s;
  z-index: 2;
  transition: box-shadow 0.3s ease; /* Smooth transition for box-shadow */
}
header.scrolled {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
nav {
  background-color: var(--white-color);
}
.nav-item {
  padding-inline: 10px;
}

.nav-link {
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--black-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2.5px;
  background: var(--primary-color);
  transition: width 0.5s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link:hover {
  color: var(--primary-color);
}

.nav-link.active {
  color: var(--primary-color) !important;
  transform: translateY(-1px);
}

.logo-main {
  width: 65px;
}

header .switch {
  display: none;
}
/*///////////////////////////////// hero section ////////////////////////////////////////// */
.hero-section h2 {
  width: 70%;
}
.hero-section h2 span {
  color: var(--primary-color);
}
.hero-section p {
  width: 70%;
}
/* hero section slider */

.swiper-sub-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}
.swiper-sub-container .content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.swiper-sub-container .svg-container {
  width: 50%;
}
.swiper-sub-container button {
  width: 40%;
}
.swiper-slide-shadow.swiper-slide-shadow-creative {
  background: white;
}

/* /////////////////////////////////////////// Clients carousel /////////////////////////*/
.mySwiper2 .swiper-wrapper {
  transition-timing-function: linear;
}

.about-sec .content-sec {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 20px;
}

.about-sec .content-sec h5 span {
  color: var(--primary-color);
}
.about-sec .swiper-slide {
  /* outline: none; */
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #ededed;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 15px;
}
.about-sec .swiper-slide .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 75px;
  min-height: 75px;
}
.about-sec .swiper-slide i {
  color: var(--black-color);
  font-size: var(--fs-36);
}

/*//////////////////////////////////////////////////* modal ////////////////////////////////*/
.modal-backdrop {
  --bs-backdrop-zindex: 1;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  /* Dim effect */
  z-index: 1040;
  /* Below modal's z-index */
  display: none;
  /* Hidden by default */

  backdrop-filter: blur(3px);

  transition: all 0.5s;
}

/* Prevent background scroll when overlay is active */
body.modal-open {
  overflow: hidden;
}

/* /////////////////////////////////////////// Service Section ////////////////////////////////// */
.services-sec .crd {
  border: 3px solid #ededed;
  border-radius: 20px;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
}
.services-sec .crd:hover {
  border: 3px solid #ffe08d;
  /* box-shadow: 5px 5px 10px var(--yellow-color); */
  transition: 0.3s;
  background-color: #fff1ec;
}
/* Service */
.services-sec .crd p {
  font-size: var(--fs-16);
}
.services-sec .img-container {
  width: 150px;
  height: 150px;
  margin: auto;
}
#counter-section h6 {
  color: var(--primary-color);
  /* color: var(--secondary-color); */
}
#counter-section p {
  color: var(--black-color);
}
#counter-section .counters-1 h6 {
  font-size: var(--fs-60);
}
#counter-section .counters-1 p {
  font-size: var(--fs-42);
}
#counter-section .counters-2 h6 {
  font-size: var(--fs-42);
}
#counter-section .counters-2 p {
  font-size: var(--fs-24);
}
/* /////////////////////////////////////// Contact ////////////////////////////////// */

.contact-sec .main-crd {
  border-radius: 20px;
  /* box-shadow: 0px 0px 5px black; */
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}
.contact-sec .content-container {
  height: 100%;
}
.contact-sec figure {
  height: 100%;
}
.contact-sec figure .mapouter {
  position: relative;
  text-align: right;
  width: 100%;
  height: 100%;
}

.contact-sec figure .gmap_canvas {
  overflow: hidden;
  background: none !important;
  width: 100%;
  height: 100%;
  border-radius: 20px 0 0px 20px;
}

.contact-sec figure .gmap_iframe {
  height: 100%;
}

.contact-sec .flex-container {
  padding-bottom: 25px;
}
.contact-sec .flex-container input {
  width: 48%;
  border: 1px solid #ededed;
  border-radius: 7px;
  padding: 10px;
}
.contact-sec .contact-form textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid #ededed;
  border-radius: 7px;
  padding: 10px;
}
.contact-sec .flex-container input:focus,
.contact-sec textarea:focus {
  outline: none;
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 5px var (--primary-color);
}
.contact-sec .flex-container input:focus-visible,
.contact-sec textarea:focus-visible {
  outline: none;
}

.contact-sec .contact-form input[type="submit"] {
  padding: 10px 25px;
  border-radius: 7px;
}
/* ////////////////////////////////////// Footer /////////////////////////////////////////// */
footer {
  background-color: var(--yellow-color);
  background-color: #f5f5f5;
}
footer .copyright-container p {
  font-size: var(--fs-16);
}
footer .logo-footer {
  width: 100px;
}
footer .tagline {
  font-size: var(--fs-8);
}
footer .content-container-links {
  padding-left: 70px;
}
footer .content-container-links ul {
  padding: 8px 0 0 0;
}
footer .content-container-links ul li {
  list-style-type: none;
  padding-block: 8px;
}
footer .content-container-links ul li a {
  text-decoration: none;
  font-size: var(--fs-18);
  color: var(--text-color);
}
footer .content-container-links ul li a:hover {
  color: var(--primary-color);
}

.icons-container i {
  font-size: var(--fs-30);
  color: var(--text-color);
}
.icons-container i:hover {
  color: var(--hover-color);
}

/* ///////////////////////////////////////// Animations //////////////////////////////////// */
.animate__animated {
  --animate-duration: 2.5s;
}
/* .animate__animated.animate__fadeIn {
  --animate-duration: 2.5s;
} */

@media (max-width: 1025px) {
  :root {
    --fs-60: 50px;
    --fs-42: 34px;
    --fs-36: 30px;
    --fs-30: 24px;
    --fs-24: 19px;
    --fs-18: 15px;
    --fs-16: 13px;
    --fs-8: 8px;
  }
  .btn-primary {
    padding: 8px 16px;
  }
}
@media (max-width: 992px) {
  .container {
    max-width: 930px;
  }
}
@media (max-width: 801px) {
  :root {
    --fs-60: 40px;
    --fs-42: 28px;
    --fs-36: 26px;
    --fs-30: 22px;
    --fs-24: 18px;
    --fs-18: 14px;
    --fs-16: 12px;
    --fs-8: 8px;
  }
  .container {
    max-width: 750px;
  }
  footer .content-container-links {
    padding-left: 40px;
  }
}
@media (max-width: 768px) {
  .container {
    max-width: 720px;
  }
  header button.navbar-toggler {
    background: var(--primary-color);
    border: #fff 2px solid;
  }
  header .nav-item .nav-link {
    text-align: center;
  }

  .nav-link.active::after {
    width: 12%;
    margin: auto;
    left: 44%;
  }
  header .btn-container {
    margin: auto;
  }

  #svgContainer5,
  #svgContainer4 {
    max-width: 380px;
    margin: auto;
  }
  .about-sec {
    text-align: center;
  }
  .about-sec #counter-section {
    justify-content: space-around !important;
  }

  .about-sec .swiper-slide .icon-container {
    max-width: 60px;
    min-height: 60px;
  }
  .about-sec .row1 {
    flex-direction: column-reverse;
  }
  .about-sec .row2 {
    display: flex;
    flex-direction: column;
  }
  .contact-sec .row.d-flex {
    flex-direction: column-reverse;
    text-align: center;
  }
  .contact-sec figure .gmap_canvas {
    border-radius: 0px 0px 20px 20px;
    height: 50vh;
  }
  footer {
    text-align: center;
  }
  footer .logo-footer {
    margin: auto;
  }

  footer .icons-container.d-flex {
    justify-content: center;
  }
  footer .desc {
    width: 75%;
    margin: auto;
    padding-bottom: 15px;
  }
  footer .content-container-links {
    padding: 0;
  }
}
@media (max-width: 601px) {
  .container {
    max-width: 580px;
  }
  :root {
    --fs-60: 30px;
    --fs-42: 18px;
    --fs-36: 19px;
    --fs-30: 18px;
    --fs-24: 16px;
    --fs-18: 12px;
    --fs-16: 11px;
    --fs-8: 8px;
  }
  .hero-section p {
    font-size: var(--fs-18);
  }
  .hero-section h2{
    font-size: var(--fs-24);
    padding-bottom: 5px;

  }
  .hero-section .swiper-sub-container {
    /* display: flex; */
    height: fit-content;
    padding-top: 100px;
    align-items: center;
    text-align: center;
    gap: 20px;
    flex-direction: column;
  }
  .swiper-sub-container .content {
    width: 100%;
  }
  .swiper-sub-container .content h2,
  .swiper-sub-container .content p{
    width: 90%;
    margin: auto;
  }

  .hero-section .svg-container{
    width: 250px;
  }
  .about-sec .svg-container {
    width: 250px;
  }
  .services-sec .svg-container {
    width: 150px;
  }
  #counter-section {
    padding-block: 10px;
  }
  .services-sec .crd {
    margin-bottom: 25px;
  }
  .services-sec h3 {
    padding-bottom: 10px !important;
  }
  .contact-sec .map-column {
    padding: 15px !important;
  }
  .contact-sec input::placeholder {
    font-size: var(--fs-18);
  }
  .contact-sec figure .gmap_canvas {
    height: 35vh;
  }
}
@media (max-width: 425px) {
  .container {
    max-width: 390px;
  }
  :root {
    --fs-60: 30px;
    --fs-42: 14px;
    --fs-36: 19px;
    --fs-30: 18px;
    --fs-24: 16px;
    --fs-18: 10px;
    --fs-16: 11px;
    --fs-8: 8px;
  }
  .contact-sec input::placeholder {
    font-size: var(--fs-16);
  }
  footer .content-container-links ul li a {
    font-size: var(--fs-16);
  }
}