/* Hero Block Main Container */
.hero-block {
    position: relative;
    width: 100%;
    min-height: 700px; /* From design */
    border-radius: 0 0 50px 50px; /* Rounded bottom corners if desired, or all corners */
    border-radius: 30px; /* Design seems to have rounded corners on the banner */
    overflow: hidden;
    color: #fff;
    background-color: #000;
    margin-bottom: 30px;
    max-height: 700px;
}

/* Background Image */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Dark Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Adjust opacity as needed */
    background: linear-gradient(90deg, rgba(20,24,21,0.8) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 2;
}

/* Decorative Elements */
.hero-line {
    position: absolute;
    height: 1px;
    width: 150%;
    background: rgba(133, 133, 133, 0.3);
    left: -25%;
    top: 50%;
    z-index: 3;
    pointer-events: none;
}

.line-1 {
    transform: rotate(27deg);
}

.line-2 {
    transform: rotate(-153deg);
}

.hero-circle-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align content to bottom if needed */
    padding-bottom: 100px;
}

.hero-circle {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(133, 133, 133, 0.4);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Content Container */
.hero-container {
    position: relative;
    z-index: 10;
    
    padding-top: 40px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 700px;
}

/* Location Top Left */
.hero-location {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}

.hero-location .icon-wrap {
    width: 35px;
    height: 35px;
    margin-right: 10px;
}

.hero-location .icon-wrap img {
    width: 100%;
    height: auto;
}

.hero-location .location-text {
    font-size: 18px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

/* Main Title */
.hero-content {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.hero-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #fff;
}

@media (min-width: 992px) {
    .hero-title {
        font-size: 46px;
        line-height: 60px;
    }
}

.hero-title .highlight {
    text-decoration: underline;
    color: #fff;
    background: none;
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin-top: 20px;
}

@media (min-width: 992px) {
    .hero-subtitle {
        font-size: 20px;
    }
}

/* CTA Buttons */
.hero-actions {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.cta-button-group {
    display: flex;
    align-items: center;
    /* gap: 15px; - replaced with margins for better compatibility */
}

.cta-button-group .btn-main-cta {
    margin-right: 15px;
}

.btn-main-cta {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 10px 25px;
    text-decoration: none !important;
    transition: transform 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-main-cta:hover {
    transform: translateY(-2px);
    background: #f8f8f8;
}

.btn-main-cta .btn-text {
    color: #000;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    margin-right: 20px;
    text-align: left;
}

@media (min-width: 768px) {
    .btn-main-cta .btn-text {
        font-size: 16px;
    }
    .btn-main-cta {
        padding: 16px 30px;
    }
}

.btn-main-cta .btn-icon {
    width: 20px;
    height: 20px;
}

.btn-main-cta .btn-icon img {
    width: 100%;
    transform: rotate(0deg); /* Adjust if needed based on image */
}

.btn-whatsapp {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.2s;
}

.btn-whatsapp:hover {
    transform: scale(1.05);
}

.btn-whatsapp img {
    width: 100%;
    height: 100%;
}

/* About Block */
.about-block {
    background: #ffffff;
    border-radius: 30px;
    padding: 50px 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

@media (min-width: 992px) {
    .about-block {
        padding: 78px 30px 77px;
    }
}

.about-content {
    padding-right: 15px;
}

.about-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.2;
}

.about-description p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 25px;
    color: #000;
    margin-bottom: 40px;
}

.about-stats {
    margin-bottom: 40px;
}

.stat-item {
    margin-bottom: 20px;
}

.stat-value {
    font-family: 'Open Sans', sans-serif;
        font-size: 26px;
    font-weight: 700;
    color: #8ebe4c;
    line-height: 1.2;
    margin-bottom: 5px;
}

.stat-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 25px;
    color: #000;
}

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

.about-footer .icon-wrap {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    margin-right: 12px;
}

.about-footer .icon-wrap img {
    width: 100%;
    height: auto;
}

.about-footer .location-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #8ebe4c;
    line-height: 1.4;
}

.about-image-wrapper {
    margin-top: 30px;
}

@media (min-width: 992px) {
    .about-image-wrapper {
        margin-top: 0;
        text-align: right;
    }
}

.about-img {
    border-radius: 30px;
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Services Section */
.services-container-wrapper {
    margin-bottom: 60px;
}

.section-title {
    font-family: Lato, 'Open Sans', sans-serif;
    font-size: 46px;
    font-weight: 700;
    color: #000;
    margin-bottom: 60px;
    text-align: center;
}

.services-block {
    width: 100%;
}

.services-grid {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Increased gap to match design */
}

/* Top Row: Cards + Background Image */
.services-row-top {
    position: relative;
    background: #fff;
    border-radius: 30px;
    padding: 45px 25px 239px; /* Match padding from design code */
    /* min-height: 473px; - handled by padding */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden; /* Ensure image stays inside border radius */
}

.services-bg-image {
    position: absolute;
    top: 267px; /* Exact from design */
    left: 52px; /* Exact from design */
    width: 1256px; /* Exact from design */
    height: 384px; /* Exact from design */
    z-index: 1;
    border-radius: 500px; /* Exact from design */
    overflow: hidden;
}

.services-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 500px; /* Apply to img as well just in case */
}

.services-row-top .row {
    position: relative;
    z-index: 2; /* Text above image */
}

/* Service Card Styles (Top Row Items) */
.service-card {
    /* No margin bottom needed here as the padding of container handles spacing */
    /* width: 100%; */
}

.service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%; /* Ensure full width */
}

