/* ROOT VARIABLES & COLOR THEME */
:root {
    --primary-orange: #ff6b1a;
    --primary-purple: #b99cff;
    --primary-blue: #8fb0ff;
    --primary-lime: #d7ff00;
    --dark: #1a1a1a;
    --light: #f5f5f5;
    --white: #ffffff;
    --light-purple: #e2d6ff;
}

/* GENERAL & TYPOGRAPHY */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--white);
    color: var(--dark);
    overflow-x: hidden;
}

.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.fs-7 { font-size: 0.85rem; }
.line-height-tight { line-height: 0.95; }
.max-w-sm { max-width: 400px; }

/* UTILITY COLORS */
.bg-orange { background-color: var(--primary-orange) !important; }
.bg-purple { background-color: var(--primary-purple) !important; }
.bg-blue { background-color: var(--primary-blue) !important; }
.bg-lime { background-color: var(--primary-lime) !important; }
.bg-light-purple { background-color: var(--light-purple) !important; }
.bg-dark { background-color: var(--dark) !important; }

.text-orange { color: var(--primary-orange) !important; }
.text-purple { color: var(--primary-purple) !important; }
.text-blue { color: var(--primary-blue) !important; }
.text-lime { color: var(--primary-lime) !important; }
.text-dark { color: var(--dark) !important; }

/* BORDERS & SHADOWS */
.custom-border {
    border: 2px solid var(--dark) !important;
}

.dashed-card {
    border: 2px dashed var(--dark);
    border-radius: 30px;
    background: var(--white);
}

.solid-card {
    border: 2px solid var(--dark);
    border-radius: 30px;
    box-shadow: 6px 6px 0px var(--dark);
}

.shadow-solid {
    box-shadow: 6px 6px 0px var(--dark);
}

/* NAVBAR */
.custom-navbar {
    border: 2px solid var(--dark);
    border-radius: 50px;
    /* padding: 10px 20px; */
    padding: 0px 0px;
    box-shadow: 3px 3px 0px var(--dark);
}
.custom-toggler {
    border: 2px solid var(--dark);
    border-radius: 50px;
}

/* BUTTONS */
.btn-orange {
    background-color: var(--primary-orange);
    color: var(--white);
    border: 2px solid var(--dark);
    box-shadow: 3px 3px 0px var(--dark);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-orange:hover {
   color: #ff5722;
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 5px 5px 0px var(--dark);
}

.custom-btn {
    border-width: 2px;
}

.accordion-item {
  
  padding: 22px;
}

/* ICONS */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--dark);
}

.icon-circle-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--dark);
}

/* PROCESS SECTION */
.process-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 0px var(--dark);
    z-index: 2;
    position: relative;
    margin-bottom: -20px !important;
}

.process-card {
    border: 2px solid var(--dark);
    border-radius: 20px;
    padding: 35px 20px 20px;
    height: 100%;
}

/* SERVICES SECTION */
.service-pill {
    border-radius: 50px;
}
.scale-up {
    transform: scale(1.1);
    z-index: 3;
}
@media (max-width: 991px) {
    .scale-up {
        transform: scale(1);
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

/* =========================================
   FULL WIDTH SLIDER LOGIC 
   ========================================= */

/* Breaks out of the Bootstrap container on the right side */
.full-width-slider-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Base padding matches default container padding */
    padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
}

/* Aligns the left side of the slider with the standard Bootstrap container breakpoints */
@media (min-width: 576px) { .full-width-slider-container { padding-left: calc(50vw - 270px); } }
@media (min-width: 768px) { .full-width-slider-container { padding-left: calc(50vw - 360px); } }
@media (min-width: 992px) { .full-width-slider-container { padding-left: calc(50vw - 480px); } }
@media (min-width: 1200px) { .full-width-slider-container { padding-left: calc(50vw - 570px); } }
@media (min-width: 1400px) { .full-width-slider-container { padding-left: calc(50vw - 660px); } }

/* Slider Card Sizing & Snapping */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.snap-container {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
}
.slider-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 90vw; /* Mobile width */
    max-width: 400px; /* Desktop max width */
    transition: transform 0.3s ease;
}
.portfolio-card:hover {
    transform: translateY(-5px);
}

/* FAQ ACCORDION */
.custom-accordion .accordion-item {
    border: none;
    box-shadow: 4px 4px 0px var(--dark);
}
.custom-accordion-btn::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-color: var(--white);
    border: 2px solid var(--dark);
    border-radius: 50%;
   
    padding: 18px;
  background-position: center;
  background-size: 22px;
  box-shadow: 3px 3px 0px var(--dark);
}
.bg-orange .custom-accordion-btn::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6b1a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}



/* =========================================
   FULL WIDTH SLIDER LOGIC & DRAG SCROLL
   ========================================= */

.full-width-slider-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
}

@media (min-width: 576px) { .full-width-slider-container { padding-left: calc(50vw - 270px); } }
@media (min-width: 768px) { .full-width-slider-container { padding-left: calc(50vw - 360px); } }
@media (min-width: 992px) { .full-width-slider-container { padding-left: calc(50vw - 480px); } }
@media (min-width: 1200px) { .full-width-slider-container { padding-left: calc(50vw - 570px); } }
@media (min-width: 1400px) { .full-width-slider-container { padding-left: calc(50vw - 660px); } }

/* Hide Scrollbars */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Base Slider Container */
.snap-container {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scroll-behavior: smooth;
    cursor: grab; /* Shows a grab hand cursor on hover */
}

