/*---------------------------------------------------------------
  Template Name: nannylance one page babysitter website template
  Description: nannylance one page babysitter website template for babysitters
  Author: Lucid ThemesLab
  Author URL: https://www.templatemonster.com/store/lucid_themeslab/
  Version: 2.0.0
-----------------------------------------------------------------

        CSS INDEX
        ==================
        01.   Basic Styles
        02.   Preloader Style 
        03.   Theme Switch Button Styles 
        04.   Header Top Styles
        05.   Navbar Styles
        06.   Home Banner Styles
        07.   About Section Styles
        08,   Service Section Styles
        09.   How it works Section Styles
        10.   Why Choose Section Styles
        11.   Testimonials Section Styles
        12.   CTA Section Styles
        13.   Team Section Styles
        14.   Pricing Section Styles
        15.   Gallery Section Styles
        16.   FAQ Section Styles
        17.   Counter Section Styles
        18.   Time line Section Styles
        19.   Contact Section Styles  
        20.   Footer Section Styles
        21.   Back to top Styles

----------------------------------------------------------------*/

@import url(nannylancemain.css);

* {
  font-family: var(--PrimaryFont);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

::placeholder {
  color: var(--nav-text) !important;
}


.error:not(.form-control) {
  color: #ff6767;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 30px;
  background-color: var(--alt-color);
  font-weight: 800;
  padding: 5px;
  margin-left: 9px !important;
  margin-top: 4px;
  text-transform: capitalize;
}

.error{
  background-color: var(--card-color);
}

.error-pos {
  position: relative;
}

.error-pos .error:not(.form-control) {
    position: absolute;
    top: 98%;
    background-color: var(--card-color);
    left: 15px;
    margin-left: 20px !important;
    font-size: 14px;
     text-transform: capitalize;
}

/* #newsletter label  .error {
    top: 110%;
    background-color: var(--card-color);
    left: 26px;
    padding: 0 10px;
      margin-left: 10px;
} */

.subtile {
  background-color: var(--card-color);
}

@media (max-width: 991.98px) {
  .offcanvas-header {
    background-color: var(--card-color);
    color: #fff;
  }

  .offcanvas-body {
    background-color: var(--alt-color);
  }

  .offcanvas-header .btn-close {
    all: unset;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--primary-color);
    transition: background-color 0.3s ease;
    color: var(--white-color);
  }

  .offcanvas-header .btn-close:hover {
    background-color: #ffffff33;
  }

  #offcanvasbutton {
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    padding: 0;
    color: var(--white-color);
  }
}

#offcanvasbutton:hover {
  background-color: #ffffff33;
}

#offcanvasbutton i {
  font-size: 1.25rem;
  color: #fff;
}

.site-logo {
width: 150;
height: 104;
height: auto;
display: block;
}

/*================================================
   Preloader Overlay Styles
=================================================*/

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #ffffff, #f2f2f2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.5s ease-in-out;
}

/* Dots Animation */
.preloader-logo {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.dot {
  width: 16px;
  height: 16px;
  background-color: var(--primary-color);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot1 {
  animation-delay: -0.32s;
}

.dot2 {
  animation-delay: -0.16s;
}

.dot3 {
  animation-delay: 0;
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.6;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.splide__arrow {
  background: var(--white-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  opacity: 1;
  top: 64%;
}

/* Default icon (SVG) fill color */
.splide__arrow svg {
  fill: var(--primary-color);
  transition: fill 0.3s ease;
}

/* On hover: change button background and icon color together */
.splide__arrow:hover {
  background: var(--primary-color);
  box-shadow: 0 0.8rem 1.2rem rgba(0, 0, 0, 0.2);
}

.splide__arrow:hover svg {
  fill: var(--white-color);
}



/*================================================
   Theme Switch Button Styles
=================================================*/

#btnSwitch {
  top: 200px;
  z-index: 2;
}

/* Responsive spacing */
@media (max-width: 576px) {
  #btnSwitch {
  top: 130px;
  }
  .banner-content h2{
    font-size: 30px;
  }
}

/*================================================
   Header Top Styles
=================================================*/

.social-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heading-text);
}

.social-circle:hover {
  background-color: var(--primary-color);
  transition: 0.3s ease-in;
  color: var(--white-text);
}

.social-circle.profile-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: var(--white-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-circle.profile-circle:hover {
  background-color: var(--primary-color);
  color: var(--white-text);
}

/*================================================
   Navbar Styles
=================================================*/

.nav-link {
  position: relative;
}

.nav-item.active .nav-link {
  color: var(--prime-text) !important;
}

.btn-close {
  background: unset;
}

.nav-item.active .nav-link {
  position: relative;
  display: inline-block; /* Important for text-width underline */
}

.nav-item.active .nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--prime-border);
}

/* Thinner on mobile */
@media (max-width: 576px) {
  .nav-item.active .nav-link::after {
    border-bottom: 0.5px solid var(--prime-border);
  }
}