/* Button & Pill Styles */
.service-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 43px; /* Exact padding from design */
    border-radius: 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    height: 55px; /* Exact height */
}

.service-pill.dark {
    background-color: #24160e;
    color: #fff;
}

.service-pill.light {
    background-color: #fff;
    color: #8ebe4c;
    border: 1px solid #cecece;
    padding: 4px 42px; /* Slight adjustment for border */
}

.service-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 55px; /* Exact size */
    height: 55px; /* Exact size */
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s;
    background: transparent; /* Assuming image contains the green circle */
}

.service-btn:hover {
    transform: scale(1.1);
}

.service-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Ensure image stays round */
}

.service-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 25px;
    color: #000;
    margin-top: 15px; /* Adjust spacing */
}

/* Bottom Row Styles */
.services-row-bottom {
    /* display: flex; - row handles this */
    /* justify-content: space-between; */
}

.service-card-bottom {
    background: #fff;
    border-radius: 30px; /* Main container radius */
    overflow: hidden;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    padding-top: 26px; /* Exact padding */
}

.service-content {
    padding: 0 25px; /* Side padding */
}

.service-image {
    position: relative;
    height: 384px; /* Height from bottom design */
    width: 100%;
    margin-top: 40px; /* Space between text and image */
    overflow: hidden;
    border-radius: 500px 500px 0 0; /* Try to match the top row style or just rounded? Code says 500px radius on image */
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 500px; /* Apply radius to image */
    /* Since we use a crop of a larger image, cover is best approximation without the full sprite */
}

/* Why Trust Us Section */
.trust-container-wrapper {
    margin-bottom: 60px;
    /* max-width: 1440px; */
}

.trust-block {
    background: #cdecaf1a; /* #cdecaf with low opacity from design */
    background-color: rgba(205, 236, 175, 0.1);
    border-radius: 0; /* Design seems to have this as a full section background or large block? */
    /* Actually based on screenshot it looks like individual cards on a light background. 
       But the code provided for 0_216 shows a background wrapper. 
       Let's stick to the container wrapper having the background or just individual cards. 
       The screenshot shows a light green background for the whole section. */
    padding: 87px 40px 80px;
    border-radius: 30px; /* Assuming rounded corners for the block itself */
}

.highlight-olive {
    color: #6f8c46;
}

.trust-grid .row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px; /* Space between rows */
}

.trust-card {
    position: relative;
    border-radius: 30px;
    padding: 66px 25px 41px; /* Top padding to clear the number badge */
    height: 100%;
    min-height: 295px; /* From design code */
    display: flex;
    flex-direction: column;
}

