/* css for the section 1 */

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

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
}

.hero-section {
    position: relative;
 
    background-color: rgba(59, 144, 149, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    
}

.navbar .logo {
    display: flex;
    align-items: center;
}

.navbar .logo img {
    margin-right: 10px;
    height: 60px;
}

/* Style for the middle image */
.navbar .middle-image {
    position: absolute;
    left: 43%;
    transform: translateX(-50%);
    width: 57px;
    height: 125px;
    top: -34px;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 65px;
}

.navbar ul li a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
    font-family: "Inter", sans-serif;
}

/* Hide the toggle button on larger screens */
.menu-toggle {
    display: none;
}

/* Gallery Content inside the Hero Section */
.gallery-content {
    display: flex;
    justify-content: space-between;
    padding: 77px 0px 20px 80px;
    width: 100%;
    margin-top: 80px;
    height: 608px;
    overflow-x: hidden;
}

/* Left Section with two images */
.left-section {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 18%;
}

.left-section img {
width: 100%;
height: 48%; /* Adjust the height for spacing */
object-fit: cover;
    max-width: 282px;
}

/* Middle Section with text content */
.content-container {
width: 30%;
padding: 20px;
background-color: #5da3a6;

color: white;
display: flex;
flex-direction: column;

/* Ensure the content container stretches to match the height of the right-section */
min-height: 100%; /* This makes it flexible in height to match its siblings */
}
.content-container h2{
    font-size: 62px;
    font-family: "Lovers Quarrel", cursive;
    font-weight: 100;
}
.content-container p{
   
        font-family: Book Antiqua, Palatino, Palatino Linotype, Palatino LT STD, Georgia, serif;
        font-size: 19px;
        margin-top: 24px;
}




/* Right Section with large image */
.right-section {
width: 43%;
display: flex;
flex-direction: column;
justify-content: center;
/* height: 100%; */
position: relative; /* Add this to enable absolute positioning of child elements */
}

/* Style for the large image */
.large-image {
width: 100%;
height: auto;
max-height: 100%;
}



.right-section img {
    width: 100%;
    height: auto;
    max-height: 100%;
    max-height: 514px;
    height: 100%;
}

/* Responsive Styles */
@media (max-width: 2000px){
    .right-section .corner-image {
        position: absolute;
        right: -34px;
        bottom: -16px;
        width: 118px;
        height: auto;
        object-fit: cover;
        margin-left: 0;
    } 
} 
@media (max-width: 1240px) {
    .content-container p {
        margin: 0;
        font-size: 16px;
    }
    /* .corner-image{
        display: none;
        } */
    
}
@media (max-width: 1240px){
    .right-section .corner-image {
        position: absolute;
        right: -18px;
        bottom: 46px;
        width: 79px;
        height: auto;
        object-fit: cover;
        margin-left: 0;
    } 
}
@media (max-width: 992px) {
.gallery-content {
    flex-direction: column-reverse;
align-items: center;
height: 124vh;
padding: 39px;
}

.left-section, .content-container, .right-section {
width: 100%;
margin-bottom: 20px;
flex-direction: row;
gap: 20px;
}
.left-section {
    gap: 3px;
    width: 100%;
    max-width: 620px;
}

.left-section img {
height: 200px;
flex-direction: row;

}

.content-container {
    max-height: 497px;
    text-align: center;
    flex-direction: column;
    height: auto;
}

.content-container p {
    margin: 0;
    font-size: 20px;
}

.right-section img {
/* Adjust if needed */
}
/* .corner-image {
   display: none;
} */

}
@media (max-width: 390px) {
    .content-container p {
        margin: 0;
        /* font-size: 22px; */
    }
}
@media (max-width: 992px) {
    .right-section .corner-image {
        position: absolute;
        right: 0;
        bottom: -15px;
        width: 50px;
        height: auto;
        object-fit: cover;
        margin-left: 0;
    }  
}

@media (max-width: 484px){

.left-section img {
width: 165px;

}
.corner-image{
bottom: 48px;
}
.content-container p {
    margin: 0;
    font-size: 20px;
}

.content-container {
    min-height: 656px;
    text-align: center;
    flex-direction: column;
    height: auto;
}


}
@media (max-width: 380px){

.left-section img {
width: 135px;

}
.content-container p {
    margin: 0;
    font-size: 17px;
}

.corner-image{
    height: 50px;
}

.content-container {
    min-height: 559px;
    text-align: center;
    flex-direction: column;
    height: auto;
}



}