/* Navbar general styles */
.navbar-nav .nav-link {
  color: var(--heading-text);
  transition: color 0.3s ease;
}

/* Responsive spacing */
@media (min-width: 992px) {
  .offcanvas.offcanvas-end {
    position: static;
    transform: none;
    visibility: visible !important;
    background-color: transparent;
    border: none;
    display: flex !important;
    flex-grow: 1;
    padding: 0;
  }

  .offcanvas-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
  }

  .offcanvas-header {
    display: none;
  }

  .navbar-toggler {
    display: none;
  }
}

/* Sticky Navbar */
nav.navbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  background-color: var(--alt-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: all 0.5s;
}

/*================================================
 Home Banner Styles
=================================================*/

.banner-main .splide__slide {
  background-size: cover;
  background-position: center;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-main .slide-1 {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)),
    url("../../assets/images/background-img/bg_1.webp");
  background-size: cover;
  background-position: center;
}

.banner-main .slide-2 {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)),
    url("../../assets/images/background-img/bg_2.webp");
  background-size: cover;
  background-position: center;
}

.banner-main .slide-3 {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)),
    url("../../assets/images/background-img/bg_3.webp");
  background-size: cover;
  background-position: center;
}

.banner-content {
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .banner-main .splide__slide {
    min-height: 400px;
  }

  .banner-text.display-1 {
    font-size: 2rem;
  }

  .banner-text.fs-1 {
    font-size: 1rem;
  }
}

/*================================================
 About Section Styles
=================================================*/
.about-section {
  position: relative;
  overflow: hidden;
}

.about-img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  transition: transform 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.about-img:hover {
  transform: scale(1.03);
}

.highlight-box {
  background: var(--alt-color);
  border-left: 4px solid var(--primary-color);
}

.highlight-img {
  width: 150px;
  height: auto;
}

