* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: Sofia Pro Regular Az; */
    /* font-family: Sofia Pro Semi Bold Az; */

  }

:root{
        --contact-border: #AEAAAA;
        --color-primary: #07122F;
        --color-interaction: #996515;
}

@font-face {
  font-family: Sofia-Pro;
  src: url(/assets/Fonts/Sofia\ Pro\ Regular\ Az.otf) format('otf');
}

@font-face {
  font-family: Sofia-Pro;
  src: url(/assets/Fonts/Sofia\ Pro\ Semi\ Bold\ Az.otf) format('otf');
}

section {
  scroll-margin-top: 80px; 
	overflow:hidden;/* Adjust this value to match your header's height */
}


  /* ----------------------------  Header start  ---------------------------- */




.topbar {
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
}

.contact-info p,
.contact-icon p img {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
}
.header{
    height: 90px;
}

.nav-sticky{
  position: sticky ;
  top: -1px;
  z-index: 999;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
  }
  
  .text-brown {
    color: var(--color-interaction) !important; /* Custom brown color for the logo */
  }
  
  /* Contact Us button custom styling */
  .btn-brown {
    /* background-color: #8B572A; */
    color: white !important;
    padding: 10px 20px !important;
/*     background-color: var(--color-interaction) !important; */
    border-radius: 10px !important;
/* 	  border:1px solid #27AEDC; */
	  background-color:#27AEDC;
  }

  

  
  /* Navbar link custom styling */
  .nav-link {
    font-weight: bold;
  }

  .nav-link:focus {
    outline: none;
    box-shadow: none;
  }

  .nav-link.active {
    color: var(--color-interaction); /* Replace with desired active color */
    font-weight: bold;
  }
  
  .navbar-toggler {
    background-color: var(--color-interaction) !important; /* Change the color of the hamburger icon */
  }
  
  .navbar-toggler {
    border: none; /* Remove border around the toggle button */
  }

  @media (max-width: 768px) {
    .contact-info{
      display: none !important;
    }
    .contact-icon {
      justify-content: center;
  }
}