@media (max-width: 576px) {
    .menu-toggle {
        display: block;
        background-color: transparent;
        border: none;
        color: #000;
        font-size: 24px;
        cursor: pointer;
    }

    .navbar ul {
        flex-direction: column;
        align-items: center;
        background: #fff;
        position: fixed;
        top: -100%; /* Hidden above the screen by default */
        width: 100%;
        gap: 50px;
        padding: 20px;
        transition: top 0.3s ease; /* Transition the top property for sliding effect */
        z-index: 1000;
        left: 0;
    }

    .navbar ul.show-menu {
        top: 0; /* Slide the menu down from the top */
    }

    .navbar ul li a {
        color: #000;
        font-size: 17px;
        font-weight: 700;
    }

    .content {
        left: 50%;
        text-align: center;
        margin-top: 67px;
    }

    .content h1 {
        font-size: 32px;
    }

    .content h2 {
        font-size: 48px;
    }

    .content .btn {
        font-size: 14px;
        padding: 7px 14px;
    }
}
.left-corner-image {
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 290px;
    height: auto;
    object-fit: cover;
    margin-right: 20px;
}
.corner-image {
   
    position: absolute;
    bottom: -12px;
    right: -37px;
    width: 86px;
    height: auto;
    object-fit: cover;
    margin-left: 20px;
}
@media (max-width: 650px){
    .navbar ul {
        list-style: none;
        display: flex;
        /* gap: 10px; */

    }
}
@media (max-width: 576px) {
    .right-section .corner-image {
        position: absolute;
        right: 0;
        bottom: -15px;
        width: 50px;
        height: auto;
        object-fit: cover;
        margin-left: 0;
    }

    /* .right-section {
        position: relative;
    } */
}









/* 
css for the section 2 */
.video-container {
    position: relative;
    /* width: 100%; */
    overflow: hidden;
    margin: 0px 50px;
    /* height: 100%; */
}

.video-container img, 
.video-container video {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #00a99d;
}

.play-button:focus {
    outline: none;
}

.video-container video {
    display: none;
}

@media (min-width: 768px) {
    /* For tablets and larger devices, the height can be increased */
    .video-container img, 
    .video-container video {
        /* height: 100%;
        max-height: 500px; */
    }
}

@media (max-width: 767px) {
    /* For mobile devices, ensure the height is dynamic and maintains the aspect ratio */
    .video-container img, 
    .video-container video {
         height: auto; 
    }

    .play-button {
        width: 60px;
        height: 60px;
        font-size: 16px;
    }
   
}
.tag h2{
    text-align: center;
    margin: 20px auto;
    font-size: 65px;
    font-weight: 100;
    font-family: "Lovers Quarrel", cursive;
}
@media (max-width: 480px){
    .tag h2{
        font-size: 33px;
    }
    .video-container  {
        margin: 11px;
    }
}










/* css for the section 3 */
.image-container {
    display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1608px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
}

.image-item {
    position: relative;
    flex: 1 1 25%;
    padding: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Set a square aspect ratio */
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container without distortion */
    display: block;
}

/* First hover effect */
.hover-effect-1 {
    position: absolute;
top: 10px;
left: 11px;
width: 48%;
height: 46.8%;
background-color: rgba(59, 144, 149, 0.57);
opacity: 0;
transition: opacity 0.3s ease;
}

/* Second hover effect */
.hover-effect-2 {
    position: absolute;
top: 26%;
left: 74%;
width: 39%;
height: 39%;
background-color: rgba(59, 144, 149, 0.57);
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.3s ease;
transition-delay: 0.3s;
}

/* Third hover effect */
.hover-effect-3 {
    position: absolute;
    bottom: 110px;
left: 26.3%;
width: 40%;
height: 40.1%;
background-color: rgba(59, 144, 149, 0.57);
opacity: 0;
transform: translate(-50%, 50%);
transition: opacity 0.3s ease, transform 0.3s ease;
transition-delay: 0.6s;

}

