* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    line-height: 1.6;
}

html {
    scroll-behavior: smooth; /* Enables smooth scrolling across the entire site */
}
html, body {
    overflow-x: hidden; /* Prevents horizontal scrolling */
    width: 100%; /* Ensures content does not extend beyond the screen */
}


/* Default Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: transparent; /* Transparent by default */
    color: white;
    width: 100%;
    z-index: 1000; /* Ensure header stays on top */
    position: fixed; /* Fix header at the top */
    top: 0;
    left: 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    
}

/* Logo */
header .logo {
    font-size: 24px;
    font-weight: bold;
}

/* Navigation */
header nav ul {
    list-style: none;
    display: flex;
    gap: 50px;
    margin: 0;
    padding: 0;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

header nav ul li a:hover {
    color: #f0a500;
}


/* Solid Header When Scrolled */
header.scrolled {
    background-color: #333 !important; /* Force solid background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Add shadow */
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none; /* Hidden by default */
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
    transition: 0.3s;
}
/* 🔹 Logo Container */
.logo {
    display: flex;
    align-items: center; /* Align logo and text in one line */
    gap: 10px; /* Space between logo and text */
}

/* 🔹 Logo Image */
.logo-img {
    width: 43px; /* Adjust logo size */
    height: auto;
}
.logo-link {
    text-decoration: none; /* Removes the default underline */
    color: inherit; /* Keeps the text color unchanged */
    display: inline-block; /* Ensures it behaves like a block element */
}



/* Mobile Menu */
@media (max-width: 768px) {
    header .logo {
        font-size: 16px;
        font-weight: bold;
        vertical-align: center;
    }
    header{
        padding:6px 20px 10px;
    }


    /* 🔹 Sidebar Navigation */
    nav {
        position: fixed;
        top: 0;
        right: -250px; /* Sidebar starts off-screen */
        height: 100vh;
        width: 250px; /* Compact width */
        background: rgba(15, 15, 15, 0.98); /* Dark, slightly transparent */
        box-shadow: -2px 0 8px rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 70px; /* Space for close button */
        transition: right 0.3s ease-in-out; /* Smooth slide-in animation */
        z-index: 1000;
    }

    /* 🔹 Show sidebar when 'show' class is added */
    nav.show {
        right: 0; /* Slide into view */
    }

    /* 🔹 Sidebar Menu Items */
    nav ul {
        list-style: none;
        padding: 0;
        width: 100%;
        text-align: center;
    }

    nav ul li {
        margin: -25px 0;
        opacity: 0;
        transform: translateX(20px);
        animation: fadeInRight 0.4s ease-in-out forwards;
    }

    /* 🔹 Staggered Animations for Links */
    nav ul li:nth-child(1) { animation-delay: 0.1s; }
    nav ul li:nth-child(2) { animation-delay: 0.2s; }
    nav ul li:nth-child(3) { animation-delay: 0.3s; }
    nav ul li:nth-child(4) { animation-delay: 0.4s; }
    nav ul li:nth-child(5) { animation-delay: 0.5s; }
    nav ul li:nth-child(6) { animation-delay: 0.6s; }
    nav ul li:nth-child(7) { animation-delay: 0.7s; }
    nav ul li:nth-child(8) { animation-delay: 0.8s; }

    /* 🔹 Navigation Links */
    nav ul li a {
        color: white;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        transition: color 0.3s ease-in-out;
        padding: 10px 0;
        display: block;
    }

    nav ul li a:hover {
        color: #f0a500; /* Golden highlight */
    }

    /* 🔹 Mobile Menu Toggle Button */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 15px;
        z-index: 1100;
    }

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
        transition: 0.3s;
    }

    /* 🔹 Animate Toggle Button into an "X" */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* 🔹 Close Button Inside Sidebar */
    .close-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 26px;
        color: white;
        cursor: pointer;
        transition: color 0.3s ease-in-out;
    }

    .close-menu:hover {
        color: #f0a500;
    }

        /* 🔹 Mobile Buttons (WhatsApp & Contact Us) */
    .mobile-buttons {
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Space between buttons */
        margin-top: 50px; /* Space below menu */
    }

    .mobile-buttons a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        color: rgb(48, 48, 48);
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        padding: 8px;
        border-radius: 5px;
        transition: background 0.3s ease-in-out;
    }

    /* 🔹 Contact Us Button (Different Color) */
    .contact-btn {
        background: #004997; /* Blue for Contact Us */
    }

    .mobile-buttons a:hover {
        opacity: 0.8; /* Slight transparency on hover */
    }

    /* 🔹 Button Icons */
    .mobile-buttons a img {
        width: 24px; /* Small icon */
        height: 24px;
        margin-right: 10px; /* Space between icon and text */
    }


    /* 🔹 Fade-in Effect for Menu Items */
    @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translateX(20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
}



/* Desktop-Specific Adjustments */
@media (min-width: 769px) {
    header {
        background-color: transparent; /* Transparent by default on desktop */
        box-shadow: none; /* No shadow initially */
        
    }
    

    /* Prevent content from hiding under the fixed header */
    body {
        padding-top: 80px; /* Add padding equal to header height */
    }
    /* 🔹 Hide Buttons on Desktop */
.mobile-buttons {
    display: none;
}
}


h2 {
    margin-bottom: 20px;
    font-size: 36px;
}

.responsive {
    width: 100%;
    height: auto;
}

.project-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.project-item {
    margin: 15px;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.project-item:hover {
    transform: scale(1.05);
}



/* unusual */
form {
    max-width: 500px;
    margin: 0 auto;
}

form label {
    display: block;
    margin-bottom: 5px;
}

form input, form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    width: 100%;
    padding: 10px;
    background: #f0a500;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background: #d48e00;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .project-list {
        flex-direction: column;
    }

    header nav ul {
        flex-direction: column;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}




/* Extend the previous styles */
.property-search {
    background: #005fbe;
    padding: 40px;
    text-align: center;
}

.property-search h2 {
    margin-bottom: 20px;
    font-size: 36px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.search-form input, .search-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 250px;
    max-width: 100%;
}


/* Global */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}