.feature-item {
  font-weight: 600;
  color: var(--para-text);
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.feature-item:hover {
  color: var(--primary-color);
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .highlight-box {
    flex-direction: column;
    text-align: center;
  }

  .highlight-img {
    width: 200px;
    margin-bottom: 10px;
  }

  .about-img {
    max-height: 350px;
  }
}

.circle-bg {
  width: 25px;
  height: 25px;
  background-color: var(--primary-color);
  border-radius: 50%;
  text-align: center;
}

/*================================================
 Service Section Styles
=================================================*/
.servicemain .card {
  position: relative;
  transition: 0.3s ease;
}

.servicemain .card:hover {
  background-color: var(--primary-color) !important;
  color: var(--white-text);
}

.servicemain .card:hover h4,
.servicemain .card:hover p {
  color: var(--white-text) !important;
}

.servicemain .card-img {
  position: absolute;
  top: -15px;
  left: -15px;
  width: fit-content;
  padding: 5px;
  transition: 0.3s ease;
}

.servicemain .card:hover .card-img {
  transform: scale(1.2);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.service-icon {
width: 172;
height: 172;
height: auto;
display: block;
}

/*================================================
   How it works Section Styles
=================================================*/

.step-card {
  transition: all 0.4s ease;
  background-color: var(--card-color);
  border: 2px solid var(--prime-border-color);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
}

.step-card:hover {
  background-color: var(--primary-color);
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color);
}

.icon-box .icon-box-img{
  width: 60px;
  height: 52px;
}

/* Icon Box Styling */
.step-card .icon-box {
  background-color: var(--light-bg);
  border: 2px dashed var(--primary-color);
  border-radius: 50%;
  padding: 15px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.4s ease;
}

.step-card:hover .icon-box {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.step-card:hover .icon-box img {
  filter: brightness(0) invert(1);
}

/* Text Colors on Hover */
.step-card h5,
.step-card p {
  transition: color 0.3s ease;
}

.step-card:hover h5,
.step-card:hover p {
  color: #fff !important;
}

/*================================================
   Why Choose Section Styles
=================================================*/
.why-choose {
  position: relative;
  overflow: hidden;
}

.image-box {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  transition: transform 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.image-box:hover {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .image-box {
    max-height: 350px;
  }
}

.info-box {
  background-color: var(--card-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive Adjustment */
@media (max-width: 767.98px) {
  .image-box {
    max-height: 300px;
  }

  .icon-img {
    width: 50px;
    height: 50px;
  }
}

.icon-img {
width: 80;
height: 80;
height: auto;
display: block;
}

/*================================================
   Testimonials Section Styles
=================================================*/
.testimonials .card {
  position: relative;
  border: 0;
  padding-top: 45px;
}

.testimonials .card-body {
  border: 0 !important;
  border-radius: 15px;
  padding-top: 65px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.testimonials .card-img {
  width: 90px !important;
  height: 90px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 0;
  left: calc(50% - 45px);
  z-index: 1;
  background-color: var(--card-bg);
}

.testimonials .splide__arrow--next {
    right: 0em;
}

.testimonials .splide__arrow--prev {
    left: 0em;
}


/*================================================
   CTA Section Styles
=================================================*/
.card-img-top {
  width: 75px !important;
  height: 75px !important;
  border-radius: 50%;
  margin: auto;
}

.callmain img {
  width: 450px;
  position: absolute;
  left: calc(40% - 30px);
  top: 25%;
}

@media (max-width: 1199px) {
  .callmain img {
    width: 350px;
    position: absolute;
    left: calc(50% - 100px);
    top: 25%;
  }
}

@media (max-width: 991px) {
  .callmain img {
    display: none;
  }
}

.social-circle.profile-circle {
  transition: 0.3s ease;
}

/*================================================
   Team Section Styles
=================================================*/

.team-card {
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.team-img-wrapper {
  background: linear-gradient(135deg, #f8d3e4, #e3eafc);
  padding: 1rem;
  display: flex;
  justify-content: center;
}

.team-img {
  max-width: 180px;
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.team-content {
  background: var(--card-color);
}

.team-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--heading-text);
}

.team-role {
  color: var(--para-text);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.social-icon {
  background: var(--light-color);
  color: var(--heading-text);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  background: var(--primary-color);
  color:var(--white-color);
}

@media (max-width: 575px) {
  .team-card {
    max-width: 340px;
    margin: auto;
  }
}

.team-img {
width: 172;
height: 172;
height: auto;
display: block;
}

/*================================================
   Pricing Section Styles
=================================================*/
.pricing-card {
  transition: 0.5s ease;
}

.pricing-card:hover {
  border: 1px solid var(--prime-border);
  transform: scale(1.05);
}

/*================================================
  Gallery Section Styles
=================================================*/

.gallery-item {
  height: 280px;
  position: relative;
}

.gallery-item img {
  transition: transform 0.3s ease;
}

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

.gallery-item .overlay {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item {
  position: relative;
  max-height: 280px;
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* lightbox styles */
.lb-data .lb-close {
  background: url(../../assets/images/icons/close.png) top right no-repeat;
}

.lb-nav a.lb-prev {
  background: url(../../assets/images/icons/prev.png) left 48% no-repeat;
}

.lb-nav a.lb-next {
  background: url(../../assets/images/icons/next.png) right 48% no-repeat;
}

.lb-cancel {
  background: url(../../assets/images/icons/loading.gif) no-repeat;
}

/*================================================
  FAQ Section Styles
=================================================*/

.accordion-button .icon {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) .icon {
  transform: rotate(180deg);
}

.accordion-body {
  font-size: 0.95rem;
  color: var(--para-text);
}

.accordion-item {
  border: none;
  outline: none;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
  background-color: var(--card-color);
}

.accordion-button {
  font-weight: 600;
  font-size: 1rem;
  background-color: var(--card-color);
  color: var(--heading-text);
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-color: var(--primary-color) !important;
}

.accordion-button::after {
  display: none;
}

.accordion-button:not(.collapsed) {
  background-color: var(--primary-color);
  color: var(--white-text) !important;
  box-shadow: none;
  border-color: var(--primary-color) !important;
}

.accordion-button:focus {
  border-color: var(--primary-color) !important;
}

.faq-img {
width: 172;
height: 172;
height: auto;
display: block;
}

/*================================================
  Counter Section Styles
=================================================*/
.counter-bg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
}

/* .counter-bg img {
  width: 45px;
}
   */
.counter-icon {
width: 48px;
height: 48;
height: auto;
display: block;
}
/*================================================
  Time line Section Styles
=================================================*/
.bg-dark-blue {
  background-color: var(--secondary-color);
}

.step-box {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.step-number {
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/*================================================
   Contact Section Styles  
=================================================*/

.contact-iconbg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

#contactmain input,
#contactmain textarea {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid transparent;
  padding: 12px 15px;
  border-radius: 10px;
  width: 100%;
  font-size: 1rem;
  transition: all 0.3s ease;
}

#contactmain input::placeholder,
textarea::placeholder {
  opacity: 1;
  font-size: 1rem;
}

#contactmain input:focus,
#contactmain textarea:focus {
  outline: none;
  background-color: var(--input-bg);
  color: var(--input-text);
}

@media (max-width: 768px) {

  #contactmain input::placeholder,
  #contactmain textarea::placeholder {
    font-size: 0.95rem;
  }
}

/*================================================
   Footer Section Styles
=================================================*/
.footer-callbg {
  background-image:
    linear-gradient(rgba(var(--dark-rgb), 0.9), rgba(var(--dark-rgb), 0.9)),
    url("../../assets/images/background-img/bg_1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 250px;
  display: flex;
  align-items: center;
}

.footer-ul {
  columns: 2;
}

/*================================================
   Back to top Styles
=================================================*/
#backtotop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 7px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#backtotop:hover {
  cursor: pointer;
}

#backtotop.show {
  opacity: 1;
  visibility: visible;
}
.alertmsg{
  z-index: 9999;
}