/* 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --theme-color: #0058AB;
  /* --theme-color: #0178bd; */
  --primary-color: #0FABDC;
  --secondary-color: #EFA666;
  --hover-color: #f6333a;
  --text-primary-color: #222222;
  --text-secondary-color: #596478;
  --heading-color: #1D3B69;
  --heading-color-2: #298D13;
  --bg-color-1: #f2f2f2;
  --bg-color-2: #11101d;

}


*{
    box-sizing: border-box;
    padding: 0;
    margin: 0 ;
  }

  body{
    /* font-family: 'Poppins', 'sans-serif'; */
    font-family: "Roboto", system-ui;
    font-style:normal;
    position: relative;
    overflow-x: hidden;

  }


 a{
  text-decoration: none !important;
 }

 p{
  font-size: 16px;
  line-height: 26px;
  word-spacing: .2em;
 }


 /* top scroll navbar start here  */
 .scroll-nav{
  top: -80px;
  transition: top .3s ease;
 }
 /* top scroll navbar end here  */

  /*---------- nav top start here-----------*/
  .nav-top input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{
    /* border: none;
    -webkit-box-shadow: 0 0 0px 100px #f3f4f7 inset; */
   }


  /*------nav bottom start here-------*/

  .container{
    position: relative;
    /* max-width: 1224px;
    width: 92%; */
    margin: 0 auto;
  }
 
  #nav-bottom{
    top: -80px;
    /* position: fixed; */

  }
  
  .navbars-bottom{
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px !important;
  }
  

  .navbars-bottom .nav-logo{
    width: 80px;
  }
  .navbars-bottom .nav-logo img{
    width: 90%;
  }

  .nav-bottom-mobile-logo-main{
    width: 80px;
  }

  .nav-bottom-mobile-logo img{
    width: 90%;
  }
  .nav-branding{
    font-size: 1.5rem;
    font-weight: 500;
    border: none;
  }
 
  .nav-menus>li{
    list-style: none;
    /* height: 70px; */   /*===== update ======*/
    position: relative;

  }
  /* .nav-menus .nav-items{
    background-color: var(--primary-color);
  }
  .nav-menus .nav-items:hover{
    background-color: var(--secondary-color);
  } */

  .nav-menus{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
  }
  
  .nav-container ul li a{
    font-size: 15px;
    text-decoration: none;
    color: #000;
    transition: 0.3s ease-out;
    /* font-weight: 500; */
    padding: 0;
    text-transform: capitalize;
  }



  .nav-container ul li a i{
    padding: 0px 0 0 5px;
    font-size: 12px;
    /* opacity: 0.5; */
  }
  
  .nav-container ul li:hover> a{
    color: var(--theme-color);
    & i {
    transform: translateX(5px) rotate(180deg);
    transition: all ease .5s;
    }
  }

  .nav-container .submenu>li{  /*===== update ======*/
    padding: 5px 0;
  }
  .nav-container .submenu li a{
    color: #000;
  }
  .nav-container .submenu li a:hover{
    color: var(--primary-color);
  }

  .nav-container ul .submenu{
    position: absolute;
    width: 210px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 20px 45px #00000020;
    margin-top: 50px;   /*===== update ======*/
    /* border-radius: 5px; */
    opacity: 0;
    text-align: start;
    padding: 8px 10px;
    z-index: -999;
    transition: all 0.5s ease;
    border-top: 3px solid var(--theme-color);
    pointer-events: none;
    list-style: none;

  }
 
  .nav-container ul li:hover .submenu{
    z-index: 999;
    opacity: 1;
    margin-top: 23px;   /*===== update ======*/
    pointer-events: auto;  

  }

  .nav-container ul li ul li a:hover{
    margin-left: 5px;
  }

  .nav-menus>li{
    padding: 24px 0;   /*===== update ======*/
  }

  /* sub dropdown menu start here  */
  .nav-container .sub-dropdown-main {
    position: relative;
  }

  .nav-container .sub-dropdown-main .dorp-menu-icon {
    float: right;
    font-size: 14px;
    margin-top: 3px;
    transition: all 0.5s ease;
  }

  .nav-container .sub-dropdown-main:hover .dorp-menu-icon{
    color: var(--primary-color);
    rotate: 90deg;
  }
 
  .nav-container .sub-dropdown-menu {
    margin-top: -30px; 
    opacity: 0;
    transition: all 0.5s ease;
    left: 105%;
    position: absolute;
    width: 210px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 20px 45px #00000020;
    text-align: start;
    padding-left: 10px;
    padding-bottom: 12px;
  }
  .nav-container .sub-dropdown-main:hover .sub-dropdown-menu {
    /* margin-top: 0;  */
    opacity: 1;
  }
  .nav-container .sub-dropdown-menu > li{
    margin-top: 10px;
    list-style: none;


  }
  /* .nav-container .sub-dropdown-menu > li::marker{
    color: #000;
  }
  .nav-container .sub-dropdown-menu > li:hover::marker{
    color: var(--primary-color)
  } */

  /* sub dropdown menu end here  */

  .nav-post-btn button{
    background-color: var(--primary-color) ;
    color: #ffffff ;
    border: 0 ;
    padding: 8px 10px ;
    border-radius: 5px;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 15px;
    transition: all .3s ease;
   }
  .nav-post-btn button:hover{
    background-color: var(--hover-color);
   }


  .remove{
    display: none;
    background-color: var(--primary-color);
    width: 100%;
    /* height: 30px; */
    text-align: center;
    cursor: pointer;
    color: #fff;
   }


   
  /* nav top start here  */
  .nav-top-logo img{
    width: 45%;
  }


  .nav-top-button{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 1.5rem;
  }

  .nav-top-button a{
    text-transform: capitalize;
  }
  
  .nav-top-mobile a{
    color: var(--text-secondary-color);
    font-size: 15px;
    & i{
      color: var(--theme-color);
      font-size: 14px;
    }
  }

  .nav-top-social-icon a{
    color: var(--text-secondary-color);
    font-size: 15px;
    & i{
      color: var(--theme-color);
      font-size: 14px;
  }
}

  .nav-top-mail a{
    color: var(--text-secondary-color);
    font-size: 15px;
    & i{
      color: var(--theme-color);
      font-size: 14px;
    }
  }

  