/* Hero Section */
.hero {
    background: url('img/img4.jpg') no-repeat center center/cover;
    margin-bottom: 0px;
    height: 102vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to the left */
    justify-content: center;
    color: white;
    padding: 100px 20px;
    text-align: left;
    position: relative;
    overflow: hidden; /* Prevent overflow issues during animation */
}
.hero-bail {
    background: url('img/Beil parao/5.jpg') no-repeat center center/cover;
    margin-bottom: 0px;
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to the left */
    justify-content: center;
    color: white;
    padding: 100px 20px;
    text-align: left;
    position: relative;
    overflow: hidden; /* Prevent overflow issues during animation */
}

.hero-aboutus {
    background: url('img/25.png') no-repeat center center/cover;
    margin-bottom: 0px;
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to the left */
    justify-content: center;
    color: white;
    padding: 100px 20px;
    text-align: left;
    position: relative;
    overflow: hidden; /* Prevent overflow issues during animation */
}

/* Common Animation Properties for Hero Elements */
.hero h1,
.hero p,
.hero .btn {
    position: absolute; /* Absolute positioning for animation */
    left: -100%; /* Start off-screen */
    opacity: 0; /* Start hidden */
    animation-duration: 1.5s; /* Common animation duration */
    animation-fill-mode: forwards; /* Retain final position after animation */
}

/* Heading Animation and Style */
.hero h1 {
    font-size: 48px;
    top: 130px; /* Position the heading */
    animation-name: slideInHeading; /* Apply heading animation */
    animation-delay: 0.2s; /* Delayed appearance for heading */
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6); /* Glowing effect */
}

/* Paragraph Animation and Style */
.hero p {
    font-size: 22px;
    top: 200px; /* Position below heading */
    animation-name: slideInParagraph; /* Apply paragraph animation */
    animation-delay: 0.4s; /* Delayed appearance for paragraph */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Glowing effect */
}

/* Button Animation and Style */
.hero .btn {
    top: 250px; /* Position below paragraph */
    animation-name: slideInButton; /* Apply button animation */
    animation-delay: 0.6s; /* Delayed appearance for button */
    background-color: white;
    color: #333;
    padding: 10px 20px;
    border: 2px solid white;
    border-radius: 50px; /* Rounded corners */
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

/* Button Hover Effect */
.hero .btn:hover {
    background-color: #333; /* Dark background on hover */
    color: white; /* Invert text color on hover */
    border: 2px solid #333; /* Match button background */
    box-shadow: 0 0 20px rgba(255, 255, 255, 1); /* Enhanced glow */
    transform: translateY(-2px); /* Slight lift */
}

/* Slide-In Animations */
@keyframes slideInHeading {
    0% {
        left: -100%; /* Start off-screen */
        opacity: 0; /* Hidden */
    }
    100% {
        left: 20px; /* Final position */
        opacity: 1; /* Fully visible */
    }
}

@keyframes slideInParagraph {
    0% {
        left: -100%; /* Start off-screen */
        opacity: 0; /* Hidden */
    }
    100% {
        left: 20px; /* Final position */
        opacity: 1; /* Fully visible */
    }
}

@keyframes slideInButton {
    0% {
        left: -100%; /* Start off-screen */
        opacity: 0; /* Hidden */
    }
    100% {
        left: 20px; /* Final position */
        opacity: 1; /* Fully visible */
    }
}








/* Banner Content Styling */
.banner-content {
    position: absolute;
    bottom: 35px; /* Align at the bottom of the banner */
    width: 100%;
    text-align: center;
    animation: slideIn 2s ease-in-out; /* Slide in animation for the entire section */
}

.banner-content .title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 2px;
    color: #ffffff; /* Set text color to white */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.7); /* Glowing effect */
    opacity: 0; /* Start invisible */
    transform: translateY(30px); /* Start below final position */
    animation: slideUpFadeIn 1s ease-in-out forwards; /* Apply animation */
    animation-delay: 0.2s; /* Slight delay for appearance */
}

.banner-content .subtext {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Glowing effect */
    opacity: 0; /* Start invisible */
    transform: translateY(30px); /* Start below final position */
    animation: slideUpFadeIn 1s ease-in-out forwards; /* Apply animation */
    animation-delay: 0.4s; /* Slightly later delay than title */
}

/* Animation Keyframes */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px); /* Start from below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Slide to final position */
    }
}


/* Cards Styling */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.card {
    background-color: #fcfcf7; /* Light gray background */
    padding: 20px 20px; /* Increased padding */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 0px 18px 3px rgb(255, 255, 255); /* White glow shadow */
    font-size: 15px;
    font-weight: bold;
    color: #302d2d;
    width: 124px; /* Adjust size */
    height: 124px; /* Adjust height */
    text-align: center;
    position: relative;
    opacity: 0; /* Start hidden */
    animation: slideUpFadeIn 1.2s ease-in-out forwards; /* Slide-up and fade-in animation */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}

.card:hover {
    transform: translateY(-8px)  !important; /* Moves the card upward on hover */
    box-shadow: 0 0px 24px 4px rgb(255, 255, 255); /* Brighter shadow on hover */
}


.card img {
    width: 60px; /* Image size */
    height: auto;
    margin-bottom: 5px; /* Space below the image */
}

/* Sequential Animation Delays for Each Card */
.card:nth-child(1) {
    animation-delay: 0.8s;
}

.card:nth-child(2) {
    animation-delay: 1s;
}

.card:nth-child(3) {
    animation-delay: 1.2s;
}

.card:nth-child(4) {
    animation-delay: 1.4s;
}

.card:nth-child(5) {
    animation-delay: 1.6s;
}

.card:nth-child(6) {
    animation-delay: 1.8s;
}

/* Slide-Up and Fade-In Animation */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(90px); /* Start from below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Final position */
    }
}






