/* ==========================================
   1. RESET & VARIABLES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    color: #333333;
    overflow-x: hidden;
}

/* ==========================================
   2. MAIN HEADER (Navigation)
   ========================================== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4%;
    background-color: #ffffff;
    height: 100px;
}

.logo {
    height: 80px;
    width: auto;
}

.nav-menu ul {
    list-style: none;
    display: flex;
    gap: 25px;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: #1a1a1a;
    transition: color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu .active {
    color: #0076c0; /* Match the logo blue */
}

.nav-menu .arrow {
    font-size: 0.65rem;
    vertical-align: middle;
}
/* 1. THE DROPDOWN CONTAINER */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 2. HIDE THE LINKS BY DEFAULT */
.dropdown-content {
    display: none;        /* This completely hides the links */
    position: absolute;   /* Layers them floating underneath the 'More' tab */
    top: 100%;            /* Positions them directly below the parent text */
    left: 0;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 10;          /* Keeps it on top of page content */
    padding: 10px 0;
}

/* 3. SHOW THE LINKS ONLY ON HOVER */
.dropdown:hover .dropdown-content {
    display: flex;        /* Changes from 'none' to 'flex' or 'block' when hovered */
    flex-direction: column; 
    gap: 12px;
}

/* Optional layout formatting for the nested links */
.dropdown-content a {
    color: #1a1a1a;
    text-decoration: none;
    padding: 8px 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
    color: #0072bc;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.phone-number {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
}

.btn-cta {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: #ffffff;
    background-color: #1a1a1a;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-cta:hover {
    background-color: #0076c0;
}

/* ==========================================
   3. BLUE SUB-BANNER
   ========================================== */
.sub-banner {
    background-color: #0072bc;
    color: #ffffff;
    text-align: center;
    padding: 8px 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

/* ==========================================
   4. HERO SECTION
   ========================================== */
.hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    /* Replace 'hero-bg.jpg' with your background home image path */
    background-image: url("../images/map.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

/* Dark transparent overlay to make text highly readable */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    text-align: center;
    color: #ffffff;
}

.hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto 50px auto;
    font-weight: 300;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}



/* ==========================================
   6. RESPONSIVE DESIGN (Media Queries)
   ========================================== */
@media (max-width: 991px) {
    .main-header {
        flex-direction: column;
        height: auto;
        padding: 20px;
        gap: 15px;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .badge-container {
        gap: 20px;
    }
    .badge-img {
        max-width: 150px;
    }
}

@media (max-width: 768px) {
    .nav-menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .header-right {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .btn-cta {
        width: 100%;
        text-align: center;
    }
    .hero-title {
        font-size: 2rem;
    }
}

/* ==========================================
   SERVICES GALLERY SECTION
   ========================================== */
.services-gallery {
    width: 100%;
    min-height: 100vh;
    padding: 80px 20px;
    /* Replace 'wood-background.jpg' with your actual wood texture image path */
    background-image: url('wood-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The 2-column grid container */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

/* Individual white service card */
.service-card {
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    padding: 24px; /* Creates the uniform white border spacing around the content */
}

/* Card Image Wrapper */
.card-image {
    width: 100%;
    height: 280px; /* Fixed height for clean alignment */
    overflow: hidden;
    margin-bottom: 24px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps the images perfectly cropped and un-stretched */
    display: block;
}

/* Card Text Content Area */
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-grow: 1;
}

/* Services Header Font (Matching Oswald) */
.card-content h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: #0072bc; /* Matches the vibrant blue branding */
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Paragraph styling */
.card-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 25px;
    max-width: 90%;
}

/* Light blue LEARN MORE button */
.btn-learn {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #ffffff;
    background-color: #29abe2; /* Brighter sky blue for the buttons */
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: auto; /* Pushes the button to the bottom of the card if heights vary */
}

.btn-learn:hover {
    background-color: #0072bc; /* Darker blue on hover */
}

/* ==========================================
   RESPONSIVENESS (Media Queries)
   ========================================== */
@media (max-width: 991px) {
    .services-grid {
        gap: 30px;
    }
    .card-image {
        height: 220px;
    }
    .card-content h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    /* Switches to a single column on tablet/mobile */
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 550px; /* Constrains card width on portrait devices so they don't stretch too wide */
    }
    .services-gallery {
        padding: 40px 15px;
    }
}

/* ==========================================
   5. ABOUT & WHY CHOOSE US SECTION
   ========================================== */
.about-section {
    background-color: #ffffff;
    padding: 80px 20px;
    max-width: 1140px;
    margin: 0 auto;
}

.about-header {
    text-align: center;
    margin-bottom: 60px;
}

/* Stars Rating Header */
.stars-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

.stars {
    color: #b5b5b5; /* Light grey stars */
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.rating-text {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    color: #888888;
    letter-spacing: 2px;
}

/* Section Header Titles */
.about-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    color: #0072bc;
    margin-bottom: 15px;
}

.about-intro {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666666;
    max-width: 780px;
    margin: 0 auto;
}

/* Content Split (Images Left, Text Right) */
.about-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 40px;
}