.call-now-btn {
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 500;
  background-color: #ffffff;
  transition: all .3s ease-in;
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--theme-color);

}



  /* nav top start here  */

   /*===============nav bottom end here============*/



   

   /*========== banner start here  ==========*/

   /* home banner main end here    */

   /* .home-banner-main{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 3;
    overflow-x: hidden;
    padding: 20vh 0 30vh 0;
    display: block;
    box-sizing: border-box;
    clear: both;
   }
   */
  /* .home-banner-main::after{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3;
  } */
/* 
  .home-banner-main .container{
    z-index: 9;
  }
  
  
  .banner-title h1{
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 50px;
  } */



 /* home banner main end here    */


   .home_top_banner{
    position: relative;
    /* background-color: var(--background-color);
    padding: 100px 0; */

   }

   .home_top_banner .carousel-item img{
    width: 100%;
    aspect-ratio: 16/5;
    object-fit: cover;
    object-position: left;
  }
  .home_top_banner {
    /* position: relative; */
  }


  .home_top_banner .carousel-content{
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-30%, -50%);
    z-index: 999;
  }

  .carousel-left-desc {
    position: relative;
  }
  
  .carousel-top-title {
    text-align: left; /* Ensures text is left-aligned */
  }
  
  .carousel-top-title h2 {
    color: var(--theme-color);
    background-color: #fff;
    opacity: 0.7;
    padding: 10px;
    font-size: 45px;
    font-weight: 300;
    text-transform: capitalize;
    display: inline-block;
    margin: 5px 0;
    text-align: left;
  }
 
  

  .carousel-top-title h2 strong{
    font-weight: 700;
  }

  .carousel-top-title .carousel-title-1{
    /* margin: 0; 
    position: absolute;
    left: 0;
    top: 30%;
    transform: translateY(-30%);
    display: inline; */
  }

  .carousel-top-title .carousel-title-2{
    /* margin: 0; 
    position: absolute;
    left: 0;
    top: 80%;
    transform: translateY(-80%);
    display: inline; */
  }


  /* .carousel-title .carousel-title-1{
    margin-bottom: 20px;
    transition: all .5s ease-out;
    opacity: 0;
  }
  .carousel-title .carousel-title-2{
    margin-top: 20px;
    transition: all .5s ease-out;
    opacity: 0;
  } */


  /* .carousel-title-1 {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .carousel-title-2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .animate {
    opacity: 1;
    transform: translateY(0);
  }
  
  .animate {
    opacity: 1;
    transform: translateY(0);
  }
   */
  
  .carousel-control-next, .carousel-control-prev {
    z-index: 4;
  }


  .banner-bottom-title h1{
    font-weight: 600;
    text-transform: uppercase;

    
  }
  .banner-bottom-title h3{
    font-weight: 300;
    text-transform: capitalize;

  }

    /*=============== banner end here  ================*/


    /*=============== about us start here  ===============*/
 
    .about-home-img img{
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
    }

    .about-desc h5{
      color: var(--text-primary-color);
      font-size: 20px;
      margin-top: 1rem;
    }

    .about-bottom-desc-main{
      background: rgb(30,63,157);
      background: linear-gradient(90deg, rgba(30,63,157,1) 0%, rgba(9,114,186,1) 40%, rgba(9,114,186,1) 60%, rgba(30,63,157,1) 100%);
      padding: 70px 0;
    }

    .about-bottom-desc p{
      font-size: 16px;
      color: #ffffff;
      line-height: 26px;
      /* text-align: justify; */
    }

/*============== about us start here  ================*/


/*=============== treatement start here  ============*/

.treatement-title h1{
  font-size: 40px;
  font-weight: 400;
  text-align: center;
}
.treatement-title h1 span{
  font-size: 40px;
  font-weight: 800;
}

.maintenence-desc p{
  font-size: 15px;
  color: var(--text-secondary-color);
}
.maintenence-img img{
  width: 90%;
  /* aspect-ratio: ; */
}
/*=============== treatement end here ==============*/

/*============ our main service start here =============== */
.service-card-box{
  border-bottom: 1px solid rgb(197, 197, 197);
}

.service-main-icon{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;

}
.service-main-icon img{
  width: 90px;
  height: 90px;
  transition: all .3s ease-in;
}
.service-main-icon:hover img{
  transform: scale(1.2);
}
.service-main-icon p{
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary-color);
  text-align: center;
  text-transform: capitalize;
}

.service-showcase-section{
  position: relative;
}

.service-showcase-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(82, 177, 255, 0.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(18, 111, 175, 0.10), transparent 28%);
  pointer-events: none;
}

.service-showcase-heading{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 3rem;
}

.service-showcase-eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(18, 111, 175, 0.10);
  color: #0f6ea8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-showcase-heading h2{
  margin-top: 18px;
  font-size: 42px;
  line-height: 1.15;
}

.service-showcase-heading p{
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary-color);
}

.service-category-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 52px 24px 28px;
  border: 1px solid rgba(17, 57, 92, 0.10);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
  box-shadow: 0 18px 40px rgba(17, 57, 92, 0.08);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-category-card::after{
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #53b7ff 0%, #0f6ea8 100%);
}

.service-category-card:hover{
  transform: translateY(-10px);
  border-color: rgba(15, 110, 168, 0.24);
  box-shadow: 0 24px 50px rgba(17, 57, 92, 0.14);
}