@media (max-width: 768px) {

    .cards-container {
        flex-wrap: nowrap; /* Prevents cards from wrapping to the next row */
        justify-content: center; /* Align cards in a row */
        gap: 10px; /* Reduce space between cards */
        padding: 10px; /* Add slight padding for better spacing */
    }

    .card {
        width: 60px; /* Reduce size for mobile */
        height: 60px; /* Maintain aspect ratio */
        font-size: 9px; /* Smaller text size */
        padding: 10px 4px 0px 4px; /* Adjust padding */
        border-radius: 8px; /* Keep rounded corners */
        box-shadow: 0 0px 8px 1px rgb(255, 255, 255); /* Keep glowing effect */
    }

    .card img {
        width: 30px; /* Reduce image size */
        height: auto;
        margin-bottom: -2px; /* Adjust spacing */
    }
    .card:hover {
        transform: translateY(-8px)  !important; /* Moves the card upward on hover */
        box-shadow: 0 0px 12px 2px rgb(255, 255, 255); /* Brighter shadow on hover */
    }

    
    .hero {
        height: 92vh;
    }
    .hero h1 {
        font-size: 25px;
        top: 130px; /* Position the heading */
    }
    
    /* Paragraph Animation and Style */
    .hero p {
        display: none; 
    }
    
    /* Button Animation and Style */
    .hero .btn {
        top: 215px; /* Position below paragraph */
        padding: 4px 20px;
        border-radius: 10px; /* Rounded corners */
        font-size: 14px;
    }

    .banner-content {
        bottom: 20px; /* Adjust position to avoid overlap */
        padding: 0 5px; /* Add padding for better spacing */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content */
        text-align: center;
    }

    .banner-content .title {
        font-size: 22px; /* Reduce font size for smaller screens */
        margin-bottom: -5px; /* Adjust spacing */
    }

    .banner-content .subtext {
        font-size: 14px; /* Smaller font for better readability */
        margin-bottom: -8px;
    }
}






/* Informative Section above*/
#informative-section {
    background-color: #ffffff;
    padding: 10px 20px 20px;
    text-align: center;
    color: #333;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.section-description {
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

.info-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.info-card {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.info-icon {
    width: 70px;
    height: auto;
    object-fit: contain;
    margin-bottom: 15px;
}

.info-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.info-card p {
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}

/* Additional Info Below the Cards */
.additional-info {
    margin-top: 40px;
    text-align: center;
    color: #333;
}

.additional-info-heading {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.divider2 {
    width: 50px;
    height: 2px;
    background-color: #f0a500; /* Accent color */
    margin: 20px auto;
}

.additional-info-text {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 0px;
}

.enquiry-button {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    transition: background-color 0.3s ease;
    width: auto;
    margin: 0 auto;
    display: inline-block; /* Center button */
    text-decoration: none; /* Remove underline */
}

.enquiry-button:hover {
    background-color: #464646;
}


/* Mobile-Specific Styles */
@media (max-width: 768px) {
    #informative-section {
        padding: 20px 10px;
    }

    .section-title {
        font-size: 26px;
    }

    .section-description {
        font-size: 16px;
        max-width: 100%;
    }

    .info-cards-container {
        grid-template-columns: 1fr 1fr; /* Two columns for mobile */
        gap: 15px;
    }

    .info-card {
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    .info-card h3 {
        font-size: 18px;
    }

    .info-card p {
        font-size: 12px;
    }
}










/* Gallery Section */
.gallery {
    padding: 20px 20px 30px;
    text-align: center;
    background-color: #ffffff;
}

.gallery h2 {
    font-size: 32px;
    font-family: cursive;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Flexible grid columns */
    gap: 15px; /* Increased gap for more breathing room */
    justify-content: center;
    align-items: center;
    padding: 15px 50px 20px;
    position: relative;
}

/* Gallery Item */
.gallery-item {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: white; /* Neutral background */
    position: relative;
    z-index: 1;
    
}

/* Add asymmetric positioning for gallery items */
.gallery-item:nth-child(odd) {
    transform: scale(1.05); /* Slight scaling for visual variety */
}

.gallery-item:nth-child(even) {
    transform: scale(1.02); /* Slightly smaller for dynamic effect */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Desktop: Grid with up to 4 columns */
.gallery-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
    gap: 20px;
}
/* Responsive Styles */
@media (max-width: 768px) {
    /* Mobile: Gallery with 2 columns */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns for mobile */
        gap: 20px;
        padding: 5px;
    }

    .gallery-item {
        border-radius: 10px; /* Slightly smaller border radius for compactness */
    }
}


    











/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}
/* Footer Section */
footer {
    background-color: #333;
    color: #fff;
    padding: 40px 20px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid #444;
    padding-bottom: 20px;
}

.footer-section {
    flex: 1;
    min-width: 250px;
}

.footer-section h3 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #fff;
}

.footer-section p,
.footer-section ul {
    font-size: 14px;
    line-height: 1.6;
    color: #ddd;
}

.footer-section.contact p:nth-of-type(3) { 
    margin-bottom: 30px; /* Adds space below first address */
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    text-decoration: none;
    color: #bbb;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #fff;
}
/* Quick Links Section */


.footer-section.quick-links ul li a {
    color: #f0a500; /* Gold color for the links */
    transition: color 0.3s ease;
}

.footer-section.quick-links ul li a:hover {
    color: #ffd700; /* Slightly brighter gold on hover */
}


.newsletter form {
    display: flex;
    gap: 10px;
}


.newsletter button {
    padding: 10px 20px;
    background-color: #009688;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.newsletter button:hover {
    background-color: #00796b;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.footer-bottom .social-media {
    margin-bottom: 10px;
}

.footer-bottom .social-media a {
    margin: 0 5px;
    display: inline-block;
    width: 30px;
    height: 30px;
}

.footer-bottom .social-media img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.footer-bottom p {
    font-size: 14px;
    color: #bbb;
}





/* Information Section Styling */
#information-section {
    background-color: #f8f9fa;
    padding: 20px 20px 40px;
    text-align: center;
}

