body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    color: #181B18; /* fill_341NNR */
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(246, 247, 246, 1) 100%); /* fill_5Y39Z8 */
    position: relative;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

/* Background Ellipses */
body::before,
body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(370.78741455078125px); /* effect_WY5OEV */
    opacity: 0.8999999761581421;
    z-index: -1;
}

body::before { /* Ellipse 9 */
    width: 913.75px;
    height: 887.31px;
    background-color: #c0f8f8; /* fill_HYDONN */
    top: 667px;
    left: 1070px;
}

body::after { /* Ellipse 10 */
    width: 574.82px;
    height: 558.55px;
    background-color: #f2ff81; /* fill_HFULT9 */
    top: 311px;
    left: 1430px;
    filter: blur(345.02886962890625px); /* effect_ICKC7W */
    opacity: 1; /* Not specified, assuming 1 */
}

/* Media Query to hide background ellipses on smaller screens */
@media (max-width: 1280px) {
    body::before {
        display: none; /* Hide the first background ellipse on screens smaller than 1280px */
    }
    body::after {
        display: none; /* Hide the body::after element as its styling will be moved */
    }

    /* Styles for the new mobile background ellipse container */
    .mobile-bg-ellipse-container {
        position: absolute; /* Changed from fixed to absolute */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden; /* Crucial to contain the ellipse and prevent scroll */
        z-index: -1; /* Keep it in the background */
        pointer-events: none; /* Allow interaction with elements below */
    }

    .mobile-bg-ellipse-container::after {
        content: '';
        position: absolute;
        width: 150px; /* Adjusted size for mobile */
        height: 150px; /* Adjusted size for mobile */
        background-color: #e6fd0e; /* Yellowish color from Figma */
        border-radius: 50%;
        top: 200px; /* Adjusted position for mobile */
        right: 100px; /* Align to the right edge of the container */
        transform: translateX(50%); /* Move 50% of its own width off-screen to the right */
        filter: blur(100px); /* Reduced blur for mobile */
        opacity: 0.7; /* Adjusted opacity for mobile */
    }
}

/* Hero Section */
.hero-section {
    display: flex;
    padding: 0 80px;
    position: relative;
    width: 1280px;
    margin: 100px auto 0 auto;
    gap: 50px; /* Adjust as needed based on Figma */
}

.hero-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 800px; /* Adjust based on Figma to give space for image */
    margin-top: -50px;
    margin-left: -260px;

}

.hero-section h1 {
    font-size: 72px; /* style_9UJXUJ */
    font-weight: 600; /* style_9UJXUJ */
    line-height: 1.25em; /* style_9UJXUJ */
    letter-spacing: -2%; /* style_9UJXUJ */
    color: #181B18; /* fill_341NNR */
    width: auto; /* Remove fixed width to allow flex sizing */
    height: auto; /* Remove fixed height */
    margin-bottom: 0;
    margin-top: 0;
}

.hero-section p {
    font-size: 30px; /* style_S56GTF */
    font-weight: 400; /* style_S56GTF */
    line-height: 1.2666666666666666em; /* style_S56GTF */
    color: #2E332E; /* fill_JLGS87 */
    width: auto; /* Remove fixed width to allow flex sizing */
    height: auto; /* Remove fixed height */
    margin-top: 20px;
}

.hero-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.hero-image-container {
    height: 530px;
    width: 555px;
    margin-top: 0; /* Reset margin top as it's now in a flex container */
    border-radius: 20px;
    overflow: hidden;
    background-color: #DDF0F0;
    display: flex;
    justify-content: end;
    align-items: end;
    margin-left: -50px;
}

.hero-image {
    width: 505px;
    height: 480px;
    object-fit: fill; /* Changed from cover to fill to prevent cropping */
    border-radius: 20px;
}

@media (max-width: 1280px) {
    .hero-section {
        flex-direction: column-reverse; /* Reverse order for mobile: content first, then image */
        padding: 0 40px;
        text-align: center;
        margin-top: 50px;
        gap: 30px;
        width: 80%; /* Ensure it takes full width up to max-width */
        max-width: 1280px; /* Limit max-width */
        box-sizing: border-box;
    }

    .hero-image-container {
        width: 100%;
        height: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        padding-top: 50px;
        margin-left: 0; /* Reset margin */
    }

    .hero-content {
        align-items: center; /* Center content for smaller screens */
        text-align: center;
        max-width: 100%;
        width: 100%;
        margin-top: 0; /* Reset margin */
        margin-left: 0; /* Reset margin */
    }

    .hero-section h1 {
        font-size: 56px;
    }

    .hero-section p {
        font-size: 24px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        width: 80%; /* Adjust as needed */
        height: auto;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 0 20px;
        margin-top: 30px;
        width: 100%;
    }

    .hero-section h1 {
        font-size: 40px;
    }

    .hero-section p {
        font-size: 20px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
    }

    .hero-image {
        width: 90%; /* Adjust as needed */
    }
}