.service-category-card-badge{
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f6ea8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(17, 57, 92, 0.08);
}

.service-category-card-image{
  width: 128px;
  height: 128px;
  margin: 0 auto 22px;
  padding: 6px;
  border-radius: 30px;
  background: linear-gradient(135deg, #e8f5ff 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 110, 168, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-category-card-image img{
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
}

.service-category-card-content{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.service-category-card-title{
  margin-bottom: 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary-color);
}

.service-category-card-description{
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary-color);
  min-height: 105px;
}

@media (max-width: 767px){
  .service-showcase-heading h2{
    font-size: 30px;
  }

  .service-showcase-heading p{
    font-size: 15px;
  }

  .service-category-card{
    padding: 50px 16px 24px;
  }

  .service-category-card-image{
    width: 104px;
    height: 104px;
    border-radius: 24px;
  }

  .service-category-card-image img{
    border-radius: 18px;
  }

  .service-category-card-title{
    font-size: 18px;
  }

  .service-category-card-description{
    min-height: auto;
    font-size: 14px;
  }
}


.service-main-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.service-main-img {
  overflow: hidden;
  width: 130px;
  height: 130px;
  border-radius: 50%;
}

.service-main-img img{
  width: 130px;
  height: 130px;
  /* border-radius: 50%; */
  object-fit: cover;
  transition: all .5s ease-in;
}

.service-main-box:hover .service-main-img img{
  transform: scale(1.2);
}

.service-main-img  p{
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary-color);
  text-align: center;
  text-transform: capitalize;
}

/*============ our main service start here =============== */


   /*============= our servies start here =============== */
  
   .our-services-main{
      
   }

 
   /* Container for the service card */
   .service-card {
     position: relative;
     width: 100%;
     /* aspect-ratio: 1; */
     /* border: 2px solid #ddd; */
     /* border-radius: 10px; */
     overflow: hidden;
     transition: transform 0.3s ease;
     color: #fff; /* Adjust text color for better visibility */
 }
 
 /* Image covering the entire service card */
 /* .service-card-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
 } */
 
 /* Content inside the service card */
 .service-card-content {
     padding: 20px 30px;
     text-align: center;
     z-index: 1;
     position: relative;
     /* background: rgb(0 52 222 / 9%); */
     /* border-radius: 10px; */
     width: 100%;
     /* aspect-ratio: 1; */
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 10px;

   }

 /* .service-card-content img{
   width: 60px;
   height: 60px;
   margin-bottom: 15px;
 } */

 .service-card-content .service-icon{
   width: 80px;
   height: 80px;
   border: 3px solid var(--theme-color);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .service-card-content .service-icon img{
   width: 60%;
 }

 
 .service-card-content h3{
   font-size: 20px;
   margin: 0;
   text-transform: capitalize;
   text-align: center;
   color: var(--heading-color)
 }

 .service-card-content p{
    color: var(--text-secondary-color);
    margin: 0;
    line-height: 22px;
    font-size: 15px;

 }
 
 /* Hidden hover card */
 .service-card-hover {
     position: absolute;
     bottom: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     /* aspect-ratio: 1; */
     background-color: var(--theme-color);
     display: flex;
     justify-content: center;
     align-items: center;
     transition: bottom 0.4s ease;
     z-index: 2;
     padding: 20px 30px;
 
 }
 
 /* Content inside the hover card */
 .service-card-hover-content{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
 }
 .service-hover-icon{
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #ffffff;
 }
 
 .service-hover-icon i{
   color: var(--primary-color);
   font-size: 40px;
 }

 .service-card-hover-content h3{
     color: #ffffff;
     font-size: 20px;
     margin: 0;
     text-transform: capitalize;
     text-align: center;
 }
 
 .service-card-hover-content {
     text-align: center;
 }
 
 /* Button inside the hover card */
 .view-details-btn {
     margin-top: 20px;
 }
 .view-details-btn a {
     margin-top: 10px;
     padding: 10px 20px;
     background-color: var(--primary-color);
     color: #ffffff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.4s ease;
     font-weight: 600;
 }
 
 /* Button hover effect */
 .view-details-btn a:hover {
     background-color: #ffffff;
     color: #000;
 }
 
 
 /* Hover effect on the service card */
 .service-card:hover {
     transform: translateY(-10px);
 }
 
 /* Reveal the hover card on hover */
 .service-card:hover .service-card-hover {
     bottom: 0;
 }
 
   
 
  /*============== our servies end here =============== */

  
   

  /* -----blogs start here ----- */


  .service-main{
    position: relative;

   }

    .service-box{
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;

    }
    .service-box img{
      width: 100%;
      transition: all 1.5s ease;
      aspect-ratio: 5/3;
      object-fit: cover;

    }

    .service-main:hover .service-box img{
        transform: scale(1.10);
    } 


    .service-cont .service-title-box{
      height: 65px;
    }
    .service-cont .service-title{
      margin-top: 20px;
      margin-bottom: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary-color);
      line-height: 30px;
      text-transform: capitalize;
      transition: all .3s ease-out;
    }
    
    .service-cont .service-title:hover{

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

   .service-desc p{
      font-size: 16px;
      color: var(--text-secondary-color);

    }
    .service-btn{
      margin-top: 20px;
    }
   
    .service-btn-left a{
      color: var(--text-primary-color);
      font-weight: 500;
    }

    .service-main .service-btn-left i{
      margin-left: 10px;
      background-color:#fff;
      padding: 10px 12px;
      transition: all 0.3s linear;

    }
    .service-main:hover .service-btn-left i{
      background-color: var(--theme-color);
      color: #fff;
    }

    
    .service-main .service-btn-right {
      display: flex;
      justify-content: end;
      align-items: center;
    }
    .service-main .service-btn-right a{
      color: var(--text-primary-color);
      font-weight: 500;
    }
    .service-main .service-btn-right i{
      margin-left: 10px;
      color: var(--primary-color);
      padding: 10px 12px;
      transition: all 0.3s linear;
      font-size: 16px;

    }
    .service-main:hover .service-btn-right i{
      background-color: var(--theme-color);
      color: #fff;
    }
  
/* ----------- blogs end here -------- */



  /*============== why choose us start here  ===============*/

  .why-choose-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px;
  }

  .why-choose-item{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    gap: 20px;
  }

  .why-choose-img img{
    width: 70px;
    transition: all .5s ease-in-out;
  }
  .why-choose-item:hover .why-choose-img img{
    transform: scale(1.2);
  }
  .why-choose-desc{
    padding: 0 1.5rem;
  }
  .why-choose-desc h3{
    color: var(--text-primary-color);
    font-size: 20px;
    text-transform: capitalize;
  }
  .why-choose-desc p{
    color: var(--text-secondary-color);
    font-size: 15px;
  }

  /*================ why choose us end here ============== */

  /*=============== our reviews start here ===============*/
  .reviews-img img{
    width: 100%;
    aspect-ratio: 16/9;
  }
  
  .reviews-item img{
    margin-bottom: 2rem;
  }
  .reviews-item p{
    text-align: justify;
    font-size: 15px;
    margin-bottom: 1.5rem;
  }
  .reviews-star h5{
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
  }
  .reviews-star img{
    width: 18px;
    height: 18px;
    margin-bottom: 1rem;
  }

  /*=============== our reviews start here ===============*/


  /*============ book appointment main start here =========== */
  .book-appointment-main .container .row{
    /* background-color: var(--theme-color); */
  }

  .appointment-box{
    padding: 3rem;
    background-color: var(--theme-color);
  }

  .appointment-form .form-control-lg{
    font-size: 16px;
  }
  /*============ book appointment main start here =========== */

  /* location start here  */
  
  .map-box {
    margin-bottom: -7px;
    padding: 0;
    width: 100%;
    overflow: hidden;
  }

  .map-box iframe {
    width: 100%;
    aspect-ratio: 16 / 4;
    /* height: 400px; */
    border: 0;
    overflow: hidden;
    scrollbar-width: none; /* For Firefox */
  }

  .map-box iframe::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Edge */
  }

  /* location end here  */


