/**
* Template Name: Append
* Template URL: https://bootstrapmade.com/append-bootstrap-website-template/
* Updated: Jun 02 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #212529;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #32353a;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #1C4D52;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #1C4D52;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: white;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: black;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #3a3939;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #1C4D52;

  --primary-color : #1C4D52;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

body::-webkit-scrollbar{
  display: none;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header-top-short {
  background-color: var(--primary-color);
  width: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  text-align: center;
}

.header-top-short p {
  margin: 5px 0;
}

.header-top-short-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.header-top-short-con .header-top-links {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.header-top-links i {
  font-size: 20px;
}

.header-top-links a {
  color: white;
  margin: 0 10px;
}

/* Media query for larger screens */
@media (min-width: 820px) {
  .header-top-short {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 15px 20px;
  }

  .header-top-short-con {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 85%;
  }

  .header-top-short-con .header-top-links {
    width: 35%;
    margin-bottom: 0;
  }

  .header-top-short p {
    margin: 0;
  }
}
@media (min-width: 1200px) {
  .header-top-short {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 15px 20px;
  }

  .header-top-short-con {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 50%;
  }

  .header-top-short-con .header-top-links {
    width: 35%;
    margin-bottom: 0;
  }

  .header-top-short p {
    margin: 0;
  }
}





.header-top-short p, .header-top-short-con p{
  margin: 0;
}
.header {
  color: var(--default-color);
  background-color: white;
  padding: 8px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 24px;
  font-weight: 600;
  padding-left: 3px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1);
}





/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
  --heading-color: black;
  --nav-color: black;
  --nav-hover-color: #1C4D52;
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: #ffffff;
  --heading-color: #32353a;
  --nav-color: #3a3939;
  --nav-hover-color: #1C4D52;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  
  .navmenu {
    padding: 0;
    height: 7vh;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 45px 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }


  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 10;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: white;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}



.loader-div {
  height: 100vh;
  width: 100vw;
  background-color: rgba(83, 83, 83, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* High z-index to ensure it's above other elements */
  position: fixed;
  top: 0;
  left: 0;
}

.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

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

.response-message {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 5%;
  right: 5%;
  padding: 15px;
  width: 80%;
  max-width: 400px;
  height: auto;
  background-color: #4CAF50;
  border-radius: 5px;
  text-align: center;
  display: flex;
  z-index: 1000;
  color: white;
  justify-content: center;
  align-items: center;
  /* visibility: visible; */
  font-size: 13px;
  transition: visibility 0s, opacity 1s ease-in-out;
  word-wrap: break-word;
}

@media (min-width: 768px) {
  .response-message {
    top: 10px;
    right: 10px;
    width: 300px;
    height: 100px;
    padding: 0 20px;
  }
}

@media (min-width: 1024px) {
  .response-message {
    top: 20px;
    right: 20px;
    width: 400px;
    height: 100px;
    padding: 0 20px;
    font-size: 16px;
  }
}




/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#preloader:before {
  content: "";

  border: 6px solid #ffffff;
  border-color: var(--accent-color) var(--accent-color) var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}




/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  scroll-margin-top: 98px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 64px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
}
























/* Pop up */
.popup-con {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  padding: 15px;
  width: 45%;
  height: 85%;
  background-color: #cacfd2;
  border-radius: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}

.popup-form-title {
  color: black;
  font-size: 28px;
}

.popup-main-form {
  display: flex;
  flex-direction: column;
  height: 75%;
  width: 70%;
  justify-content: space-evenly;
  align-items: flex-start;
}

.popup-main-form input {
  border: none;
  padding: 4px 12px;
  height: 40px;
  border-radius: 8px;
  color: black;
  background-color: white;
  font-weight: 600;
  width: 100%;
}

.popup-main-form button {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  font-size: 20px;
  margin: 25px 0px 10px 0px;
  width: 100%;
}

.popup-form-x {
  position: absolute;
  top: 30px;
  color: white;
  right: 30px;
  font-size: 25px;
  cursor: pointer;
}


/* Responsive design */

/* Tablets (768px and below) */
@media screen and (max-width: 768px) {
  .popup-content {
    width: 65%;
    height: 70%;
  }
  
  .popup-main-form {
    width: 80%;
  }

  .popup-form-title {
    font-size: 24px;
  }

  .popup-main-form input, .popup-main-form button {
    font-size: 18px;
  }
}