@media (max-width: 480px) {
    .hero-section {
        width: 100%;
        padding: 0 15px;
    }
å
    .hero-section h1 {
        font-size: 32px;
    }

    .hero-section p {
        font-size: 18px;
    }

    .hero-image {
        width: 100%; /* Adjust as needed */
    }
}

/* Why Cacotec Section */
.why-cacotec-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px;
    gap: 80px;
    max-width: 1440px;
    margin: 0 auto;
}

.why-cacotec-content {
    display: flex;
    gap: 20px; /* layout_YS8B0F */
    width: 1280px; /* 1440 - 80 - 80 */
    align-items: flex-start;
}

.why-cacotec-text {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px;
    background-color: #F2FF96; /* fill_DS8FSG */
    border-radius: 20px;
    width: 413px; /* layout_67FPKB */
    height: 478px; /* layout_67FPKB */
}

.why-cacotec-text h2 {
    font-size: 36px; /* style_98TSSB */
    font-weight: 600; /* style_98TSSB */
    line-height: 1.2222222222222223em; /* style_98TSSB */
    letter-spacing: -2%; /* style_98TSSB */
    color: #181B18; /* fill_341NNR */
    margin: 0;
}

.why-cacotec-text h3 {
    font-size: 18px; /* style_7RVT2A */
    font-weight: 600; /* style_7RVT2A */
    line-height: 1.5555555555555556em; /* style_7RVT2A */
    color: #2E332E; /* fill_JLGS87 */
    margin: 0;
}

.why-cacotec-text p {
    font-size: 18px; /* style_96DNRM */
    font-weight: 500; /* style_96DNRM */
    line-height: 1.5555555555555556em; /* style_96DNRM */
    color: #3F473E; /* fill_Q04QWX */
    margin: 0;
}

.why-cacotec-text .arrow-icon {
    margin-bottom: -5px; margin-left: 5px
}

.feature-cards {
    display: flex;
    justify-content: space-between; /* To create space between columns */
    width: 848px; /* Fixed width as per Figma */
    height: 558px; /* Fixed height as per Figma */
    gap: 20px; /* Gap between the two columns */
}

.feature-column {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between; /* Distribute space evenly vertically */
    align-items: stretch; /* Ensure cards stretch to fill height */
    flex: 1; /* Allow columns to grow and shrink equally */
    gap: 20px; /* Consistent vertical gap between cards */
}

.feature-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px; /* layout_T29DPV - Outer padding for the card */
    border: 1px solid #E2E5E2; /* stroke_00KI79 - Outer border */
    border-radius: 20px; /* layout_T29DPV - Outer border radius */
    box-sizing: border-box;
    width: auto; /* Let flexbox manage width */
}

.feature-card-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px; /* layout_YX3BJC - Inner padding */
    background-color: #FFFFFF; /* fill_0YVK3Y */
    border: 1px solid #E2E5E2; /* stroke_00KI79 - Inner border */
    box-shadow: 0px 2px 2px -1px rgba(10, 13, 18, 0.04), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08); /* effect_S2N29U */
    border-radius: 12px; /* layout_YX3BJC - Inner border radius */
    width: 394px; /* layout_YX3BJC - Fixed width for inner content */
    box-sizing: border-box;
}

