/* Brand Shapes CSS - Simplified and Direct Approach */

/* Base positioning for all brand shapes - contained within hero sections */
.brand-shape {
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    display: block !important;
}

/* Ensure shapes stay within their hero sections */
.hero-section,
.contact-hero-section,
.services-hero-section.hero-section,
.about-hero-section.hero-section,
.development-hero-section {
    overflow: hidden !important;
}



/* Bottom-left shape - proper positioning like about us page */
.shape-bottom-left {
    bottom: 0 !important;
    left: 0 !important;
    width: clamp(40vw, 60vw, 60vw) !important;
    height: clamp(30vw, 45vw, 45vw) !important;
    transform: translate(clamp(-25vw, -20vw, -15vw), clamp(15vw, 22.5vw, 30vw)) !important;
}

/* Bottom-right shape - proper positioning like about us page */
.shape-bottom-right {
    bottom: 0 !important;
    right: 0 !important;
    width: clamp(40vw, 60vw, 60vw) !important;
    height: clamp(30vw, 45vw, 45vw) !important;
    transform: translate(clamp(15vw, 20vw, 25vw), clamp(15vw, 22.5vw, 30vw)) !important;
}

/* Top-left shape - proper positioning like about us page */
.shape-top-left {
    top: 0 !important;
    left: 0 !important;
    width: clamp(40vw, 60vw, 60vw) !important;
    height: clamp(30vw, 45vw, 45vw) !important;
    transform: translate(clamp(-25vw, -20vw, -15vw), clamp(-30vw, -22.5vw, -15vw)) !important;
    display: block !important;
}

/* Content spacing - ensure no overlap with larger corner shapes */
.section-with-shapes .container {
    position: relative;
    z-index: 10;
    padding: 6rem 4rem;
    margin: 0 auto;
    max-width: 80%;
}

