html {
    scroll-behavior: smooth;
}


.bo{
border: 2px solid black;
}


:root {

  --color-primary-50:  #FFF1F6;
  --color-primary-100: #FFE4ED;
  --color-primary-200: #FFC8DA;
  --color-primary-300: #FF9FBE;
  --color-primary-400: #FF6A95;
  --color-primary-500: #E90358;  /* Brand */
  --color-primary-600: #D1004E;
  --color-primary-700: #B30043;
  --color-primary-800: #8F0036;
  --color-primary-900: #690027;

  --color-secondary-50:  #FFFBEA;
  --color-secondary-100: #FFF5CC;
  --color-secondary-200: #FFEB99;
  --color-secondary-300: #FFE066;
  --color-secondary-400: #FFD633;
  --color-secondary-500: #FFCC00;  /* Brand */
  --color-secondary-600: #E6B800;
  --color-secondary-700: #CCA300;
  --color-secondary-800: #997A00;
  --color-secondary-900: #665200;


  --color-accent-50:  #F8FAFC;
  --color-accent-100: #F1F5F9;
  --color-accent-200: #E2E8F0;
  --color-accent-300: #CBD5E1;
  --color-accent-400: #94A3B8;
  --color-accent-500: #64748B;
  --color-accent-600: #475569;
  --color-accent-700: #334155;
  --color-accent-800: #1E293B; /*brand */
  --color-accent-900: #0F172A;


  --color-siteblack: #333333;
  --color-siteblack-modal : #333333E6;
  --color-sitewhite: #f2f2f2;

  --color-sitegrey-primary: #999999;
  --color-sitegrey-secondary: #e0e0e0;
  --color-sitegrey-tertiary: #d9d9d9;

  --color-success-primary: #329A39;
  --color-success-primary-hover: #93CD92;

  --color-danger-primary: #9f0712;
  --color-danger-primary-hover: #9f0711ca;

  --gradient-line :linear-gradient(90deg,transparent,var(--color-primary-500) 30%,var(--color-primary-500) 50%,var(--color-primary-500) 70%,transparent);
  --gradient-line-black :linear-gradient(90deg,transparent, black 30%,black 50%,black 70%,transparent);
  --gradient-line-secondary :linear-gradient(90deg,transparent,var(--color-secondary-500) 30%,var(--color-secondary-500) 50%,var(--color-secondary-500) 70%,transparent);
  --gradient-line-white :linear-gradient(90deg,transparent,#f2f2f2 30%,#f2f2f2 50%,#f2f2f2 70%,transparent);
  --gradient-primary:  linear-gradient(0deg, var(--color-primary-900), var(--color-primary-500));
  --gradient-secondary:  linear-gradient(0deg, var(--color-primary-700), var(--color-primary-500));

  --btn-size: 60px;
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}


.bg-gradient-secondary {
  background: var(--gradient-secondary);
}


.bg-gradient-line-secondary {
  background: var(--gradient-line-secondary);
}

.bg-gradient-line {
  background: var(--gradient-line);
}

.bg-gradient-line-black {
  background: var(--gradient-line-black);
}

.bg-gradient-line-white {
  background: var(--gradient-line-white);
}


.font-primary {
  font-family: "Sora", sans-serif;
}

.font-secondary {
  font-family: "Montserrat", sans-serif;
}




/* container */
.container {
  padding: 0rem 4rem 0rem 4rem  ;
  margin: 0 auto;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}



/* nav-bar container */
.nav-bar-container {
  padding: 1rem 4rem 1rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nav-bar-container {
    padding: 1rem 2rem 1rem 2rem  ;
  }

}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .nav-bar-container {
    padding: 1rem 1rem 1rem 1rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .nav-bar-container {
    padding: 1rem 2rem 1rem 2rem  ;
  }
}


/* primary-container */
.primary-container {
  padding: 0rem 0rem 0rem 0rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 0px) and (max-width: 1024px) {
  .primary-container {
    padding: 0rem 0rem 0rem 0rem  ;
  }
}



/* section-container */
.section-container {
  padding: 4rem 4rem 4rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section-container {
    padding: 2rem 2rem 2rem 2rem  ;
  }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .section-container {
    padding: 4rem 1rem 4rem 1rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .section-container {
    padding: 4rem 1.5rem 4rem 2rem  ;
  }
}


/* pagehead -container */
.page-head-container {
  padding: 1rem 4rem 1rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .page-head-container {
    padding: 1rem 2rem 1rem 2rem  ;
  }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .page-head-container {
    padding: 2rem 0rem 2rem 0rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .page-head-container {
    padding: 1rem 0rem 1rem 0rem  ;
  }
}



/* user selection */
::selection {
  background-color: var(--color-primary-500);
  color: white;
}

::-moz-selection {
  background-color: var(--color-primary-500);
  color: white;
}


/* scrollbar  */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE & Edge */
    scrollbar-width: none;     /* Firefox */
}






/* menu btn starts*/


#menuBtn {
  position: relative;
  width: 28px;
  height: 24px;
}

.line {
  position: absolute;


  height: 2px;
  transition: all 0.3s ease;
}

.line:nth-child(1) { 
  
    top: 0;
    left: 0;
    width: 28px;
}
.line:nth-child(2) { top: 10px; left: 0;   width: 14px; }
.line:nth-child(3) { top: 20px;   left: 0;   width: 28px; }

#menuBtn.active .line:nth-child(1),
#menuBtn.active .line:nth-child(3) {
  top: 10px; /* move both to the middle */
}

