/*---------------------------------------------------------------
  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: 1.0.0
----------------------------------------------------------------*/


@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: red;
  font-size: 12px;
  font-weight: 500;
}
.error-pos{
  position: relative;
}
.splide__arrow{
  background: white !important;
  box-shadow: 0px 0px 2px 2px rgba(211, 211, 211, 0.413);
  opacity: 1;
}
.splide__arrow svg{
  fill: #242864;
}
.error-pos .error:not(.form-control){
  position: absolute;
  top: 90%;
  background-color: var(--input-bg);
  left: 15px;
  padding: 0 10px;
}
.social-circle{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-circle.profile-circle{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--alt-bg); 
    color: var(--heading-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-link{
    color: var(--nav-text) !important;
    position: relative;
}
.nav-item.active .nav-link{
    color: var(--prime-text) !important;
}
.btn-close{
  background: unset;
}
.nav-item.active .nav-link::after{
        content: '.';
        font-size: 0;
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        border-bottom: 1px solid var(--prime-border);
    
}
.banner-main{ 
    background:linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)),url('../../assets/images/banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 800px;
}
.mx-90{
    width: 950px;
    max-width: 100%;
}
.mx-60{
    width: 628px;
    max-width: 100%;
}
.w-unset{
    width: unset !important;
    max-width: unset !important;
    min-width: unset !important;
}
.circle-bg{
    width: 25px;
    height: 25px;
    background-color: var(--prime-bg);
    border-radius: 50%;
    text-align: center;
}
.servicemain .card{
    position: relative;
    transition: 0.3s ease;
}
.servicemain .card:hover{ 
    background-color: var(--prime-bg) !important;
}
.servicemain .card-img{
    position: absolute;
    top: -15px;
    left: -15px;
    width: fit-content;
    padding: 5px;
    transition: 0.3s ease;
    
}
.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: 0px 10px 10px  rgba(0, 0, 0, 0.075);
  position: absolute;
  top: 0;
  left: calc(50% - 45px);
  z-index: 1;
  background-color: var(--card-bg); 
}
.card-img-top{
    width: 75px !important;
    height: 75px !important;
    border-radius: 50%;
    margin: auto;
}
.servicemain .card:hover .card-img{
    transform: scale(1.2);
    box-shadow: 2px 2px 0px 3px #d3d3d321;
}
.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;
    }
} 
.team-indicator{
    background-color: var(--tertiary-bg);
    transition: 0.3s ease;
    top: 0;
    left: 0;
}
.team-main .card:hover .team-indicator{
    background-color: var(--prime-bg); 
}
.team-main .card .card-img  {
  overflow: hidden; 
}
.team-main .card .card-img img{
  overflow: hidden;
  transition: 0.5s ease;
}
.team-main .card:hover .card-img img{
  transform: scale(1.1); 
}

.social-circle.profile-circle{
  transition: 0.3s ease;
}
 .social-circle.profile-circle:hover{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--prime-bg); 
    color: var(--headingalt-text);
    display: flex;
    align-items: center;
    justify-content: center;
}  
.pricing-card{
  transition: 0.5s ease;
}
.pricing-card:hover{
  border: 1px solid var(--prime-border);
  transform: scale(1.05);
}
/* =============
      Gallery Styles
     ============= */
     .grid-wrapper > div {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .grid-wrapper a{
        width: 100%;
        height: 100%;
        position: relative;
      }
      .grid-wrapper > div a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
      }
      .grid-wrapper .overlay{
        font-size: var(--fs-1);
        background-color: rgba(var(--dark-rgb), 0.4);
        position:absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .grid-wrapper a:hover .overlay{
        opacity: 1 !important;
      }
      .grid-wrapper {
        display: grid;
        grid-gap: 1.5em;
        grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
        grid-auto-rows: 350px;
        grid-auto-flow: dense;
      }
      .grid-wrapper .wide {
        grid-column: span 2;
      }
      .grid-wrapper .tall {
        grid-row: span 2;
      }
      .grid-wrapper .big {
        grid-column: span 2;
        grid-row: span 2;
      }
      /* lightbox styles */
      .lb-data .lb-close{
        background: url(../../assets/images/close.png) top right no-repeat;
      }
      .lb-nav a.lb-prev{
        background: url(../../assets/images/prev.png) left 48% no-repeat;
      }
      .lb-nav a.lb-next{
        background: url(../../assets/images/next.png) right 48% no-repeat;
      }
      .lb-cancel{
        background: url(../../assets/images/loading.gif)no-repeat;
      }

      .accordion{
        display: flex;
        flex-direction: column;
        gap: 15px;
      }
      .accordion-item {
        border-radius: 15px !important;
        padding: 5px;
        background-color: var(--card-bg);
        border: 0px;
      }
      .accordion-button{
        border-radius: 15px 15px 0 0 !important;
        box-shadow: unset !important;
        background-color: transparent !important;
      }
      .contact-iconbg{
        width: 50px;
        height: 50px;
        border-radius: 50%; 
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: var(--alt-bg); */
        background-color: white;
      }
      .footer-callbg{
        background: linear-gradient(90deg, rgba(var(--dark-rgb), 1), rgba(var(--dark-rgb), 0)),url('../../assets/images/banner.png');
        background-repeat: no-repeat;
        background-size: cover; 
        min-height: 250px;
        display: flex;
        align-items: center;
        background-position: center;
      }
      .counter-bg{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--prime-bg);
      }
      .counter-bg img{
        width: 45px;
      }
      .footer-ul{
        columns: 2;
      }

      /* ==================
    Back to top Styles
    ================== */

    #backtotop {
      position: fixed;
      bottom: 30px;
      right: 30px;
      padding: 7px;
      transition: background-color .3s, opacity .5s, visibility .5s;
      opacity: 0;
      visibility: hidden;
      z-index: 1000;
    }
    #backtotop:hover {
      cursor: pointer;
    }
    #backtotop.show {
      opacity: 1;
      visibility: visible;
    }

    #btnSwitch{
      top: 200px;
    }