.info-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.info-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 40px;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Info Columns Container */
.info-columns-container {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr; /* 3 columns with dividers */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

/* Column Design */
.info-column {
    padding: 20px;
    align-items: center;
    text-align: center;
    
}

.column-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.column-content {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* Divider between columns */
.column1-divider {
    border-left: 2px solid #ddd;
    height: 100%;
    margin: 0 20px;
}

/* Mobile Specific Styling */
@media (max-width: 768px) {
    #information-section {
        padding: 0px 10px 50px; /* Reduced padding on mobile */
    }

    .info-title {
        font-size: 28px; /* Smaller title for mobile */
    }

    .info-description {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* Stack columns into a single column */
    .info-columns-container {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 20px;
    }

    /* Ensure columns take full width on mobile */
    .info-column {
        padding: 15px;
        margin-bottom: -15px;
        background: linear-gradient(145deg, #d6adad, #f8f9fa); /* Light gradient finish */
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        text-align: left;
    }

    /* Adjust text size for columns */
    .column-title {
        font-size: 18px;
    }

    .column-content {
        font-size: 14px;
    }
}






/* Featured Projects Section */
#projects {
    background-color: #f9f9f9;
    padding: 60px 20px;
    text-align: center;
}

#projects .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-heading {
    font-size: 32px;
    margin-bottom: 20px;
    color: #333;
}

.section-description {
    font-size: 16px;
    margin-bottom: 40px;
    color: #555;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.project img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 3px solid #009688;
}

.project h3 {
    font-size: 20px;
    margin: 15px 0 10px;
    color: #333;
}

.project p {
    font-size: 14px;
    color: #555;
    margin: 0 15px 20px;
}

.project .btn {
    display: inline-block;
    margin: 0 0 20px;
    padding: 10px 20px;
    font-size: 14px;
    background-color: #009688;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.project .btn:hover {
    background-color: #00796b;
}







/* one project detail   - bail parao */ 

/* 🌟 Project Details Section - for project details heading and card- price/rooms*/
.project-details {
    max-width: 1200px;
    margin: 25px auto;
    padding: 40px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* 🌟 Section Title */
.section-title {
    font-size: 29px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* 🌟 Project Information Grid */
.project-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Dynamic columns */
    gap: 20px;
    text-align: center;
    padding: 20px 0;
    justify-content: center; /* Ensures center alignment */
}

/* 🌟 Individual Info Item */
.info-item {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* 🌟 Assign Different Colors to Each Card */
.info-item:nth-child(1) {
    background: linear-gradient(135deg, #009688, #00bfa5); /* Teal */
}

.info-item:nth-child(2) {
    background: linear-gradient(135deg, #ff9800, #ff5722); /* Orange-Red */
}

.info-item:nth-child(3) {
    background: linear-gradient(135deg, #4a148c, #7b1fa2); /* Purple */
}

.info-item:nth-child(4) {
    background: linear-gradient(135deg, #0061ff, #60efff); /* Blue */
}

.info-item h4 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 5px;
}

.info-item p {
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
}

/* 🌟 Project Description */
.project-description {
    font-size: 16px;
    color: #555;
    margin-top: 20px;
    line-height: 1.6;
}


/* 🌟 Project Details Container , for ammenities and project features card*/
.project-details-container {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 🌟 Features & Amenities Cards */
.features-card, .amenities-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* 🌟 Card Headings */
.features-card h3, .amenities-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
}

/* 🌟 Grid Style for Listings */
.features-list, .amenities-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Columns */
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li, .amenities-list li {
    background: rgba(0, 150, 136, 0.1);
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    text-align: center;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.features-list li:hover, .amenities-list li:hover {
    transform: scale(1.05);
    background: rgba(0, 150, 136, 0.3);
}





/* Project Gallery */
.project-gallery {
    margin-bottom: 40px;
    text-align: center;
}

.project-gallery h3 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 20px;
}

/* 🌟 Gallery Grid Layout */
.project-gallery .gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    gap: 20px;
    justify-content: center; /* Centers the images */
    align-items: center;
    padding: 20px;
}

/* 🌟 Image Styling */
.project-gallery .gallery-images img {
    width: 100%; /* Ensures image fills its grid cell */
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}



/* 🌟 Responsive Design for Mobile */
@media (max-width: 1024px) {
    .project-info-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Columns for Medium Screens */
    }
    .features-list, .amenities-list {
        grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    }
}

/* Mobile-Specific Styles (Arrange Images Vertically) */
@media (max-width: 768px) {
    .project-details {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
    }
    .project-info-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Auto-fit columns for compact mobile view */
        justify-content: center; /* Center cards properly */
        align-items: center;
    }

    .section-title {
        font-size: 29px;
    }

    .info-item h4 {
        font-size: 16px;
    }

    .info-item p {
        font-size: 14px;
    }

    .project-description {
        font-size: 14px;
    }
    .project-details-container {
        margin: 0 15px auto;
    }
    .features-list, .amenities-list {
        grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    }

    .features-card h3, .amenities-card h3 {
        font-size: 20px;
    }

    .features-list li, .amenities-list li {
        font-size: 14px;
        padding: 8px;
    }
    .project-gallery .gallery-images {
        grid-template-columns: repeat(1, 1fr); /* 3 Columns */
        flex-direction: column; /* Stack images vertically */
        align-items: center; /* Center images */
        gap: 15px; /* Space between images */
    }

    .project-gallery .gallery-images img {
        width: 100%; /* Make images take full width */
        max-width: 100%; /* Keep images slightly compact */
    }
}


/* Location Section */
/* Project Location */
.project-location {
    margin: 40px auto; /* Centers the card horizontally */
    width: 40%; /* Reduce width */
    text-align: center;
    background: linear-gradient(-145deg, #d6adad, #f8f9fa); /* Light gradient */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.project-location h3 {
    font-size: 26px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.project-location p {
    font-size: 18px;
    color: #555;
}

/* Contact Button */
.contact-info .contact-btn {
    background-color: #009688;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-info .contact-btn:hover {
    background-color: #00796b;
    transform: translateY(-2px);
}

/* FAQ Contact Section */
#faq-contact {
    padding: 50px 20px;
    background-color: #f8fafc;
}

.faq-contact-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    flex-wrap: wrap; /* Responsive wrapping */
}

/* Contact Section (Inside FAQ Section) */
.contact-section {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 5px;
    text-align: center;
}

/* Contact Description */
.contact-description {
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
    width: 100%;
}

/* Contact Form */
.contact-form-map-container {
    display: flex;
    gap: 90px;
    justify-content: space-between; /* Distribute sections evenly */
    width: 1000%; /* Full width */
    max-width: 1200px; /* Keeps content centered on large screens */
    margin: 0px;
}

/* Contact Form */
.contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Ensures full-width coverage */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

/* Contact Form Button */
.contact-form button {
    background: #009688;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-form button:hover {
    background: #00796b;
    transform: translateY(-2px);
}

/* Contact Quick Actions */
.contact-quick-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.quick-action-btn {
    background: #ddd;
    color: #333;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.quick-action-btn:hover {
    background: #ccc;
    transform: translateY(-2px);
}

/* Contact Map */
.contact-map {
    flex: 1;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%; /* Ensures full-width coverage */
}

.contact-map iframe {
    width: 100%;
    height: 350px; /* Adjust height for better viewing */
    border-radius: 10px;
}


/* Mobile-Specific Styles */
@media (max-width: 768px) {
    /* Stack Contact Info and Location on Mobile */
    .project-price {
        margin-bottom: 40px;
        border-radius: 10px;
        border-style: double;
    }
    .faq-contact-container {
        flex-direction: column;
    }
    .project-location {
        background: linear-gradient(-145deg, #d6adad, #f8f9fa); /* Light gradient finish */
    }
    .contact-info {
        margin-bottom: 0px;
        text-align: center;
        background: linear-gradient(145deg, #d6adad, #f8f9fa); /* Light gradient finish */
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .project-location {
        width: 85%;
    }

    /* Stack Contact Form and Map */
    .contact-form-map-container {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    /* Adjust Contact Form and Map for Mobile */
    .contact-form,
    .contact-map {
        width: 100%;
    }

    .contact-map iframe {
        height: 250px; /* Reduce height for mobile */
    }

    /* Adjust Button Sizes */
    .contact-form button,
    .quick-action-btn {
        font-size: 14px;
        padding: 10px 15px;
    }
}











/* Client Testimonials Section */
#testimonials {
    background-color: #f1f5f9;
    padding: 40px 20px;
    text-align: center;
}

#testimonials .container {
    max-width: 1200px;
    margin: 0 auto;
}

#testimonials .section-heading {
    font-size: 32px;
    margin-bottom: 10px;
    color: #333;
}

#testimonials .section-description {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.testimonial-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: left;
    position: relative;
    overflow: hidden;
    animation: fadeIn 1s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.testimonial-card .quote {
    font-size: 16px;
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #009688;
}

.client-info h4 {
    font-size: 18px;
    margin: 0;
    color: #333;
}

.client-info p {
    font-size: 14px;
    margin: 0;
    color: #777;
}

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


/* Mobile-Specific Styles */
@media (max-width: 768px) {
    #testimonials {
        padding: 20px 10px 40px; /* Reduced padding for mobile */
    }

    /* Testimonials Grid (Horizontal Scroll for Mobile) */
    .testimonials-grid {
        display: flex;
        overflow-x: auto;
        gap: 20px;
        scroll-snap-type: x mandatory; /* Smooth scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
        padding: 10px;
    }

    .testimonial-card {
        flex: 0 0 90%; /* Make each card larger */
        scroll-snap-align: start;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: left;
        position: relative;
        overflow: hidden;
        animation: fadeIn 1s ease;
    }

    /* Quote Style */
    .testimonial-card .quote {
        font-size: 16px;
        font-style: italic;
        color: #555;
        margin-bottom: 20px;
    }

    /* Client Info */
    .client-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .client-info img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #009688;
    }

    .client-info h4 {
        font-size: 18px;
        margin: 0;
        color: #333;
    }

    .client-info p {
        font-size: 14px;
        margin: 0;
        color: #777;
    }
}

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












/* Latest News & Blogs Section */
#news-blogs {
    background-color: #f8fafc;
    padding: 30px 20px 20px;
}

#news-blogs .container {
    max-width: 1200px;
    margin: 0 auto;
}

