/*------------------------------------------------------------------
* Project:        EVdriveX - Electric Vehicle & Charging Station HTML Templates
* Author:         HtmlDesignTemplates
* URL:            https://themeforest.net/user/htmldesigntemplates
* Created:        04/04/2025
-------------------------------------------------------------------*/

/* 
1.Header CSS
2.Banner CSS
3.Service CSS
4.About Us CSS
5.Category CSS
6.Properties CSS
7.Listing CSS
8.Why Us CSS
9.Article CSS
10.Process CSS
11.Faq CSS
12.Review CSS
13.Footer CSS
14.About US page CSS
15.Listing page CSS
16.Blog page CSS 
17.Faq page CSS 
18.Review page CSS 
19.Error page CSS 
*/

/* Header CSS */
header {
  margin-bottom: -145px;
}

.header-top .overlay {
  background-color: #FFFFFF38;
  opacity: .5;
}

.header-socials i{
  height: 33px;
  width: 33px;
  line-height: 33px;
  transition: all .3s ease-in-out;
}

.header-socials a:hover i {
  background-color: #EB6650;
  transition: all .3s ease-in-out;
}

.navbar-nav .nav-link{
  padding: 13px 20px;
  color: #fff;
}

.navbar-nav .nav-item.no-after::after {
  display: none;
}

.dropdown-menu>li>a {
  font-size: 16px;
  padding: 12px 30px !important;
}

.dropdown-menu>li{
  border-bottom: 1px dashed #87878726;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.show{
  color: #EB6650;
}

.dropdown-menu>li>a:hover{
  background-color: #EB6650;
  color: #ffffff;
}

@media (min-width: 1180px) {
  .navbar-nav .dropdown-menu{
    position: absolute;
    top: auto;
  }

  .dropdown-menu{
    display: block;
    opacity: 0;
    visibility:hidden;
  }

  .dropdown:hover>.dropdown-menu {
    opacity: 1 ;
    visibility: visible;
    transition:all .3s ease-in-out;
  }
  
  .dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
  }

  ul.dropdown-menu {
    max-height: 600px !important; 
    overflow-y: auto !important;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .navbar-nav .nav-link.active{
    color: #EB6650;
  }

  .dropdown-item.active{
    background-color: #EB6650;
  }
}

@media (max-width: 1100px){
  .slicknav_nav .slicknav_item a{
    pointer-events: none;
  }

  .slicknav_nav .slicknav_arrow{
    pointer-events: auto;
  }

  div#slicknav-mobile {
    display: block;
  }

  .header-top, .navbar-button, .navbar-sticky-in, #responsive-menu {
    display: none;
  }

  .slicknav_menu {
    display: block;
  }

  .nav-link{
    padding: 10px 30px !important;
    margin: 0 !important;
  }

  .slicknav_btn{
    position: absolute;
    right: 70px;
  }

  .slicknav_btn.slicknav_open:before, .slicknav_btn.slicknav_collapsed:before {
    left : 0;
    top: 20px;
    background-color: #EB6650 ;
    padding: 8px;
    position: absolute;
  }

  .slicknav_nav {
    top: 60px;
    left: 0;
    background-color: #F5F5F5;
    position: absolute;
    height: 270px;
    overflow: auto;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.12);
  } 

  .slicknav_nav a:hover, li.nav-item.dropdown.slicknav_parent.slicknav_open > a > a {
    background-color: #EB6650 !important;
    color: #fff;
  }

  .slicknav_nav a, .dropdown-menu>li>a{
    font-size: 16px;
    background-color: #F5F5F5;
    color: #676767;
    border-bottom: 1px dashed #87878726;
  }

  .dropdown-menu>li>a{
    padding-left: 40px !important;
  }
  
  .dropdown-toggle::after{
    display: none;
  }

  .slicknav_nav .active, .fa-angle-up:before{
    background-color: #EB6650;
    color: #fff;
  }
}

/* Popup hidden by default */
#search1 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#search1 input{
width: 400px;
}

#search1 input::placeholder{
  color: #fff;
}

#search1.open {
  display: flex;
}

#search1 .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

/* Banner CSS */
/* .banner, .breadcrumb{
  background-image: url(../images/video.mp4);
  background-color: #25212F;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.banner .overlay, .breadcrumb .overlay {
  background-color: transparent;
  background-image: radial-gradient(at top center, #0C0C0E 0%, #25212F 100%);
  opacity: .9;
}

.banner-inner .overlay {
  background-image: linear-gradient(180deg, #FFFFFF00 0%, #25212F 100%);;
}

.banner-inner img {
  height: 700px;
  object-fit: cover;
}

.banner-inner {
  margin-bottom: -50px;
} */












 /* .......................................index ki css.............................................. */

zoom-img {
  transition: transform 6s ease;
  transform: scale(1);
}
.slide:hover .zoom-img {
  transform: scale(1.15);
}