.trust-card.card-green {
    background-color: #97C454; /* Green card */
    color: #fff;
}

.trust-card.card-white {
    background-color: #fff;
    color: #000;
}

.trust-card.card-dark {
    background-color: #23170F;
    color: #fff;
}

/* Number Badge */
.card-number {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('images/mky4nkj6-rfdmar6.svg'); /* Default green tab shape? */
    /* Need to check if we should use the SVG as background or just style it. 
       The code used specific SVGs for backgrounds. Let's try to simulate with CSS or use the SVG if it's the tab shape. 
       Based on file names, likely the SVGs are the tab shapes. */
    width: 100px; /* Approx */
    height: 60px; /* Approx */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Lato, sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #8ebe4c; /* Light green text */
    /* Adjusting based on design: The number sits ON TOP of a tab that protrudes or is part of the card. 
       The SVGs provided in the prompt (mky4nkj6-rfdmar6.svg etc) are likely the background shapes for these cards or the tabs.
       Let's simplify with CSS for now or assume SVGs are full card backgrounds? 
       Actually the prompt says "background-image: url(...)". Let's use CSS for cleanliness unless SVGs are essential.
       The number is "01.", "02.", etc.
    */
    padding: 20px;
    background: transparent;
    z-index: 2;
    line-height: 1;
}

/* Specific badge colors */
.card-green .card-number {
    color: #fff; /* White number on green card? Design says light green number. */
    /* Actually design says "Number badge: 01. ... color: light green (#A9D86C)". 
       On a green card #97C454, light green might contrast poorly. 
       Let's trust the design description: "01. ... color: light green". */
    color: #d7f3c4; /* Lighter green for contrast */
}

.card-white .card-number {
    color: #8ebe4c;
}

.card-dark .card-number {
    color: #8ebe4c;
}

/* Tab shape simulation using pseudo-element */
.trust-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 60px;
    background-color: inherit; /* Matches card background color */
    border-radius: 30px 0 30px 0; /* Tab shape: Top-Left rounded, Top-Right sharp (square), Bottom-Right rounded, Bottom-Left sharp */
    /* Wait, "tab" usually connects smoothly. Let's look at the screenshot. 
       The screenshot shows the number is on a "tab" that sticks OUT from the top-left corner? 
       OR is it a cutout? 
       Actually looking closely at the screenshot for "01": 
       The green card has a white tab on the top-left corner where "01." sits? 
       No, "01." is on a light-colored shape that overlaps the card. 
       Wait, for card 02 (white), the "02." is on a light green tab? 
       Let's re-read: "Number badge ... sits above/overlapping the card with a rounded tab."
       Let's implement a distinct tab style.
    */
    background-color: #fff; /* Default tab bg */
    z-index: 1;
    display: block;
}

/* Fix tab colors based on card type */
.trust-card.card-green::before {
    background-color: #fff; /* White tab on green card? Or light green? 
    Screenshot shows "01" on a WHITE tab on the green card? 
    Actually, looking at Card 02 (white card), "02" is on a light green tab? 
    Let's refine:
    - Card 01 (Green bg): "01" text is Green. Tab background is White.
    - Card 02 (White bg): "02" text is White? No, "02" text is Green? 
      Re-reading OCR: "Number badge: 02. ... color: light green (#A9D86C); rounded tab in top-left."
      If the text is light green, the background must be contrasting (e.g. White). 
      But if the card is white, a white tab is invisible.
      Maybe the tab is Light Green and text is White?
      Let's look at Card 04 (Dark): "04" text is White? OCR says "color: light green".
      Okay, let's assume a uniform style: 
      The "Tab" is actually a shape cutout or an added element.
      Let's style the .card-number itself as the tab.
    */
    display: none; /* Remove pseudo-element approach, style .card-number directly */
}

.trust-card::before { display: none; }