/*=============== footer start here =================== */
   
.footer{
  /* background-color:rgba(0, 0, 0, .9); */
  background-color: #3d4759 ;
  background-image: url(../images/banner/footer_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* footer table start  */
.hours-box .table {
  background-color: transparent !important;
  border-bottom: hidden !important;
}

.hours-box .table tr,
.table td {
  background-color: transparent !important;
  color: #dddddd;
  font-size: 15px;
  border-bottom: hidden;
  padding: 2px 3px;
}

.branch-box p{
  margin-bottom: .3rem;
  color: #dddddd;
  font-size: 15px;
}

.branch-box iframe{
  width: 100%;
  /* aspect-ratio: 16/7; */
  border: 0;
}
/* footer table end  */



.footer .footer-logo a img{
  width: 160px;
  height: 160px;
  object-fit: cover;
}

.footer .footer-logo p{
  font-size: 15px;
  color: #dddddd;
}


.footer-desc{
  font-weight: 400;
  color: #dddddd;
  margin-top: 10px;
  text-transform: capitalize;
}
.footer-social{
  display: flex;
  justify-content: start;
  align-items: center;
}
.footer-social li{
  list-style: none;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 30px;

}
.footer-social li a{
  color: #dddddd;
}
.footer-social li a i{
  /* font-size: 20px; */
}

.footer-links p{
  margin-bottom: 5px;
}
.footer-links  a{
  color: #dddddd;
  font-weight: 500;
  transition: all ease-out .3s;
  text-transform: capitalize;
  font-size: 15px;
}
.footer-links a:hover{
  color: var(--primary-color);
  margin-left: 5px;
}
.footer-links  i{
  font-size: 10px;
}
.footer-contact li i{
  color: #dddddd;
}
.footer-cont-desc {
  font-weight: 500;
  color: #dddddd;
  font-size: 15px;
}





.footer-map-box {
  width: 100%;
}

.footer-map-box iframe {
  width: 100%;
  aspect-ratio: 16 / 5;
  /* height: 400px; */
  border: 0;
  overflow: hidden;
  scrollbar-width: none; /* For Firefox */
}

.footer-map-box::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Edge */
}



 /* Container styling */
 .subscribe-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  width: 100%;
  background: #ffffff;
  border-radius: 50px;
  padding: 10px 15px

}

/* Input field styling */
.subscribe-input {
  /* padding: 10px 15px; */
  font-size: 14px;
  border: 0;
  border-radius: 4px 0 0 4px;
  outline: none;
  width: 120px;
  background-color: white;
  transition: border-color 0.3s ease;
}

.subscribe-input:focus {
  /* border-color: #007bff;  */
}

/* Button styling */
.subscribe-button {
  padding: 5px 10px;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  background-color: var(--primary-color) ; /* Button background color */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.subscribe-button:hover {
  background-color: var(--secondary-color); /* Button hover color */
}


   /*------------ footer end here-------------- */

   

  /* bottom to top scroll button start here  */
  .to-top {
    background: #3498db; /* Replace with var(--primary-color) if defined */
    position: fixed;
    bottom: 16px;
    right: 32px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: none; /* Initial display state */
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s;
}

.to-top.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    bottom: 80px;
    z-index: 9999;
}