#news-blogs .section-heading {
    font-size: 32px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

#news-blogs .section-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 40px;
    text-align: center;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
}

.blogs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Blog Card Styling */
.blog-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    cursor: pointer;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

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

.blog-card .blog-content {
    padding: 20px;
    text-align: left;
}

.blog-card h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.blog-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.read-more {
    font-size: 14px;
    color: #009688;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    cursor: pointer;
    border: none; /* Ensure there's no border */
    outline: none; /* Remove any outline that may appear on focus */
    background: none; /* Remove background if any */
    padding: 0; /* Ensure no padding around the text */
}

.read-more:hover {
    color: #00796b;
}

/* Hidden Content (For Expanded View) */
.blog-card .extra-content {
    display: none; /* Hide by default */
    padding-top: 10px;
    font-size: 14px;
    color: #555;
}

/* Animation on Click (Elongating the Card) */
.blog-card.expanded {
    height: auto; /* Increased card height when expanded */
}

.blog-card.expanded .extra-content {
    display: block; /* Show the hidden content */
}

/* Mobile-Specific Styles */
@media (max-width: 768px) {
    .blog-card {
        width: 100%; /* Full width for mobile */
    }

    .blog-card h3 {
        font-size: 16px;
    }

    .blog-card p {
        font-size: 12px;
    }

    .extra-content p {
        font-size: 14px;
    }
}


/* Map Styling */
/* Latest News & Blogs Section */
.map iframe {
    border-radius: 10px;
    box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 350px; /* Increased the height */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.map iframe:hover {
    transform: scale(1.03); /* Subtle zoom effect on hover */
    box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.4);
}



/* Mobile Styles for Latest News & Blogs Section */
@media (max-width: 768px) {
    #news-blogs .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Adds spacing between blogs and map */
    }

    #news-blogs .blogs {
        display: grid;
        grid-template-columns: 1fr; /* Single column for blogs */
        gap: 20px; /* Adds spacing between blog cards */
        width: 100%; /* Ensure it spans the full width */
    }

    #news-blogs .blog-card {
        width: 90%; /* Adjusts the card width to fit within the viewport */
        margin: 0 auto; /* Centers the cards horizontally */
    }

    #news-blogs .map {
        width: 90%; /* Adjusts the map width */
        margin: 0 auto; /* Centers the map horizontally */
    }
}




/* Animations */
[data-aos="fade-right"] {
    opacity: 0;
    transform: translateX(-50px);
    animation: fadeRight 1s ease forwards;
}

[data-aos="fade-left"] {
    opacity: 0;
    transform: translateX(50px);
    animation: fadeLeft 1s ease forwards;
}

@keyframes fadeRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}




/* FAQ & Contact Section Styles */

#faq-contact {
    padding: 40px 20px;
    background-color: #f8fafc;
}

.faq-contact-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.faq-section, .contact-section {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 48%; /* To allow space for the map */
}