.card-number {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 70px;
    border-radius: 30px 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Lato, sans-serif;
    font-size: 36px;
    font-weight: 700;
    z-index: 2;
    background-color: #fff; /* Default white tab */
    color: #8ebe4c; /* Default green text */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

/* Card 01: Green Card */
.trust-card.card-green .card-number {
    background-color: #fff; /* White tab */
    color: #8ebe4c; /* Green text */
}

/* Card 02 & 03: White Card */
.trust-card.card-white .card-number {
    background-color: #f5f5f5; /* Light gray/greenish tab to stand out? 
    Or maybe transparent? 
    If card is white, tab needs to be different or it's just text. 
    Screenshot suggests "rounded tab". Let's use a very light green or gray. */
    background-color: #f0f7e6; /* Very light green hint */
    color: #8ebe4c;
}

/* Card 04: Dark Card */
.trust-card.card-dark .card-number {
    background-color: #fff; /* White tab */
    color: #8ebe4c; /* Green text */
}

/* Using the SVGs as background for the whole card content wrapper if they contain the tab shape? 
   The provided code used them as background-image for the container. 
   Let's stick to CSS styling for flexibility. */

.card-content {
    position: relative;
    z-index: 2;
    margin-top: 20px;
}

.card-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.trust-card.card-green .card-title,
.trust-card.card-dark .card-title {
    color: #fff;
}

.trust-card.card-white .card-title {
    color: #000;
}

.card-title .highlight-green {
    color: #8ebe4c;
}

.card-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 25px;
}

.trust-card.card-green .card-text,
.trust-card.card-dark .card-text {
    color: #fff; /* or light gray/white */
}

.trust-card.card-white .card-text {
    color: #000;
}

/* Images */
.trust-image {
    height: 100%;
    min-height: 295px;
    border-radius: 30px; /* 20px in code, 30px in design? Let's use 30px for consistency */
    overflow: hidden;
}

.trust-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}


/* Responsive adjustments */
@media (max-width: 767px) {
    .hero-block {
        min-height: auto;
        padding-bottom: 40px;
    }
    
    .hero-circle-wrapper {
        display: none; /* Hide decorative circle on mobile if it interferes */
    }
    
    .cta-button-group {
        flex-direction: column;
    }

    .cta-button-group .btn-main-cta {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .hero-title {
        font-size: 24px;
    }

    .about-block {
        padding: 30px 20px;
    }
    
    .about-title {
        font-size: 26px;
        text-align: center;
    }
    
    .about-stats {
        text-align: center;
    }
    
    .stat-item {
        margin-bottom: 30px;
    }
    
    .about-footer {
        justify-content: center;
    }

    /* Services Mobile */
    .services-row-top {
        padding-bottom: 20px;
        min-height: auto;
    }

    .services-bg-image {
        display: none; /* Hide complex background image on mobile for simplicity */
    }

    .service-card {
        margin-bottom: 30px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .service-card-bottom {
        margin-bottom: 30px;
    }
    
    .service-pill {
        font-size: 16px;
        padding: 8px 15px;
    }
    
    .service-btn {
        width: 40px;
        height: 40px;
    }
    
    .section-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    /* Trust Block Mobile */
    .trust-block {
        padding: 40px 20px;
    }
    
    .trust-card {
        margin-bottom: 20px;
        min-height: auto;
    }
    
    .trust-image {
        margin-bottom: 20px;
        height: 200px; /* Fixed height for mobile images */
        min-height: auto;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .service-pill {
        font-size: 14px;
        padding: 8px 15px;
    }
    .service-card {
        margin-bottom: 200px;
    }
    .trust-card {
        padding: 50px 20px 30px;
    }
    .card-number {
        font-size: 36px;
    }
}

/* Categories Section */
.categories-container-wrapper {
    margin-bottom: 60px;
}

.categories-block {
    width: 100%;
}

.categories-grid .row {
    row-gap: 30px;
}

.category-card {
    display: block;
    background: #fff;
    border-radius: 30px;
    padding: 0 20px 20px 30px; /* Padding for content below image? */
    /* Wait, design looks like Image takes up space, then title/icon at bottom. 
       Actually code says: 
       padding: 0px 19px 48px 29px;
       Let's stick to flex layout inside card. */
    height: 100%;
    min-height: 369px; /* From code */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

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

.category-image {
    height: 250px; /* Approx height for image area */
    display: flex;
    align-items: center;
    justify-content: center; /* Center image generally */
    /* Images seem to be positioned differently per card in design code (margins etc). 
       We will use object-fit contain to keep them safe. */
    margin-top: 20px;
}

.category-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.category-footer {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align bottom */
}

.category-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    line-height: 1.2;
    max-width: 70%;
}

.category-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
}

.category-icon img {
    width: 100%;
    height: 100%;
}

/* CTA Card (Last one) */
.category-card.cta-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 25px 48px; /* From code */
    cursor: default; /* Card itself isn't a link, but button is */
}

.category-card.cta-card:hover {
    transform: none; /* Disable hover lift for the container if it's not clickable as whole */
}

.cta-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #000;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 20px;
}

