/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hexagonal row container */
.hexagon-scroll-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 40px 0;
}

.hexagon-scroll-container1 {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 40px 0;
}

.hexagon-track {
    display: flex;
    width: max-content; /* Allow the track to expand beyond viewport */
    will-change: transform; /* Optimize for animation */
}

/* Make the entire text-column clickable */
.text-column {
    position: relative;
    cursor: pointer;
}

/* Add a full-size invisible link */
.full-area-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Higher than other elements */
    opacity: 0; /* Invisible but clickable */
}

/* Ensure hover effects still work */
.text-column:hover .full-area-link {
 +698574   opacity: 0; /* Keep it transparent even on hover */
}

/* Adjust z-index for other elements to allow clicking */
.default-content, .default-content1, .hover-content {
    position: relative;
    z-index: 2; /* Lower than the link */
}

.image-overlay {
    z-index: 1;
}

.hexagon-track3 {
    display: flex;
    width: max-content; /* Allow the track to expand beyond viewport */
    will-change: transform; /* Optimize for animation */
}



/* Hexagon styling */
.hexagon {
    width: 410px;
    height: 410px;
    position: relative;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    flex-shrink: 0;
    position: relative;
    margin: 0 2px; /* Space between hexagons */
}

    .hexagon::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        09width: 100%;
        height: 100%;
        /* background: linear-gradient(45deg, #16989A 0%, rgba(0,0,0,1) 100%); */
        background-color: #16989A;
        mix-blend-mode: multiply;
        opacity: 0;
    }

.hexagon3::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, #16989A 0%, rgba(0,0,0,1) 100%); */
    background-color: #16989A;
    mix-blend-mode: multiply;
    opacity: 0;
}




.hexagon3 {
    width: 410px;
    height: 410px;
    position: relative;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    flex-shrink: 0;
    margin: 0 2px; /* Space between hexagons */
    position: relative;
    background-color: white;
}

/* Hexagon content */
.hex-content {
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
}




/* Responsive adjustments */
@media (max-width: 1200px) {
    .hexagon {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 992px) {
    .hexagon {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 768px) {
    .hexagon {
        width: 200px;
        height: 200px;
        font-size: 1.2rem;
    }


    .main-slogan {
        font-size: 1.8rem;
    }
}

.section1 {
    position: relative;
    z-index: 1;
}

.section p {
    font: 1.3rem;
}

.section1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, #16989A 0%, rgba(0,0,0,1) 100%); */
    mix-blend-mode: multiply;
    opacity: 0.1;
}

/* Fix for header visibility */
header {
    position: relative;
    z-index: 1000; /* Ensure header stays above everything */
}

/* Hero section with animated gradient */
.hero {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 0; /* Add this to remove default margins */
    padding: 0; /* Add this to remove default padding */
}


    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/assets/images/IMAGES/Homepage/real.jpeg);
        background-size: cover;
        background-position: center;
        background-blend-mode: multiply;
        filter: brightness(40%);
    }

.hero-content {
    z-index: 2;
    text-align: right;
    width: 100%;
    margin-top: 11rem;
    padding-right: 98px;
    margin-left: 0; /* Ensure no left margin */
    padding-left: 0; /* Ensure no left padding */
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    .hero {
        min-height: 90vh!important;
    }

    .hero-content {
        margin-top: 8rem;
        padding-right: 20px;
        padding-left: 20px; /* Add equal padding on both sides */
        text-align: center;
    }

    .hero-text-content {
        width: 100%;
        padding: 0 20px;
        margin-left: 0;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .hero-content {
        margin-top: 6rem;
        padding-right: 15px;
        padding-left: 15px;
    }
}

.hero-text-content {
    z-index: 2;
    width: 641px; /* Take full width */
    margin-top: 2rem; /* Add some space between h1 and p */
    margin-left: 5rem;
    position: relative; /* Required for pseudo-elements */
    display: inline-block; /* Ensures the lines wrap the text properly */
    padding: 10px 30px;
}

    .hero-text-content::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px; /* Thickness of the line */
        height: 100%; /* Length of the vertical part */
        background: white;
    }


