@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Gabarito", sans-serif;
    /* width: 100%; */
    /* overflow-x: hidden; */
    
}
.bg-color {
  background-color: var(--bs-fifth-color);
}
.svg-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1; /* Place it behind other elements */
  max-width: 100%;
  /* overflow: hidden; */
}
@keyframes gradient-shift {
  0% {
    stop-color: #38A3A5;
  }
  25% {
    stop-color: #80ED99;
  }
  50% {
    stop-color: #57CC99;
  }
  75% {
    stop-color: #C7F9CC;
  }
  100% {
    stop-color: #4DB8FF;
  }
}

/* Apply the animation to each gradient stop */
stop:nth-child(1) {
  animation: gradient-shift 12s infinite alternate;
}
stop:nth-child(2) {
  animation: gradient-shift 12s infinite alternate 3s;
}
stop:nth-child(3) {
  animation: gradient-shift 12s infinite alternate 6s;
}
stop:nth-child(4) {
  animation: gradient-shift 12s infinite alternate 9s;
}
stop:nth-child(5) {
  animation: gradient-shift 12s infinite alternate 12s;
}

/* .custom-shape-divider-bottom-1732607836 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1732607836 svg {
  position: relative;
  display: block;
  width: calc(114% + 1.3px);
  height: 380px;
}

.custom-shape-divider-bottom-1732607836 .shape-fill {
  fill: #FFFFFF;
} */
/* .background-svg { */
    /* position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; 
    z-index: -1; 
    overflow: hidden; */
    /* position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    /* z-index: -1; Behind the content */
    /* overflow: hidden; */
  /* } */
  /* .svg-container { */
    /* position: absolute; */
    /* width: auto; Adjust based on SVG size */
    /* height: auto; */
    /* animation: move-sequential 20s ease infinite; Smooth loop */
  /* } */

  /* Animation for sequential SVG movement */
  /* @keyframes move-sequential {
    0% {
      transform: translate(-20%, -20%);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    50% {
      transform: translate(50vw, 50vh) scale(1.2); Moves to center
      opacity: 1;
    }
    90% {
      opacity: 0;
    }
    100% {
      transform: translate(120%, 120%) scale(1.5);
    }
  } */

  /* Positioning and delay for sequence */
  /* .svg-1 {
    animation-delay: 0s;
  }

  .svg-2 {
    animation-delay: 4s;
  }

  .svg-3 {
    animation-delay: 8s;
  }

  .svg-4 {
    animation-delay: 12s;
  }

  .svg-5 {
    animation-delay: 16s;
  } */

/* body {
    background-image: url(./img/Property\ 1=Rectangle\ 1.svg);
} */

:root {
    --bs-primary-color: #38a3a5;
    --bs-second-color: #80ed99;
    --bs-third-color: #57cc99;
    --bs-forth-color: #c7f9cc;
    --bs-fifth-color: #22577a;

}


#brandsec{
  overflow: hidden;
}

h1,h2,h3,h4,h5 {
    font-family: "Gabarito", sans-serif;
    font-weight: 600;
    color: var(--bs-fifth-color);
}
.mid-fon {
  font-family: "Gabarito", sans-serif;
    font-weight: 600;
}