.cta-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    margin-bottom: 40px;
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #cecece;
    border-radius: 30px;
    padding: 4px 4px 4px 42px; /* Padding left for text, right for icon area? */
    /* Design: Button is pill shaped, text "Оставить заявку", icon on right outside? 
       Actually looking at screenshot: 
       "Оставить заявку" is inside a pill with border. 
       The green icon is to the RIGHT of the pill text? 
       Or is the icon part of the button group? 
       Let's look at code: .a18 (border) contains .a17 (text). .a19 (img) is outside .a18?
       Wait, design screenshot shows a single long pill? 
       No, look closely at "Card (CTA/request card)":
       "Button ... pill-shaped, light gray outline... Icon ... to the right of the button area"
       Wait, the icon is NOT inside the border? 
       Let's re-examine code structure provided in prompt:
       .autoWrapper4 > .a18 (border) > .a17 (text)
       .autoWrapper4 > .a19 (img)
       So they are siblings. Button text in bordered pill, Icon outside.
       
       BUT user said: "Кнопка оставить заявку это тоже просто ссылка"
       So the whole thing should be clickable or just the button? 
       Let's make the .cta-button wrap both for easier clicking.
    */
    border: none; /* Reset wrapper border */
    background: none;
    padding: 0;
    text-decoration: none !important;
    width: 100%;
}

.cta-button .btn-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    border: 1px solid #cecece;
    border-radius: 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #8ebe4c;
    background: #fff;
    flex-grow: 1;
    margin-right: 10px;
    transition: background 0.2s;
}

.cta-button:hover .btn-label {
    background: #f9f9f9;
}

.cta-button .btn-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
}

.cta-button .btn-icon img {
    width: 100%;
    height: 100%;
}

/* Developers Section */
.developers-container-wrapper {
    margin-bottom: 60px;
}

.developers-block {
    background: #fff;
    border-radius: 50px;
    padding: 80px 60px 75px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.dev-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 46px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 40px;
}

.dev-description {
    max-width: 720px;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #000;
}

.dev-description .fw-bold {
    font-weight: 700;
}

.developers-main-image {
    position: relative;
    width: 100%;
    /* The image in design seems to float right or overlap? 
       Code says: position absolute, left 899px. 
       Let's keep it responsive in column. */
    text-align: right;
    margin-bottom: 40px;
}

.developers-main-image img {
    max-width: 100%;
    height: auto;
}

.developers-features {
    margin-top: 50px;
}

/* Feature Cards */
.feature-card {
    position: relative;
    border-radius: 20px;
    height: 295px;
    overflow: hidden;
    margin-bottom: 20px;
}

.feature-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.feature-content {
    position: absolute;
    bottom: 15px;
    left: 12px;
    right: 12px;
    border-radius: 20px;
    padding: 15px 20px;
    backdrop-filter: blur(5px);
    z-index: 2;
    min-height: 124px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-card.feature-dark .feature-content {
    background: #24160e; /* Dark brown */
}

.feature-card.feature-light .feature-content,
.feature-card.feature-gray .feature-content {
    background: rgba(217, 217, 217, 0.5); /* Semi-transparent gray */
}

.feature-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 2px 10px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    width: fit-content;
    margin-bottom: 15px;
}