/* When Javascript adds the 'active-drag' class on mousedown */
.snap-container.active-drag {
    cursor: grabbing; /* Shows a closed fist cursor */
    scroll-snap-type: none; /* Disables snap while dragging for smoothness */
    scroll-behavior: auto; 
}

/* Slider Cards */
.slider-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 90vw;
    max-width: 400px;
    transition: transform 0.3s ease;
    user-select: none; /* Prevents text from turning blue while dragging */
}

/* Prevents images/links from triggering browser drag defaults */
.slider-card img,
.slider-card a {
    pointer-events: none; 
}

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


/* =======================================================
   EXACT HERO DESIGN CONFIGURATIONS (hero-section.jpg)
   ======================================================= */

/* Typography & Layout Foundation */
.hero-clean-section {
    font-family: 'Montserrat', sans-serif;
}

.star-icon {
    color: #ffb800;
    font-size: 1.3rem;
}

.rating-text {
  font-size: 1rem;
  color: #4a4a4a;
  letter-spacing: -0.2px;
}

/* Master Bold Headline */
.main-headline {
    font-size: clamp(3.5rem, 6vw, 5.8rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -2px;
    color: #1a1a1a;
    position: relative;
    display: inline-block;
}

.dot-accent {
    color: #1a1a1a;
}

.year-badge {
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 12px;
    vertical-align: middle;
    color: #1a1a1a;
    position: relative;
    top: -5px;
}

/* Paragraph Flow Match */
.hero-description {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #707070;
    font-weight: 500;
    max-width: 580px;
}

/* Brutalist Shadow Pill Buttons */
.btn-hero-brutal {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 16px 36px;
    border-radius: 50px;
    border: 3px solid #1a1a1a !important;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 4px 5px 0px #1a1a1a;
}

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

.btn-brand-orange {
    background-color: #f24e05; /* Matching the deep bright orange from sample images */
    color: #ffffff;
}

.btn-hero-brutal:hover {
  transform: translateY(-2px) translateX(-1px);
  box-shadow: 6px 7px 0px #1a1a1a;
  color: #f24e05 !important ;
  background-color: #ffffff;
    
}

.btn-hero-brutal:active {
    transform: translateY(2px) translateX(1px);
    box-shadow: 2px 2px 0px #1a1a1a;
}

/* =======================================================
   SMOOTH AUTOMATED LAYER DECK CAROUSEL ENGINE 
   ======================================================= */

.hero-slider-deck-container {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
    padding-right: 26px;
    /* padding-right: 45px;  */
    /* Ensures space for rear peeking cards */
    /* margin-left: 100px; */
}

.smooth-deck-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.deck-image-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 88%; /* Leaves exactly 12% space exposed for trailing layers */
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1), z-index 0.6s, opacity 0.4s ease;
}

.deck-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Deck Position State Formulas */
.layer-front {
    z-index: 3;
    transform: translateX(0px) scale(1);
    opacity: 1;
}

.layer-middle {
    z-index: 2;
    transform: translateX(50px) scale(1);
    transform-origin: center right;
    opacity: 1;
}

.layer-back {
    z-index: 1;
    transform: translateX(100px) scale(1);
    transform-origin: center right;
    opacity: 0.9;
}


@media (max-width: 991px) {
   .hero-slider-deck-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 480px;
  margin: 0 auto;
  padding-right: 66px;
  
}


.deck-image-card {
 
  height: 80%;
}

}




/* =======================================================
   AGENCY STATS COMPONENT STYLING (agency section.png)
   ======================================================= */

.agency-stats-banner-section {
    font-family: 'Montserrat', sans-serif;
}

/* Marker Strip Positioning Core Engine */
.metric-strip-wrapper {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.metric-counter-digits {
    font-size: clamp(2.8rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: -1.5px;
    line-height: 1;
}

/* Central horizontal highlights matching image depth coordinates */
.metric-strip-wrapper::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: 53%;
    height: 15px; /* Perfect thickness layer match running across background */
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0.95;
}

/* Soft Pastel Hex Codes from agency section.png */
.highlight-strip-blue::before {
    background-color: #adc6ff; /* Clean light blue overlay tint */
}

.highlight-strip-yellow::before {
    background-color: #ffd966; /* Clean soft amber yellow tint */
}

/* Split-Stack Text Formatting Labels */
.metric-text-label {
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a1a;
    letter-spacing: -0.2px;
}

/* Mega Title "AGENCY/" Graphic Parameter Styles */
.massive-display-title-slash {
    font-size: clamp(3.8rem, 8.5vw, 6.8rem);
    font-weight: 900;
    color: #1a1a1a;
    line-height: 0.85;
    letter-spacing: -3px;
    transform: scaleY(0.98); /* Matching the compressed vector style display */
}

/* Dynamic handling for smaller touch displays break alignment rules */
@media (max-width: 991px) {
    .massive-display-title-slash {
        margin-top: 10px;
        letter-spacing: -1.5px;
    }
}




/* =======================================================
   VISION EVOLUTION TEXT GRID STYLING (justmake.png)
   ======================================================= */

.vision-evolution-section {
    font-family: 'Montserrat', sans-serif;
}

/* Primary Massive Headline Scale */
.brutal-title {
    font-size: clamp(3.2rem, 6.5vw, 5.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    color: #1a1a1a;
    display: inline-block;
}

.title-period {
    color: #1a1a1a;
    margin-right: 8px;
}

/* Overlapping Inline Purple Arrow Badge */
.title-arrow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 5.5vw, 54px);
    height: clamp(40px, 5.5vw, 54px);
    background-color: #a87ffb; /* Precise violet-purple hue match */
    border: 3px solid #1a1a1a;
    border-radius: 50%;
    color: #ffffff;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 900;
    vertical-align: middle;
    position: relative;
    top: -5px; /* Aligns visually with the baseline of the text */
    margin-left: 4px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); */
    box-shadow: 3px 3px 0px var(--dark);
    padding: 12px;
}