p {
    font-family: "Gabarito", sans-serif;
    font-weight: 400;
    font-size: 26px;
}
/* headling special graphic */
#heading {
    /* background: linear-gradient(60deg, #f53c3c 0%, #46e964 50%, #494cf8 100%); */
    background: linear-gradient(300deg, #27516D, #1A4B4C, #102431);
  background-size: 200% 200%; /* To allow the gradient animation to move smoothly */
  animation: gradientMove 5s infinite ease-in-out; /* 10 seconds for a slow, smooth loop */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Makes the text take the gradient */
  /* font-size: 5rem; */
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* heading special section ends */



/* hero section start */


.bg-main {
    height: 80vh;
    position: relative;
    /* margin-top: 2rem; */
}


.hero-img-section {
    max-width: 100%;
    height: 520px;
    width: 340px;
    border-radius: 1rem;
}


.hero-section .container {
    /* margin-top: 2rem; */
    display:  grid;
    place-content: center;
    height: inherit;
    overflow: hidden;
    position: relative;
}

@media (max-width: 767px) {
  .hero-img-section {
      width: 250px;  /* Adjust image width for mobile */
      height: auto;  /* Let height adjust automatically to preserve aspect ratio */
      margin: 0 auto;  /* Center the image horizontally */
  }
}

.navbar-cust-btn {
  background-color: #dcdcdc;
  border: none;
  color: black;
  padding: 4px;
  width: 100px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 10px;
  cursor: pointer;
  border-radius: 30px; /* Rounded pills */
}

.navbar-cust-btn:hover {
  background-color: var(--bs-fifth-color);
  color: white !important;
}

/* Adjust styles for mobile view */
@media (max-width: 720px) {
  /* Remove rounded pill for mobile */
  .navbar-cust-btn {
    border-radius: 0;
    width: 100%; /* Full-width for dropdown items */
    height: auto; /* Adjust height dynamically */
    padding: 10px; /* Increase padding for better touch support */
    text-align: center; /* Align text to the left */
    background-color: transparent;
  }

  /* Align menu items to the right */
  .navbar-collapse {
    text-align: right;
  }

  /* Ensure menu items are properly spaced */
  .navbar-nav {
    margin-right: 0;
    margin-left: auto;
  }

  /* Adjust spacing for the mobile navbar */
  .navbar-toggler {
    margin-left: auto; /* Align the button to the right */
  }
}


.navbar {
  transition: background-color 0.5s ease-in-out, filter 0.5s ease-in-out;
    /* padding-top: 1rem; Adjust top padding
    /* padding-bottom: 1rem; Adjust bottom padding */
    /* height: 80px; Optional: Set a fixed height */
    
  }

/* .custom-shape-divider-top-1731870511 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1731870511 svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 500px;
    transform: rotateY(180deg);
}

.custom-shape-divider-top-1731870511 .shape-fill {
    fill: #DA3737;
} */


.zoomed-image {
  width: 21rem;
  height: 32rem;
  /* transform: scale(1.5) translate(0, 0); */
  object-fit: cover;
  filter: grayscale(100%);
  transform: scale(1);
  transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
  border-radius: 1rem;
}

.zoomed-image:hover {
  transform: scale(1.1) translate(0, 0);
  filter: grayscale(0%);
  border-radius: 1rem;
}


.glass-contain {
  background: rgba( 155, 155, 155, 0.35 );
box-shadow: 0 0px 5px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 6px );
-webkit-backdrop-filter: blur( 6px );
border-radius: 5px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.counter {
  /* animation: counter 2s forwards ease-in-out; */
  counter-reset: num var(--num);
}
.counter::after {
  content: counter(num);
}

.counter.animate {
  animation: counter 2s 1s forwards ease-in-out; /* Trigger animation */
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: var(--target-num);
  }
}


.no-inherit {
  all: unset; /* Resets almost all inherited and non-inherited properties */
  display: block; /* Add display again if required */
}

.brand-card {
  /* border-radius: 5px; */
  /* border: 1px solid rgba( 255, 255, 255, 0.18 ); */
  background: rgba(220, 220, 220);
  transition: box-shadow 0.5s ease-in-out, filter 0.5s ease-in-out;
}

.card {
  border: none;
}
.brand-card:hover {
  box-shadow: 0px 0px 20px 0px #102431;
}


.solid-navbar {
  background-color: rgba(34, 87, 122,0.5);;
}


.rect {
  position: absolute;
  /* position: sticky; */
  /* position: relative; */
  background-color: var(--bs-primary-color); /* Example color, change as needed */
  z-index: -1;
  width: 100px;  /* Adjust width as needed */
  height: 40rem;
}

.left-rect {
  left: 0;
  top: 0;
}

.right-rect {
  right: 0;
  top: 200px; 
}

@media (max-width: 768px) { /* Adjust breakpoint as needed */
  .rect {
    height: 60rem; /* Increase height for mobile view */
  }
}

.brands-section {
  position: relative;
  /* overflow: visible; */
  /* height: 1000px; */
  /* display: flex; */
  /* align-items: start; */
}

.brand-content { /* added so that brand content don't overlap the background rects */
  position: relative; /* Ensures content stays above rectangles */
}