.feature-text {
    font-family: Lato, 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #fff;
    margin: 0;
}

/* CTA in Dev Block */
.dev-cta-block {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 295px; /* Align with cards */
}

.dev-cta-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #000;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 20px;
}

.dev-cta-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #000;
    margin-bottom: 40px;
}

.dev-cta-btn-group {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    gap: 10px;
    margin-top: auto; /* Push to bottom */
}

.dev-cta-btn-group .btn-pill {
    flex-grow: 1;
    border: 1px solid #cecece;
    border-radius: 30px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #8ebe4c;
    background: #fff;
    transition: background 0.2s;
}

.dev-cta-btn-group:hover .btn-pill {
    background: #f9f9f9;
}

.dev-cta-btn-group .btn-circle {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
}

.dev-cta-btn-group .btn-circle img {
    width: 100%;
    height: 100%;
}

/* Responsive Dev Block */
@media (max-width: 991px) {
    .developers-block {
        padding: 40px 30px;
    }
    .dev-title {
        font-size: 32px;
    }
    .developers-main-image {
        text-align: center;
        margin-top: 30px;
    }
    .feature-card {
        height: 250px;
    }
}

@media (max-width: 767px) {
    .dev-title {
        font-size: 28px;
        text-align: center;
    }
    .dev-description {
        text-align: center;
    }
    .dev-cta-block {
        padding-left: 0;
        margin-top: 30px;
        min-height: auto;
    }
}

/* Contact Section */
.contact-container-wrapper {
    margin-bottom: 60px;
}

.contact-block {
    position: relative;
    border-radius: 50px;
    overflow: hidden;
    padding: 47px 60px 46px; /* Approx padding from code */
    min-height: 531px;
}

.contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Slight overlay */
    z-index: 2;
}

.contact-content-grid {
    position: relative;
    z-index: 3;
}

/* Left Info Card */
.contact-info-card {
    background: rgba(217, 217, 217, 0.18); /* Semi-transparent */
    backdrop-filter: blur(5px);
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 27px 30px 42px;
    height: 100%;
    color: #fff;
}

.contact-subtitle {
    font-family: Lato, sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.contact-title {
    font-family: Lato, sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: 1.8px;
}

.contact-desc {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.contact-desc .fw-bold {
    font-weight: 700;
}

.contact-features {
    display: flex;
    align-items: center;
}

.dots-vertical {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-right: 20px;
}

.dots-vertical .dot {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 50%;
}

.feature-pill {
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 11px 20px;
    font-family: Lato, sans-serif;
    font-size: 16px;
}

/* Right Form Card */
.contact-form-card {
    background: #fff;
    border-radius: 10px; /* Code says 10px, design looks rounded */
    padding: 46px 23px 58px;
    height: 100%;
}

.form-title {
    font-family: Lato, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #000;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.6;
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form .form-control {
    border: 1px solid #efefef;
    border-radius: 10px;
    background: #fafafa;
    height: 55px;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: none;
    color: #000;
}

.contact-form .form-control::placeholder {
    color: #b0b0b0;
}

.btn-submit {
    width: 100%;
    height: 60px;
    background: #8ebe4c;
    border: 1px solid #cecece;
    border-radius: 30px;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: #7ca842;
}

.form-agreement {
    text-align: center;
}

.checkbox-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 1px solid #5d3a27;
    margin-right: 10px;
    position: relative;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #5d3a27;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.agreement-text {
    font-family: Lato, sans-serif;
    font-size: 12px;
    color: #000;
}

/* Responsive Contact Block */
@media (max-width: 991px) {
    .contact-block {
        padding: 40px 30px;
    }
    .contact-title {
        font-size: 28px;
    }
    .contact-info-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .contact-block {
        padding: 30px 15px;
        min-height: auto;
    }
    .contact-info-card {
        padding: 20px;
    }
    .contact-title {
        font-size: 24px;
    }
    .contact-form-card {
        padding: 30px 15px;
    }
}