/* Overlapping Image Container */
.image-overlap-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
}

.overlap-img {
    position: absolute;
    border: 5px solid #ffffff; /* White polaroid-style frame edge */
    overflow: hidden;
}

.overlap-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Top-Left Back Image */
.img-back {
    width: 280px;
    height: 240px;
    top: 20px;
    left: 40px;
    z-index: 1;
    /* Clean CSS offset box shadow replicating the blue background design block */
    box-shadow: -15px -15px 0px #0072bc;
}

/* Bottom-Right Front Image */
.img-front {
    width: 240px;
    height: 240px;
    bottom: 20px;
    right: 40px;
    z-index: 2;
    /* Clean CSS offset box shadow replicating the blue background design block */
    box-shadow: 15px 15px 0px #0072bc;
}

/* Why Choose Us Side */
.why-choose-content h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: #0072bc;
    margin-bottom: 15px;
}

.why-intro {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444444;
    margin-bottom: 20px;
}

.why-list {
    list-style: none;
    margin-bottom: 30px;
}

.why-list li {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #555555;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

/* Square/dash bullet styling */
.why-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #555555;
    font-size: 0.7rem;
    top: 1px;
}

/* CTA Blue Button */
.btn-hire {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #ffffff;
    background-color: #29abe2;
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.btn-hire:hover {
    background-color: #0072bc;
}

/* ==========================================
   6. THREE-COLUMN TRUST CARDS (Wood Background)
   ========================================== */
.trust-cards-section {
    width: 100%;
    padding: 80px 20px;
    background-image: url('wood-background.jpg'); /* Reuses the same wood texture background */
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    display: flex;
    justify-content: center;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1140px;
    width: 100%;
}

.trust-card {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.trust-card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    margin-bottom: 20px;
}

.trust-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trust-card-content {
    text-align: center;
}

.trust-card-content h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #0072bc;
    margin-bottom: 15px;
    line-height: 1.4;
}

.trust-card-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #666666;
}

/* ==========================================
   RESPONSIVENESS (Media Queries)
   ========================================== */
@media (max-width: 991px) {
    .about-content-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .image-overlap-wrapper {
        max-width: 450px;
        margin: 0 auto;
        height: 360px;
    }
    .img-back {
        width: 240px;
        height: 200px;
        left: 20px;
    }
    .img-front {
        width: 200px;
        height: 200px;
        right: 20px;
    }
    .trust-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .image-overlap-wrapper {
        height: 300px;
    }
    .img-back {
        width: 180px;
        height: 160px;
        left: 10px;
        box-shadow: -8px -8px 0px #0072bc;
    }
    .img-front {
        width: 160px;
        height: 160px;
        right: 10px;
        box-shadow: 8px 8px 0px #0072bc;
    }
}
/* ==========================================
   7. GET ESTIMATE CTA BANNER
   ========================================== */
.cta-banner {
    background-color: #0072bc; /* Match the corporate brand blue */
    padding: 30px 20px;
    width: 100%;
}