/* Heading Styles */
.faq-heading, .contact-heading {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
}

/* FAQ Item Styles */
.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    color: #000000;
}

.faq-toggle {
    background: #009688;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: transform 0.3s;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 16px;
    width: 90%;

}

.faq-item.active .faq-answer {
    max-height: 200px;
}

/* Contact Section Styles */
.contact-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.contact-form button,
.contact-quick-actions button {
    background: #009688;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form button:hover,
.contact-quick-actions button:hover {
    background: #00796b;
}

.contact-quick-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.quick-action-btn {
    background: #ddd;
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.quick-action-btn:hover {
    background: #ccc;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-aos="fade-right"] {
    opacity: 0;
    transform: translateX(50px);
    animation: fadeIn 1s ease forwards;
}

/* Mobile-Specific Styles */
@media (max-width: 768px) {
    #faq-contact {
        padding: 20px 10px; /* Reduced padding for mobile */
    }

    .faq-contact-container {
        flex-direction: column; /* Stack FAQ and Contact sections */
    }

    /* FAQ Section */
    .faq-section {
        width: 100%; /* Full width for mobile */
        margin-bottom: 0px; /* Space between FAQ and Contact */
    }
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        font-size: 12px;
    }

    /* Contact Section */
    .contact-section {
        width: 100%; /* Full width for mobile */
    }

    .faq-heading, .contact-heading {
        font-size: 24px;
    }

    .faq-question h3 {
        font-size: 16px;
        width: 85%;
    }

    .faq-answer p {
        font-size: 14px;
    }

    .contact-description {
        font-size: 14px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 14px;
    }

    .contact-form button,
    .contact-quick-actions button {
        font-size: 12px;
        padding: 8px 16px;
    }

    .quick-action-btn {
        padding: 8px 16px;
    }
}





/* off-plan General Styling */



.off-plan-projects {
    background-color: #fef2f2;
    padding: 40px 20px;
    margin-top: 20px;
  }
  
  .off-plan-projects h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
  }
  
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1540px; /* Increased max width by 10% */
    margin: 0 auto; /* Center the grid within the container */
  }
  
  
  .project-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
  }
  
  .project-card:hover {
    transform: translateY(-10px);
  }
  
  .project-image {
    position: relative;
    height: 200px;
  }
  
  .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #1e90ff;
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 3px;
  }
  
  .project-details {
    padding: 20px;
  }
  
  .project-details h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
  }
  
  .details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    color: #555;
  }
  
  .details-grid p {
    margin: 0;
    font-size: 14px;
    color: #888;
  }
  
  .details-grid strong {
    font-size: 16px;
    color: #000;
  }
  
  .divider {
    height: 1px;
    background-color: #eee;
    margin: 15px 0;
  }
  
  .enquiry-button {
    background-color: #000;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    width: 40%; /* Set width to 30% */
    transition: background-color 0.3s ease;
    margin-top: 20px;
    text-align: center; /* Center text within the button */
  }
  
  .enquiry-button:hover {
    background-color: #333;
  }
  
  /* Responsive Adjustments */
  @media (min-width: 769px) {
    .off-plan-projects {
      padding: 40px 10%; /* Add space on both sides for computer screen */
    }
  }
  
  @media (max-width: 768px) {
    .project-image {
      height: 150px;
    }
  
    .project-details h3 {
      font-size: 16px;
    }
    
    .project-card:hover {
        transform: translateY(0px);
    }

    .enquiry-button {
      font-size: 12px;
    }
  }
  




  

/* Services Section Styles */
/* Desktop Layout */
#services {
    padding: 30px 20px 20px;
    background-color: #fef2f2;
}

.services-heading {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px; /* Adds spacing for a more stylish title */
}

/* Services Container */
.services-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 cards in a row on desktop */
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Service Item Design */
.service-item {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    padding: 20px;
    color: #333;
    cursor: pointer;
}

/* Hover Effect */
.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* Service Image */
.service-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
}

/* Service Content */
.service-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.service-content p {
    color: #555;
    font-size: 14px;
    line-height: 1.4;
}

/* Mobile-Specific Styles */
@media (max-width: 768px) {
    #services {
        padding: 20px 10px; /* Reduced padding for mobile */
    }

    .services-heading {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .services-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
        gap: 15px;
    }

    /* Service Item Design */
    .service-item {
        padding: 15px;
        height: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .service-image {
        height: 130px; /* Reduced image size for mobile */
        border-radius: 8px;
    }

    .service-content h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .service-content p {
        font-size: 12px;
    }
}

/* Slideshow Styling */
.service-slideshow {
    margin-top: 40px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.slideshow-container {
    display: flex;
    gap: 10px;
}

.mySlides {
    display: none;
    transition: opacity 1s ease-in-out;
}

.mySlides img {
    width: 100%;
    border-radius: 10px;
}

/* Animation Effects for Slides */
.fade {
    animation: fadeEffect 1s forwards;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}













/* About Us Section Styles */
#about {
    padding: 40px 20px;
    position: relative; /* For layering content over the background */
    min-height: 84vh; /* Ensures section is tall enough */
    z-index: 1;
}


.about-heading {
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-bottom: 40px;
}

.about-container {
    max-width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px; /* Reduce spacing between content */
}

.about-info {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack the stats and who we are section */
    margin-right: 20px;
}

.about-stats {
    display: flex; /* Make the counter cards display in a row */
    justify-content: space-between;
    margin-bottom: 40px; /* Space below the counter cards */
}

.counter-card {
    border-radius: 12px; /* Smoother rounded corners */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Soft shadow for depth */
    text-align: center;
    width: 28%; /* Keep the same width */
    padding: 20px; /* Slightly increased padding */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Needed for decorations */
    overflow: hidden; /* Prevent anything from overflowing */
    color: white; /* White text for contrast */
}