#menuBtn.active .line:nth-child(1) {
  transform: rotate(45deg);
}

#menuBtn.active .line:nth-child(2) {
  opacity: 0;
  right: 0;
  width: 28px; 
}

#menuBtn.active .line:nth-child(3) {
  transform: rotate(-45deg);
}



#mobileMenu.active {
  transform: translateX(0);
}

  
#overlay.active {
    opacity: 1;
    visibility: visible;
}

#mobileMenu.active {
    transform: translateX(0);
}

/* menu btn ends*/

/* top bar, home- text sliders style */
 /* .marquee {
        overflow: hidden;
        white-space: nowrap;
    }

  .marquee-track {
      display: inline-flex;
      width: max-content;
      will-change: transform;
  } */

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

.marquee-track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
}

.marquee-content {
    display: flex;
    flex-shrink: 0;
    width: max-content;
}

 /*header contact starts  */
.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-btn::before,
.contact-btn::after {
  position: absolute;
  content: "";
  height: 1.5em;
  width: 1.5em;
  border: 1em solid var(--color-secondary-500);
  border-radius: 50%;
  animation: contact-btn-animation 2s linear infinite;
}

.contact-btn::after {
  opacity: 0;
  animation-delay: 1s;
}

@keyframes contact-btn-animation {
  0% {
    border: 1em solid var(--color-secondary-500);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    border: 0 solid var(--color-secondary-500);
    transform: scale(1);
    opacity: 0;
  }
}

/*header contact ends  */

/* home text testimonial */


.testimonial-slide{

    display:none;

    opacity:0;
    transform:translateY(20px);

    transition:.5s;
}

.testimonial-slide.active{

    display:block;

    animation:fadeSlide .5s ease forwards;
}

@keyframes fadeSlide{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.testimonial-dot{

    width:12px;
    height:12px;

    border-radius:999px;

    background:var(--color-sitegrey-tertiary);

    transition:.3s;

    cursor:pointer;
}

.testimonial-dot.active{

    width:34px;

    background:var(--color-primary-500);
}


/* testimonail ends */


/* about swiper carousel */

  .swiper-slide {
    width: auto;
    height: auto;
  }

  .mySwiper .swiper-pagination-bullet {
    background: #d6d6d6;
    margin: 4px 4px 4px 4px !important;
    opacity: 1;
    transition: all .35s ease;
}

.mySwiper .swiper-pagination-bullet-active {

    background: var(--color-primary-600);
}