/* Fourth hover effect */
.hover-effect-4 {
    position: absolute;
    bottom: 27px;
right: 26px;
width: 39.5%;
height: 40.2%;
background-color: rgba(59, 144, 149, 0.57);
opacity: 0;
transition: opacity 0.3s ease;
transition-delay: 0.9s;
}

/* Content to show after hover effects */
.hover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 19px;
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: 1.2s;
    text-align: center;
}

.image-item:hover .hover-effect-1 {
    opacity: 1;
}

.image-item:hover .hover-effect-2 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

.image-item:hover .hover-effect-3 {
    opacity: 1;
    transform: translate(-50%, 50%) scale(1.2);
}

.image-item:hover .hover-effect-4 {
    opacity: 1;
    transform: scale(1.2);
}

.image-item:hover .hover-content {
    opacity: 1;
}

@media (max-width: 768px) {
    .image-item {
        flex: 1 1 50%;
    }
}

@media (max-width: 480px) {
    .image-item {
        flex: 1 1 50%;
    }
}



/* css for the section 4 */
.image-section, .image-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    /* padding: 4px; */
}

.main-image {
    height: 507px;
    object-fit: cover;
    display: block;
}

.property-image,
.rectangle-image {
    width: 89%;
}

.overlay-images {
    position: absolute;
    top: 20px;
    width: 98%;
    height: 92.5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
    transition-delay: 0.50s;
}

.overlay-images img {
    width: 43%;
    height: 108.1%;
    object-fit: contain;
}

/* Hide overlay images on hover */
.image-section:hover .overlay-images {
    opacity: 0;
}

.cortoon {
    display: flex;
    flex-direction: row; /* Default direction for larger screens */
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
}

/* Hide corton images on screens smaller than laptops (1024px) */
@media (max-width: 1024px) {
    .overlay-images {
        display: none;
    }
}

/* Responsive Flex-direction and order for smaller screens */
@media (max-width: 768px) {
    .cortoon {
        flex-direction: column; /* Stack images vertically */
    }
    .property-image, .rectangle-image {
        width: 100%;
    }
    .rectangle-image {
        order: 1; /* Place rectangle-image on top */
        padding: 18px;
    }
    .property-image {
        order: 2; /* Place property-image below */
        padding: 18px;
    }
}
@media (max-width: 1340px){
    .overlay-images {
        display: none;
    }
}



/* css for the footer page */

.footer {
    background-color: #111;
    padding: 20px 0;
    text-align: center;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    list-style: none;
  }
  
  .container-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Logo styles */
  .logo-footer img {
    max-width: 60px; /* Adjust the size as needed */
    margin-bottom: 15px;
  }
  
  /* Navigation styles */
  .nav ul {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    justify-content: center;
  }
  ul, li {
            
    list-style: none;
    font-family: Book Antiqua, Palatino, Palatino Linotype, Palatino LT STD, Georgia, serif;;
  }
  .nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    padding: 40px;
  }
  
  /* Social media icons */
  .social-icons-footer {
    display: flex;
    justify-content: center;
    gap: 52px;
    padding-top: 38px;
  }
  
  .social-icons a img {
    width: 30px; /* Adjust the size as needed */
  }
  
  /* Media Queries for Responsiveness */
  @media (max-width: 768px) {
    .footer {
        height: auto; /* Auto height for flexibility */
        padding: 30px 0; /* Adjust padding for smaller screens */
    }
  
    .nav ul {
        gap: 10px; /* Reduce gap for smaller screens */
        padding: 0; /* Remove additional padding */
    }
  
    .nav ul li a {
        font-size: 14px; /* Smaller font size for smaller screens */
    }
  
    .social-icons {
        gap: 10px; /* Reduce gap between icons */
    }
  
    .social-icons a img {
        width: 18px; /* Adjust icon size */
    }
  }
  
  @media (max-width: 480px) {
    .logo img {
        max-width: 50px; /* Smaller logo size for very small screens */
    }
  
    .nav ul {
        flex-direction: column; /* Stack links vertically */
        gap: 15px; /* Add some space between links */
    }
  
    .nav ul li a {
        padding: 8px; /* Smaller padding for mobile */
    }
  
    .social-icons {
        gap: 8px; /* Smaller gap for icons */
        margin-top: 20px; /* Add margin for spacing */
    }
  
    .social-icons a img {
        width: 16px; /* Even smaller icon size */
    }
  }