.cta-banner-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cta-banner h2 {
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.btn-quote {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #0072bc;
    background-color: #ffffff;
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 2px;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.btn-quote:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* ==========================================
   8. CONTACT & MAP SECTION
   ========================================== */
.contact-map-section {
    background-color: #ffffff;
    padding: 60px 0 0 0; /* Keep bottom padding empty so map lines up perfectly with dark footer */
    text-align: center;
}

.contact-info-container {
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.contact-info-container h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    color: #0072bc;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.contact-item {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    color: #444444;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-item a {
    color: #444444;
    text-decoration: none;
}

.contact-item a:hover {
    color: #0072bc;
}

.contact-item .icon {
    font-size: 1.1rem;
    color: #d04a3e; /* Standard coordinates red */
}

/* Embedded interactive map */
.map-container {
    width: 100%;
    line-height: 0; /* Clears any lingering inline gap below the iframe */
    background-color: #1c1c1c; /* Background placeholder during loading */
}

/* ==========================================
   9. FOOTER SECTION
   ========================================== */
.main-footer {
    background-color: #11212c; /* Neutral dark grey slate */
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
}

.footer-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Circle Icon Styling */
.footer-socials {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #29abe2; /* Bright accents */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    transition: background-color 0.2s ease;
}

.social-icon:hover {
    background-color: #0072bc;
}

/* Navigation inside the footer */
.footer-nav {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    color: #cccccc;
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: #29abe2;
}

.footer-phone a {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.footer-phone a:hover {
    color: #29abe2;
}

.copyright {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: #cccccc;
}

.creator-tag {
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    color: #999999;
}

.creator-tag a {
    color: #999999;
    text-decoration: underline;
}

.creator-tag a:hover {
    color: #ffffff;
}

/* ==========================================
   RESPONSIVENESS (Media Queries)
   ========================================== */
@media (max-width: 768px) {
    .cta-banner-container {
        flex-direction: column;
        text-align: center;
    }
    .cta-banner h2 {
        font-size: 1.2rem;
    }
    .map-container iframe {
        height: 300px;
    }
}
/* ==========================================
   1. GLOBAL HERO STYLING & FONTS
   ========================================== */
/* Importing Oswald for headings to match the high-impact construction font vibe */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@300;400&display=swap');

.top-label-bar {
    width: 100%;
    background-color: #0072bc; /* Deep blue corporate header color */
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.renovation-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    background-image: url("../images/home.jpg"); /* Substitute your image asset here */
    background-size: cover;
    background-position: center 30%;
    display: flex;
    align-items: center;
    padding: 60px 0;
    overflow: hidden;
}

/* Semi-transparent overlay mask layer */
.hero-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 45, 50, 0.55); /* Balanced overlay tint */
    z-index: 1;
}

/* Content Container constraints matching left side skew */
.hero-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keeps all text/buttons tightly left-aligned */
}

/* ==========================================
   2. TYPOGRAPHY & BUTTONS
   ========================================== */
.hero-title {
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.25;
    max-width: 680px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-subtitle {
    font-family: 'Roboto', sans-serif;
    color: #e2e8f0;
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 35px;
}

.btn-cta-sky {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    background-color: #29abe2; /* Vibrantly bright light blue */
    color: #ffffff;
    text-decoration: none;
    padding: 14px 32px;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin-bottom: 40px;
}

.btn-cta-sky:hover {
    background-color: #0072bc;
    transform: translateY(-1px);
}

/* ==========================================
   3. HORIZONTAL CREDENTIAL BADGES
   ========================================== */
.badges-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.badge-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px; /* Size fits nicely on desktop layouts */
    height: auto;
}

.badge-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ==========================================
   4. RESPONSIVE LAYOUT ADJUSTMENTS
   ========================================== */
@media (max-width: 991px) {
    .hero-title {
        font-size: 2.1rem;
        max-width: 90%;
    }
    
    .hero-content-wrapper {
        padding: 0 25px;
    }
}