/* Mobile devices (480px and below) */
@media screen and (max-width: 480px) {
  .popup-content {
    width: 90%;
    height: auto;
    padding: 20px;
  }

  .popup-form-title {
    font-size: 22px;
  }

  .popup-main-form {
    width: 100%;
  }

  .popup-main-form input, .popup-main-form button {
    font-size: 16px;
    padding: 6px 12px;
    height: 38px;
    margin: 10px 0px;
  }

  .popup-form-x {
    top: 20px;
    right: 20px;
    font-size: 20px;
  }
}

































/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  height: 85vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 85vh;
  object-fit: cover;
  z-index: 1;
  background-image: url("../img/hero.jpg");
  background-position: center;
  object-fit: cover;
  background-size: cover;
  transform: scaleX(-1);
}

.hero-img:before {
  content: "";
  background: linear-gradient(to right, black, transparent); 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; 
  border-radius: inherit; 
  height: 85vh;
}
.vetri-hero-img:before {
  content: "";
  background: linear-gradient(to right, black, transparent);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; 
  border-radius: inherit; 
  height: 55vh;
}

.hero .container-fluid div{
  z-index: 3;
}

.hero .container-fluid div h2{
  z-index: 3;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
}

.hero .container-fluid div p{
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
}

.vetri-hero {
  width: 100%;
  height: auto; /* Adjust height dynamically based on content */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vetri-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; /* Allow the image to cover full hero section */
  object-fit: cover;
  z-index: 1;
  background-color: rgb(233,29,29); /* Fallback color */
  background-image: url("../img/trust.jpg");
  background-position: center;
  background-size: cover;
  transform: scaleX(-1);
}

.vetri-hero .container-fluid div h2 {
  z-index: 3;
  font-size: 5vw; /* Responsive font size */
  font-weight: bold;
  text-align: center;
  margin: 0 10px;
  color: white; /* Set text color to white */
}


.vetri-hero .container-fluid div h2 span {
  z-index: 3;
  font-size: 50px; /* You can adjust this */
  font-weight: bold;
  text-align: center;
  background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
  background-size: 300% auto;
  
  /* Remove color and use only background-clip */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /* Ensure text is transparent */
  animation: shine 4s linear infinite;
}

.vetri-hero .container-fluid div h3 {
  z-index: 3;
  font-size: 3vw;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  color: white; /* Change h3 text color to white */
}

.vetri-hero .container-fluid div p {
  text-align: center;
  font-size: 2.5vw;
  margin-top: 10px;
  color: white; /* Change paragraph text color to white */
}

.vetri-hero .container-fluid div {
  z-index: 3;
}

@keyframes shine {
  to {
    background-position: 200% center; /* Move the background gradient */
  }  
}

@media (max-width: 768px) {
  .vetri-hero {
    height: auto; /* Use auto height to adapt based on content */
    max-height: 50vh; /* Set a maximum height for mobile */
  }

  .vetri-hero-img {
    height: 100%; /* Ensure the image still covers the section */
    max-height: 50vh; /* Match the max height of the hero */
  }

  .vetri-hero .container-fluid div h2 {
    font-size: 6vw; /* Adjust size for smaller screens */
  }

  .vetri-hero .container-fluid div h2 span {
    font-size: 6vw;
  }

  .vetri-hero .container-fluid div h3 {
    font-size: 4vw;
  }

  .vetri-hero .container-fluid div p {
    font-size: 3vw;
  }
}