/* 🔹 Different Gradient Colors for Each Counter */
.counter-card:nth-child(1) {
    background: linear-gradient(135deg, #ff7eb3, #ff758c); /* Pink Gradient */
}

.counter-card:nth-child(2) {
    background: linear-gradient(135deg, #6a11cb, #2575fc); /* Purple-Blue Gradient */
}

.counter-card:nth-child(3) {
    background: linear-gradient(135deg, #f7971e, #ffd200); /* Orange-Yellow Gradient */
}

/* 🔹 Counter Card Hover Effects */
.counter-card:hover {
    transform: translateY(-5px) scale(1.03); /* Slight scale effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* 🔹 Counter Numbers */
.counter-card .count {
    font-size: 40px;
    font-weight: bold;
    color: #fff; /* White for contrast */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.counter-card h3 {
    font-size: 20px;
    margin-top: 10px;
    color: #fff; /* White text */
    font-weight: bold;
}
/* 🔹 Animated Background Effect */
.counter-card::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%);
    animation: glowing 3s infinite alternate;
}

.count {
    font-size: 36px;
    color: #007bff;
    font-weight: bold;
}


/* 🔹 Background Glow Animation */
@keyframes glowing {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg) scale(1.2);
        opacity: 1;
    }
}

/* Who We Are Section Styles */
.who-we-are {
    margin-top: 10px; /* Space above the Who We Are section */
}

.who-we-are h3 {
    text-align: center;
    margin-bottom: 0px;
}

.who-we-are-container {
    display: flex;
    gap: 40px;
    justify-content: center; /* Distribute cards evenly */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.who-card {
    border-radius: 10px;
    text-align: center;
    width: 20%;
    padding: 12px 5px 12px 5px; /* Reduce padding */
    margin: 5px; /* Space between cards */
    transition: transform 0.3s, box-shadow 0.3s;
}

.who-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.who-card img {
    width: 60px; /* Icon size */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Space below the icon */
}

.about-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center; /* Center the image vertically */
}

.about-image img {
    max-width: 100%;
    height: 65vh; /* Make the image height 50% of the viewport height */
    border: 2px solid #007bff; /* Add a blue border */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* Compact Mobile Styles for About Us Section */
@media (max-width: 768px) {
    

    @media (max-width: 768px) {
        #about {
            padding: 15px 10px; /* Minimal padding for the section */
        }
    
        #about .about-container {
            gap: 10px; /* Tighten spacing between elements */
            display: flex;
            flex-direction: column;
            align-items: center; /* Ensure everything is centered */
            text-align: center;
            margin-top: -20px;
            margin-left: 35px;
        }
    
        /* 🔹 Counting Cards: Single Row & Centered */
        #about .about-stats {
            display: flex;
            justify-content: center; /* Center the cards */
            gap: 10px; /* Minimal spacing between cards */
            width: 100%;
        }
    
        #about .counter-card {
            flex: 1; /* Allow even distribution */
            max-width: 100px; /* Make cards more compact */
            text-align: center;
            padding: 5px 10px 15px; /* Reduce padding */
            font-size: 16px; /* Reduce font size */
        }
    
        /* 🔹 Counter Text Adjustments */
        #about .counter-card h3 {
            font-size: 16px; /* Smaller title text */
            text-align: center;
        }
    
        #about .counter-card .count {
            font-size: 25px; /* Smaller number size */
        }
    }
    

    /* "Who We Are" Cards: Single Row */
    #about .who-we-are-container {
        display: flex;
        justify-content: space-between;
        gap: 5px; /* Minimal spacing between cards */
        width: 100%; /* Use full width */
    }

    #about .who-card {
        flex: 1; /* Allow cards to evenly distribute */
        text-align: center;
        padding: 5px 10px; /* Compact padding */
        font-size: 12px; /* Smaller text for compactness */
    }

    /* About Image */
    #about .about-image {
        display: flex;
        justify-content: center; /* Centers the image horizontally */
        align-items: center; /* Centers vertically if needed */
        width: 100%; /* Ensures the section takes full width */
        text-align: center;
    }
    
    #about .about-image img {
        width: 100%; /* Reduce size slightly for better centering */
        max-width: 500px; /* Prevents it from becoming too large */
        height: auto; /* Maintain aspect ratio */
        border-style: groove;
        display: block; /* Removes extra space below the image */
        margin: 0 auto; /* Ensures it is centered */
    }
    

}










/* new featured project */
#featured-projects-section {
    padding: 30px 20px;
    text-align: center;
    background: #f8f9fa; /* Soft light background */
}

.featured-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

/* Card Wrapper */
.featured-projects-wrapper {
    display: flex;
    justify-content:flex-start;
    gap: 20px;
}

/* Card Design */
.featured-card {
    position: relative;
    background: #ffffff; /* Light background */
    color: black;
    border-radius: 12px;
    overflow: hidden;
    width: 30%;
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.15);
}

/* Image Container */
.featured-card-image {
    position: relative;
    overflow: hidden;
}

.featured-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transition: transform 0.3s ease-in-out;
}

/* Soft Overlay - Only at the bottom */
.featured-card-image::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0%; /* Only darkens bottom part */
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent); 
}

/* On Hover - Zoom Image Slightly */
.featured-card:hover .featured-card-image img {
    transform: scale(1.05);
}

/* Card Content */
.featured-card-content {
    padding: 18px;
    text-align: left;
}

/* Project Name */
.featured-heading {
    font-size: 20px;
    margin-bottom: 5px;
    color: #333; /* Dark text */
}

/* Developer Name */
.featured-subtext {
    font-size: 14px;
    opacity: 0.8;
    font-weight: bold;
    color: #555;
}

/* Horizontal Divider */
.divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    margin: 10px 0;
}

/* Information Row */
.featured-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
}

/* Price */
.featured-price {
    font-size: 18px;
    font-weight: bold;
    color: #f0a500; /* Soft gold */
    text-align: right;
}

/* 🌟 Mobile Navigation Buttons */
.mobile-nav-buttons {
    display: none; /* Hidden by default */
    justify-content: center;
    gap: 20px;
    margin: 15px 0px 5px 0px;
}

.mobile-nav-buttons button {
    background: #009688;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s ease-in-out;
}

.mobile-nav-buttons button:hover {
    background: #00796b;
}


@media (max-width: 768px) {
    .mobile-nav-buttons {
        display: flex;
    }

    .featured-projects-wrapper {
        display: flex;
        gap: 10px;
        width: 100%;
        scroll-behavior: smooth; /* Enable smooth scroll */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */
        scroll-snap-type: x mandatory;
        padding: 10px 0;
    }

    .featured-card {
        width: 100%; /* Makes each card big enough for mobile */
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    /* Hide scrollbar */
    .featured-projects-wrapper::-webkit-scrollbar {
        display: none;
    }
    
}










/* 🌟 Pop-Up Background Overlay */
.popup-form {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark blurred overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px); /* Soft glass effect */
}