@media (max-width: 576px) {
  .contact-icon p img {
      padding: 0 5px;
  }
}


  /* ----------------------------  Header End  ---------------------------- */



  /* ----------------------------  Hero section start  ---------------------------- */

  .hero-section{
    position: relative;
  }

  .hero-img{
    width: 100%;
  }

  .hero-text{
    text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 37%;
    left: 15%;
    z-index: 2;
    font-weight: 700;
    max-width: 612px;
    color: #FFFFFF;
    font-size: clamp(24px, 5vw, 42px);
    line-height: clamp(30px, 6vw, 52px);
    max-width: 600px;
  }

  #home .form-container {
    background-color: #000;
    /* color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 421px; */
  }
  #home .form-container h3 {
    border-left: 4px solid #fff;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  #home .form-container input,
  #home .form-container textarea {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
  }
  #home .form-container input::placeholder,
  #home .form-container textarea::placeholder {
    color: #ccc;
  }
  #home .form-container input:focus,
  #home .form-container textarea:focus {
    background-color: transparent;
    border-color: #fff;
    box-shadow: none;
  }
  #home .form-container .btn-submit {
    background-color: #b46910;
    border: none;
    color: #fff;
  }
  #home .form-container .btn-submit:hover {
    background-color: #a95f0e;
  }
  /* #home .wpcf7-form-control-wrap .border-none .first:checked {
    background-color: var(--color-interaction);
    border-color: var(--color-interaction);
  } */
  input[type="checkbox"] {
    accent-color: var(--color-interaction);
    /* background-color: var(--color-interaction); */
  }
  #home .form-container label {
    font-size: 14px;
  }

  .wpcf7-form-control-wrap .border-none{
    border: none !important;
  }

  .wpcf7-form-control-wrap .border-none .first {
    margin: 0 !important;
  }

  .wpcf7-form-control-wrap .border-none .first input{
    margin-right: 10px;
    height: 16px;
    width: 16px;
  }

  #home .enquire-button {
    position: fixed;
    top: 50%;
    right: -58px;
    width: 160px;
    /* transform: translateY(-50%); */
    /* writing-mode: vertical-lr;  */
    background-color: #27AEDC;
    color: #fff;
    transform: rotate(270deg);
    padding: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-align: center;
    border: none;
    cursor: pointer;
    z-index: 1000;
    /* border-radius: 5px 0 0 5px; */
    transition: background-color 0.3s ease;
  }
  #home .enquire-button:hover {
    background-color: #a95f0e;
  }

  /* ----------------------------  Hero section end  ---------------------------- */




  /* ----------------------------  About section start  ---------------------------- */

  .about-section {
    padding: 50px 0;
    background-color: #fff;
}
.about-text {
    /* border: 2px solid #007bff; */
    padding: 20px 20px 20px 60px;
    border-radius: 8px;
}
.about-text h2 {
      font-size: clamp(24px, 5vw, 42px);
    font-weight: 700;
	background: linear-gradient(175deg, rgba(39, 174, 220, 1) 41%, rgba(0,113,152,1) 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-text p {
    font-size: clamp(16px, 6vw, 15px);
    line-height: 30px;
    color: #555;
}
.read-more-btn {
    background-color: #27AEDC;
    color: #FFFFFF !important;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
}
/* .read-more-btn:hover {
    background-color: #5d4037;
} */
.about-image {
    max-width: 100%;
	height: 430px;
	object-fit:cover;
    border-radius: 12px;
}

  /* ----------------------------  About section end  ---------------------------- */



  /* ----------------------------  Service section start  ---------------------------- */

  .services-section {
  background-image: url('http://localhost/emerald-grove/wp-content/uploads/2025/04/unnamed-1.png');
/* Replace with actual image path */
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 50px 0;
    color: #fff;
}

/* Overlay with 80% opacity */
.overlay {
    background: linear-gradient(to bottom, rgba(0, 51, 182, 0.7) 0%, rgba(7, 18, 47, 0.7) 40%, rgba(7, 18, 47, 0) 80%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.overlay-4 {
  background: linear-gradient(to bottom, rgba(8, 30, 86, 0.7), rgba(7, 18, 47, 0.7));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Content of the section */
.content-wrapper {
    position: relative;
    z-index: 2;
}

/* Heading styles */
.services-text h2 {
/*     font-size: clamp(28px, 6vw, 50px); */
/* 	font-size:28px; */
    line-height: 28px;
	  font-size: clamp(24px, 5vw, 42px);
    font-weight: 700;
	line-height:45px !important;
}
.services-text p {
  font-size: clamp(18px, 6vw, 22px);
  line-height: 34px;
  font-weight: 300;
}

/* Button styles */
.call-now-btn {
    background-color: var(--color-interaction);
    color: #fff !important;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}
/* .call-now-btn:hover {
    background-color: ;
} */

/* Services icons box */
.services-box {
    /* background-color: rgba(255, 193, 7, 0.1);  */
    border: 3px solid #996515;
	min-height:250px;
	height:100%;
	overflow-wrap: break-word;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    color: #FFFFFF;
}

/* Service title */
.services-box h4 {
    font-size: 18px;
    margin-top: 10px;
}

/* Responsive design */
@media (max-width: 768px) {
    .services-text h2 {
        font-size: 28px;
    }
	 .services-text h2{
		  line-height:34px !important;
	  }
}

  /* ----------------------------  Services section end  ---------------------------- */




  /* ----------------------------  Slider section Start  ---------------------------- */


  @media (max-width: 767.98px) {
    .carousel-item .col-md-4 {
      display: none;
    }
    
    .carousel-item .col-md-4:first-child {
      display: block;
    }
	  .services-p{
		  padding:0 !important;
	  }
	 
  }
  
  @media (max-width: 545px) {
    .carousel-inner .slick-prev{
      height: 30px !important;
      width: 30px !important;
    }
    .carousel-inner .slick-next{
      height: 30px !important;
      width: 30px !important;
    }
  }
  
  .carousel-inner .slick-prev{
    position: absolute;
    left: 0;
    z-index: 9;
    top: 0;
    bottom: 10%;
    margin: auto;
    background-image: url('http://localhost/emerald-grove/wp-content/uploads/2025/04/Group-38027-1.png');
    background-color: transparent;
    border: none;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 0;
    height: 50px;
    width: 50px;
  }

  .carousel-inner .slick-next{
    position: absolute;
    right: 0;
    z-index: 9;
    top: 0;
    bottom: 10%;
    margin: auto;
    background-image: url('http://localhost/emerald-grove/wp-content/uploads/2025/04/Group-38027-2.png');
    background-color: transparent;
    border: none;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 0;
    height: 50px;
    width: 50px;
  }

  .slider-section{
    padding: 50px 0;
  }

  

  /* ----------------------------  Slider section end  ---------------------------- */


  /* ----------------------------  Why choose us section start  ---------------------------- */

  .services-section {
    background-image: url('../Images/architect-safety-equipment-with-plans\ 5.png'); /* Replace with actual image path */
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 80px 0;
    color: #fff;
}


.build-section {
  background-image: url('../Images/EMRALD_GROVE_VIEWS_PART_-2_\(1\)[3]-11\ 8.svg'); /* Replace with actual image path */
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 50px 0;
  color: #fff;
}

/* Overlay with 80% opacity */
.overlay {
    /* background-color: rgba(0, 0, 0, 0.8);  */
    /* background-color: rgb(8,30,86, 0.8); */
    background-color: rgb(7,18,47, 0.8);
/* background-color: linear-gradient(180deg, rgba(8,30,86,1) 0%, rgba(7,18,47,1) 100%); */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overlay-1 {
 background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.6) 0%,        /* black with 60% opacity */
  rgba(28, 125, 158, 0.6) 40%,  /* teal with 60% opacity */
  rgba(28, 125, 158, 0.6) 100%
);


  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Content of the section */
.content-wrapper {
    position: relative;
    z-index: 2;
}
.service-1{
	font-size:28px !important;
	color:#FFFFFF !important;
}
.service-2{
	font-size:15px;
}

/* Heading styles */
.services-text h2 {
/*     font-size: clamp(28px, 6vw, 50px); */
    line-height: 32px;
		background: linear-gradient(90deg, rgba(215, 245, 255, 30) 4%, rgba(0,113,152,1) 87%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
    font-weight: 600;
	margin-bottom:0px;
}
.services-text p {
/*   font-size: clamp(18px, 6vw, 22px); */
/*   line-height: clamp(24px, 6vw, 32px); */
	font-size:15px;
	line-height:28px;
  font-weight: 300;
}

/* Button styles */
.call-now-btn {
    background-color:#27AEDC;
    color: #fff !important;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}
.call-now-btn-1 {
/*     background-color:#27AEDC; */
    color: #fff !important;
    padding: 10px 20px;
    border: none;
	border:1px solid #FFFFFF;
    border-radius: 5px;
    text-decoration: none;
}
/* .call-now-btn:hover {
    background-color: ;
} */

/* Services icons box */
.services-box {
    /* background-color: rgba(255, 193, 7, 0.1);  */
    border: 3px solid #FFFFFF;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
	height:100%;
    color: #FFFFFF;
}

/* Service title */
.services-box h4 {
    font-size: 18px;
    margin-top: 10px;
}

/* Responsive design */
@media (max-width: 768px) {
    .services-text h2 {
        font-size: 28px;
    }
}

  /* ----------------------------  Why choose us section end  ---------------------------- */
  
  
  
  
  
  /* ----------------------------  Services section start  ---------------------------- */


  .service-card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
    top: -60px;
    margin: auto;
    background-color: #FFFFFF;
    width: 90%;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* .service-card:hover {
    transform: scale(1.05);
} */

.service-card-img {
    width: 100%;
    height: 390px;
    object-fit: cover;
}

.service-card h5 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 1rem;
}

.service-card p {
    font-size: 15px;
    color: #000000;
}

.service-card button {
    background-color: var(--color-interaction);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
}

.service-card button:hover {
    background-color: #a36b38;
}


  /* ----------------------------  Services section end  ---------------------------- */





  /* ----------------------------  Galley section Start  ---------------------------- */
  

  .gallery-section{
    background-color: #EEEEEE;
  }

  [swiper_scale_active] .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    padding: 0 30px;
    background: transparent;
    border-radius: 20px;
    border-color: transparent;
    /* shadow */
    box-shadow: 0 0 100px 40px var(--main-bg-color);
    overflow: hidden;
  }
  
  @media only screen and (max-width: 600px) {
    [swiper_scale_active] .swiper-slide {
      border-radius: 10px;
    }
  }

  @media only screen and (min-width: 1024px) {
    [swiper_scale_active] .swiper-slide {
      /* max-width: 350px; */
      padding: 0 15px;
    }
  }

  @media only screen and (max-width: 767px) {
    [swiper_scale_active] .swiper-slide {
      padding: 0 15px;
    }
  }
  
  [swiper_scale_active] .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
	  min-height: 380px;
    object-fit: cover;
  }
  
  /* CUSTOM CSS "TRICK" => the link should work only on the active slide  */
  [swiper_scale_active] .swiper-slide:not(.swiper-slide-active) a{
    pointer-events: none;
  }
  
  /* #### CUSTOM NEXT/PREV #### */
  [btn_group]{
    text-align: center;
    margin-top: 16px;
  }
  
  [btn_group] button{
    background: transparent;
    padding: 10px 16px;
    border-width: 0px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.5s linear;
  }
  
  [btn_group] button:hover{
    opacity: 1;
  }
  
  [btn_group] svg{
    color: white;
  }
  
  /* ----------------------------  Galley section end  ---------------------------- */


  /* ----------------------------  Contact section strat  ---------------------------- */


.contact-form {
  max-width: 700px;
/*   margin: 50px auto; */
  background-color: white;
  padding: 30px 0 30px 0;
  border-radius: 8px;
}

input[type="checkbox"]:checked {
  background-color: var(--color-interaction); /* Green color for the checked state */
  border-color: var(--color-interaction);
}

.contact-form h2 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

.contact-form p {
  /* text-align: center; */
  /* margin-bottom: 30px; */
  color: #6c757d;
}

.form-check-label a {
  text-decoration: none;
  color: #007bff;
}

.form-check-label a:hover {
  text-decoration: underline;
}

.submit-btn {
  background-color: #27AEDC !important;
  color: white !important;
  padding: 5px 10px !important;
  border: none !important;
  border-radius: 4px !important;
  line-height: inherit !important;
  cursor: pointer !important;
}

form:nth-child(3) p{
  margin: 0 !important;
}

.submit-btn:hover {
  background-color: #906b2a;
}

.check-box{
  border: 2px solid var(--color-interaction) !important;
  border-radius: 0 !important;
}

.form-check-label{
  color: #767676;
}

.form-check-label a{
  text-decoration: underline #767676 !important;
  color: #767676 !important;
}

.form-control{
  padding: 10px !important;
  border: 1px solid var(--contact-border) !important;
  border-radius: 10px !important;
}

.form-select{
  padding: 10px;
  border: 1px solid var(--contact-border);
  border-radius: 10px;
}

.contact-f-7 .row,.col-md-6 p{
  /* margin-bottom: 20px !important; */
}

.contact-f-7 .row,.col-md-6 {
  margin: 0 !important;
}

.form-check{
  padding-left: 2.1em !important;
}


  /* ----------------------------  Contact section end  ---------------------------- */


  /* ----------------------------  Footer section strat  ---------------------------- */

  .footer{
    background-color: var(--color-primary);
  }

  .footer h5 {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: clamp(18px, 6vw, 20px);
}

.footer p, .footer a {
    font-size: 14px;
}

.footer a {
    text-decoration: none;
    font-size: 14px;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .footer-icon {
    width: 22px;
    height: 22px;
}

.footer .small {
  padding-top: 10px;
    font-size: 14px;
    color: #ccc;
}

.border-t{
  border-top: 1px solid #878484 !important;
}
.footer-icon-3{
	    width: 50px;
    height: 50px
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer .col-md-4 {
        margin-bottom: 20px;
    }
}

.hero-desc{
	font-size:22px;
	line-height:32px;
	padding-top:10px;
	font-weight:300;
	max-width:465px;
}
.hero-title-2{
	background: linear-gradient(90deg, rgba(215,245,255,1) 4%, rgba(0,113,152,1) 87%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.img-hero{
	 background: linear-gradient(90deg, rgba(160,200,220,1) -9%, rgba(0,90,120,1) 61%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
	height:600px;
/* 	  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) -9%, rgba(0, 0, 0, 0.5) 61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  height: 600px; */
}
.navbar-transparent{
	 background: transparent;
  box-shadow: none;
}
@media (max-width: 576px) {
 .hero-desc{
	font-size:14px;
	 line-height:24px;
}
	.img-hero{
		height:400px;
	}
	 .hero-text{
    top: 45%;
    left: 9%; 
  }
}
@media (max-width: 992px) {
	.about-text{
		padding:20px 0px 20px 0px;
	}
	.hero-text{
		left:4%;
	}
}
@media (max-width: 1652px) {
	.hero-text{
		left:12%;
	}
}
@media (max-width: 1522px) {	
	.hero-text{
		left:8%;
	}
}
@media (max-width: 1407px) {	
	.hero-text{
		left:4.5%;
	}
}
@media (max-width: 1394px) {	
	.hero-text{
		left:10.5%;
	}
}
.button-hero{
	    padding: 15px;
    font-size: 18px;
    background: #27AEDC;
    border-radius: 15px;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    color: #FFFFFF;
}
.header-color{
	background-color:#02060A;
	 position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.ul-color{
	color:#FFFFFF !important;
}
.nav-link.active {
  color: #27AEDC !important;
}
.class-p{
	padding-left:0px;
	padding-right:0px;
}
.premium-text{
	  font-size: clamp(24px, 5vw, 42px);
	font-weight:bold;
	background: linear-gradient(175deg, rgba(39, 174, 220, 1) 41%, rgba(0,113,152,1) 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.premium-desc{
	font-size:15px;
	
}
.home-text-2{
	    font-size: 15px;
    font-weight: bold;
    color: #000000;
    align-items: center;
    justify-content: center;
    display: flex;
}
.home-img-2{
	height:18px;
	width:18px;
}
.btn-primary{
	background-color:#27AEDC;
	color:#FFFFFF;
	border:none;
}
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
  background-color: #27AEDC;
  border-color: #27AEDC;
  color: #FFFFFF !important;
  box-shadow: none; /* optional: removes Bootstrap default shadow on focus/active */
}
 body.modal-open .modal-backdrop {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.6);
  }
a:visited {
    color: none;
}
.wpcf7-response-output{
	color:red;
}
.wpcf7-list-item-label{
	font-size:15px;
}
.book-visit-btn{
    text-decoration: none !important;
    color: #FFFFFF !important;
}
.hedaer-class{
	padding-left:10px;
}
.header-font{
	font-weight:400;
}

.hero-section {
  position: relative;
  height: 80vh;
	width:100%;
  overflow: hidden;
}
section{
	overflow:hidden !important;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4); /* Optional dark overlay */
  text-align: center;
}

.hero-overlay h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.footer a:focus {
  outline: none;
  box-shadow: none;
}

  /* ----------------------------  Footer section end  ---------------------------- */