.fixed-rect {
  position: fixed;
  top: 0; /* Adjust as needed */
  /* other styles for fixed position */
  transition: top 0.3s ease; /* Add a smooth transition  */
}

/* Apply your exiting css for rectangle positioning to the stuck-rect class */

.product-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
  height: 100%; /* Ensure consistent card height */
}

.product-card img {
  width: 100%; /* Full width */
  height: 100%; /* Full height for consistent scaling */
  object-fit: cover; /* Prevent distortion */
  transition: transform 0.5s ease, filter 0.5s ease;
}

.product-card:hover {
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.product-card:hover img {
  transform: scale(1.1); /* Slightly larger image on hover */
  filter: brightness(0.5);
}

.card-img-overlay {
  display: flex;
  flex-direction: column; /* Ensure text stacks vertically */
  justify-content: flex-end; /* Align content to the bottom */
  height: 100%; /* Full height of the card */
  padding: 10px; /* Add some padding for better alignment */
}

.text-content {
  text-align: center;
}

.text-content p,
.text-content h5 {
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove padding for consistency */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.text-content h5 {
  opacity: 0; /* Hidden initially */
  transform: translateY(20px); /* Slightly below its default position */
}

.text-content p {
  transform: translateY(20px); /* Slide text up on hover */
}

.product-card:hover .text-content h5,
.product-card:hover .text-content p {
  opacity: 1; /* Text fully visible */
  transform: translateY(0); /* Reset position */
}

.product-card {
  margin-bottom: 0; /* Remove any unwanted margins below cards */
}



#special-btn {
  background-color: var(--bs-fifth-color);
  border: none;
  /* padding: 4px; */
  width: 10rem;
  /* height: 30px; */
  /* text-align: center; */
  text-decoration: none;
  display: inline-block;
  /* margin: 0px 10px; */
  /* cursor: pointer; */
  border-radius: 30px;
  /* opacity: 0; */
}


.custom-btn {
  background-color: var(--bs-fifth-color);
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-btn:hover {
  background-color: #57cc99; /* Adjust hover color */
  color: white;
}

.backcol {
  background-color: rgba( 155, 155, 155, 0.35 );
}

.review-logo {
  width: 120px; /* Adjust as needed */
  height: 120px;
  object-fit: cover;
  border: 5px solid var(--bs-primary-color);
  padding: 5px;
}


.stars {
  color: #FFD700; /* Gold color for stars */
  font-size: 1.5rem;
  margin-top: 10px;
}

.carousel-inner p {
  font-size: 1.2rem;
  font-style: italic;
  color: #333;
}

.contact-us-section {
  background-color: #f9f9f9; /* Light background for contrast */
  padding: 50px 0;
}

.contact-us-section h2 {
  font-family: 'Gabarito', sans-serif;
  color: var(--bs-primary-color);
  font-size: 2rem;
}

.form-label {
  font-weight: bold;
}

.map-container {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.footer-section {
  background-color: var(--bs-fifth-color);
  color: #ffffff; /* White text */
  font-size: 0.875rem; /* Reduce the default font size to smaller text */
}

.footer-logo {
  width: 75px; /* Adjusted size for better fit */
  height: 50px;
}

.footer-section h5 {
  font-size: 1rem; /* Smaller heading size */
  font-weight: bold;
  color: #80ed99; /* Highlighted text color */
  margin-bottom: 0.5rem; /* Reduce spacing below the heading */
}

.footer-section p {
  font-size: 0.875rem; /* Smaller paragraph size */
  margin-bottom: 0.4rem; /* Tighten spacing between lines */
}

.social-links a {
  font-size: 1.2rem; /* Slightly smaller icons */
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #80ed99; /* Green on hover */
}

#Reviesec .card {
  height: 250px; /* Adjust to your desired height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden; /* Prevent content overflow */
}

#Reviesec .card p {
  margin-bottom: 10px; /* Adjust spacing for the text */
}


.custom-text {
  font-size: 1.5rem; /* Default font size */
}

@media (max-width: 767.98px) {
  .custom-text {
    font-size: 1rem; /* Smaller font size for screens smaller than md */
  }
}

@media (max-width: 767.98px) {
  .border-md {
    border: none !important;
  }
}