@media (max-width: 768px) {
    .renovation-hero {
        padding: 50px 0;
        text-align: center;
    }
    
    .hero-content-wrapper {
        align-items: center; /* Center layout context on small devices */
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .badges-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .badge-item {
        width: 100px;
    }
}

/* ==========================================
   1. MAIN WRAPPER & LAYOUT (WHITE BACKGROUND)
   ========================================== */
.contact-split-section {
    background-color: #ffffff; /* Flipped to white background */
    padding: 80px 20px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Left side takes up slightly more space */
    gap: 60px;
    align-items: center;
}

/* ==========================================
   2. LEFT COLUMN (DARK TEXT FOR LEGIBILITY)
   ========================================== */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.company-tagline {
    color: #000000; /* Dark gold/yellow text for high contrast on white */
    font-size: 0.9rem;
    font-weight: 500;
}

.main-heading {
    color: #1a1a1a; /* Clean dark gray/black heading */
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

.description-paragraph {
    color: #4a5568; /* Readable dark grey body text */
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 520px;
}

.footer-meta {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.company-name {
    color: #1a1a1a;
    font-size: 1.3rem;
    font-weight: 600;
}

.address-line {
    color: #718096;
    font-size: 0.95rem;
}

.phone-link {
    color: #000000;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 5px;
}

.phone-link:hover {
    text-decoration: underline;
}

/* ==========================================
   3. RIGHT COLUMN: FORM CONTAINER CARD
   ========================================== */
.contact-form-card {
    background-color: #11212c; /* Dark charcoal card block matching image */
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.interactive-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-wrapper label {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

.required-star {
    color: #e53e3e; /* Red indicator star */
}

/* Fields Styling */
.input-wrapper input,
.input-wrapper textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 1rem;
    color: #1a1a1a;
    background-color: #ffffff;
    outline: none;
}

.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
    color: #a0aec0;
}

.input-wrapper textarea {
    resize: none;
}

/* Checkbox alignment row */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 5px;
}

.checkbox-wrapper input {
    margin-top: 3px;
    cursor: pointer;
}

.checkbox-wrapper label {
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
}

/* Vibrant Yellow Submission Button */
.btn-yellow-submit {
    align-self: flex-start;
    background-color: #a5e5d9; /* Matching golden yellow button */
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    padding: 14px 32px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-yellow-submit:hover {
    background-color: #07a084;
}

/* ==========================================
   4. RESPONSIVE QUERIES FOR DEPLOYMENT
   ========================================== */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr; /* Shifts into single column layout on smaller screens */
        gap: 50px;
    }
    
    .main-heading {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .form-row-split {
        grid-template-columns: 1fr;
    }
    
    .contact-form-card {
        padding: 25px;
    }
}

/* ==========================================
   COMMITMENT BLOCK SECTION (WHITE BACKGROUND)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@300;400&display=swap');

.commitment-section {
    background-color: #ffffff; /* Clean white canvas background */
    padding: 80px 20px;
    width: 100%;
}

.commitment-container {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    /* Balanced 2-column layout mapping the screenshot proportions */
    grid-template-columns: 1fr 1.1fr; 
    gap: 70px;
    align-items: center;
}

/* ==========================================
   IMAGE OFFSET FRAMING EFFECT
   ========================================== */
.image-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-offset-frame {
    position: relative;
    width: 100%;
    max-width: 460px; /* Limits size to match design density */
    aspect-ratio: 4 / 3; /* Maintains standard photo proportions */
    z-index: 2;
}

.image-offset-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* The decorative blue line box floating down and to the left */
.image-offset-frame::after {
    content: '';
    position: absolute;
    /* Pulls outward beyond the dimensions of the real image */
    top: 25px;
    bottom: -25px;
    left: -25px;
    right: 25px;
    border: 2px solid #0072bc; /* Iconic brand corporate blue */
    z-index: -1; /* Layers safely behind the image */
    pointer-events: none;
}

/* ==========================================
   TEXT COLUMN DESIGN
   ========================================== */
.text-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.text-column h2 {
    font-family: 'Oswald', sans-serif;
    color: #0072bc;
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0;
}

.text-column p {
    font-family: 'Roboto', sans-serif;
    color: #555555; /* Soft readable charcoal tone */
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
    text-align: justify;
}

/* ==========================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================== */
@media (max-width: 991px) {
    .commitment-container {
        grid-template-columns: 1fr; /* Stack visually on tablets */
        gap: 60px;
    }
    
    .text-column {
        text-align: center;
    }
    
    .text-column p {
        text-align: center;
        max-width: 650px;
        margin: 0 auto;
    }
    
    /* Center the decorative offset alignment on mobile frames */
    .image-offset-frame {
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .text-column h2 {
        font-size: 1.8rem;
    }
    
    /* Slightly decrease offset spacing on small screens so lines don't clip bounds */
    .image-offset-frame::after {
        top: 15px;
        bottom: -15px;
        left: -15px;
        right: 15px;
    }
}

/* ==========================================
   MISSION SECTION (WHITE BACKGROUND)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@300;400&display=swap');

.mission-section {
    background-color: #ffffff; /* Pure white background */
    padding: 80px 20px;
    width: 100%;
}

.mission-container {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    /* Two column layout with the image column slightly wider to match image proportions */
    grid-template-columns: 1fr 1.1fr; 
    gap: 70px;
    align-items: center;
}

/* ==========================================
   LEFT COLUMN: TEXT DESIGN
   ========================================== */
.mission-text-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mission-text-column h2 {
    font-family: 'Oswald', sans-serif;
    color: #29abe2; /* Bright sky blue matching your brand accent */
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0;
}

.mission-text-column p {
    font-family: 'Roboto', sans-serif;
    color: #555555; /* Soft charcoal readable tone */
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================
   RIGHT COLUMN: IMAGE WITH OFFSET BLUE FRAME
   ========================================== */
.mission-image-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mission-image-frame {
    position: relative;
    width: 100%;
    max-width: 480px; 
    aspect-ratio: 4 / 3;
    z-index: 2;
}

.mission-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* The decorative frame floating down and to the right */
.mission-image-frame::after {
    content: '';
    position: absolute;
    /* Pulls outward to the right and bottom */
    top: -25px;
    bottom: 25px;
    left: 25px;
    right: -25px;
    border: 2px solid #0072bc; /* Deep corporate blue frame outline */
    z-index: -1;
    pointer-events: none;
}

/* ==========================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================== */
@media (max-width: 991px) {
    .mission-container {
        grid-template-columns: 1fr; /* Stack elements into 1 column on mobile/tablets */
        gap: 60px;
    }
    
    /* Reorder columns so the text block stays on top when stacked */
    .mission-text-column {
        order: 1;
        text-align: center;
    }
    
    .mission-image-column {
        order: 2;
    }
    
    /* Center the decorative framing effect when elements stack */
    .mission-image-frame {
        max-width: 420px;
    }
}

@media (max-width: 480px) {
    .mission-text-column h2 {
        font-size: 1.8rem;
    }
    
    /* Tighten up framing lines slightly on small mobile viewports */
    .mission-image-frame::after {
        top: -15px;
        bottom: 15px;
        left: 15px;
        right: -15px;
    }
}/* ==========================================
   SERVICES SECTION (WHITE BACKGROUND STYLE)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@300;400&display=swap');

.services-section {
    background-color: #ffffff; /* Clean white main background */
    padding: 80px 20px;
    width: 100%;
}

/* Centered Top Header Typography */
.services-header {
    max-width: 900px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.services-header h2 {
    font-family: 'Oswald', sans-serif;
    color: #0072bc; /* Primary deep blue */
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.services-header p {
    font-family: 'Roboto', sans-serif;
    color: #666666;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================
   INNER CONTENT CARD WITH FLOATING SHADOW
   ========================================== */
.service-card-container {
    max-width: 1140px;
    margin: 0 auto;
}

.service-card-inner {
    background-color: #ffffff;
    padding: 60px 40px;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); /* Subtle platform shadow from screenshot */
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

/* ==========================================
   LEFT COLUMN: IMAGE OFFSET FRAME
   ========================================== */
.service-image-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-image-frame {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4 / 3;
    z-index: 2;
}

.service-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The decorative frame floating down and to the left */
.service-image-frame::after {
    content: '';
    position: absolute;
    top: 25px;
    bottom: -25px;
    left: -25px;
    right: 25px;
    border: 2px solid #0072bc;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================
   RIGHT COLUMN: SERVICE TEXT
   ========================================== */
.service-text-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center; /* Centered alignment for the inner block text */
}

.service-text-column h3 {
    font-family: 'Oswald', sans-serif;
    color: #29abe2; /* Bright sky blue for individual service title */
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0;
}

.service-text-column p {
    font-family: 'Roboto', sans-serif;
    color: #555555;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================== */
@media (max-width: 991px) {
    .service-card-inner {
        grid-template-columns: 1fr; /* Drop to stacked columns */
        gap: 60px;
        padding: 40px 25px;
    }
    
    .services-header h2 {
        font-size: 2rem;
    }
    
    /* Center the offset image container when stacked */
    .service-image-frame {
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .services-header h2 {
        font-size: 1.6rem;
    }
    
    .service-text-column h3 {
        font-size: 1.7rem;
    }
    
    /* Slightly compress frame shift dimensions on tiny phone viewports */
    .service-image-frame::after {
        top: 15px;
        bottom: -15px;
        left: -15px;
        right: 15px;
    }
}
/* ==========================================
   GLOBAL LAYOUT & FONTS
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=Roboto:wght@300;400;700&display=swap');

.combined-promo-section {
    width: 100%;
    background-color: #ffffff;
}

/* Global internal containment wrapper */
.tier-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================
   TIER 1: TOP HEADER BANNER
   ========================================== */
.tier-top-header {
    background-color: #3eab95; /* Flipped from dark stone texture to white */
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0; /* Soft separator line */
}

.tier-top-header h2 {
    font-family: 'Oswald', sans-serif;
    color: #11212c; /* Changed to high contrast dark slate */
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.tier-top-header p {
    font-family: 'Roboto', sans-serif;
    color: #ffffff; /* Mid-tone gray for smooth reading */
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    max-width: 960px;
    margin: 0 auto;
}

/* ==========================================
   TIER 2: MIDDLE CALL-TO-ACTION BLOCK
   ========================================== */
.tier-middle-cta {
    background-color: #ffffff;
    padding: 60px 0;
    text-align: center;
}

.tier-middle-cta p {
    font-family: 'Roboto', sans-serif;
    color: #666666;
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;
    max-width: 940px;
    margin: 0 auto 30px auto;
}

.tier-middle-cta strong {
    font-weight: 400;
    color: #1a1a1a;
}

/* Vibrant Sky Blue Button matching layout */
.btn-sky-blue {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    background-color: #29abe2;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 36px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.btn-sky-blue:hover {
    background-color: #0072bc;
}

/* ==========================================
   TIER 3: BOTTOM ESTIMATE BANNER
   ========================================== */
.tier-bottom-bar {
    background-color: #000e17; /* Flipped from solid deep blue to white */
    padding: 50px 0;
    border-top: 2px solid #0072bc; /* Iconic blue structural accent line */
    border-bottom: 2px solid #0072bc;
}

/* Flexbox rows alignment mapping the screenshot split style */
.bottom-flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.tier-bottom-bar h3 {
    font-family: 'Oswald', sans-serif;
    color: #0072bc; /* Transformed header to blue for brand presence */
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.5px;
    margin: 0;
    max-width: 750px;
}

/* Hollow Button modified to stand out cleanly on a white background */
.btn-outline-blue {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    background-color: transparent;
    color: #0072bc;
    text-decoration: none;
    border: 2px solid #0072bc; /* Blue boundary lines replacing the white box border */
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline-blue:hover {
    background-color: #0072bc;
    color: #ffffff;
}

/* ==========================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================== */
@media (max-width: 991px) {
    .bottom-flex-layout {
        flex-direction: column; /* Stack bottom tier elements vertically on smaller screens */
        text-align: center;
        gap: 25px;
    }
    
    .tier-bottom-bar h3 {
        max-width: 100%;
        font-size: 1.4rem;
    }
    
    .tier-top-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .tier-top-header {
        padding: 40px 0;
    }
    
    .tier-top-header h2 {
        font-size: 1.6rem;
    }
    
    .tier-middle-cta {
        padding: 40px 0;
    }
}

/* ==========================================
   PORTFOLIO IMAGE GRID (WHITE BACKGROUND)
   ========================================== */
.portfolio-gallery-section {
    background-color: #ffffff; /* Pure white background across the section */
    padding: 60px 20px;
    width: 100%;
}

.gallery-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Recreates the perfect 3-column desktop layout */
    grid-template-columns: repeat(3, 1fr);
    /* Clean, crisp spacing between cards matching your mockup layout */
    gap: 20px; 
}

.gallery-item {
    position: relative;
    width: 100%;
    /* Standard landscape ratio to keep row heights looking uniformly uniform */
    aspect-ratio: 4 / 3; 
    overflow: hidden;
    background-color: #f7f7f7; /* Very light placeholder tint while loading */
    border-radius: 2px; /* Subtle sharp edge softening */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    /* Ensures different sized project images center-crop cleanly without squishing */
    object-fit: cover; 
    object-position: center;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Optional subtle hover effect to increase interactive polish */
.gallery-item:hover img {
    transform: scale(1.03);
}

/* ==========================================
   RESPONSIVE GRID LAYOUT BREAKPOINTS
   ========================================== */
@media (max-width: 991px) {
    .gallery-grid-container {
        /* Drop down to 2 columns on tablets */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .portfolio-gallery-section {
        padding: 40px 15px;
    }
}

@media (max-width: 576px) {
    .gallery-grid-container {
        /* Single column full width on smartphones */
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Main alignment background overlay */
.form-card-wrapper {
    background-color: #f5f5f5;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
}

/* Framed form card design */
.lead-generation-form {
    background-color: #ffffff;
    border: 1px solid #7a7a7a;
    width: 100%;
    max-width: 440px;
    padding: 35px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Form inputs & text labels structure */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label, 
.group-title {
    font-size: 0.72rem;
    font-weight: 500;
    color: #2c2c2c;
    letter-spacing: 0.5px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 0.9rem;
    color: #333333;
    outline: none;
    background-color: #ffffff;
    box-sizing: border-box;
}

.form-field textarea {
    resize: none;
}

/* Checkbox items row arrangement */
.item-checkbox-group {
    gap: 10px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
}

.checkbox-row label {
    font-size: 0.75rem;
    color: #444444;
    font-weight: 400;
    cursor: pointer;
}

/* Error States */
.form-field select.error-border {
    border-color: #e53e3e;
}

.field-error-text {
    color: #e53e3e;
    font-size: 0.65rem;
    margin-top: -2px;
}

.opt-in-disclaimer {
    font-size: 0.65rem;
    color: #666666;
    line-height: 1.4;
    font-weight: 500;
    margin: 4px 0 0 0;
}

/* Vibrant Blue Button */
.btn-cyan-submit {
    background-color: #29abe2; /* Flat bright brand blue */
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
}

.btn-cyan-submit:hover {
    background-color: #0072bc;
}

.global-error-notice {
    color: #e53e3e;
    font-size: 0.65rem;
    text-align: left;
    margin: -4px 0 0 0;
}
.response-message {
    padding: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    border-radius: 3px;
    margin-top: 10px;
}

.response-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.response-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ==========================================
   FEEDBACK BLOCK SECTION
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@300;400&display=swap');

.feedback-section {
    background-color: #f2f4f5; /* Soft grey background tint matching the image */
    padding: 60px 20px 80px 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Centered Header Text */
.feedback-header {
    text-align: center;
    margin-bottom: 40px;
}

.feedback-header h2 {
    font-family: 'Oswald', sans-serif;
    color: #0072bc; /* Primary brand corporate blue */
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.feedback-header p {
    font-family: 'Roboto', sans-serif;
    color: #666666;
    font-size: 0.95rem;
    font-weight: 300;
    margin: 0;
}

/* Two-Column Alignment Container */
.feedback-cards-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* White Interactive Choice Cards */
.feedback-card {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 45px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-decoration: none; /* Strip standard anchor lines */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Soft floor card drop shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feedback-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Circular Icon Frames */
.icon-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: background-color 0.2s ease;
}

.icon-circle svg {
    width: 42px;
    height: 42px;
}

/* Dynamic color definitions matching image styling */
.icon-good {
    border-color: #2c3e50;
    color: #2c3e50;
}

.icon-bad {
    border-color: #bdc3c7;
    color: #7f8c8d;
}

/* Change icon ring look subtly when hovered */
.feedback-card:hover .icon-good {
    background-color: #f4f6f7;
}

.feedback-card:hover .icon-bad {
    background-color: #f8f9fa;
}

/* Dynamic label typography */
.feedback-label {
    font-family: 'Oswald', sans-serif;
    color: #0072bc;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ==========================================
   RESPONSIVE LAYOUT RESPONSIVENESS
   ========================================== */
@media (max-width: 768px) {
    .feedback-cards-grid {
        grid-template-columns: 1fr; /* Stacks vertically on smaller mobile displays */
        max-width: 400px;
        gap: 20px;
    }
    
    .feedback-header h2 {
        font-size: 1.8rem;
    }
    
    .feedback-card {
        padding: 35px 20px;
    }
    
    .icon-circle {
        width: 95px;
        height: 95px;
    }
    
    .icon-circle svg {
        width: 36px;
        height: 36px;
    }
}
/* ==========================================
   ALTERNATING FEATURE SECTION
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@300;400&display=swap');

.alternating-features-section {
    background-color: #ffffff; /* Clean white background */
    padding: 80px 20px;
    width: 100%;
    box-sizing: border-box;
}

.features-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px; /* Generous spacing between rows */
}

/* Row Alignment */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Text side slightly narrower than image area */
    gap: 70px;
    align-items: center;
}

/* Reverse Grid Order for Row 2 */
.feature-row.reverse-layout {
    grid-template-columns: 1.1fr 1fr;
}

/* ==========================================
   TEXT TYPOGRAPHY & BUTTONS
   ========================================== */
.feature-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.feature-text h2 {
    font-family: 'Oswald', sans-serif;
    color: #29abe2; /* Bright cyan/blue heading */
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.5px;
    margin: 0;
}

.feature-text p {
    font-family: 'Roboto', sans-serif;
    color: #666666; /* Readable soft grey text */
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}

/* Cyan CTA Button */
.btn-cyan {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    background-color: #29abe2;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 28px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 3px;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.btn-cyan:hover {
    background-color: #0072bc;
}

/* ==========================================
   OFFSET BLUE BORDER IMAGES
   ========================================== */
.feature-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px; /* Room for the offset frame */
}

.offset-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    z-index: 2;
}

.offset-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Base Decorative Frame Line */
.offset-frame::after {
    content: '';
    position: absolute;
    border: 2px solid #0072bc; /* Corporate Blue Line */
    z-index: -1;
    pointer-events: none;
}

/* Row 1 Offset: Frame shifts Down & Right */
.frame-right-bottom::after {
    top: 25px;
    bottom: -25px;
    left: 25px;
    right: -25px;
}

/* Row 2 Offset: Frame shifts Down & Left */
.frame-left-bottom::after {
    top: 25px;
    bottom: -25px;
    left: -25px;
    right: 25px;
}

/* ==========================================
   RESPONSIVE DESIGN (TABLET / MOBILE)
   ========================================== */
@media (max-width: 991px) {
    .features-container {
        gap: 70px;
    }

    .feature-row,
    .feature-row.reverse-layout {
        grid-template-columns: 1fr; /* Collapse into 1 column */
        gap: 50px;
    }

    /* Keep images below text on mobile for natural reading flow */
    .feature-row.reverse-layout .feature-image-wrapper {
        order: 2;
    }

    .feature-text {
        text-align: center;
        align-items: center;
    }

    .feature-text h2 {
        font-size: 1.8rem;
    }

    .offset-frame {
        max-width: 420px;
    }
}

@media (max-width: 480px) {
    /* Tighten frame offsets on small phone screens */
    .frame-right-bottom::after {
        top: 15px;
        bottom: -15px;
        left: 15px;
        right: -15px;
    }

    .frame-left-bottom::after {
        top: 15px;
        bottom: -15px;
        left: -15px;
        right: 15px;
    }
}