/* Secondary Brutalist Tagline Definition */
.brutal-tagline {
    font-size: clamp(0.95rem, 1.5vw, 1.25rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    margin-top: 1.8rem;
}

/* Right Side: Header Accent Label */
.narrative-header {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    color: #1a1a1a;
    letter-spacing: -0.4px;
}

/* Right Side: Clean Descriptive Body Copy */
.narrative-paragraph {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #6c757d; /* Clean editorial gray text balance */
    font-weight: 500;
    letter-spacing: -0.1px;
}

/* Mobile Breakpoint Tweak to avoid clipping on tight displays */
@media (max-width: 991px) {
    .brutal-title {
        letter-spacing: -1px;
    }
    .brutal-tagline {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
}



/* =======================================================
   VISION & MISSION SPLIT PILL DESIGN (Fully Black Borders)
   ======================================================= */

.vision-mission-container {
    font-family: 'Montserrat', sans-serif;
}

.unified-pill-wrapper {
    background-color: transparent;
    position: relative;
}

.card-inner-content {
    padding: 3.5rem 3rem;
    width: 100%;
}

/* Left Card Properties: Thin Pure Black Border Outline */
.vision-split-card {
    background-color: #ffffff;
    border: 1.5px solid #000000; /* Fully Black */
    border-right: none;
    border-radius: 120px 0 0 120px;
    z-index: 1;
}

/* Right Card Properties: Thick Pure Black Outline & Neon Lime Fill */
.mission-split-card {
    background-color: #d2ff00; 
    border: 4.5px solid #000000; /* Fully Black */
    border-radius: 120px;
    z-index: 2;
    margin-left: -2px; 
}

/* Typographic Precision Matrices */
.split-card-title {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -1.2px;
    color: #000000;
    line-height: 1;
}

.split-card-description {
    font-size: 1.02rem;
    line-height: 1.55;
    color: #2b2b2b;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.custom-svg-icon {
    width: 48px;
    height: 48px;
    display: block;
}

/* =======================================================
   RESPONSIVE LAYOUT CONVERSION BREAKPOINTS
   ======================================================= */

@media (max-width: 991px) {
    .unified-pill-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    /* Updates mobile breakdown borders to fully black */
    .vision-split-card {
        border: 1.5px solid #000000 !important; /* Fully Black */
        border-radius: 40px !important;
    }
    
    .mission-split-card {
        margin-left: 0;
        border: 4.5px solid #000000 !important; /* Fully Black */
        border-radius: 40px !important;
    }
    
    .card-inner-content {
        padding: 2.5rem 1.8rem;
    }
}

@media (max-width: 576px) {
    .card-inner-content {
        flex-direction: column;
        gap: 1.2rem !important;
    }
    
    .split-card-title {
        font-size: 1.6rem;
    }
}



/* =======================================================
   PURE GEOMETRIC IMAGE SLIDER ROWS (4-img_2.png)
   ======================================================= */

/* Perfect circle structural matrix */
.graphic-circle-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Guarantees layout stays perfectly round across all viewports */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 12%;  */
    /* Internal padding protects the asset edges from clipping */
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

/* Image Scale Engine */
.fluid-3d-asset {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.12); /* Provides the beautiful 3D pop effect seen in the file */
    pointer-events: none;
}

/* Exact Hex Color Code Implementations from 4-img_2.png */
.bg-3d-purple {
    /* background-color: #cb9eff;  */
    /* Soft Lavender Tint */
}

.bg-3d-orange {
    /* background-color: #ff5e22;  */
    /* High-Vibrancy Brand Orange */
}

.bg-3d-blue {
    /* background-color: #6493ff; */
     /* Clean Sky Blue */
}

.bg-3d-lime {
    /* background-color: #d2ff00;  */
    /* Ultra-Bright Neon Lime Green */
}

/* Optional Mobile Scale Protection */
@media (max-width: 480px) {
    .graphic-circle-wrapper {
        padding: 10%;
    }
}



/* =======================================================
   PROCESS STEPS BLOCK MATRIX STYLES (dis-22.png)
   ======================================================= */

.process-steps-section {
    font-family: 'Montserrat', sans-serif;
}

/* Base Pill Card Architecture */
.process-step-card {
    position: relative;
    width: 100%;
    min-height: 280px;
    border-radius: 32px; /* Smooth extra-rounded corner tracking */
    padding: 2.2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
}

/* Distinct Text Contrast Profiles */
.text-dark-brutal {
    color: #1a1a1a !important;
}
.text-white {
    color: #ffffff !important;
}

/* Top-Left Absolute Numeric Anchor Placement */
.step-number-header {
    font-size: clamp(3.5rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    text-align: left;
    width: 100%;
}

/* Centered Body Presentation Engine */
.step-card-content {
    text-align: center;
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
}

.step-title {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 1.2rem;
    line-height: 1;
}

.step-description {
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 0;
    opacity: 0.95;
}

/* Exact Hex Color Code Blocks Implemented From dis-22.png */
.step-bg-purple {
    background-color: #cb9eff; /* Soft Lavender Tint */
}

.step-bg-orange {
    background-color: #ff5e22; /* High-Vibrancy Brand Orange */
}

.step-bg-blue {
    background-color: #6493ff; /* Clean Sky Blue */
}

.step-bg-lime {
    background-color: #d2ff00; /* Ultra-Bright Neon Lime Green */
}

/* Responsive Structural Height Tuning */
@media (max-width: 1199px) {
    .process-step-card {
        min-height: 260px;
        padding: 1.8rem 1.5rem;
    }
    .step-title {
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
    }
}




/* =======================================================
   SERVICES SEGMENT STRATIFICATION DESIGN (ui-ux.png)
   ======================================================= */

.services-interactive-section {
    font-family: 'Montserrat', sans-serif;
}

/* Master Shared Base Card Parameters */
.service-brutal-card {
    background-color: #ffffff;
    padding: 3.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

/* Precise Color Layout Mappings */
.bg-brand-orange {
    background-color: #ff5e22; /* High-vibrancy solid orange element fill */
}

.dark-text {
    color: #1a1a1a;
}

.dark-subtext {
    color: #686868;
}

/* Geometric Corner Formulas From Image */
.card-shape-left {
    border: 1.5px solid #000000;
    border-radius: 140px 30px 30px 140px;
}

.card-shape-center {
    /* border-radius: 50% / 50%;  */
    /* Produces the completely elliptical fluid oval mapping */

    border-radius: 77px / 82px;
    /* padding: 4.5rem 3rem; */
}

.card-shape-right {
    border: 1.5px solid #000000;
    border-radius: 30px 140px 140px 30px;
}

/* Circular Metric Icon Frames */
.service-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.03); */
    box-shadow: 3px 3px 0px var(--dark);
}

.bg-badge-blue {
    background-color: #adc6ff; /* Soft violet-tinted blue */
}

.bg-badge-pink {
    background-color: #ff7da7; /* Soft salmon pink */
}

.service-svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Typographic Alignment Columns */
.service-title {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: -0.8px;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.service-description {
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 290px;
    margin-bottom: 2rem;
    min-height: 48px; /* Ensures inline alignment consistency across different text densities */
}

/* Custom Underlined Action Triggers */
.service-action-link {
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid currentcolor; /* Locks line color scaling to match the text choice */
    padding-bottom: 4px;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.service-action-link:hover {
    opacity: 0.8;
}

.arrow-symbol {
    margin-left: 6px;
    font-size: 1.1rem;
    line-height: 1;
}

/* Depth Index Positioning Controls */
.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }

/* =======================================================
   RESPONSIVE OVERLAP ENGINE AND MEDIA QUERY BREAKPOINTS
   ======================================================= */

@media (min-width: 992px) {
    /* Pulls the center orange card cleanly over the side card borders on wide screens */
    .card-shape-center {
        /* margin-left: -25px;
        margin-right: -25px; */
        transform: scale(1.04); /* Gives the hero center module its distinctive emphasis size */
    }
}

@media (max-width: 991px) {
    /* Transforms columns into clean separate modules on smaller displays to prevent text clipping */
    .card-shape-left, .card-shape-right {
        border-radius: 60px;
    }
    
    .card-shape-center {
        border-radius: 40px;
        padding: 3.5rem 2.5rem;
    }
    
    .service-description {
        min-height: auto;
    }
}



/* =======================================================
   ASYMMETRICAL LEFT-BOUNDED RIGHT-BLEED SNAP SLIDER
   ======================================================= */

.portfolio-asymmetric-section {
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    overflow: hidden; /* Prevents global page horizontal overflow scrollbars */
}

.section-main-heading {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -1px;
    color: #000000;
}

/* Control Navigation Buttons */
.slider-nav-btn {
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border: 3px solid #000000;
    border-radius: 50%;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.slider-nav-btn:hover {
    background-color: #7ca1ff;
    transform: scale(1.05);
}

/* Fluid Container Margin Align Engine 
   Calculates left padding to match Bootstrap container grid perfectly
*/
.portfolio-bleed-viewport {
    width: 100%;
    overflow-x: auto;
    cursor: grab;
    
    /* Strict One-by-One Card Snapping Parameters */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* Native Scrollbar Removal Equations */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
    
    /* Grid-matching calculation formula */
    padding-left: calc((100vw - 1320px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    padding-right: var(--bs-gutter-x, 1.5rem);
}

/* Webkit Scrollbar Stripping Engine */
.portfolio-bleed-viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.portfolio-slider-track {
    display: flex;
    gap: 1.8rem;
    width: max-content;
    padding-right: calc((100vw - 1320px) / 2); /* Allows last card to snap properly on the edge */
}

/* Individual Responsive Card Viewports */
.portfolio-interactive-card {
    position: relative;
    width: 440px;
    height: 490px;
    border: 3.5px solid #000000;
    border-radius: 36px;
    overflow: hidden;
    background-color: #ffffff;
    flex-shrink: 0;
    box-sizing: border-box;
    
    /* Pin Card Frame to Snapping Engine Line */
    scroll-snap-align: start;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Background Image Frame Layer */
.card-img-layer {
    width: 100%;
    height: 55%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

/* Bottom Bubble Overlay Panels */
.panel-slide-overlay {
    position: absolute;
    left: -3.5px;
    right: -3.5px;
    bottom: -3.5px;
    border: 3.5px solid #000000;
    border-radius: 44px 44px 32px 32px;
    padding: 2.2rem 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    z-index: 2;
    background-color: #ffffff;
    color: #000000;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography Specifications */
.portfolio-card-title {
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: -0.8px;
    line-height: 1.1;
}
.portfolio-card-description {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 1.2rem;
    opacity: 0.85;
}
.portfolio-card-link {
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    color: inherit;
}

/* Vector Circle Indicator Badge */
.vector-arrow-badge {
    width: 42px;
    height: 42px;
    background-color: #ffffff;
    border: 1.5px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-shrink: 0;
    color: #7ca1ff;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.vector-arrow-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =======================================================
   DYNAMIC MOUSE HOVER MAPPINGS
   ======================================================= */
.portfolio-interactive-card:hover .panel-slide-overlay,
.portfolio-interactive-card.interactive-blue-mode .panel-slide-overlay {
    background-color: #7ca1ff; /* Changes background to blue on hover */
    color: #ffffff;            /* Inverts text to white */
}

.portfolio-interactive-card:hover .vector-arrow-badge,
.portfolio-interactive-card.interactive-blue-mode .vector-arrow-badge {
    background-color: #000000;
    color: #ffffff;
}

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

/* =======================================================
   RESPONSIVE BREAKPOINT TUNING 
   ======================================================= */
@media (max-width: 1399px) {
    .portfolio-bleed-viewport {
        padding-left: calc((100vw - 1140px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
}

@media (max-width: 1199px) {
    .portfolio-bleed-viewport {
        padding-left: calc((100vw - 960px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
}

@media (max-width: 991px) {
    .portfolio-bleed-viewport {
        padding-left: calc((100vw - 720px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
    .portfolio-interactive-card {
        width: 360px;
        height: 460px;
    }
}

@media (max-width: 767px) {
    .portfolio-bleed-viewport {
        padding-left: var(--bs-gutter-x, 1.5rem); /* Default fallbacks for fluid grid views */
    }
    .portfolio-interactive-card {
        width: 300px;
        height: 440px;
    }
    .panel-slide-overlay {
        padding: 1.6rem 1.4rem;
        min-height: 230px;
    }
    .portfolio-card-title { font-size: 1.35rem; }
}

/* ==========================================================================
   BRUTALIST LEFT-BOUNDED RIGHT-BLEED HORIZONTAL SNAPPING SLIDER
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

.portfolio-bleed-section {
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    width: 100%;
    overflow: hidden; /* Strict protection against global layout breaks */
}

.slider-section-heading {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #111111;
}

/* The Right-Bleed Layout Viewport Architecture */
.portfolio-slider-viewport {
    width: 100%;
    overflow-x: auto;
    cursor: grab;
    
    /* Strict Card-by-Card One-by-One Snapping Settings */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* Native Scrollbar Removal Engine */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    padding-top: 1rem;
    padding-bottom: 2.5rem;
    
    /* Left-Gutter alignment parameters matching standard container columns */
    padding-left: calc((180vw - 1320px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    padding-right: var(--bs-gutter-x, 1.5rem);
    box-sizing: border-box;
    margin-left: 80px;
}

/* Webkit Engine Scrollbar Eraser */
.portfolio-slider-viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.portfolio-slider-viewport:active {
    cursor: grabbing;
}

/* Horizontal Track System Setup */
.portfolio-slider-track {
    display: flex;
    gap: 1.8rem; /* Distance between structural card items */
    width: max-content;
    padding-right: calc((100vw - 1320px) / 2 + var(--bs-gutter-x, 1.5rem));
}

/* ==========================================================================
   INTERACTIVE DRAGGABLE SNAP CARD FRAME WORK 
   ========================================================================== */

.portfolio-brutal-card {
    position: relative;
    
    /* Mathematical calculation to show exactly 2 full cards and a half peek of the 3rd card on desktop */
    width: calc((100vw - calc((100vw - 1320px) / 2) - 5.4rem) / 2.5);
    max-width: 520px; 
    min-width: 440px;
    
    height: 530px;
    border: 3.5px solid #111111; /* Thick crisp pure dark layouts outline */
    border-radius: 72px;
    overflow: hidden;
    background-color: #ffffff;
    flex-shrink: 0;
    box-sizing: border-box;
    
    /* Anchor card frames to native grid snap lines */
    scroll-snap-align: start;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

/* Card Visual Graphic Canvas Box */
.card-image-canvas {
    width: 100%;
    height: 58%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.brand-badge-pill {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background-color: #111111;
    color: #ffffff;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Bottom Bubble Overlay Card Panel (Curves upward like mockup bubble frames) */
.panel-bubble-container {
    position: absolute;
    left: -3.5px;
    right: -3.5px;
    bottom: -3.5px;
    border: 3.5px solid #111111;
   border-radius: 72px 72px 72px 72px; 
    /* Distinct domed bubble style shape */
    padding: 2.2rem 1.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 275px;
    z-index: 5;
    background-color: #ffffff;
    color: #111111;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Text Metrics Specifications */
.portfolio-item-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    margin: 0;
    line-height: 1.1;
}

.portfolio-item-description {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 0.8rem;
    margin-bottom: 1.2rem;
    opacity: 0.85;
}

.portfolio-item-action {
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    color: inherit;
}

/* Diagonal Vector Arrow Badge */
.diagonal-vector-badge {
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 2px solid #111111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-shrink: 0;
    color: #6B8AFD; /* Beautiful electric blue arrow matching your theme image */
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    box-shadow: 3px 3px 0px var(--dark);
}

.diagonal-vector-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   DYNAMIC INTERACTIVE MOUSE HOVER PHASES
   ========================================================================== */

/* Triggers blue card swap states on hover or active presets */
.portfolio-brutal-card:hover .panel-bubble-container,
.portfolio-brutal-card.active-blue-mode .panel-bubble-container {
    background-color: #6B8AFD; /* Panel backdrop turns signature blue */
    color: #ffffff !important;   /* Text typography elements invert to white */
}

/* Inverts arrow button style properties when panel goes blue */
.portfolio-brutal-card:hover .diagonal-vector-badge,
.portfolio-brutal-card.active-blue-mode .diagonal-vector-badge {
    background-color: #111111;
    color: #ffffff;
}

.portfolio-brutal-card:hover {
    transform: translateY(-6px);
}

.portfolio-brutal-card:hover .diagonal-vector-badge {
    transform: rotate(45deg);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINT GRID EQUATIONS
   ========================================================================== */

@media (max-width: 1399px) {
    .portfolio-slider-viewport {
        padding-left: calc((100vw - 1140px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
        
    }
    .portfolio-brutal-card {
        width: calc((100vw - calc((100vw - 1140px) / 2) - 5.4rem) / 2.5);
    }
}

@media (max-width: 1199px) {
    .portfolio-slider-viewport {
        padding-left: calc((100vw - 960px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
    .portfolio-brutal-card {
        width: calc((100vw - calc((100vw - 960px) / 2) - 4rem) / 2.2); /* Shifts smoothly to 2 visible cards on tablets */
        min-width: 380px;
        height: 490px;
    }
    .panel-bubble-container { min-height: 250px; padding: 1.8rem 1.5rem; }
}

@media (max-width: 991px) {
    .portfolio-slider-viewport {
        padding-left: calc((100vw - 720px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
    .portfolio-brutal-card {
        width: calc((100vw - calc((100vw - 720px) / 2) - 2rem) / 1.6); /* Shows 1 full card and a peeking view on mobile screens */
    }
}

@media (max-width: 767px) {
    .portfolio-slider-viewport {
        padding-left: var(--bs-gutter-x, 1.5rem);
        margin-left: 0px;
    }
    .portfolio-slider-track {
        gap: 1.2rem;
    }
    .portfolio-brutal-card {
        width: 315px;
        min-width: 290px;
        height: 450px;
    }
    .panel-bubble-container {
        min-height: 230px;
        padding: 1.5rem 1.2rem;
        border-radius: 28px 28px 24px 24px;
    }
    .portfolio-item-title { font-size: 1.35rem; }
    .slider-section-heading { font-size: 2rem; }
}



/* ==========================================================================
   BRUTALIST TESTIMONIAL 2.5 SNAP ENGINE
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

.testimonial-bleed-section {
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    width: 100%;
    overflow: hidden;
}

/* Structural Viewport Wrapper & Right Bleed Equations */
.testimonial-slider-viewport {
    width: 100%;
    overflow-x: auto;
    cursor: grab;
    
    /* Native One-by-One Card Snapping Rules */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* Hide Scrollbars cleanly */
    scrollbar-width: none;
    -ms-overflow-style: none;
    
    padding-top: 1rem;
    padding-bottom: 2.5rem;
    
    /* Left side aligns perfectly with container, right flows to edge */
    padding-left: calc((100vw - 1320px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    padding-right: var(--bs-gutter-x, 1.5rem);
    box-sizing: border-box;
    margin-left: 80px;
}

.testimonial-slider-viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.testimonial-slider-viewport:active {
    cursor: grabbing;
}

.testimonial-slider-track {
    display: flex;
    gap: 1.8rem;
    width: max-content;
    padding-right: calc((100vw - 1320px) / 2 + var(--bs-gutter-x, 1.5rem));
}

/* ==========================================================================
   TESTIMONIAL SPECIFIC CARD DESIGN Framework (test-.png style)
   ========================================================================== */

.testimonial-brutal-card {
    position: relative;
    
    /* Strict Mathematical formula ensuring exactly 2.5 cards visible on screen load */
    width: calc((100vw - calc((100vw - 1320px) / 2) - 5.4rem) / 2.5);
    max-width: 520px; 
    min-width: 440px;
    
    height: 380px; /* Tailored container height for beautiful typographic flow */
    border: 3.5px solid #111111;
    border-radius: 40px; /* Bubble curved aesthetic from your files */
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
    scroll-snap-align: start;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.testimonial-content-wrapper {
    width: 100%;
    height: 100%;
    padding: 2.5rem 2.2rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Avatar Circle Box UI */
.avatar-holder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #111111;
    margin-bottom: 1.5rem;
    background-color: #ffffff;
}

.avatar-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Typography Rules */
.testimonial-headline {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    margin: 0 0 0.8rem 0;
    line-height: 1.1;
}

.testimonial-quote {
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.author-meta {
    font-size: 0.92rem;
    /* font-weight: 700; */
}

/* Rating Star Badges Layout */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* font-weight: 800; */
    font-size: 1.05rem;
}

.rating-text  strong{
font-size: 2rem;

}

.star-icon {
    color: #FFC107; /* Crisp gold-yellow star */
   font-size: 2.15rem;
}

/* ==========================================================================
   EXACT COMPONENT BRANDING COLOURES (test-.png)
   ========================================================================== */

/* Lavender Card Colors */
.bg-lavender-mode {
    background-color: #D1BBFF;
    color: #111111;
}
.bg-lavender-mode .testimonial-headline { color: #111111; }

/* Electric Blue Card Colors */
.bg-blue-mode {
    background-color: #6B8AFD;
    color: #ffffff;
}
.bg-blue-mode .testimonial-headline { color: #ffffff; }
.bg-blue-mode .avatar-holder { border-color: #ffffff; }

/* Neon Lime Card Colors */
.bg-lime-mode {
    background-color: #D4FF00;
    color: #111111;
}
.bg-lime-mode .testimonial-headline { color: #111111; }

/* Vibrant Orange Card Colors */
.bg-orange-mode {
    background-color: #FF5E2B;
    color: #ffffff;
}
.bg-orange-mode .testimonial-headline { color: #ffffff; }
.bg-orange-mode .avatar-holder { border-color: #ffffff; }

/* Subtle hovering accent animation */
.testimonial-brutal-card:hover {
    transform: translateY(-5px);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINT GRID EQUATIONS
   ========================================================================== */

@media (max-width: 1399px) {
    .testimonial-slider-viewport {
        padding-left: calc((100vw - 1140px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
    .testimonial-brutal-card {
        width: calc((100vw - calc((100vw - 1140px) / 2) - 5.4rem) / 2.5);
    }
}

@media (max-width: 1199px) {
    .testimonial-slider-viewport {
        padding-left: calc((100vw - 960px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
    .testimonial-brutal-card {
        width: calc((100vw - calc((100vw - 960px) / 2) - 4rem) / 2.2); /* Smooth adaptive transition to 2 view cards */
        min-width: 380px;
        height: 360px;
    }
    .testimonial-content-wrapper { padding: 2rem 1.8rem; }
}

@media (max-width: 991px) {
    .testimonial-slider-viewport {
        padding-left: calc((100vw - 720px) / 2 + var(--bs-gutter-x, 1.5rem) / 2);
    }
    .testimonial-brutal-card {
        width: calc((100vw - calc((100vw - 720px) / 2) - 2rem) / 1.6);
    }
}

@media (max-width: 767px) {
    .testimonial-slider-viewport {
        padding-left: var(--bs-gutter-x, 1.5rem);
        margin-left: 0px;
    }
    .testimonial-slider-track {
        gap: 1.2rem;
    }
    .testimonial-brutal-card {
        width: 315px;
        min-width: 290px;
        height: 350px;
        border-radius: 32px;
    }
    .testimonial-content-wrapper { padding: 1.6rem 1.3rem; }
    .testimonial-headline { font-size: 1.35rem; }
}








/* ==========================================================================
   BRUTALIST HIGH-CONTRAST CALL TO ACTION (FIND.PNG DESIGN LANGUAGE)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap');

.help-cta-section {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FFFFFF;
    overflow: hidden;
}

/* Massive Compressed Typography Style */
.cta-main-heading {
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -3.5px;
    color: #1A1A1A;
    text-transform: uppercase;
}

/* ==========================================================================
   COMMUNICATION SPHERE BUTTONS
   ========================================================================== */

.comm-icon-sphere {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #FFFFFF;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.2), 
                inset 4px 4px 8px rgba(255, 255, 255, 0.3),
                0px 4px 6px rgba(0, 0, 0, 0.1);

                margin-left: 16px;
                margin-top: 20px;
  margin-bottom: 20px;
}

.comm-icon-sphere svg {
    width: 30px;
    height: 30px;
}

/* Spherical Color Properties */
.icon-fb { background: linear-gradient(135deg, #4294FF 0%, #0066E2 100%); }
.icon-wa { background: linear-gradient(135deg, #42E766 0%, #12A62F 100%); }
.icon-mail { background: linear-gradient(135deg, #3CA4F1 0%, #0077CE 100%); }
.icon-in { background: linear-gradient(135deg, #3293D7 0%, #0066A9 100%); }

.comm-icon-sphere:hover {
    transform: translateY(-4px) scale(1.05);
}

/* ==========================================================================
   BRUTALIST HARD SOLID DROP SHADOW CTA ARRAYS
   ========================================================================== */

/* The Pill Button Framework */
.btn-brutal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    color: #111111;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    padding: 1.1rem 2.8rem;
    border: 3.5px solid #111111;
    border-radius: 50px;
    text-decoration: none;
    
    /* Exact Hard Solid Block Drop Shadow */
    box-shadow: 6px 6px 0px #111111;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-brutal-pill:hover {
    color: #111111;
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #111111;
}

.btn-brutal-pill:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0px #111111;
}

/* The Purple Diagonal Arrow Button Framework */
.btn-brutal-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background-color: #A366FF; /* Signature layout violet purple */
    color: #FFFFFF;
    border: 3.5px solid #111111;
    border-radius: 50%;
    text-decoration: none;
    
    /* Matching Solid Block Shadow */
    box-shadow: 6px 6px 0px #111111;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 16px;
}

.btn-brutal-arrow svg {
    width: 26px;
    height: 26px;
}

.btn-brutal-arrow:hover {
    color: #FFFFFF;
    transform: translate(-2px, -2px) rotate(45deg);
    box-shadow: 8px 8px 0px #111111;
}

.btn-brutal-arrow:active {
    transform: translate(4px, 4px) rotate(45deg);
    box-shadow: 2px 2px 0px #111111;
}

/* ==========================================================================
   EXACT RIGHT-SIDE MOCKUP CANVAS (FIND.PNG)
   ========================================================================== */

.brutal-graphic-shadow-container {
    position: relative;
    width: 340px;
    height: 340px;
    background-color: transparent;
}

/* Outer Canvas Frame setup with solid offset block */
.canvas-3d-mockup {
    width: 100%;
    height: 100%;
    background-color: #A9BFFF; /* Exact Soft Periwinkle Blue Base Tone */
    border: 4px solid #111111;
    border-radius: 36px;
    position: relative;
    z-index: 2;
    
    /* Large solid block offset base layout outline */
    box-shadow: 14px 14px 0px #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.vector-3d-art-element {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vector-3d-art-element svg {
    width: 90%;
    height: 90%;
    filter: drop-shadow(0px 12px 20px rgba(0,0,0,0.12));
}

/* Inner Graphic Vectors Overwrite Layer Effects */
.art-shadow-soft {
    filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.08));
}

/* ==========================================================================
   RESPONSIVE LAYOUT EQUATIONS
   ========================================================================== */

@media (max-width: 1399px) {
    .cta-main-heading {
        font-size: 4.2rem;
        letter-spacing: -2.5px;
    }
}

@media (max-width: 1199px) {
    .cta-main-heading {
        font-size: 3.5rem;
        letter-spacing: -2px;
    }
    .brutal-graphic-shadow-container {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 991px) {
    .cta-main-heading {
        font-size: 3.8rem;
        text-align: center;
    }
    .communication-icons-row,
    .action-buttons-row {
        justify-content: center;
    }
    .cta-text-wrapper {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .cta-main-heading {
        font-size: 2.4rem;
        letter-spacing: -1px;
    }
    .btn-brutal-pill {
        padding: 1rem 1.8rem;
        font-size: 0.95rem;
        box-shadow: 4px 4px 0px #111111;
    }
    .btn-brutal-arrow {
        width: 58px;
        height: 58px;
        box-shadow: 4px 4px 0px #111111;
    }
    .brutal-graphic-shadow-container {
        width: 260px;
        height: 260px;
    }
    .canvas-3d-mockup {
        box-shadow: 10px 10px 0px #111111;
        border-radius: 28px;
    }
}







/* ==========================================================================
   BRUTALIST ARCHITECTURE BRAND FOOTER (FOOTER--.PNG DESIGN METRICS)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

.brutal-footer-section {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FFFFFF;
    width: 100%;
    border-top: 3.5px solid #111111;
}

.main-footer-content {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
}

/* ==========================================================================
   LOGO COMPONENT STYLING
   ========================================================================== */

.footer-brand-block {
    display: inline-block;
}

.brand-logo-wrapper {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1;
    color: #111111;
}

/* Distinctive Stylized Brand 'Q' Letter Element Layout */
.logo-text-accent {
    color: #FF5E2B; /* Deep vibrant signature orange */
    font-size: 2.4rem;
    position: relative;
    padding: 0 1px;
}

.logo-subbar {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2.8px;
    margin-top: 0.25rem;
    color: #555555;
    text-transform: uppercase;
}

.text-orange {
    color: #FF5E2B !important;
}

/* ==========================================================================
   MAIN COMPRESSED TYPOGRAPHY & TEXT METRICS
   ========================================================================== */

.footer-main-heading {
    font-size: 4.4rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -3px;
    color: #1A1A1A;
}

.footer-description-textpe {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
    color: #666666; /* Elegant muted body layout text color */
    max-width: 580px;
    margin: 0;
}

/* ==========================================================================
   CONTACT LIST SPHERES WITH HARD OFFSET BLOCK SHADOWS
   ========================================================================== */

.contact-row-item {
    transition: transform 0.2s ease;
}

.contact-sphere-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #111111;
    color: #111111;
    flex-shrink: 0;
    
    /* Exact Hard Solid Block Offset Shadows from footer--.png */
    box-shadow: 4px 4px 0px #111111;
}

.contact-sphere-icon svg {
    width: 22px;
    height: 22px;
}

/* Specific Identity Background Tones */
.bg-lavender-sphere { background-color: #D1BBFF; }
.bg-blue-sphere     { background-color: #6B8AFD; color: #FFFFFF; } /* White icon inside blue block */
.bg-orange-sphere   { background-color: #FF5E2B; color: #FFFFFF; } /* White phone layout inside orange block */
.bg-lime-sphere     { background-color: #D4FF00; }

.contact-label-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #444444;
}

.contact-label-text a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.contact-label-text a:hover {
    border-color: currentColor;
}

/* Hover Accent Feedback Effects */
.contact-row-item:hover {
    transform: translateX(4px);
}

/* ==========================================================================
   DARK BOTTOM UTILITY NAVIGATION STRIP
   ========================================================================== */

.brutal-sub-footer-bar {
    background-color: #222222; /* Solid high-contrast charcoal black base */
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    border-top: 3.5px solid #111111;
    color: #FFFFFF;
}

.copyright-text {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #CCCCCC;
}

.subbar-nav-links a {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.subbar-nav-links a:hover {
    color: #D4FF00; /* Subtle glowing interaction transition matching neon theme components */
}

/* ==========================================================================
   RESPONSIVE BREAKPOINT GRID EQUATIONS
   ========================================================================== */

@media (max-width: 1399px) {
    .footer-main-heading {
        font-size: 3.8rem;
        letter-spacing: -2px;
    }
}

@media (max-width: 1199px) {
    .footer-main-heading {
        font-size: 3.2rem;
        letter-spacing: -1.5px;
    }
    .footer-description-textpe {
        font-size: 0.98rem;
    }
}

@media (max-width: 991px) {
    .main-footer-content {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .footer-main-heading {
        font-size: 3.5rem;
    }
    .contact-links-matrix {
        margin-top: 1rem;
    }
}

@media (max-width: 767px) {
    .main-footer-content {
        text-align: center;
    }
    .brand-logo-wrapper {
        justify-content: center;
    }
    .footer-main-heading {
        font-size: 2.6rem;
        letter-spacing: -1px;
        line-height: 1.05;
    }
    .footer-description-textpe {
        margin-left: auto;
        margin-right: auto;
    }
    .contact-row-item {
        justify-content: flex-start;
        text-align: left;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .subbar-nav-links {
        gap: 1.2rem !important;
    }
    .copyright-text {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-main-heading {
        font-size: 2.1rem;
    }
    .contact-label-text {
        font-size: 0.9rem;
    }
    .contact-sphere-icon {
        width: 44px;
        height: 44px;
    }
    .contact-sphere-icon svg {
        width: 18px;
        height: 18px;
    }
}