.reasons-section {
  padding: 50px 0;
  background: #fafafa;
}
.reasons-section .title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 50px;
}
.reasons-section .title span { color: #b49a6a; }
.reasons-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  align-items: stretch;
}
.reason-box {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.06);
  border-left: 4px solid #d2c09b;
}
.reason-number {
  color: #b49a6a;
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 15px;
}
.reason-heading {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}
.reason-box p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}
.reason-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Property Cards */
.property-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.property-image {
  height: 320px;
  overflow: hidden;
}
.property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.property-info {
  margin-top: auto;
}

/* Float Button */
.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.my-float { margin-top: 0; }

/* Prevent horizontal scroll */
body, html { overflow-x: hidden; }

/* Navbar adjustments */
.navbar-nav .nav-link { padding: 0.5rem 1rem; }
.main-header{
  background: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}
.container{ width: 90%; margin: auto; }
.navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.logo img{ width: 200px; height: auto; }
.nav-links{
  list-style: none;
  display: flex;
  gap: 30px;
}
.nav-links li a{
  text-decoration: none;
  color: #222;
  font-weight: 500;
  position: relative;
  transition: color 0.3s;
}
.nav-links li a:hover,
.nav-links li a.active{ color: #0f6b2f; }
.nav-links li a::after{
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: #0f6b2f;
  left: 0;
  bottom: -5px;
  transition: width 0.3s;
}
.nav-links li a:hover::after,
.nav-links li a.active::after{ width: 100%; }
.nav-btn a{
  text-decoration: none;
  background: #0f6b2f;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: 0.3s;
}
.nav-btn a:hover{ background: #ff6a00; }
@media(max-width: 991px){
  .nav-links{ display: none; }
}


/* Button Group */
.nav-btn-group{
  display: flex;
  gap: 15px;
  align-items: center;
}

/* Login Button */
/* .login-btn{
  text-decoration: none;
  padding: 8px 18px;
  border: 2px solid #0f6b2f;
  color:green;
  border-radius: 5px;
  transition: 0.3s;
  font-weight: 500;
} */

/* .login-btn:hover{
  background: ;
  color: #fff;
} */

/* Get Started Button */
/* .get-started-btn{
  text-decoration: none;
  background: #0f6b2f;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: 0.3s;
} */

/* .get-started-btn:hover{
  background: #ff6a00;
} */


/* ===== PROPERTY FORM MODAL ===== */
/* PROPERTY FORM MODAL - WIDE & COMPACT */
#propertyFormModal {
  display: none;
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 10000;
  overflow: auto; /* Scroll if content taller than viewport */
  padding: 20px;
}

.modal-content {
  background: #fff;
  padding: 30px 40px; /* thoda zyada padding left-right */
  border-radius: 15px;
  width: 700px; /* Wider modal */
  max-width: 95%;
  max-height: 80vh; /* height compact, scrollable if needed */
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  overflow-y: auto; /* scroll inside modal if needed */
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn { 
  from {opacity:0; transform: translateY(-20px);} 
  to {opacity:1; transform: translateY(0);} 
}

.modal-content h2 {
  text-align: center;
  color: #0f6b2f;
  margin-top: 0;
  font-size: 24px;
  font-weight: 700;
}

/* Form Inputs */
.modal-content input, 
.modal-content select, 
.modal-content textarea {
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  color: #333;
  background: #fff;
  font-size: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.modal-content input:focus, 
.modal-content select:focus, 
.modal-content textarea:focus {
  border-color: #0f6b2f;
  box-shadow: 0 0 8px rgba(15,107,47,0.3);
  outline: none;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder { color: #aaa; }

/* Submit Button */
.modal-content button {
  width: 100%;
  padding: 14px;
  margin: 15px 0;
  border-radius: 10px;
  background: linear-gradient(90deg,#0f6b2f,#3cb043);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: background 0.3s, transform 0.2s;
}

.modal-content button:hover {
  background: linear-gradient(90deg,#3cb043,#0f6b2f);
  transform: translateY(-1px);
}

/* Close Button */
.close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 28px;
  cursor: pointer;
  color: #333;
  transition: color 0.3s;
}
.close:hover { color: #0f6b2f; }

/* Image Preview */
#imagePreview {
  width: 100%;
  max-height: 180px; 
  object-fit: cover;
  margin-top: 8px;
  border-radius: 8px;
  display: none;
  border: 1px solid #ccc;
}

/* Responsive */
@media (max-width: 991px){
  .modal-content { width: 90%; max-height: 90vh; padding: 20px; }
}
   

    #langToggle {
      padding: 6px 12px;
      background: #b49a6a;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    #langToggle:hover {
      background: #a08855;
    }








/* Breadcrumb section */
.breadcrumb {
  position: relative;
  overflow: hidden;
  background: none !important;   /* background color remove */
}

/* Background video */
.breadcrumb-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  
}


@media (max-width:768px){
  .breadcrumb {
    padding-top:120px;
    padding-bottom:80px;
  }
}


/* Overlay */
.breadcrumb .overlay {
  position: absolute;
  inset: 0;
  /* background-image: radial-gradient(at top center, #0C0C0E 0%, #25212F 100%); */
  opacity: 0.7;
  z-index: -1;
} 

/* Content above video */
.breadcrumb .container {
  position: relative;
  z-index: 1;
}



.spin {
  display: inline-block;
  animation: spin 3s infinite;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}











 /* whatsapp icon */
 .float {
     position: fixed; 
    width: 60px;
    height: 60px;
    bottom: 100px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    animation: zoom 2s infinite; /* <-- added animation */
}

.my-float {
    margin-top: 16px;
}

/* Keyframes for zoom effect */
@keyframes zoom {
    0%, 100% {
        transform: scale(1); /* normal size */
    }
    50% {
        transform: scale(1.2); /* zoomed size */
    }
}


 

/* Service CSS */
.service-icon img{
  width: 36px;
  height: 36px;
}

.service-icon{
  width: 60px;
  height: 60px;
}

@media (max-width: 976px){
  .service-box2, .service-box1{
    border-right: none !important;
    border-bottom: 1px dashed #25212F2B !important;
  }
}

/* About US CSS */

.exp-box {
  bottom: -30px;
  left: 30px;
}

.client-box img {
  width: 60px;
  height: 60px;
  margin-left: -15px;
}

.client-box {
  bottom: -25px;
  right: -25px;
}

@media (max-width: 1200px){
  .client-box, .exp-box {
    position: static !important;
  }

  .about .body-right, .about .title-right {
    margin-left: 0 !important;
  }

  .about-inner {
    padding-bottom: 0 !important;
  }

  .about {
    padding-bottom: 100px !important;
  }
}

.about-list img, .other-services img {
  height: 14px;
  width: 14px;
}

.about .overlay{
  background-image: url(../images/R-e1706170595.png);
  background-repeat: repeat-x;
  background-size: 28% auto;
  background-position: bottom;
  background-color: transparent;
  opacity: 0.12;
}

/* Category CSS */

.category-icon img{
  height: 36px;
  width: 36px;
}

.category {
  background-image: linear-gradient(90deg, #F5F5F5 34%, #FFFFFF00 0%);
}

@media (max-width: 1200px){
  .category {
    background-image: none;
    padding: 0 !important;
  }
}

/* Properties CSS */
.property-info {
  margin-top: -100px;
}

/* Listing CSS */
.listing .overlay {
  background-image: linear-gradient(180deg, #FFFFFF00 60%, #EB665030 0%);
  background-color: transparent;
  opacity: .5;
  z-index: -1;
}

@media (max-width: 996px){
  .listing-inner {
    padding-bottom: 0 !important;
  }
}

/* Why Us CSS */
.why-us-inner{
  background-image: linear-gradient(180deg, #25212F 0%, #0C0C0E 100%);
  margin-top: -40px;
}

.why-us .section-left img{
  margin-top: -20%;
}

@media (max-width: 996px){
  .why-us-inner, .why-us .section-left img {
    margin: 0;
  }

  .why-us-inner{
    padding: 50px 30px 50px 30px !important;
    border: none !important;
  }

  .why-us .service-icon{
    margin: auto !important;
    margin-bottom: 15px !important;
  }

  .counter-wrapper .row > .col-md-6:nth-child(2) .counter-box {
    border: none !important;
  }
}

@media (max-width: 767px){
  .counter-box {
    padding-bottom: 20px;
    border-right: none !important;
    border-bottom: 1px solid #FFFFFF2E;
  }

  .counter-wrapper .row > .col-md-6:nth-child(2) .counter-box {
    border-bottom: 1px solid #FFFFFF2E !important;
  }

  .why-us-inner{
    padding: 0px 20px 50px 20px !important;
  }
}

.why-us-inner-service{
  margin-top: -40px;
  border-top:  1px dashed #25212F2B !important;
}

/* Article CSS */
.article-image a::after{
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 75%);
  background-repeat: no-repeat;
  bottom: 0;
  content: "";
  display: block;
  height: 100%;
  opacity: 1;
  position: absolute;
  transition: all .3s ease-in-out;
  width: 100%;
}

.article-image a:hover::after {
  opacity: 0;
  transition: all .3s ease-in-out;
}

/* Process CSS */
.process-box h2 {
  color: white;
  -webkit-text-stroke: 1px #EB6650; /* Outline color and thickness */
}

.process{
  background-image: linear-gradient(180deg, #ffffff 50%, #F5F5F5 0%);
}

/* Faq CSS */
.accordion-button:focus, .accordion-button:hover{
  box-shadow: none !important;
  z-index: 0;
}

.faq .accordion-button.collapsed{
  color: #8b8b8b;
}

.faq .accordion-button:not(.collapsed){
  background-color: #fff;
  color: #EB6650 !important;
}

.faq .accordion-button::after{
  content: "\f063" !important;
  font-family: "FontAwesome" !important;
  background-image: none;
}

.faq .accordion-button:not(.collapsed)::after{
  content: "\f062" !important;
}

.accordion {
  --bs-accordion-btn-icon-transform: rotate(-360deg);
} 

.faq{
  background-image: linear-gradient(180deg, #F5F5F5 44%, #ffffff 0%);;
}

.faq .section-body img {
  margin-bottom: -50px;
}

@media (max-width: 996px) {
  .faq .section-left {
    padding-bottom: 100px !important;
  }  
}


/* Review CSS */
.reviewer-info img{
  height: 50px;
  width: 50px;
}

.contact-banner{
  margin-left: 30%;
}

.review, .commitment {
  background-image: url(../images/house-2023-11-27-05-11-15-utc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.review .overlay, .commitment .overlay {
  background-image: linear-gradient(90deg, #FFFFFF 17.5%, #FFFFFF00 0%);
  background-color: transparent;
}

.contact-banner .overlay{
  background-color: #25212F;
  background-image: none !important;
  opacity: .8;
}

@media (max-width: 996px){
  .contact-banner{
    margin-left: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .review-box {
    padding-top: 50px !important;
  }

  .review .overlay, .commitment .overlay {
    background-image: none
  }

}

/* @media (max-width: 767px){
  .review .overlay, .commitment .overlay {
    background-image: none
  }
} */


/* Footer CSS */
footer {
  background-image: linear-gradient(90deg, #25212F 0%, #0C0C0E 100%);
}


/* ========================================= */
/*          About US page CSS                */
/* ========================================= */

/* Agents CSS */
.agent-socials a i{
  font-size: 16px;
  height: 48px;
  width: 48px;
  line-height: 48px;
}

.agent-socials a :hover {
  background-color: #EB6650;
  color: #FFFFFF;
}

.agent-socials a :hover i {
  border-color: #EB6650 !important;
}

.agent-image img:hover {
  opacity: .9;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 767px){
  .post-navigation {
    padding: 10px !important;
  }
}


/* Mission CSS */
.vision {
  background-image: linear-gradient(180deg, #FFFFFF00 50%, #F5F5F5 0%);
}

@media (max-width: 996px){
  .vision .section-left {
    padding: 0 !important 
  }
}


/* ========================================= */
/*          Listing page CSS                 */
/* ========================================= */
.similar-listing .overlay {
  background-image: linear-gradient(180deg, #EB665030 60%, #FFFFFF00 0%);
  background-color: transparent;
  opacity: .5;
  z-index: -1;
}


/* ========================================= */
/*             Blog page CSS                 */
/* ========================================= */
.quote-image img {
  height: 100px;
  width: 100px;
}

.search-bar a:hover {
background-color: #C14632;
}




/* ========================================= */
/*               Faq page CSS                */
/* ========================================= */

.aims .accordion-button:not(.collapsed){
  background-color: #EB6650;
  color: #fff !important;
}

.aims .accordion-button::after{
  content: "\f078" !important;
  font-family: "FontAwesome" !important;
  background-image: none;
}

.aims .accordion-button:not(.collapsed)::after{
  content: "\f077" !important;
}

.faq-page .faq {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
}

.aims {
  background-image: linear-gradient(180deg, #F5F5F5 0%, #ffffff 100%);
}

@media (max-width: 767px){
  .aims-form{
    padding: 50px 20px !important;
  }

  .faq .accordion{
    padding: 0px 15px !important;
  }
}

/* ========================================= */
/*             Review page CSS               */
/* ========================================= */
.review-image img{
  height: 80px;
  width: 80px;
}

.divider-pattern {
  background: repeating-linear-gradient(-55deg, #FFFFFFBF, #FFFFFFBF 1px, transparent 1px, transparent 6px);
}

.countdown span{
  font-size: 80px;
}

@media (max-width: 992px){
  .coming-soon span {
    font-size: 54px;
  }
  .coming-soon p{
    font-size: 14px;
  }
}

@media (min-width: 800px) and (max-width:996px){
  .coming-soon{
    height: 180vh !important;
  }
}

@media (max-width: 576px){
  .coming-soon span {
    font-size: 42px;
  }
}

/* ========================================= */
/*              Error page CSS               */
/* ========================================= */
.error h1 {
  font-size: 90px;
  color: #fff;
  -webkit-text-stroke: 1px #EB6650; /* Outline color and thickness */
}