.section-with-shapes .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* Mobile adjustments - Complete mobile override */
@media (max-width: 768px) {
    /* MOBILE HERO SECTIONS - FIT BELOW NAVBAR IN VIEWPORT */
    section.hero-section,
    section.contact-hero-section,
    section.services-hero-section,
    section.about-hero-section,
    section.development-hero-section,
    section.section-with-shapes,
    section[class*="hero"] {
        min-height: calc(100vh - 70px) !important;
        max-height: calc(100vh - 70px) !important;
        height: calc(100vh - 70px) !important;
        padding: 0.5rem 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* ABOUT US HERO SECTION - SPECIAL POSITIONING FOR MOBILE */
    section.about-hero-section {
        align-items: flex-start !important;
        padding-top: 3rem !important;
        justify-content: flex-start !important;
    }
    
    section.about-hero-section .container {
        margin-top: 1rem !important;
        padding-top: 0 !important;
    }
    
    /* MOBILE HERO CONTAINERS - TIGHTER SPACING */
    .hero-section .container,
    .contact-hero-section .container,
    .services-hero-section .container,
    .about-hero-section .container,
    .development-hero-section .container {
        padding: 60px 1rem 20px 1rem !important;
        max-height: calc(100vh - 80px) !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .section-with-shapes .container {
        padding: 2rem 1rem !important;
        width: 100% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
    }
    
    .section-with-shapes .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* CONSISTENT MOBILE SHAPES - BIGGER SIZE FOR BETTER VISIBILITY */
    section[class*="hero"] .shape-bottom-left,
    section[class*="hero"] .shape-bottom-right, 
    section[class*="hero"] .shape-top-left,
    section.section-with-shapes .shape-bottom-left,
    section.section-with-shapes .shape-bottom-right,
    section.section-with-shapes .shape-top-left,
    .shape-bottom-left,
    .shape-bottom-right,
    .shape-top-left {
        width: 55vw !important;
        height: 41.25vw !important;
        display: block !important;
        opacity: 1 !important;
        z-index: 1 !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    
    section[class*="hero"] .shape-bottom-left,
    section.section-with-shapes .shape-bottom-left,
    .shape-bottom-left {
        bottom: 0 !important;
        left: 0 !important;
        transform: translate(-22vw, 18vw) !important;
    }
    
    section[class*="hero"] .shape-bottom-right,
    section.section-with-shapes .shape-bottom-right,
    .shape-bottom-right {
        bottom: 0 !important;
        right: 0 !important;
        transform: translate(22vw, 18vw) !important;
    }
    
    section[class*="hero"] .shape-top-left,
    section.section-with-shapes .shape-top-left,
    .shape-top-left {
        top: 0 !important;
        left: 0 !important;
        transform: translate(-22vw, -18vw) !important;
    }
}

/* Extra small screens - keep big shapes and tighter hero sections */
@media (max-width: 480px) {
    /* SMALLER SCREENS - EVEN MORE COMPACT */
    section.hero-section,
    section.contact-hero-section,
    section.services-hero-section,
    section.about-hero-section,
    section.development-hero-section,
    section.section-with-shapes,
    section[class*="hero"] {
        min-height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        height: calc(100vh - 60px) !important;
        padding: 0.25rem 0 !important;
    }
    
    /* ABOUT US HERO SECTION - MOVE TEXT UP FOR BETTER CENTERING */
    section.about-hero-section {
        align-items: flex-start !important;
        padding-top: 2rem !important;
    }
    
    section.about-hero-section .container {
        margin-top: -1rem !important;
    }
    /* HERO SECTIONS - EVEN TIGHTER FOR SMALL SCREENS */
    .hero-section .container,
    .contact-hero-section .container,
    .services-hero-section .container,
    .about-hero-section .container,
    .development-hero-section .container {
        padding: 50px 0.75rem 15px 0.75rem !important;
        max-height: calc(100vh - 65px) !important;
    }

    .section-with-shapes .container {
        padding: 1.5rem 0.5rem !important;
    }
    
    /* MAINTAIN CONSISTENT PROPORTIONS ON SMALL SCREENS - ALL HERO SECTIONS */
    section[class*="hero"] .shape-bottom-left,
    section.section-with-shapes .shape-bottom-left,
    .shape-bottom-left {
        transform: translate(-20vw, 16vw) !important;
        width: 52vw !important;
        height: 39vw !important;
    }
    
    section[class*="hero"] .shape-bottom-right,
    section.section-with-shapes .shape-bottom-right,
    .shape-bottom-right {
        transform: translate(20vw, 16vw) !important;
        width: 52vw !important;
        height: 39vw !important;
    }
    
    section[class*="hero"] .shape-top-left,
    section.section-with-shapes .shape-top-left,
    .shape-top-left {
        transform: translate(-20vw, -16vw) !important;
        width: 52vw !important;
        height: 39vw !important;
    }
}

/* Mobile Content Spacing - Tighter margins for viewport fit */
@media (max-width: 768px) {
    /* TIGHTER CONTENT SPACING FOR MOBILE VIEWPORT FIT */
    .hero-section .mb-4,
    .contact-hero-section .mb-4,
    .services-hero-section .mb-4,
    .about-hero-section .mb-4,
    .development-hero-section .mb-4 {
        margin-bottom: 0.5rem !important;
    }
    
    .hero-section .mb-3,
    .contact-hero-section .mb-3,
    .services-hero-section .mb-3,
    .about-hero-section .mb-3,
    .development-hero-section .mb-3 {
        margin-bottom: 0.4rem !important;
    }
    
    /* REDUCE FONT SIZES FOR MOBILE VIEWPORT FIT */
    .hero-section h1,
    .contact-hero-section h1,
    .services-hero-section h1,
    .about-hero-section h1,
    .development-hero-section h1 {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-section p,
    .contact-hero-section p,
    .services-hero-section p,
    .about-hero-section p,
    .development-hero-section p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.6rem !important;
    }
}

/* Portrait orientation - maintain desktop proportions - ALL HERO SECTIONS */
@media (max-width: 600px) and (orientation: portrait) {
    /* PORTRAIT MOBILE HERO SECTIONS - NAVBAR ADJUSTED */
    section.hero-section,
    section.contact-hero-section,
    section.services-hero-section,
    section.about-hero-section,
    section.development-hero-section,
    section.section-with-shapes,
    section[class*="hero"] {
        min-height: calc(100vh - 65px) !important;
        max-height: calc(100vh - 65px) !important;
        height: calc(100vh - 65px) !important;
    }
    section[class*="hero"] .shape-bottom-left,
    section[class*="hero"] .shape-bottom-right,
    section[class*="hero"] .shape-top-left,
    section.section-with-shapes .shape-bottom-left,
    section.section-with-shapes .shape-bottom-right,
    section.section-with-shapes .shape-top-left,
    .shape-bottom-left,
    .shape-bottom-right,
    .shape-top-left {
        width: 54vw !important;
        height: 40.5vw !important;
        opacity: 1 !important;
        display: block !important;
        position: absolute !important;
    }
    
    section[class*="hero"] .shape-bottom-left,
    section.section-with-shapes .shape-bottom-left,
    .shape-bottom-left {
        transform: translate(-21vw, 17vw) !important;
    }
    
    section[class*="hero"] .shape-bottom-right,
    section.section-with-shapes .shape-bottom-right,
    .shape-bottom-right {
        transform: translate(21vw, 17vw) !important;
    }
    
    section[class*="hero"] .shape-top-left,
    section.section-with-shapes .shape-top-left,
    .shape-top-left {
        transform: translate(-21vw, -17vw) !important;
    }
}

/* Very small portrait screens */
@media (max-width: 400px) and (orientation: portrait) {
    .shape-bottom-left,
    .shape-bottom-right,
    .shape-top-left {
        width: 22vw !important;
        height: 16vw !important;
    }
    
    .shape-bottom-left {
        transform: translate(-6vw, 4vw) !important;
    }
    
    .shape-bottom-right {
        transform: translate(6vw, 4vw) !important;
    }
    
    .shape-top-left {
        transform: translate(-6vw, -4vw) !important;
    }
}

/* Brand color filters - exact brand colors */
.shape-raspberry {
    /* Original red/pink brand color #e32949 */
    filter: brightness(1) contrast(1) saturate(1);
}

.shape-ice-blue {
    /* Original ice blue brand color #1fa1dc */
    filter: brightness(1) contrast(1) saturate(1);
}

.shape-light-grey {
    /* Original light grey brand color #d9d9d8 */
    filter: brightness(1) contrast(1) saturate(1);
}

/* TYPOGRAPHY HIERARCHY - STANDARDIZED SECTION TITLES */
/* Consistent section title sizing across all pages, excluding hero sections */

/* Desktop typography hierarchy */
@media (min-width: 769px) {
    /* Section titles - standardized across all pages */
    section h2:not(.hero-section h2):not(.contact-hero-section h2):not(.services-hero-section h2):not(.about-hero-section h2):not(.development-hero-section h2), 
    section .section-title,
    .section-header h2,
    h2.fw-bold:not(.hero-section h2.fw-bold):not(.contact-hero-section h2.fw-bold):not(.services-hero-section h2.fw-bold):not(.about-hero-section h2.fw-bold):not(.development-hero-section h2.fw-bold) {
        font-size: 2.4rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
        color: #353535 !important;
        font-weight: 700 !important;
    }
    
    /* Card titles - should be smaller than section titles */
    .card-title,
    .feature-card h5,
    .feature-card h4,
    .service-card h5,
    .service-card h4,
    .value-card h5,
    .value-card h4,
    .philosophy-card h6,
    .trust-card h5,
    .trust-card h4,
    h4.card-title,
    h5.card-title,
    h6.card-title {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Subheadings within cards */
    .card h6,
    .feature-card h6,
    .service-card h6 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Mobile typography hierarchy */
@media (max-width: 768px) {
    /* Section titles - standardized across all pages, excluding hero sections */
    section h2:not(.hero-section h2):not(.contact-hero-section h2):not(.services-hero-section h2):not(.about-hero-section h2):not(.development-hero-section h2), 
    section .section-title,
    .section-header h2,
    h2.fw-bold:not(.hero-section h2.fw-bold):not(.contact-hero-section h2.fw-bold):not(.services-hero-section h2.fw-bold):not(.about-hero-section h2.fw-bold):not(.development-hero-section h2.fw-bold) {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        color: #353535 !important;
        font-weight: 700 !important;
    }
    
    /* CRITICAL OVERRIDE: All CTA headings including "Ready" sections must be WHITE ONLY ON MOBILE */
    section[style*="background: #1fa1dc"] h2.fw-bold.mb-3.text-white,
    section.cta-section h2.fw-bold.mb-3.text-white,
    section[style*="background:#1fa1dc"] h2.fw-bold.mb-3.text-white,
    section.team-culture-section h2.fw-bold.mb-3.text-white,
    section.bg-primary h2.fw-bold.mb-3.text-white,
    body section[style*="background: #1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white,
    body section.cta-section div.container div.text-center h2.fw-bold.mb-3.text-white,
    body section[style*="background:#1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white,
    body section.team-culture-section div.container div.row div.col-12 h2.fw-bold.mb-3.text-white,
    body section.team-culture-section h2.fw-bold.mb-3.text-white,
    section#team-culture h2.fw-bold.mb-3.text-white,
    section#team-culture h2,
    h2:contains("Ready"),
    h2[text*="Ready"],
    section[style*="background: #1fa1dc"] h2:contains("Ready"),
    section.cta-section h2:contains("Ready"),
    body h2.fw-bold.mb-3.text-white:contains("Ready") {
        color: #ffffff !important;
        background-color: transparent !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #ffffff !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    /* Fix text cutoff for CTA headings on mobile */
    @media (max-width: 576px) {
        section[style*="background: #1fa1dc"] h2.fw-bold.mb-3.text-white,
        section.cta-section h2.fw-bold.mb-3.text-white,
        section[style*="background:#1fa1dc"] h2.fw-bold.mb-3.text-white,
        body section[style*="background: #1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white,
        body section.cta-section div.container div.text-center h2.fw-bold.mb-3.text-white,
        body section[style*="background:#1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white {
            white-space: normal !important;
            word-wrap: break-word !important;
            hyphens: auto !important;
            line-height: 1.2 !important;
        }
    }
    
    /* Card titles - should be smaller than section titles */
    .card-title,
    .feature-card h5,
    .feature-card h4,
    .service-card h5,
    .service-card h4,
    .value-card h5,
    .value-card h4,
    .philosophy-card h6,
    .trust-card h5,
    .trust-card h4,
    h4.card-title,
    h5.card-title,
    h6.card-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Subheadings within cards */
    .card h6,
    .feature-card h6,
    .service-card h6 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
}

/* CTA SECTION FULL WIDTH FIXES - AGGRESSIVE APPROACH */
.cta-section,
section.cta-section,
section[style*="background: #1fa1dc"],
.team-culture-section,
section.team-culture-section,
section#team-culture {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    background: #1fa1dc !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
}

/* Force body and html to allow full width sections */
body {
    overflow-x: hidden !important;
}

/* Ensure container inside CTA section doesn't constrain width */
.cta-section .container,
section.cta-section .container,
section[style*="background: #1fa1dc"] .container,
.team-culture-section .container,
section.team-culture-section .container,
section#team-culture .container {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin: 0 auto !important;
    width: 100% !important;
}

@media (min-width: 1200px) {
    .cta-section .container,
    section.cta-section .container,
    section[style*="background: #1fa1dc"] .container,
    .team-culture-section .container,
    section.team-culture-section .container,
    section#team-culture .container {
        max-width: 1200px !important;
    }
}

/* CTA HEADINGS SHOULD BE WHITE ON ALL DEVICES */
/* CTA headings use white text on blue backgrounds for consistency */
section.cta-section h2.fw-bold.mb-3.text-white,
section[style*="background: #1fa1dc"] h2.fw-bold.mb-3.text-white,
section[style*="background:#1fa1dc"] h2.fw-bold.mb-3.text-white,
.cta-section h2.fw-bold,
.cta-section h2,
section[style*="background: #1fa1dc"] h2,
section[style*="background:#1fa1dc"] h2,
.team-culture-section h2,
h2.fw-bold.mb-3.text-white,
body section[style*="background: #1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white,
body section.cta-section div.container div.text-center h2.fw-bold.mb-3.text-white,
body section[style*="background:#1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white,
section#team-culture h2.fw-bold.mb-3.text-white,
section.team-culture-section h2.fw-bold.mb-3.text-white,
body section#team-culture div.container div.row div.col-12 h2.fw-bold.mb-3.text-white,
body section.team-culture-section div.container div.row div.col-12 h2.fw-bold.mb-3.text-white {
    color: #ffffff !important;
    background-color: transparent !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* MOBILE SPECIFIC WHITE HEADING OVERRIDE */
@media (max-width: 768px) {
    /* Force white color on all CTA headings including "Ready" sections */
    section[style*="background: #1fa1dc"] h2.fw-bold.mb-3.text-white,
    section.cta-section h2.fw-bold.mb-3.text-white,
    section[style*="background:#1fa1dc"] h2.fw-bold.mb-3.text-white,
    section.team-culture-section h2.fw-bold.mb-3.text-white,
    section.bg-primary h2.fw-bold.mb-3.text-white,
    body section[style*="background: #1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white,
    body section.cta-section div.container div.text-center h2.fw-bold.mb-3.text-white,
    body section[style*="background:#1fa1dc"] div.container div.text-center h2.fw-bold.mb-3.text-white,
    body section.team-culture-section div.container div.row div.col-12 h2.fw-bold.mb-3.text-white,
    .cta-section h2,
    .team-culture-section h2,
    section[style*="background: #1fa1dc"] h2,
    section[style*="background:#1fa1dc"] h2,
    body section.team-culture-section h2.fw-bold.mb-3.text-white,
    section#team-culture h2.fw-bold.mb-3.text-white,
    section#team-culture h2,
    h2:contains("Ready"),
    h2[text*="Ready"],
    section[style*="background: #1fa1dc"] h2:contains("Ready"),
    section.cta-section h2:contains("Ready"),
    body h2.fw-bold.mb-3.text-white:contains("Ready") {
        color: #ffffff !important;
        background-color: transparent !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #ffffff !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    
    /* Allow text wrapping on small screens to prevent cutoff - including "Ready" sections */
    @media (max-width: 576px) {
        section[style*="background: #1fa1dc"] h2.fw-bold.mb-3.text-white,
        section.cta-section h2.fw-bold.mb-3.text-white,
        section[style*="background:#1fa1dc"] h2.fw-bold.mb-3.text-white,
        .cta-section h2,
        section[style*="background: #1fa1dc"] h2,
        section[style*="background:#1fa1dc"] h2,
        h2:contains("Ready"),
        h2[text*="Ready"],
        section[style*="background: #1fa1dc"] h2:contains("Ready"),
        section.cta-section h2:contains("Ready"),
        body h2.fw-bold.mb-3.text-white:contains("Ready") {
            white-space: normal !important;
            word-wrap: break-word !important;
            hyphens: auto !important;
            line-height: 1.2 !important;
        }
    }
}