.hero-form {
  background-color: rgba(255, 255, 255, 0.3);
  width: 30vw;
  height: 65vh;
  border-radius: 10px;
  z-index: 10;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.hero-form-title{
  font-size: 25px;
  color: white;
  opacity: 1;
  font-weight: bold;
}

.hero-form-title span{
  font-size: 25px;
  color: #FAFF00;
  opacity: 1;
  font-weight: bold;
}


.hero-main-form{
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}


.hero-form p{
  font-size: 15px;
  text-align: center;
}

.hero-main-form input{
  width: 80%;
  padding: 10px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid white;
  color: white;
}

.hero-main-form input::placeholder{
  color: white;
}
.hero-main-form input:focus{
  outline: none;
}

.hero-main-form button{
  padding: 5px 20px;
  border-radius: 8px;
  border: none;
  margin-top: 10px;
  font-weight: bold;
  color: var(--primary-color);
}


.hero .container-fluid{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.vetri-hero .container-fluid{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100vw;
  height: 100vh;
}


@media screen and  (max-width: 1000px){
  .hero .container-fluid{
    flex-direction: column;
    padding: 50px 0px;
  }
  .hero-form{
    width: 60%;
  }
}
@media screen and  (max-width: 800px){
  .hero .container-fluid{
    flex-direction: column;
    padding: 50px 0px;
  }
  .hero .container-fluid div h2{
    font-size: 25px;
  }
  .hero .container-fluid div p{
    font-size: 16px;
  }
  .hero-form{
    width: 80%;
  }
}


@media screen and  (max-width: 450px){
  .hero, .hero-img, .hero-img::before{
    height: 105vh;
  }
  .hero .container-fluid{
    flex-direction: column;
    padding: 50px 10px;
  }
  .hero .container-fluid div h2{
    font-size: 24px;
  }
  .hero .container-fluid div p{
    font-size: 15px;
  }
  .hero-form{
    width: 100%;
    height: 100%;
  }
}


/*--------------------------------------------------------------
# WhatsApp Section
--------------------------------------------------------------*/
.whatsapp-button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #25D366;
	color: white;
	border-radius: 50px;
	padding: 15px;
	text-align: center;
	font-size: 24px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
		
.whatsapp-button img {
	width: 30px;
	height: 30px;
	margin-right: 10px;
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  --background-color: #f4f4f4;
  background-color: var(--background-color);
  padding: 60px 0;
}

.about-con {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  /* padding-top: -60px; */
}

.about-con-text {
  width: 100%;
  padding: 20px;
}

.about-con-text h2 {
  font-weight: bold;
  font-size: 30px;
}

.about-con-text p {
  font-size: 17px;
}
.about-con-text p i{
  font-size: 14px;
  margin-right: 5px;
  color: var(--primary-color);
}

.about-text-subhead {
  font-size: 14px;
  color: var(--primary-color);
}

.about-expi-para{
  color: var(--primary-color);
}

.about-con-img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.about-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.explore-stand-out {
  font-size: 18px;
  font-weight: bold;
}

/* Media query for tablets and larger screens */
@media (min-width: 800px) {
  .about-con {
    flex-direction: column;
    height: auto;
    padding: 0;
    width: 100%;
  }

  .about-con-text {
    width: 100%;
    padding: 10px;
  }

  .about-con-img {
    width: 100%;
    margin-bottom: 0;
  }

  .about-img {
    width: 80%;
    height: 90%;
  }
}

/* Media query for desktops */
@media (min-width: 1024px) {
  .about-con {
    width: 80vw;
    padding: 0;
    flex-direction: row;
  }

  .about-con-text h2 {
    font-size: 35px;
  }

  .about-con-text p {
    font-size: 18px;
  }

  .about-text-subhead {
    font-size: 16px;
  }
}













/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  --default-color: #ffffff;
  --background-color: #000000;
  position: relative;
  padding: 120px 0;
}

.stats img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.stats:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 40%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.stats .container {
  position: relative;
  z-index: 3;
}

.hands-con{
  text-align: center;
}
.hands-con h3{
  font-size: 30px;
  font-weight: bold;
  color: white;
  margin-bottom: 20px;
  text-align: center;
}
.hands-con h4{
  font-size: 25px;
  font-weight: bold;
  color: white;
  margin-bottom: 20px;
  text-align: center;
}
.hands-con p{
  font-size: 18px;
  text-align: center;
}









/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/

.services{
  padding: 60px 0px;
}

.service-con-outer{
  width: 85vw;
  height: 90vh;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.service-con1{
  width: 27%;
  height: 90%;
  border-radius: 10px;
  background-image: url("../img/offer1.jpg");
  object-fit: center;
  background-size: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-con1 h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.service-con1:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}
.service-con2{
  width: 27%;
  height: 90%;
  border-radius: 10px;
  background-image: url('../img/offer2.jpg');
  object-fit: center;
  background-size: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.service-con2 h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.service-con2:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}
.service-con3{
  width: 27%;
  height: 90%;
  border-radius: 10px;
  background-image: url("../img/offer3.jpg");
  object-fit: center;
  background-size: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.service-con3 h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.service-con3:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}



@media screen and (max-width: 1000px) {
  .service-con-outer{
    width: 95vw;
    height: 75vh;
  }
  .service-con1 h3{
    font-size: 18px;
  }
  .service-con2 h3{
    font-size: 18px;
  }
  .service-con3 h3{
    font-size: 18px;
  }
}




@media screen and (max-width: 765px) {
  .service-con-outer{
    width: 95vw;
    height: 200vh;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .service-con1, .service-con2, .service-con3{
    width: 80%;
    margin: 25px 0px;
    height: 80%;
  }
  .service-con1 h3{
    font-size: 18px;
  }
  .service-con2 h3{
    font-size: 18px;
  }
  .service-con3 h3{
    font-size: 18px;
  }
  .services .section-title h2{
    font-size: 20px;
  }
}



/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/


.feature-con{
  height: 90vh;
  width: 90vw;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}


.feature-con2-first{
  width: 50%;
  height: 100%;
}


.feature-con3-first-inner{
  width: 100%;
  height: 45%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.feature-con3-first{
  height: 40%;
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background-image: url("../img/location1.jpg");
  background-size: cover;
  object-fit: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.feature-con3-first h3{
  color: white;
  font-weight: bold;
  z-index: 3;
  font-size: 18px;
}
.feature-con3-first:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}

.feature-con3-first-sub1{
  height: 95%;
  width: 46%;
  border-radius: 10px;
  background-image: url("../img/location2.jpg");
  background-size: cover;
  object-fit: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-con3-first-sub1 h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.feature-con3-first-sub1:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}
.feature-con3-first-sub2{
  height: 95%;
  width: 46%;
  border-radius: 10px;
  background-image: url("../img/location3.jpg");
  background-size: cover;
  object-fit: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.feature-con3-first-sub2 h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.feature-con3-first-sub2:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}
.feature-con2-second{
  width: 50%;
  height: 100%;
}
.feature-con3-second{
  height: 55%;
  width: 95%;
  border-radius: 10px;
  background-image: url("../img/location4.jpg");
  background-size: cover;
  object-fit: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.feature-con3-second h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.feature-con3-second:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}

.feature-con3-second-inner{
  width: 100%;
  height: 45%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.feature-con3-second-sub1{
  height: 95%;
  width: 46%;
  border-radius: 10px;
  background-image: url("../img/location5.jpg");
  background-size: cover;
  object-fit: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-con3-second-sub1 h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.feature-con3-second-sub1:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}
.feature-con3-second-sub2{
  height: 95%;
  width: 46%;
  border-radius: 10px;
  background-image: url("../img/location6.jpg");
  background-size: cover;
  object-fit: cover;
  background-position: center;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-con3-second-sub2 h3{
  color: white;
  font-weight: bold;
  z-index: 3;
}
.feature-con3-second-sub2:before {
  content: "";
  background: color-mix(in srgb, black, transparent 50%);
  inset: 0;
  z-index: 2;
  position: absolute;
  border-radius: 10px;
}


@media screen and (max-width: 1000px) {
  .feature-con{
    height: 180vh;
    flex-direction: column;
  }
  .feature-con2-first{
    width: 100%;
  }
  .feature-con2-second{
    width: 100%;
    display: flex;
  flex-direction: column-reverse;
  }
}


@media screen and (max-width: 650px) {
  .feature-con{
    height: 160vh;
    flex-direction: column;
  }
  .feature-con2-first, .feature-con2-second{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .feature-con2-second {
    margin-top: -40px;
  }
  .feature-con3-first, .feature-con3-second{
    height: 40%;
    width: 100%;
  }
  .feature-con3-first h3, .feature-con3-second h3{
    font-size: 16px;
  }
  .feature-con3-first-inner, .feature-con3-second-inner{
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .feature-con3-first-sub1, .feature-con3-first-sub2, .feature-con3-second-sub1, .feature-con3-second-sub2{
    height: 40%;
    width: 100%;
  }
  .feature-con3-first-sub1 h3, .feature-con3-first-sub2 h3, .feature-con3-second-sub1 h3, .feature-con3-second-sub2 h3{
    font-size: 16px;
  }
  .section-title h2::before,
  .section-title h2::after{
    display: none;
  }
  .about .section-title h2{
    font-size: 25px;
  }
}








.location-con {
  width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.location-con-div {
  width: 100%;
  margin: 10px 0;
  background-color: #ECF0F1;
  border-radius: 10px;
  box-shadow: 0px 2px 8px rgb(180, 180, 180);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.location-con1-first {
  background-image: url("../img/location1.jpg");
  height: 45%;
}

.location-con2-first {
  background-image: url("../img/location2.jpg");
}

.location-con3-first {
  background-image: url("../img/location3.jpg");
}

.location-con4-first {
  background-image: url("../img/location4.jpg");
}

.location-con5-first {
  background-image: url("../img/location5.jpg");
}

.location-con6-first {
  background-image: url("../img/location6.jpg");
}

.location-con1-first, .location-con2-first, .location-con3-first, 
.location-con4-first, .location-con5-first, .location-con6-first {
  height: 140px;
  width: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0px 2px 8px rgb(180, 180, 180);
  margin: auto;
}

.location-con1-first:before, .location-con2-first:before, .location-con3-first:before,
.location-con4-first:before, .location-con5-first:before, .location-con6-first:before {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 10px 10px 0 0;
}

.location-con1-first h3, .location-con2-first h3, .location-con3-first h3,
.location-con4-first h3, .location-con5-first h3, .location-con6-first h3 {
  color: white;
  font-weight: bold;
  z-index: 3;
  font-size: 18px;
}
/*
.location-con-text {
  padding: 15px;
}

.location-con-text h4 {
  font-size: 18px;
  font-weight: 600;
}

.location-con-text h6 {
  font-size: 14px;
  margin: 0 0 2px 0;
  font-weight: 500;
}

.location-con-text h6 span {
  color: var(--primary-color);
}

.location-con-text p {
  font-size: 14px;
  margin: 0 0 2px 0;
  font-weight: 500;
}

.location-con-text p span {
  color: var(--primary-color);
}
*/
.locations-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
    justify-content: center;
  }

  .location-con-div {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 300px;
    text-decoration: none;
  }

  .location-con-div:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
  }

  .location-con-div a {
    text-decoration: none;
    color: inherit;
    display: block;
  }


  .location-con4-first h3 {
    margin: 0;
    font-size: 20px;
  }

  .location-con-text {
    padding: 16px;
  }

  .location-con-text h4 {
    margin-top: 0;
    color: #333;
    font-size: 18px;
  }

  .location-con-text h6,
  .location-con-text p {
    margin: 6px 0;
    font-size: 14px;
    color: #555;
  }

  .location-con-text span {
    font-weight: bold;
    color: #d63384;
  }

  /* Responsive behavior */
  @media (max-width: 768px) {
    .locations-grid {
      flex-direction: column;
      align-items: center;
    }
  }
/* Media Queries for responsiveness */
@media (min-width: 768px) {
  .location-con {
      flex-direction: row;
  }
  
  .location-con-div {
      width: 45%;
  }
}

@media (min-width: 1024px) {
  .location-con-div {
      width: 28%;
  }
}







































/* sale Properties*/
.sale-section {
  background-color: #F8F6EC;
  display: flex;
  justify-content: center;
}

.section-title {
  width: 100%;
}

.sale-con-outer {
  width: 100%;
  height: auto;
  margin: auto;
}

.sale-con1 {
  width: 80%;
  margin-top: 30px;
  background-color: white;
  height: auto;
  border-radius: 10px;
  cursor: pointer;
  margin: 0 10px; /* Adjust margin as needed */
}

.sale-con1 img {
  object-fit: fill;
  width: 100%;
  height: 200px; /* Adjust height as needed */
  border-radius: 10px;
}

.sale-text-con {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px; /* Add padding for better spacing */
}

.sale-con1 h3 {
  color: black;
  font-weight: bold;
  font-size: 20px;
}

.sale-para {
  color: var(--primary-color);
  font-size: 13px;
}

.sale-number-div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.sale-border {
  border: 1px solid #1C4D52;
  height: 20px;
}

.sale-border2 {
  font-size: 18px;
  color: black;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.owl-carousel .owl-nav button.owl-prev {
  left: -25px;
}

.owl-carousel .owl-nav button.owl-next {
  right: -25px;
}

.owl-carousel {
  margin: 30px 0;
  display: flex;
  justify-content: center;
}

.owl-carousel .owl-item {
  display: flex;
  justify-content: center;
  align-items: center;
}










/* House sale */

.house-section {
  --background-color: #f9f6f2;
  background-color: var(--background-color);
  padding: 20px 0;
  scroll-margin-top: 98px;
  overflow: clip;
}
.house-list {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap */
  justify-content: space-between; /* Evenly space the items */
  margin: 0 -10px; /* Prevent margin issues */
}

.house-sale1 {
  width: calc(33.33% - 20px); /* Three items per row */
  margin: 10px; /* Adjust margin for spacing */
  background-color: white;
  border-radius: 10px;
  cursor: pointer;
  height: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visibility */
}

.house-sale1 img {
  object-fit: fill; /* Ensure the image fits correctly */
  width: 100%;
  height: 200px; /* Adjust height as needed */
  border-radius: 10px;
}

/* Mobile styles */
@media (max-width: 768px) {
  .house-sale1 {
    width: 100%; /* Full width on mobile */
    margin: 10px 0; /* Margin for spacing */
  }
}





















.footer {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 20px;
}

.footer-first,
.footer-second {
  flex: 1;
  min-width: 280px; /* Ensure a minimum width for small screens */
  margin-bottom: 20px;
}

.footer-first {
  width: 45%; /* Adjust width for larger screens */
}

.footer-second .sitename {
  color: white;
  font-size: 25px;
}

.logo .sitename {
  color: white;
  font-size: 25px;
}

.hr-line-footer {
  border: 1px solid white;
  width: 30px;
  margin-bottom: 20px;
}

.footer-long p {
  color: white;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: left;
}

.hr-line2-footer {
  width: 100%;
  margin: 10px 0;
  border: 1px solid white;
}

.footer-second p {
  font-size: 18px;
  font-weight: bold;
}

.footer-copyright {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.footer-links a {
  color: white;
  margin: 0 10px;
  font-size: 22px;
}

.footer-links a:hover {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .footer {
    font-size: 14px;
  }

  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-first,
  .footer-second {
    min-width: 100%;
    margin-bottom: 30px;
  }

  .footer .footer-links {
    flex-direction: row;
    width: 100%;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .footer .footer-top {
    padding-top: 20px;
  }

  .footer .footer-first .sitename,
  .footer .footer-second .sitename {
    font-size: 20px;
  }

  .hr-line-footer, .hr-line2-footer{
    width: 60%;
  }
  .footer .footer-links a {
    margin: 0 5px;
    font-size: 18px;
  }

  .footer .footer-long,
  .footer .footer-short {
    padding: 0 10px;
  }

  .footer-short p{
    font-size: 14px;
    text-align: left;
  }
}


.footer-short p {
  margin: 10px 0;
}

.footer-short a {
  color: white;
  text-decoration: underline;
}

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

.footer-short i {
  margin-right: 5px;
}






























.city-main {
  background-color: #f3f3f3;
  padding: 20px 8vw;
  border-radius: 10px;
}

.city-back-link {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: space-between;
  background-color: #f3f3f3;
  margin-left: 20px;
}

.city-back-links span {
  font-size: 16px;
  font-weight: 500;
  color: #3498db;
}

.city-back-links p span {
  color: #3498db;
}

.city-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px 0;
  padding: 20px 30px;
}

.city-header-div1 h2 {
  font-size: 25px;
  font-weight: bold;
}

.city-header-div1-h6 span {
  background-color: #343434;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: white;
}

.city-header-div1 p {
  font-size: 14px;
  margin-top: 5px;
}

.city-header-div1 p i {
  margin: 0 4px;
}

.city-header-div2 {
  font-size: 14px;
  text-align: left;
  margin-top: 20px;
}

.city-header-div2 h2 {
  font-size: 25px;
}

.city-header-div2 h2 span {
  font-size: 25px;
  font-weight: bold;
}

/* Media Queries for responsiveness */

@media (min-width: 768px) {
  .city-header {
    flex-direction: row;
    align-items: center;
  }

  .city-header-div2 {
    text-align: right;
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .city-header-div1 h2 {
    font-size: 30px;
  }

  .city-header-div2 h2 {
    font-size: 30px;
  }
}







.city-assets {
  border-radius: 10px;
  padding: 30px 20px;
  background-color: white;
}

.city-carousel .owl-carousel {
  object-fit: cover;
}

.city-images {
  background-color: #eaeaea;
  border-radius: 10px;
}

.carousel-inner img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Media Queries for responsiveness */
@media (min-width: 768px) {
  .city-assets {
    flex-direction: row;
  }

  .city-images, .city-video {
    height: auto;
  }
}
















.city-overview {
  padding: 20px 30px;
  border-radius: 10px;
  height: auto; 
  margin: 25px 0px;
  background-color: white;
}

.city-overview-div1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.city-overview-div1 p {
  font-size: 18px;
}

.city-overview-div1 p span {
  font-size: 18px;
  font-weight: bold;
}

.city-overview-div2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: left;
  padding: 0px 10px;
}

.city-overview-div2 div {
  flex: 1 1 45%;
  margin: 10px 0;
}

.city-overview-div2 div h6 {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}

.city-overview-div2 div p {
  font-size: 16px;
}

/* Media Queries for responsiveness */
@media (min-width: 768px) {
  .city-overview-div2 {
    flex-wrap: nowrap;
  }
  
  .city-overview-div2 div {
    flex: 1;
  }
}


.city-description{
  padding: 20px 30px;
  margin: 20px 0px;
  border-radius: 10px;
}
.city-description h5{
  font-size: 20px;
  font-weight: bold;
}
.city-description p{
  font-size: 16px;
}



.site-map{
  padding: 20px 30px;
  margin: 20px 0px;
  border-radius: 10px;
}
.site-map h5{
  font-size: 20px;
  font-weight: bold;
}
.site-map a{
  font-size: 16px;
  color: white;
}
/* SiteButton Styles */
.sitebutton {
	display: inline-block;
	padding: 10px 20px;
	margin: 10px;
	font-size: 16px;
	color: white;
	background-color: #4CAF50;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	cursor: pointer;
}

.sitebutton.view {
	background-color: #0000FF; 
}

.sitebutton.download {
	background-color: #0000FF; 
}

/* Hover Effects */
.sitebutton:hover {
	opacity: 0.9;
}




.feature-list {
    padding: 10px; /* Spacing inside each div */
}

.feature-list ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
}

.feature-list li {
    padding: 10px; /* Spacing inside each list item */
    margin: 5px 0; /* Space between list items */
    border: 1px solid #ffcc99; /* Blue border for each list item */
    border-radius: 10px; /* Rounded corners for each list item */
    background-color: #ffcc99; /* background for each list item */
}
.house-table {
    width: 100%;
    border: 1px solid white;
    border-collapse: collapse; /* For cleaner table borders */
}

.house-table td {
    padding: 5px;
    background-color: #ff9999;
    border: 2px solid white;
    border-radius: 10px;
}

.house-table td:first-child {
    text-align: left; /* Left-align the first column */
    padding: 0px 0px 0px 20px; /* Adjusted for smaller screens */
}

.house-table td:nth-child(2) {
    text-align: center; 
}

.house-table td:nth-child(3) {
    text-align: left;
    padding: 0px 15px; /* Reduced padding for smaller screens */
}

.house-table div {
    padding: 5px 10px;
    background-color: #ac3939;
    color: white;
    border: none;
    border-radius: 5px;
}

/* Mobile Responsive Fix */
@media only screen and (max-width: 600px) {
    .house-table td:first-child {
        padding: 0px 0px 0px 5px; /* Less padding on mobile */
    }
    
    .house-table td:nth-child(3) {
        padding: 0px 10px; /* Reduced padding for mobile */
    }
}

/* Hover Effects */
.house-table td:hover {
    background-color: #d9d9d9; /* Lighter hover effect */
}

/* Fix for button disabled hover effect */
.house-table button:hover {
    background-color: #0056b3;
    text-decoration: none;
    pointer-events: none;
    opacity: 0.3;
}

.house-table button[disabled] {
    pointer-events: none;
    opacity: 0.3;
}


 
 

.city-address {
  padding: 20px 30px;
  margin: 20px 0px;
  border-radius: 10px;
  background-color: white;
}

.city-address-div1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.city-address-div1 h5 {
  font-size: 20px;
  font-weight: bold;
}

.city-address-div1 button {
  padding: 5px 10px;
  background-color: #3498DB;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.city-address-div2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0;
}

.city-address-div2 button {
  padding: 5px 10px;
  background-color: #3498DB;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.city-address-div2-div1, .city-address-div2-div2 {
  width: 100%;
  margin-bottom: 20px;
}

.city-address-div2-div2 div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.city-address-div2-div1 h6, .city-address-div2-div2 h6 {
  font-size: 18px;
  font-weight: bold;
}

.city-address-div2-div1 p, .city-address-div2-div2 p {
  font-size: 16px;
}

.city-address-map {
  width: 100%;
  height: 60vh;
  border: none;
  border-radius: 10px;
}

.city-address-div1 iframe {
  width: 70%;
  height: 30vh; /* Set a reasonable height for smaller screens */
}

/* Media Queries for responsiveness */
@media (min-width: 768px) {
  .city-address-div2 {
    flex-wrap: nowrap;
  }

  .city-address-div2-div1 {
    width: 60%;
  }

  .city-address-div2-div2 {
    width: 35%;
    display: flex;
    flex-wrap: wrap;
  }

  .city-address-div2-div2 div {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .city-address-div2-div1 {
    width: 65%;
  }

  .city-address-div2-div2 {
    width: 30%;
  }
}




.city-details {
  padding: 20px 30px;
  margin: 20px 0px;
  border-radius: 10px;
  background-color: white;
}

.city-details h6 {
  font-size: 20px;
  font-weight: bold;
}

.city-details-div1 {
  border: 1px solid #2874A6;
  margin: 20px 0px;
  padding: 15px;
  border-radius: 10px;
  background-color: #D6EAF8;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.city-details-div1 div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.city-details-div1 div h6 {
  font-size: 18px;
}

.city-details-div1 div p {
  font-size: 16px;
}

.city-details-div1 div:not(:last-child) {
  border-right: 1px solid #2874A6;
  padding-right: 10px;
  margin-right: 10px;
}

/* Media Queries for responsiveness */
@media (min-width: 768px) {
  .city-details-div1 {
    flex-direction: row;
  }

  .city-details-div1 div {
    width: 45%;
  }
}

@media (min-width: 1024px) {
  .city-details-div1 div {
    width: 30%;
  }
}


.house-details {
  padding: 20px 30px;
  margin: 20px 0px;
  border-radius: 10px;
  background-color: white;
}

.house-details h6 {
  font-size: 20px;
  font-weight: bold;
}

.house-details-div1 {
  border: 1px solid #d9ffb3;
  margin: 0px 0px;
  padding: 15px;
  border-radius: 10px;
  background-color: #d9ffb3;
}

.house-details-div1 div {
  width: 100%;
  padding: 0px 0;
}

.house-details-div1 div span {
  font-size: 18px;
  font-weight: bold;
}

.house-details-div1 div p {
  font-size: 16px;
}


.city-features {
  padding: 20px 30px;
  margin: 20px 0px;
  border-radius: 10px;
  background-color: white;
}

.city-features h6 {
  font-size: 20px;
  font-weight: bold;
}

.city-features-div1 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: auto; /* Remove fixed height */
}

.city-features-div1 p i {
  margin: 0px 4px;
}

.city-features-div1 p {
  margin: 0;
  padding: 13px 0px;
}

/* Media Queries for responsiveness */
@media (min-width: 768px) {
  .city-features-div1 {
    flex-direction: row;
  }

  .city-features-div1 p {
    width: 45%; /* Adjust width for better layout on larger screens */
  }
}

@media (min-width: 1024px) {
  .city-features-div1 p {
    width: 30%;
  }
}



.city-video {
  border-radius: 10px;
  padding: 20px 30px;
  margin: 20px 0px;
  background-color: white;
}

.city-video h6 {
  font-size: 20px;
  font-weight: bold;
}

.city-video iframe {
  width: 100%;
  height: 50vh; /* Set a reasonable height for smaller screens */
}

/* Media Queries for responsiveness */
@media (min-width: 768px) {
  .city-video iframe {
    height: 50vh; /* Adjust height for medium screens */
  }
}

@media (min-width: 1024px) {
  .city-video iframe {
    height: 70vh; /* Adjust height for larger screens */
  }
}


.house-slideshow-container {
  position: relative;
  max-width: 100%;
  height: 400px; /* Adjust height based on your images */
  margin: auto;
}

/* Image Styling */
.house-slideshow-container img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* Ensure the image covers the whole area */
}

.vertical-line {
  border-left: 2px solid black;  /* The thickness and color of the line */
  height: 200px;                 /* The height of the line */
  margin-left: 20px;             /* Optional: spacing from the left */
}