.to-top::after {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0, transparent 80%);
    content: "";
    height: 10px;
    inset-inline-start: 5%;
    opacity: 1;
    position: absolute;
    top: 100%;
    width: 90%;
    z-index: -1;
}

  /* bottom to top scroll button end here  */


  /* common heading and button  */
  .section-title h1 span{
    color: var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color);
    margin-top: 20px;
   }

   .title-bg {
    /* background: linear-gradient(to right, rgba(1, 46, 88, 1), rgba( 1, 46, 88, 0)); */
    padding: 10px;
    background-color: transparent;
    background-image: linear-gradient(86deg, #1D3B69 45%, #FFFFFF00 90%);
 }
   .title-bg-2 {
    background: linear-gradient(to right, rgba(1, 46, 88, 1), rgba( 1, 46, 88, 0));
    padding: 10px;
 }


 .pro-title h1{
  font-Size: 70px;
  color: #e8e8e8;
  font-weight: 800;
  text-transform: uppercase;
  z-index: 999;

 }
 .pro-title h2{
  font-Size: 35px;
  color: var(--text-primary-color);
  font-weight: 600;
  text-transform: capitalize;
  margin-top: -35px;
 }

 .pro-title h3{
  font-Size: 24px;
  margin-top: -40px;
  color: var(--text-secondary-color);
  font-weight: 300;
  text-transform: uppercase;
  z-index: 9999;
 }

  
 .pro-heading h1{
  font-Size: 35px;
  color: var(--text-primary-color);
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
  z-index: 3;
  display: block;
 }

 .pro-heading {
  display: block;
 }

 .pro-heading-sub h1{
   color: #ffffff;
  font-Size: 35px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
  z-index: 3;
  display: block;
 }

.book-appointment{
  font-size: 16px;
  padding: 15px 20px;
  background-color: var(--bg-color-2);
  color: #ffffff;
  transition: all .3s ease-out;
}
.book-appointment i{
  margin-left: .5rem;
}
.book-appointment:hover{
  font-size: 16px;
  padding: 15px 20px;
  background-color: var(--primary-color);
}
.book-appointment i{
  margin-left: .5rem;
}

.my-btn{
  color: #ffffff;
  font-size: 16px;
  text-transform: capitalize;
  padding: 15px 20px;
  background-color: #ffffff;
  transition: all .3s ease-in;
  color: #000;
  font-weight: 500;

}

.my-btn:hover {
  color: var(--theme-color);

}

.my-btn i{
  color: #000;
  font-size: 16px;
  margin-right: 5px;
  transition: all .3s ease-in;
}
.my-btn:hover i {
  color: var(--theme-color);

}


.my-btn-2{
  color: #ffffff;
  font-size: 16px;
  padding: 14px 20px;
  background-color: #ffffff;
  transition: all .3s ease-in;
  color: #000;
  font-weight: 500;
  border: 1px solid var(--bg-color-2);


}


.my-btn-2:hover {
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
}

.my-btn-2 i{
  color: #000;
  font-size: 16px;
  margin-right: 5px;
  transition: all .3s ease-in;
}
.my-btn-2:hover i {
  color: var(--theme-color);

}


.my-btn-3{
  color: var(--icon-color);
  border: 2px solid var(--icon-color);
  font-size: 14px;
  padding: 7px 14px;
  /* border-radius: 5px; */
  font-weight: 500;
  background-color: #ffffff;
  transition: all .3s ease-in;
  text-transform: uppercase;

}


.my-btn-3:hover {
  color: #ffffff;
  background-color:var(--icon-color);
}

.my-btn-3 i{
  color: var(--icon-color);
  font-size: 14px;
  margin-left: 5px;
  transition: all .3s ease-in;
}
.my-btn-3:hover i {
  margin-left: 10px;
  color: #ffffff;

}

.my-btn-4{
  color: #ffffff;
  font-size: 15px;
  padding: 8px 14px;
  font-weight: 500;
  background-color: var(--theme-color);
  transition: all .3s ease-in;
  text-transform: uppercase;
  border: 2px solid var(--theme-color);

}


.my-btn-4:hover {
  color: var(--theme-color);
  background-color: #ffffff;

}

.my-btn-4 i{
  color: #ffffff;
  font-size: 14px;
  transition: all .3s ease-in;
  margin-right: 5px;
}
.my-btn-4:hover i {
  color: var(--theme-color);

}


.my-btn-5{
  color: #ffffff;
  font-size: 14px;
  padding: 8px 14px;
  font-weight: 500;
  background-color: var(--primary-color);
  transition: all .3s ease-in;
  text-transform: uppercase;
  border: 2px solid var(--primary-color);

}


.my-btn-5:hover {
  color: var(--primary-color);
  background-color: #ffffff;

}

.my-btn-5 i{
  color: var(--primary-color);
  font-size: 14px;
  margin-left: 5px;
  transition: all .3s ease-in;
}
.my-btn-5:hover i {
  margin-left: 10px;
  color: #ffffff

}



.my-btn-6{
  color: #ffffff;
  font-size: 14px;
  padding: 2px 8px;
  font-weight: 500;
  background-color: var(--primary-color);
  transition: all .3s ease-in;
  text-transform: capitalize;
  border: 2px solid var(--primary-color);

}


.my-btn-6:hover {
  color: var(--primary-color);
  background-color: #ffffff;

}
  /* common heading end button  */

   
 @media screen and (max-width:400px){
  
      .home-bottom-contact{
        font-size: 20px;
      }

          
  .map-box iframe{
    width: 100%;
    aspect-ratio: 16/13;
    border: 0;
  }

 }

   
 @media screen and (max-width:768px){
  
      /* about us start here  */
      .about-img img{
        width: 100%;
        /* aspect-ratio: 1; */
        object-fit: cover;
      }

      /* about us end here  */

 }

   
 @media screen and (max-width:992px){

  .nav-bg{
    background-color: #ffffff;
  }


  .book-appointment-main .container-fluid .row{
    /* background-color: var(--theme-color); */
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
  }

 }


 @media screen and (max-width:576px){
 
  
  /*--------- navbar main start here--------- */

/*------ navbar bottom start here ---------- */
.navbars-bottom .nav-logo{
  width: 60px;
}
 .nav-bottom-mobile-logo-main{
    width: 60px;
  }

  /* for mobile nabvar start here  */
   .mob-nav-container {
    /* position: fixed;
    left: -100%;
    width: 90%;
    height: auto;
    top: 0;
    gap: 0;
    transition: all 0.5s ease;
    z-index: 1200;
    display: block; */
    z-index: 1200;
    position: fixed;
    left: -100%; /* Hidden initially */
    top: 0;
    width: 90%;
    height: 115vh; /* Full viewport height */
    transition: all 0.5s ease;
    z-index: 1200;

   }

   .mob-nav-container.active{
    left: 0;
  }
   .nav-burger{
    cursor: pointer;
    color: var(--primary-color);
   }

   .remove{
    display: block;
    position: relative;
    z-index: 9999;

   }

  .sidebar {
    /* position: fixed; */
    height: 100%;
    width: 100%;
    background: #11101d;
    padding: 15px;
    z-index: 99;
  }
  .logo {
    font-size: 25px;
    padding: 0 15px;
  }

  .sidebar a {
    color: #fff;
    text-decoration: none;
  }
  .menu-content {
    position: relative;
    height: 65%;
    width: 100%;
    margin-top: 30px;
    overflow-y: scroll;
    overflow-x: hidden;

  }

  .menu-content::-webkit-scrollbar {
    /* display: none; */
  }

  .menu-items {
    height: 100%;
    width: 100%;
    list-style: none;
    transition: all 0.4s ease;
  }

  .submenu-active .menu-items {
    transform: translateX(-57%);
  }

  .menu-title {
    color: #fff;
    font-size: 14px;
    padding: 15px 20px;
  }

  .item a,
  .submenu-item {
    padding: 10px;
    display: inline-block;
    width: 100%;
    border-radius: 12px;
    border-left: 2px solid #11101d;
    font-size: 14px;
    text-transform: capitalize;

  }

  .item i {
    font-size: 12px;
  }

  .item a:hover,
  .submenu-item:hover,
  .submenu-box .menu-title:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    transition: all .3s ease-in-out;
    border-color: var(--primary-color);
  }
  .submenu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;
  }


  .submenu-box {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: calc(-100% - 26px);
    height: calc(100% + 100vh);
    background: #11101d;
    display: none;
  }
  .show-submenu ~ .submenu-box {
    display: block;
  }


  .submenu-box .menu-title {
    border-radius: 12px;
    cursor: pointer;
    border-left: 2px solid #000;
  }

  .submenu-box .menu-title i {
    margin-right: 10px;
  }
 
  .mob-nav-container ul li a:hover  {
    color: var(--primary-color);
    transition: all .3s ease-in-out;
    border-color: var(--primary-color);
  }

  .mob-nav-container ul li ul li a::before{
   content: "-";
   padding: 0 5px;
 }
 
  /* for mobile nabvar end here  */

  
  /*----- for new submenu ----*/

  .new-menu-title {
    color: #fff;
    font-size: 14px;
    padding: 15px 20px;
  }
  .new-submenu-box .new-menu-title {
    border-radius: 12px;
    cursor: pointer;
    border-left: 2px solid #000;
  }
  .new-submenu-box .new-menu-title i {
    margin-right: 10px;
  }

  .new-menu-items {
    height: 100%;
    width: 100%;
    list-style: none;
    transition: all 0.4s ease;
  }

  .new-submenu-active .new-menu-items {
    transform: translateX(-100%);
  }


  .new-submenu-box {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: calc(-100% - 26px);
    height: calc(100% + 100vh);
    background: #11101d;
    display: none;
  }
  .new-show-submenu ~ .new-submenu-box {
    display: block;
  }


  .new-submenu-item{
    padding: 10px;
    display: inline-block;
    width: 100%;
    border-radius: 12px;
    border-left: 2px solid #11101d;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;
    text-transform: capitalize;
  }

  .new-submenu-item:hover,
  .new-submenu-box .new-menu-title:hover{
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
  transition: all .3s ease-in-out;
  border-color: var(--primary-color);
  }

 

  .new-show-submenu ~ .new-submenu-box {
    display: block;
  }


  /*--- for new submenu  ---*/



    /*======== navbar bottom end here=======*/

   /*============ navbar main end here =========== */


   