.feature-card .icon-container {
    width: 20px; /* layout_RTV84V */
    height: 20px; /* layout_RTV84V */
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card .icon-container img {
    width: 100%;
    height: 100%;
}

.feature-card p {
    font-size: 18px; /* style_1MMOCQ */
    font-weight: 600; /* style_1MMOCQ */
    line-height: 1.5555555555555556em; /* style_1MMOCQ */
    color: #2E332E; /* fill_B0TYC2 */
    margin: 0;
    text-align: left; /* style_1MMOCQ */
}

/* Media Queries for why-cacotec-section */
@media (max-width: 1280px) {
    .why-cacotec-section {
        padding: 40px;
        gap: 40px;
        box-sizing: border-box;
        width: 100%;
    }

    .why-cacotec-content {
        flex-direction: column; /* Stack elements vertically */
        align-items: center;
        gap: 40px;
        max-width: 100%;
        width: 100%;
    }

    .why-cacotec-text {
        max-width: 80%; /* Adjust width for smaller screens */
        width: 100%;
        height: auto;
        padding: 30px;
        box-sizing: border-box;
    }

    .why-cacotec-text .arrow-icon {
       rotate: 90deg;
    }

    .feature-cards {
        flex-direction: column; /* Stack feature columns vertically */
        max-width: 80%;
        width: 100%;
        height: auto;
    }

    .feature-column {
        min-width: unset; /* Remove min-width for stacked columns */
        width: 100%;
        height: auto;
    }

    .feature-card {
        min-height: unset; /* Remove min-height */
        padding: 15px;
        width: 100%;
    }

    .feature-card-inner {
        width: auto;
    }

}

@media (max-width: 768px) {
    .why-cacotec-section {
        padding: 20px;
        margin-top: 30px;
        gap: 30px;
    }

    .why-cacotec-text {
        max-width: 100%;
        padding: 20px;
    }

    .why-cacotec-text h2 {
        font-size: 30px;
    }

    .why-cacotec-text h3,
    .why-cacotec-text p,
    .feature-card p {
        font-size: 16px;
    }

    .feature-cards {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .why-cacotec-section {
        padding: 15px;
        margin-top: 20px;
        gap: 20px;
    }

    .why-cacotec-text h2 {
        font-size: 24px;
    }

    .feature-card {
        padding: 10px;
    }
}

.cta-section-container {
    width: 1280px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.cta-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    border: 1px solid #E2E5E2; /* stroke_2BJ1A3 */
    border-radius: 20px;
    box-sizing: border-box;
    align-items: flex-start;
    width: 847px; /* layout_ZJWQYN */
}

.cta-section h3 {
    font-size: 36px; /* style_98TSSB */
    font-weight: 600; /* style_98TSSB */
    line-height: 1.2222222222222223em; /* style_98TSSB */
    letter-spacing: -2%; /* style_98TSSB */
    color: #181B18; /* fill_341NNR */
    margin: 0;
}

.cta-section .btn-primary {
    padding: 6px 18px; /* layout_PKWUGS */
    border-radius: 10px;
    font-size: 18px; /* style_7RVT2A */
    font-weight: 600; /* style_7RVT2A */
    line-height: 1.5555555555555556em; /* style_7RVT2A */
    margin-top: 50px;
    display: block;

}

.main-content-image {
    width: 1002px; /* layout_03KZFS */
    height: 607px; /* layout_03KZFS */
    object-fit: cover;
    margin-top: 80px;
    align-self: flex-start;
    margin-left: 380px;
    margin-top: -150px;
}

/* Media Queries for cta-section */
@media (max-width: 1280px) {
    .cta-section-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 40px;
        margin-top: 50px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .cta-section {
        width: 80%;
        text-align: center;
        align-items: center;
        background-color: #F8F9F8; /* Added background color from Figma */
    }

    .cta-section h3 {
        font-size: 30px;
    }

    .main-content-image {
        width: 1500px;
        margin-top: -200px;
        height: auto;
        margin-right: -50px;
        align-self: center; /* Center the image */
        pointer-events: none;
    }
}

@media (max-width: 768px) {
    .cta-section-container {
        padding: 0 20px;
        margin-top: 30px;
    }

    .cta-section {
        padding: 20px;
        width: 100%;
    }

    .cta-section h3 {
        font-size: 24px;
    }

    .cta-section .btn-primary {
        margin-top: 30px;
        display: block;
    }

    .main-content-image {
        width: 1000px;
        margin-right: 150px;
        margin-top: -150px;
        pointer-events: none;
    }
}

@media (max-width: 480px) {
    .cta-section-container {
        padding: 0 15px;
        margin-top: 20px;
    }

    .cta-section {
        padding: 15px;
    }

    .cta-section h3 {
        font-size: 20px;
        text-align: left;
    }

    .main-content-image {
        width: 800px;
        margin-right: 200px;
        margin-top: -120px;
        pointer-events: none;
    }
}