.hero span {
    font-size: 8rem;
    font-weight: bold;
    line-height: 1;
    animation: fadeInUp 1s ease forwards 0.3s;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    .hero span p {
        color: transparent;
        font-size: 8rem;
        font-weight: bold;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

.hero p {
    font-size: 25px;
    color: white;
    font-weight: bolder;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 0.6s;
    text-align: justify; /* Align paragraph to left */
    font-family: 'Segoe UI';
    line-height: 1.2;
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    max-width: 100%; /* Ensure it doesn't exceed container width */
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

    .section-header h2 {
        font-size: 2.8rem;
        color: var(--dark);
        font-weight: 800;
        position: relative;
        display: inline-block;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        color: transparent;
    }

    .section-header p {
        color: rgba(119, 119, 119, 1);
        font-size: 1.4rem;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }




.solutions-section-title {
    text-align: center;
    font-weight: bold;
}


    .solutions-section-title h2 {
        font-size: 2.5rem;
        color: #086d6e;
        display: inline-block;
        padding-bottom: 10px;
        background: #086d6e;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }



        .solutions-section-title h2::after {
            content: '';
            display: block;
            width: 100px;
            height: 4px;
            background: #086d6e;
            margin: 10px auto 0;
            border-radius: 2px;
        }

.roof-title {
    text-align: center;
    font-weight: bold;
}


    .roof-title h2 {
        font-size: 2.5rem;
        color: #16989A;
        display: inline-block;
        padding-bottom: 10px;
        background: #16989A;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .roof-title h3 {
        color: lightgrey;
    }

    .roof-title h2::after {
        content: '';
        display: block;
        width: 100px;
        height: 4px;
        background: #16989A;
        margin: 10px auto 0;
        border-radius: 2px;
    }


.solutions-section-title h3 {
    color: rgba(119, 119, 119, 1);
    font-family: 'Segoe UI';
}
/* General Responsive Adjustments */
@media (max-width: 1600px) {
    .hero-content {
        margin-left: 800px !important;
    }
}

@media (max-width: 1400px) {
    .hero-content {
        margin-left: 600px !important;
    }

    .hero span {
        font-size: 3.5rem;
        color: white;
    }

    .hero p {
        font-size: 1.3rem;
        color: white;
    }
}

@media (max-width: 1200px) {
    .hero-content {
        margin-left: 400px !important;
    }

    .sliding-paragraphs-container {
        width: 400px !important;
    }
}

@media (max-width: 992px) {
    .hero-content {
        margin-left: 200px !important;
    }

    .hero span {
        font-size: 3rem;
    }

    .hexagon-scroll-container1 {
        margin-top: -8.5% !important;
    }
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .hero-content {
        margin-left: 0 !important;
        padding: 20px;
    }

    .hero-video {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .hero span {
        font-size: 2.5rem;
    }

    .sliding-paragraphs-container {
        width: 100% !important;
    }

    .hexagon-scroll-container1 {
        margin-top: -7.5% !important;
    }
}

@media (max-width: 576px) {

    .hero {
        width: 100%;
    }

    .hero span {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .hexagon-scroll-container1 {
        margin-top: -6.5% !important;
    }

    .hexagon-track3 {
        margin-left: -8.5% !important;
    }

    .main-slogan {
        font-size: 1.8rem;
        padding: 30px 15px;
    }

    .vision-content p,
    .feature-card p,
    .value-card p,
    .industry-content p {
        font-size: 1rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .section-header p {
        font-size: 1.1rem;
    }
}

/* Adjust hexagon scrolling for smaller screens */
@media (max-width: 480px) {
    .hexagon-scroll-container1 {
        margin-top: -5.5% !important;
    }

    .hexagon-track3 {
        margin-left: -7.5% !important;
    }

    .hexagon,
    .hexagon3 {
        width: 300px;
        height: 300px;
    }
}

/* Ultra-small devices */
@media (max-width: 400px) {
    .hexagon-scroll-container1 {
        margin-top: -4.5% !important;
    }

    .hexagon-track3 {
        margin-left: -6.5% !important;
    }

    .hero span {
        font-size: 1.8rem;
    }

    .main-slogan {
        font-size: 1.5rem;
    }
}

/* Orientation adjustments */
@media (orientation: portrait) {
    .hero {
        height: auto;
        min-height: 100vh;
    }
}

/* Prevent layout shift on scrollbar appearance */
html {
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

.column-container {
    width: 250px;
    transition: all 0.4s ease;
    margin-left: -50px;
}

    .column-container:first-child {
        margin-left: 0;
    }

    .column-container:hover {
        z-index: 10;
        transform: scale(1.05);
    }

.text-column {
    position: relative;
    width: 280px;
    height: 300px;
    clip-path: polygon(70% 0, 0% 0, 30% 100%, 100% 100%);
    transition: all 0.4s ease;
    overflow: hidden;
    cursor: pointer;
}

.image-column {
    background-size: cover !important;
    background-position: center !important;
    color: white;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
}

.default-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: all 0.4s ease;
    background-color: rgba(12, 13, 62, 0.48);
}

.default-content1 {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: all 0.4s ease;
    background-color: rgba(22, 152, 154, 0.3);
}

.hover-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    padding: 20px;
    box-sizing: border-box;
    background: #086d6e;
}

    .hover-content p {
        color: white;
        padding-right: 50px;
        padding-left: 50px;
        text-align: center;
    }

    .hover-content h1 {
        color: white;
        font-weight: bold;
        text-align: center;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

.custom-heading {
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    width: 173px;
    text-align: center;
}

.text-column:hover {
    clip-path: polygon(80% 0, 0% 0, 20% 100%, 100% 100%);
    width: 350px;
    height: 300px;
}

    .text-column:hover .image-overlay {
        background-color: rgba(22, 152, 154, 0.8);
    }

    .text-column:hover .default-content {
        opacity: 0;
        transform: translateY(-20px);
    }

    .text-column:hover .default-content1 {
        opacity: 0;
        transform: translateY(-20px);
    }

    .text-column:hover .hover-content {
        opacity: 1;
        transform: translateY(0);
    }

.outline-text {
    font-size: 100px;
    font-weight: bold;
    color: transparent; /* Transparent inside */
    -webkit-text-stroke: 5px #009999; /* Orange border */
    text-stroke: 5px #009999; /* Standard property (not widely supported) */
    text-transform: uppercase;
}

/* Existing styles remain the same until .bgimg */

.bgimg {
    height: 400px;
    width: 300px;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: 30px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.image-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
    transition: all 0.3s ease;
}

.bgimg:hover .image-gradient {
    height: 100%;
    background: linear-gradient(to top, rgba(22, 152, 154, 0.8) 0%, rgba(22, 152, 154, 0.6) 100%);
}

.custom-heading1 {
    font-weight: bold;
    font-size: 2rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 2;
    margin: 0;
    width: 100%;
    transition: all 0.3s ease;
}

.bgimg:hover .custom-heading1 {
    transform: translateY(-10px);
}

.custom-heading1 a {
    color: white;
    text-decoration: none;
}

    .custom-heading1 a i {
        color: white;
        transition: all 0.3s ease;
        margin-top: 10px;
        display: inline-block;
    }

.bgimg:hover .custom-heading1 a i {
    color: #086d6e;
    transform: scale(1.2);
}

/* Make the entire container a clickable link */
.bgimg > a.whole-area-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    text-indent: -9999px; /* Hide the text */
}

.bgtext {
    font-family: "Dancing Script", cursive;
    text-transform: capitalize;
    color: rgba(0, 0, 0, 0.05);
    font-size: 180px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    line-height: 1;
    width: max-content;
    transform: translate(-25px, -25%);
}

.subtitle {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #D6B981;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    text-transform: capitalize;
}

.heading-container {
    position: relative;
    display: inline-block;
    background-color: white;
    border-radius: 10px;
    margin-left: -100px;
    width: 700px;
    margin-top: 50px;
}

    .heading-container h3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 20px;
        text-align: justify;
        color: rgba(119, 119, 119, 1);
        padding: 20px;
    }


.background-heading {
    font-size: 90px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05); /* Very light color for background */
    font-family: -webkit-body;
    width: 370px;
    margin-top: -20px;
    margin-left: 10px;
}

.foreground-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2rem;
    font-weight: 700;
    color: #086d6e;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
    font-weight: bold;
    margin-top: -120px;
    margin-left: -170px;
}

.section-content h3 {
    color: rgba(119, 119, 119, 1);
    font-family: 'Segoe UI';
    text-align: center;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.4rem;
}

.button {
    background-color: #086d6e; /* Green background */
    color: white; /* White text */
    padding: 12px 24px; /* Padding */
    border: none; /* No border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold text */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow */
    transform: translateY(-2px);
}

    /* Hover effect */
    .button:hover {
        background-color: #086d6e; /* Slightly darker green */
        transform: translateY(-4px); /* Slight lift */
    }

    /* Active state */
    .button:active {
        background-color: #086d6e;
        transform: translateY(-2px); /* Reset position */
    }

    /* Disabled state */
    .button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
        box-shadow: none;
    }

.roof {
    background-image: url(/assets/images/IMAGES/Homepage/bg1.png);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    padding-top: 30px;
    padding-bottom: 50px;
}

/* Extra Large Devices (1600px and up) */
@media (max-width: 1800px) {
    .hero span {
        font-size: 7rem;
    }

        .hero span p.outline-text {
            font-size: 7rem;
        }

    .hero-text-content {
        width: 600px;
    }
}

/* Large Devices (1200px to 1600px) */
@media (max-width: 1600px) {
    .hero-content {
        margin-left: 700px !important;
    }

    .hero span {
        font-size: 6rem;
    }

        .hero span p.outline-text {
            font-size: 6rem;
        }

    .hero-text-content {
        width: 550px;
    }

    .heading-container {
        width: 600px;
        margin-left: -80px;
    }

    .foreground-heading {
        margin-left: -150px;
    }
}

/* Desktop (992px to 1200px) */
@media (max-width: 1200px) {
    .hero-content {
        margin-left: 500px !important;
        padding-right: 50px;
    }

    .hero span {
        font-size: 5rem;
    }

        .hero span p.outline-text {
            font-size: 5rem;
        }

    .hero-text-content {
        width: 450px;
        margin-left: 3rem;
    }

    .heading-container {
        width: 500px;
        margin-left: -60px;
    }

    .background-heading {
        font-size: 70px;
    }

    .foreground-heading {
        font-size: 1.8rem;
        margin-left: -120px;
        margin-top: -100px;
    }

    .bgimg {
        width: 250px;
        height: 350px;
        margin-left: 15px;
        cursor: pointer;
    }

    .column-container {
        width: 220px;
        margin-left: -40px;
    }
}

/* Tablet Landscape (768px to 992px) */
@media (max-width: 992px) {
    .hero-content {
        margin-left: 300px !important;
    }

    .hero span {
        font-size: 4rem;
    }

        .hero span p.outline-text {
            font-size: 4rem;
        }

    .hero p {
        font-size: 1.2rem;
    }

    .hero-text-content {
        width: 350px;
        margin-left: 2rem;
    }

    .heading-container {
        width: 400px;
        margin-left: -40px;
    }

    .background-heading {
        font-size: 60px;
        width: 300px;
    }

    .foreground-heading {
        font-size: 1.5rem;
        margin-left: -100px;
        margin-top: -80px;
    }

    .heading-container h3 {
        font-size: 1rem;
        padding: 15px;
    }

    .button {
        margin-left: 300px !important;
        padding: 10px 20px;
    }

    .bgimg {
        width: 200px;
        height: 300px;
        margin-left: 10px;
    }

    .custom-heading1 {
        font-size: 1.5rem;
    }

    .column-container {
        width: 180px;
        margin-left: -30px;
    }

    .text-column {
        width: 230px;
        height: 250px;
    }

        .text-column:hover {
            width: 300px;
            height: 250px;
        }

    .hexagon, .hexagon3 {
        width: 350px;
        height: 350px;
    }
}

/* Tablet Portrait (576px to 768px) */
@media (max-width: 768px) {
    .hero span {
        font-size: 6rem;
    }

    .hero {
        text-align: center;
    }

    .hero-content {
        margin-left: 0 !important;
        padding-right: 20px;
        text-align: center;
        margin-top: 8rem;
    }

    .hero-text-content {
        width: 100%;
        padding: 0 20px;
        margin-left: 0;
        text-align: center;
    }

        .hero-text-content::after {
            display: none;
        }

    .hero span {
        font-size: 3.5rem;
        justify-content: center !important;
    }

        .hero span p.outline-text {
            font-size: 3.5rem;
        }

    .hero p {
        text-align: center;
    }

    .row {
        flex-direction: column;
    }

    .col-6 {
        width: 100%;
    }

    .heading-container {
        width: 90%;
        margin: 20px auto;
    }

    .background-heading {
        font-size: 50px;
        width: 250px;
        margin-top: 0px;
    }

    .foreground-heading {
        position: relative;
        left: auto;
        transform: none;
        padding-top: 19px;
        margin-bottom: 24px;
        margin-left: -205px;
        font-size: 17px;
    }

    .button {
        display: block;
        font-size: 10px;
        margin-top: -36px!important;
    }

    .bgimg {
        width: 80%;
        height: 300px;
        margin: 10px auto;
    }

    .section-content h3 {
        font-size: 1.2rem;
        padding: 0 20px;
    }

    .column-container {
        width: 80%;
        margin: 10px auto;
    }

    .text-column {
        width: 100%;
        height: 250px;
    }

        .text-column:hover {
            width: 100%;
            height: 250px;
            clip-path: polygon(70% 0, 0% 0, 30% 100%, 100% 100%);
        }

    .hexagon, .hexagon3 {
        width: 300px;
        height: 300px;
    }

    .hexagon-scroll-container1 {
        margin-top: -7% !important;
    }

    .hexagon-track3 {
        margin-left: -29.5% !important;
    }

}

/* Mobile Devices (up to 576px) */
@media (max-width: 576px) {

    .peoples {
        height: 400px !important;
        width: 445px!important;
        border-radius: 10px;
    }

    .heading-container {
        margin-left: 20px;
    }
    .hero span {
        font-size: 4rem;
    }

        .hero span p.outline-text {
            font-size: 4rem;
            -webkit-text-stroke: 3px #009999;
            text-stroke: 3px #009999;
        }

    .hero p {
        font-size: 1rem;
    }

    .solutions-section-title h2, .roof-title h2 {
        font-size: 2rem;
    }

    .section-content h3 {
        font-size: 1rem;
    }

    .background-heading {
        font-size: 40px;
    }

    .foreground-heading {
        font-size: 1.3rem;
        margin-top: -60px;
    }

    .bgimg {
        height: 250px;
    }

    .custom-heading1 {
        font-size: 1.3rem;
    }

    .hexagon, .hexagon3 {
        width: 250px;
        height: 250px;
    }

    .hexagon-scroll-container1 {
        margin-top: -32% !important;
    }

    .hexagon-track3 {
        margin-left: -29.5%!important;
    }

    .hover-content h1 {
        font-size: 1rem;
    }

    .hover-content p {
        padding-right: 30px;
        padding-left: 30px;
        font-size: 0.9rem;
    }
}

/* Small Mobile Devices (up to 400px) */
@media (max-width: 400px) {

    .peoples {
        height: 400px !important;
        width: 420px !important;
        border-radius: 10px;
    }


    .hero span {
        font-size: 4rem;
    }

        .hero span p.outline-text {
            font-size: 4rem;
        }

    .hero-content {
        margin-top: 6rem;
    }

    .solutions-section-title h2, .roof-title h2 {
        font-size: 1.8rem;
    }

    .roof-title h3 {
        font-size: 1rem;
    }

    .background-heading {
        font-size: 30px;
    }

    .foreground-heading {
        font-size: 1.1rem;
        margin-top: -50px;
    }

    .hexagon, .hexagon3 {
        width: 200px;
        height: 200px;
    }

    .hexagon-scroll-container1 {
        margin-top: -32% !important;
    }

    .button{
        font-size:7px!important;
    }

    .hexagon-track3 {
        margin-left: -26.5%!important;
    }
    .column-container {
        margin-left: 57px!important;
        margin-bottom: 20px!important;
    }

        .column-container:first-child {
            margin-left: 57px!important;
        }

        .column-container:hover {
            margin-right: 0;
            transform: scale(1.03);
        }

    .text-column,
    .text-column:hover {
        width: 280px;
        clip-path: polygon(70% 0, 0% 0, 30% 100%, 100% 100%);
    }
}

/* Add this to your existing CSS */
.row.center {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.column-container {
    transition: transform 0.4s ease, margin 0.4s ease;
    will-change: transform;
}

.column-container:hover {
    transform: scale(1.05);
    margin-right: 30px;
}

.column-container:last-child:hover {
    margin-right: 0;
    transform: scale(1.05) translateX(-15px);
}

.text-column:hover {
    width: 310px; /* Reduced expansion */
}

.peoples {
    height: 600px;
    width: 600px;
    border-radius: 10px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .row.center {
        flex-direction: column;
        align-items: center;
        margin-left: initial;
    }
    
    .column-container {
        margin-left: 76px;
        margin-bottom: 20px;
    }

        .column-container:first-child {
            margin-left: 76px;
        }
    
    .column-container:hover {
        margin-right: 0;
        transform: scale(1.03);
    }
    
    .text-column, 
    .text-column:hover {
        width: 280px;
        clip-path: polygon(70% 0, 0% 0, 30% 100%, 100% 100%);
    }
}