/*--------- banner start here  -----------*/

.home-banner-main{
  background-position: center right;
  padding: 30vh 0;

 }

 .carousel-top-title h2{
  font-size: 25px;
  padding: 5px;

}

 .banner-title h1{
  font-size: 30px;
}


.home_top_banner .carousel-item img{
  /* aspect-ratio: 16/20; */
  height: 420px;
}


/*---------- banner end here  -----------*/


/*================ blogs start here ==================*/

.top-blogs-share {
  display: flex;
  justify-content: start;
  align-items: center;
}

.service-cont .service-title{
  font-size: 16px;
 
}
.service-main .service-btn-right {
  display: flex;
  justify-content: start;
  align-items: center;
}
.service-main .service-btn-right i{
  margin-left: 0;
  margin-right: 10px;
}
/*================= blogs end here =================*/


  /*============== why choose us start here  ===============*/

  .why-choose-container{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 3 equal columns */
    gap: 20px;
  }

  .why-choose-item{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .why-choose-desc{
    text-align: center;
    padding: 0 1rem;
  }

    /*============== why choose us start here  ===============*/


    /*============ appointment start here  ================*/
    
  .appointment-box{
    padding: 1rem;
  }
    /*============= appointment end here ============= */

    
      

  /* footer start here  */

  .footer .footer-logo a img{
    width: 150px;
    height: 150px;
    object-fit: cover;
    /* width: 150px; */
    
  }

  
  /* footer end here  */

   
   /*============= custom design ============ */

   
 .pro-title h1{
  font-Size: 45px;
  font-weight: 700;


 }
 .pro-title h2{
  font-Size: 22px;
  margin-top: -22px;
  color: var(--text-primary-color);
  font-weight: 500;
  text-transform: capitalize;
 }


   
 .pro-heading h1{

  font-size: 24px;
  /* padding-bottom: 30px; */

 }
 
 .pro-heading-sub h1{
  font-size: 24px;
 }

   /*============= custom design ============*/


 }


 
 @media screen and (min-width:576px) and (max-width: 768px){
 
 
  /*--------- navbar start here--------- */

/*------ navbar bottom start here ---------- */

.mob-nav-container {
  /* position: fixed;
  left: -100%;
  width: 70%;
  height: auto;
  top: 0;
  gap: 0;
  transition: all 0.5s ease;
  z-index: 9999;
  display: block; */

  position: fixed;
  left: -100%; 
  top: 0;
  width: 60%;
  height: 100vh;
  transition: all 0.5s ease;
  z-index: 1200;
 }
 .mob-nav-container.active{
  left: 0;
}
 .nav-burger{
  cursor: pointer;
  color: var(--primary-color);

 }

 .remove{
  display: block;
  position: relative;
  z-index: 9999;

 }
 
 
.sidebar {
  height: 100%;
  width: 100%;
  background: #11101d;
  padding: 15px;
  z-index: 99;
}
.logo {
  font-size: 25px;
  padding: 0 15px;
}
.sidebar a {
  color: #fff;
  text-decoration: none;
}
.menu-content {
  position: relative;
  height: 90%;
  width: 100%;
  margin-top: 30px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.menu-content::-webkit-scrollbar {
  /* display: none; */
}

.menu-items {
  height: 100%;
  width: 100%;
  list-style: none;
  transition: all 0.4s ease;
}
.submenu-active .menu-items {
  transform: translateX(-55%);
}

.menu-title {
  color: #fff;
  font-size: 14px;
  padding: 15px 20px;
}

.item a,
.submenu-item {
  padding: 10px;
  display: inline-block;
  width: 100%;
  border-radius: 12px;
  border-left: 2px solid #11101d;
  font-size: 14px;
  text-transform: capitalize;
}
.item i {
  font-size: 12px;
}
.item a:hover,
.submenu-item:hover,
.submenu-box .menu-title:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
  transition: all .3s ease-in-out;
  border-color: var(--primary-color);
}
.submenu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.submenu-box {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: calc(-100% - 26px);
  height: calc(100% + 100vh);
  background: #11101d;
  display: none;
}
.show-submenu ~ .submenu-box {
  display: block;
}
.submenu-box .menu-title {
  border-radius: 12px;
  cursor: pointer;
  border-left: 2px solid #000;
}
.submenu-box .menu-title i {
  margin-right: 10px;
}

.mob-nav-container ul li a:hover  {
  color: var(--primary-color);
  transition: all .3s ease-in-out;
  border-color: var(--primary-color);
}
.mob-nav-container ul li ul li a::before{
 content: "-";
 padding: 0 5px;
}

/* for mobile nabvar end here  */
 

  /*----- for new submenu ----*/

  .new-menu-title {
    color: #fff;
    font-size: 14px;
    padding: 15px 20px;
  }
  .new-submenu-box .new-menu-title {
    border-radius: 12px;
    cursor: pointer;
    border-left: 2px solid #000;
  }
  .new-submenu-box .new-menu-title i {
    margin-right: 10px;
  }

  .new-menu-items {
    height: 100%;
    width: 100%;
    list-style: none;
    transition: all 0.4s ease;
  }

  .new-submenu-active .new-menu-items {
    transform: translateX(-100%);
  }


  .new-submenu-box {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: calc(-100% - 26px);
    height: calc(100% + 100vh);
    background: #11101d;
    display: none;
  }
  .new-show-submenu ~ .new-submenu-box {
    display: block;
  }


  .new-submenu-item{
    padding: 10px;
    display: inline-block;
    width: 100%;
    border-radius: 12px;
    border-left: 2px solid #11101d;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;
    text-transform: capitalize;
  }

  .new-submenu-item:hover,
  .new-submenu-box .new-menu-title:hover{
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
  transition: all .3s ease-in-out;
  border-color: var(--primary-color);
  }

 

  .new-show-submenu ~ .new-submenu-box {
    display: block;
  }


  /*--- for new submenu  ---*/


    /*============= navbar bottom end here ================*/
    /*================ navbar end here  =================*/



    
    /*--------- banner start here  -----------*/

  .home-banner-main{
    background-position: center right;
    padding: 30vh 0;
  
    }
    .banner-title h1{
      font-size: 40px;
    }

  .home_top_banner .carousel-item img{
    aspect-ratio: 16/11;
  }



  /*---------- banner end here  -----------*/


  
  /*================= blogs start here  ==============*/
  .top-blogs-share {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .service-main .service-btn-right {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .service-main .service-btn-right i{
    margin-left: 0;
    margin-right: 10px;
  }
  /*=============== blogs end here  =================*/



   /*============== why choose us start here  ===============*/

   .why-choose-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 equal columns */
    gap: 20px;
  }

    /*============== why choose us start here  ===============*/



  /*================ footer start here ================== */
      /* Container styling */
      .subscribe-container {
        width: 70%;

      }


  
  /*=================== footer end here  ==================*/


  

   
   /*============= custom design ============ */

      
    .pro-title h1{
      font-Size: 65px;
      font-weight: 700;


    }
    .pro-title h2{
      font-Size: 30px;
      margin-top: -33px;
    }
      /*============= custom design ============ */



}


@media screen and (min-width: 768px) and (max-width: 992px){
  
  
   /*--------- navbar start here--------- */

/*------ navbar bottom start here ---------- */
/* .navbars-bottom{
  height: 0px;
} */

.mob-nav-container {
  /* position: fixed;
  left: -100%;
  width: 70%;
  height: auto;
  top: 0;
  gap: 0;
  transition: all 0.5s ease;
  z-index: 9999;
  display: block; */
  z-index: 1200;
  position: fixed;
  left: -100%; /* Hidden initially */
  top: 0;
  width: 50%;
  height: 100vh; /* Full viewport height */
  transition: all 0.5s ease;
  z-index: 1200;

 }
 .mob-nav-container.active{
  left: 0;
}
 .nav-burger{
  cursor: pointer;
  color: var(--primary-color);

 }

 .remove{
  display: block;
  position: relative;
  z-index: 9999;

 }

 
 
.sidebar {
  /* position: fixed; */
  height: 100%;
  width: 100%;
  background: #11101d;
  padding: 15px;
  z-index: 99;
}
.logo {
  font-size: 25px;
  padding: 0 15px;
}
.sidebar a {
  color: #fff;
  text-decoration: none;
}
.menu-content {
  position: relative;
  height: 90%;
  width: 100%;
  margin-top: 30px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.menu-content::-webkit-scrollbar {
  /* display: none; */
}

.menu-items {
  height: 100%;
  width: 100%;
  list-style: none;
  transition: all 0.4s ease;
}
.submenu-active .menu-items {
  transform: translateX(-54%);
}

.menu-title {
  color: #fff;
  font-size: 14px;
  padding: 15px 20px;
}

.item a,
.submenu-item {
  padding: 10px;
  display: inline-block;
  width: 100%;
  border-radius: 12px;
  border-left: 2px solid #11101d;
  font-size: 14px;
  text-transform: capitalize;
}
.item i {
  font-size: 12px;
}
.item a:hover,
.submenu-item:hover,
.submenu-box .menu-title:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
  transition: all .3s ease-in-out;
  border-color: var(--primary-color)
}
.submenu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.submenu-box {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: calc(-100% - 26px);
  height: calc(100% + 100vh);
  background: #11101d;
  display: none;
}
.show-submenu ~ .submenu-box {
  display: block;
}
.submenu-box .menu-title {
  border-radius: 12px;
  cursor: pointer;
  border-left: 2px solid #000;
}
.submenu-box .menu-title i {
  margin-right: 10px;
}

.mob-nav-container ul li a:hover  {
  color: var(--primary-color);
  transition: all .3s ease-in-out;
  border-color: var(--primary-color);
}
.mob-nav-container ul li ul li a::before{
 content: "-";
 padding: 0 5px;
}



/* for mobile nabvar end here  */
 

  /*----- for new submenu ----*/

  .new-menu-title {
    color: #fff;
    font-size: 14px;
    padding: 15px 20px;
  }
  .new-submenu-box .new-menu-title {
    border-radius: 12px;
    cursor: pointer;
    border-left: 2px solid #000;
  }
  .new-submenu-box .new-menu-title i {
    margin-right: 10px;
  }

  .new-menu-items {
    height: 100%;
    width: 100%;
    list-style: none;
    transition: all 0.4s ease;
  }

  .new-submenu-active .new-menu-items {
    transform: translateX(-100%);
  }


  .new-submenu-box {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: calc(-100% - 26px);
    height: calc(100% + 100vh);
    background: #11101d;
    display: none;
  }
  .new-show-submenu ~ .new-submenu-box {
    display: block;
  }


  .new-submenu-item{
    padding: 10px;
    display: inline-block;
    width: 100%;
    border-radius: 12px;
    border-left: 2px solid #11101d;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;
    text-transform: capitalize;
  }

  .new-submenu-item:hover,
  .new-submenu-box .new-menu-title:hover{
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
  transition: all .3s ease-in-out;
  border-color: var(--primary-color);
  }

 

  .new-show-submenu ~ .new-submenu-box {
    display: block;
  }


  /*--- for new submenu  ---*/


  /*============= navbar bottom end here ============= */
  /*============== navbar end here ================ */


  
      /*--------- banner start here  -----------*/

      .home-banner-main{
        background-position: center;
        padding: 40vh 0;
      
        }

      .home_top_banner .carousel-item img{
        aspect-ratio: 16/10;
      }
/*     
      .home_top_banner .carousel-content{
        top: 50%;
        left: 0%;
        transform: translate(-0%, -50%);
        z-index: 999;
      } */
       
      /*---------- banner end here  -----------*/


       
   /*============== blogs start here  =================*/

   .service-cont .service-title{
    font-size: 16px;
   
  }
   .service-main .service-btn-right {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .service-main .service-btn-right i{
    margin-left: 0;
    margin-right: 10px;
  }
  /*================= blogs end here  ===============*/



    /*============== why choose us start here  ===============*/

   .why-choose-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 equal columns */
    gap: 20px;
  }

    /*============== why choose us start here  ===============*/



  

}

 @media screen and (min-width: 992px) and (max-width:1200px){
   

 }

 @media screen and (min-width: 1200px) and (max-width:1400px){
 

 }
 


 
  /* Set the width of the scrollbar */
  ::-webkit-scrollbar {
    width: 10px; 
    height: 10PX;
  }

  /* Style the scrollbar track */
  ::-webkit-scrollbar-track {
      background: var(--bg-color-1); 
      border-radius: 10px;
  }

  /* Style the scrollbar thumb (the draggable part) */
  ::-webkit-scrollbar-thumb {
      background-color: var(--primary-color); 
      border-radius: 10px;
      border: 1px solid #f1f1f1; 
  }

  /* Style the scrollbar on hover */
  ::-webkit-scrollbar-thumb:hover {
      background: #17b8e9; 
  }