/* 🌟 Pop-Up Content */
.popup-content {
    background: rgba(255, 255, 255, 0.2); /* Glass effect */
    padding: 25px;
    width: 90%;
    max-width: 400px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transform: scale(0.8);
    animation: popIn 0.4s forwards;
    backdrop-filter: blur(15px); /* Intense glass effect */
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* 🌟 Close Button */
.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s;
    background: rgba(255, 255, 255, 0.3);
    padding: 1px 12px 1px 12px;
    border-radius: 50%;
}

.close-popup:hover {
    transform: scale(1.2);
    color: red;
    background: rgba(255, 0, 0, 0.3);
}

/* 🌟 Form Title */
.form-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #ffffff;
}

/* 🌟 Form Inputs */
.form-group {
    margin-bottom: 1px;
    text-align: left;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 16px;
    background: rgba(255, 255, 255, 0.1); /* Subtle background */
    color: white; /* Ensures text is visible */
    transition: all 0.3s ease-in-out;
}

/* 🌟 Make Placeholder Text More Visible */
.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Lighter but visible */
    font-weight: 300;
}

/* 🌟 Focus Effect - Improve Visibility */
.form-group input:focus {
    border-color: #ff9800;
    background: rgba(255, 255, 255, 0.2); /* Slightly stronger background */
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
}

/* 🌟 Submit Button */
.submit-btn {
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: white;
    font-size: 16px;
    margin-top: 20px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    width: 80%;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.4);
}

.submit-btn:hover {
    background: linear-gradient(135deg, #ff5722, #ff9800);
    transform: translateY(-2px);
}

/* 🌟 Animations */
@keyframes popIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 🌟 Responsive Mobile Adjustments */
@media (max-width: 768px) {
    .popup-content {
        width: 95%; /* More compact */
        padding: 20px 20px 20px 20px;
    }

    .form-title {
        font-size: 20px;
    }

    .form-group input {
        font-size: 14px;
        padding: 8px;
    }

    .submit-btn {
        font-size: 14px;
        padding: 10px;
    }
}













/* About us page styling */

/* 🌟 Mission, Vision, Values Section */
.mvv-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    text-align: center;
}

/* 🌟 Section Title */
.mvv-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

/* 🌟 MVV Cards Container */
.mvv-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Ensures responsiveness */
}

/* 🌟 Individual Card */
.mvv-card {
    flex: 1;
    min-width: 300px; /* Prevents shrinking */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: white;
    text-align: left;
    transition: transform 0.3s ease-in-out;
}

/* 🌟 Different Gradient Colors for Each Card */
.mission {
    background: linear-gradient(135deg, #009688, #33cc99);
}

.vision {
    background: linear-gradient(135deg, #ff8a00, #e52e71);
}

.values {
    background: linear-gradient(135deg, #0061ff, #60efff);
}

/* 🌟 Card Title */
.mvv-card h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 🌟 Card Paragraph */
.mvv-card p {
    font-size: 16px;
    line-height: 1.6;
}

/* 🌟 Hover Effect */
.mvv-card:hover {
    transform: translateY(-5px);
}

/* 🌟 Responsive Design */
@media (max-width: 1024px) {
    .mvv-container {
        flex-direction: column; /* Stack cards vertically */
        align-items: center;
    }

    .mvv-card {
        width: 100%; /* Full width for smaller screens */
        text-align: center;
    }

    .mvv-card p {
        font-size: 14px;
    }
}





/* 🌟 Company Profile Section */
.company-profile {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    text-align: center;
}

/* 🌟 Section Title */
.profile-title {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* 🌟 Section Description */
.profile-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

/* 🌟 Leadership Team Grid */
.leadership-team {
    display: flex;
    flex-direction: column; /* Vertical arrangement */
    gap: 20px;
}

/* 🌟 Leadership Card */
.leader-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f5f7fa, #d6e0f0); /* Light gradient */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.leader-card:hover {
    transform: translateY(-5px);
}

/* 🌟 Leader Image */
.leader-image {
    flex: 0 0 120px;
    text-align: center;
    margin-right: 20px;
}

.leader-image img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 3px solid #009688;
}

.leader-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 8px;
}

/* 🌟 Leader Information */
.leader-info {
    flex: 1;
    text-align: left;
}

.leader-info h3 {
    font-size: 18px;
    color: #00796b;
    margin-bottom: 5px;
}

.leader-info h4 {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.leader-info p {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

/* 🌟 Responsive Design */
@media (max-width: 1024px) {
    .leader-card {
        flex-direction: column; /* Stack elements */
        text-align: center;
        padding: 15px;
    }

    .leader-image {
        margin: 0 auto 10px;
    }

    .leader-info {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .profile-title {
        font-size: 24px;
    }

    .profile-description {
        font-size: 14px;
    }

    .leader-card {
        padding: 15px;
    }

    .leader-info h3 {
        font-size: 16px;
    }

    .leader-info h4 {
        font-size: 14px;
    }

    .leader-info p {
        font-size: 13px;
    }
}




/* 🌟 Awards Section */
.company-awards {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

/* 🌟 Section Title */
.awards-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* 🌟 Section Description */
.awards-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* 🌟 Awards Gallery */
.awards-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 🌟 Award Card */
.award-card {
    flex: 0 1 30%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 10px;
    transition: transform 0.3s ease-in-out;
}

.award-card:hover {
    transform: translateY(-5px);
}

/* 🌟 Award Images */
.award-card img {
    width: 100%;
    height: 200px; /* Fixed height to keep consistency */
    object-fit: cover;
    border-radius: 8px;
}

/* 🌟 Responsive Design */
@media (max-width: 1024px) {
    .awards-gallery {
        gap: 15px;
    }

    .award-card {
        flex: 0 1 45%; /* 2 images per row on smaller screens */
    }
}

@media (max-width: 768px) {
    .awards-title {
        font-size: 24px;
    }

    .awards-description {
        font-size: 14px;
    }

    .award-card {
        flex: 0 1 100%; /* 1 image per row on mobile */
    }
}