:root {
    /* _____ LIGHT MODE ( DEFAULT )_____ */
    --bg-dark: #000000;
    --bg-light: #ffffff;
    --text-dm: #dbdbdb;
    --text-lm: #333333;
    --text-gray-lm: #4b4b4b;
    --text-gray-dm: #d3d3d3;
    --glass-bg-lm: rgba(255, 255, 255, 0.2);
    --glass-bg-dm: rgba(0, 0, 0, 0.2);
    --text-header-dm: #2b6294;
    --text-header-lm:#0a2d4e;
    --text-date-dm: #00ffcc;
    --text-date-lm: #18bc9c;
    --text-price-lm: #308700;
    --text-price-dm: #6eff1d;
    --card-hover-lm: rgba(255, 255, 255, 0.7);
    --card-hover-dm: rgba(0, 0, 0, 0.7);
    --theme-btn-border-dm: rgba(255, 255, 255, 0.2);
    --theme-btn-border-lm: rgba(0, 0, 0, 0.2);

    --primary-blue: #2c3e50;
    --accent-teal: #18bc9c;
    --accent-red: #ff6b6b;
    --accent-yellow: #fcc419;

    /* ____ ELEMENT DESIGN _____ */
    --radius-big: 38px;
    --radius-small: 28px;
    --radius-smaller: 10px;

    --logo-text-a-brightness: 100%;
    --logo-text-b-brightness: 100%;
    --logo-text-shield-brightness: 100%;

    --white: #ffffff;

    /* _____ THEME COLORS _____ */
    --itics-bg-blue: #80b5c5;
    --itics-bg-orange: #deb78a;
    --itics-sheild-green: #8dc36f;
    --itics-sheild-blue: #2b6294;
    --itics-logo-purple: #0a2d4e;
    --itics-logo-gray: #707a84;

    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --theme-percent: 0%;
    --theme-border: 0;
    --bg: color-mix(in srgb, var(--bg-dark) var(--theme-percent), var(--bg-light));
    --text: var(--text-lm);
    --text-header: var(--text-header-lm);
    --text-date: var(--text-date-lm);
    --text-gray: var(--text-gray-lm);
    --text-price: var(--text-price-lm);
    --glass-bg: var(--glass-bg-lm);
    --card-bg: var(--itics-bg-blue);
    --card-hover: var(--card-hover-lm);
    --theme-button-border: var(--theme-btn-border-lm);

    --phone-img: url("static/itics_phone_white.png");
    --dark-img-opacity: 0;
    --light-img-opacity: 1;
}

/* DARK THEME (The Logic Gate) */
/* This fires if the System is Dark OR if the user manually picked Dark */
@media (prefers-color-scheme: dark) {
    :root:not([site-theme="light"]) {
        --text: var(--text-dm);
        --text-gray: var(--text-gray-dm);
        --text-header: var(--text-header-dm);
        --text-date: var(--text-date-dm);
        --text-price: var(--text-price-dm);
        --glass-bg: var(--glass-bg-dm);
        --card-bg: var(--itics-logo-purple);
        --card-hover: var(--card-hover-dm);
        --theme-button-border: var(--theme-btn-border-dm);
        --logo-text-a-brightness: 50%;
        --logo-text-b-brightness: 150%;
        --logo-text-shield-brightness: 110%;
        /* --theme-percent: 100%; */
    }
}

/* STAGE 2: DARK (41-80) */
[site-theme="mid-dark"], [site-theme="ultra-dark"] {
    --text: var(--text-dm);
    --text-gray: var(--text-gray-dm);
    --text-header: var(--text-header-dm);
    --text-date: var(--text-date-dm);
    --text-price: var(--text-price-dm);
    --glass-bg: var(--glass-bg-dm);
    --card-bg: var(--itics-logo-purple);
    --card-hover: var(--card-hover-dm);
    --theme-button-border: var(--theme-btn-border-dm);
    --theme-border: 1px;
}

/* STAGE 2: DARK (41-80) */
[site-theme="mid-dark"] {
    --logo-text-a-brightness: 100%;
    --logo-text-b-brightness: 200%;
    --logo-text-shield-brightness: 100%;
}

/* STAGE 3: ULTRA DARK (81-100) */
[site-theme="ultra-dark"] {
    --logo-text-a-brightness: 50%;
    --logo-text-b-brightness: 150%;
    --logo-text-shield-brightness: 110%;

    --phone-img: url("static/itics_phone_black.png");
    --dark-img-opacity: 1;
    --light-img-opacity: 0;
}

@font-face {
    font-family: 'Dongle';
    src: url('font/Dongle-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Shows a backup font while yours loads */
}

html {
    min-height: 100%;
}

body {
    /* background-color: var(--bg); */
    background: color-mix(in srgb, var(--bg-dark) var(--theme-percent), var(--bg-light));
    /* Default to Dark Text (assuming we start near light mode) */
    color: var(--text);
    /* transition: background-color 0.1s ease, color 0.1s ease; */
    transition: background-color 0.5s linear, color 1.0s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100%;
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    /* The parent handles the centering */
    flex-direction: column;
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
}

.top-banner-card {
    margin-top: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 4px solid #0a2d4e83;
    border-bottom: 4px solid #0a2d4e83;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    background: var(--itics-sheild-blue);
    transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    position: relative;
    overflow: hidden;
}

.top-banner-container {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-banner-content-ticker {
    width: fit-content;
    margin-left: 20px;
}

.top-banner-content-theme-switch {
    width: fit-content;
    margin-right: 20px;
}

/* 1. The Mask (Locks height and hides overflowing text) */
.ticker-wrapper {
    height: 30px; /* Lock this to match the line-height of your text! */
    overflow: hidden;
    position: relative;
}

/* 2. The Sliding Strip */
.ticker-strip {
    display: flex;
    flex-direction: column;
    
    /* Smooth CSS slide movement */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* 3. The Individual Items */
.ticker-item {
    display: flex;
    height: 30px; /* Must perfectly match the .ticker-wrapper height! */
    line-height: 30px; /* Vertically centers the text */
    white-space: nowrap;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    color: #ffffff; /* Fits nicely inside your #2b6294 blue banner */
    gap: 10px;
}

.ticker-item svg {
    /* Optional: Prevent the SVG from shrinking if the text is long */
    flex-shrink: 0; 
    /* Optional: Fine-tune the vertical position if the font looks "bottom-heavy" */
    /* transform: translateY(1px); */
}

.logo-container {
    /* padding-top: 50px; */
    text-align: center;
}

.logo-grid-item {
    padding: 0px;
    /* display: flex; */
    /* flex-direction: row; */
}

/* Ensure Logo scales too */
.logo-img {
    max-width: 100%;
    /* Logo won't exceed screen width */
    height: auto;
}

/* 1. The Main 2-Column Wrapper */
.logo-columns-container {
    display: grid;
    /* grid-template-columns: 1fr 2fr; /* Makes the text column twice as wide as the image */
    /* CHANGE: Instead of "1fr 2fr", we use minmax to set a minimum floor of 0 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 20px;
    /* Space between the image and the text */
    align-items: center;
    /* Vertically centers the image relative to the text block */
    width: 100%;
    height: 100%;
}

/* Ensure the image scales nicely in its column */
.column-image {
    /* .logo-img { */
    width: 100%;
    /* Fill the 1fr column width perfectly */
    max-width: 100%;
    /* Never get larger than the original image file */
    max-height: 100%;
    /* Never let the image get taller than the 220px box */
    height: auto;
    /* Preserve aspect ratio */
    object-fit: contain;
    /* Keeps it perfectly proportioned if it hits that height limit */
    display: block;
}

/* 2. The 3-Row Container */
.column-text-rows {
    display: grid;
    /* Here are your exact requested percentages! */
    grid-template-rows: 45% 25% 30%;
    /* height: 120px; /* You MUST give this a height so the percentages have a base to calculate from */
    height: 100%;
    /* Now it takes up the exact height provided by the column container */
}

/* 3. Styling the Rows (Optional sizing & alignment) */
.column-text-rows div {
    display: flex;
    align-items: center;
    /* Vertically centers the text inside its specific percentage row */
    /* font-family: sans-serif; */
}

.text-row-1 {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
}

.text-row-2 {
    font-size: 16px;
    color: #18bc9c;
    /* Teal */
}

.text-row-3 {
    font-size: 14px;
    color: #7f8c8d;
    /* Gray */
}



.font-dongle {
    font-family: 'Dongle', Arial, sans-serif;
    font-size: 40px;
    color: var(--text-header);
    display: inline-block;
    height: 10px;
}

/* _____ THEME ELEMENTS _____ */

/* 1. The Container that holds both the SVG and the Button */
.interactive-icon-wrapper {
    position: relative;
    display: grid;
    place-items: center;
    /* width: 48px;
    height: 48px; */
    border-radius: 30%;
    /* background: red; */
    border: 4px solid rgba(255, 255, 255, 0.2);
}

/* 4. The Hover State */
.interactive-icon-wrapper:hover .floating-trigger-btn {
    transition: background-color 0.3s;
    /* opacity: 1; */
    /* Fades in the colored button background */
}

/* Optional: Slight pulse or scale on active click */
/* .floating-trigger-btn:active {
    transform: scale(0.95);
} */

/* Container anchored to bottom right of the screen */
.floating-theme-container {
    position: absolute;
    top: 2px;
    right: 0px;
    display: flex;
    /* flex-direction: column; */
    /* 🛠️ Flip to row-reverse so the card opens to the LEFT of the button */
    flex-direction: row-reverse;
    align-items: center;
    gap: 15px;
    z-index: 9999;
    /* Higher than everything else */
    margin-right: 24px;
    height: 56px;
}

/* Master Floating Button */
.floating-trigger-btn {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 30%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    
    background: var(--itics-sheild-blue);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 2;
    transition: background-color 0.3s;
}

.floating-trigger-btn:hover {
    /* transform: scale(1.1); */
    /* background-color: darkgray; */
    border-radius: 30%;
    background-color: var(--bg);
    /* border: 4px solid rgba(255, 255, 255, 0.2); */
    border: 4px solid var(--theme-button-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* The Vertical Card */
.vertical-theme-card {
    /* width: 60px; */
    height: 56px;
    padding: 0px 4px 0px 4px;
    
    display: flex;
    /* flex-direction: column; */
    /* 🛠️ Switched to row to line up elements horizontally */
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: var(--itics-logo-purple);
    /* padding: 20px 15px; */
    border-radius: 14px;
    /* border: 10px solid rgba(255, 255, 255, 0.2); */
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); */

    /* Animation handling */
    opacity: 0;
    pointer-events: none;
    /* transform: translateY(-20px); */
    /* 🛠️ Changed from translateY to translateX (positive moves right, negative moves left) */
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Class added by JS to show the card */
.vertical-theme-card.is-visible {
    opacity: 1;
    pointer-events: auto;
    /* transform: translateY(0); */
    transform: translateX(0); /* Returns back to its natural layout position */
}

/* Mini Buttons inside the card */
.theme-icon-btn {
    background: #3b5771; /* var(--glass-bg); */
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    /* font-size: 18px; */
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;

}

.theme-icon-btn:hover {
    /* background: #e2e6ea; */
    background: black;
    transition: background-color 0.3s;
}

/* Turn the range slider vertical */
.vertical-slider-container {
    /* height: 120px; */
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

input[type="range"][orient="vertical"] {
    /* writing-mode: vertical-lr; */
    /* Standards-based vertical slider */
    /* direction: rtl; */
    /* Puts 100 at the bottom, 0 at the top */
    /* width: 8px;
    height: 100%; */
    /* 🛠️ Strip away all vertical layout overrides! */
    writing-mode: horizontal-tb; 
    direction: ltr;
    width: 100%;
    height: 8px;
    accent-color: var(--itics-bg-blue);
    cursor: pointer;
}

/* _____ THEME BUTTON ICONS _____ */

/* Uniform sizing for your icons */
.svg-icon {
    width: 58px;
    height: 58px;
    display: block;
    /* Removes weird baseline text spacing */
}

/* Master floating button might want a slightly bigger icon */
.trigger-icon {
    width: 48px;
    height: 48px;

    opacity: 1;
    /* Always fully visible */
    pointer-events: none;
    /* Clicks pass right through it to the button below */
    z-index: 100;
    /* Keeps it layered appropriately */
    /* color: #2c3e50; */
    /* Fallback color, adjust to fit your palette */
}


.base-card {
    position: relative;
    width: fit-content;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Horizontal centering */
    align-items: center;
    /* Vertical centering */
    min-height: 100%;
    max-width: 100%;
    background: linear-gradient(0deg, var(--itics-bg-orange) 0%, var(--bg) 50%, var(--itics-bg-blue) 100%);
    /* THE FIX: Stops the background from entering the border area */
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-size: cover;
    /* THE GLASS BORDER */
    border: 10px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    /* FOR BANNER */
    overflow: hidden;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px 24px 24px 24px;
    max-width: 1000px;
    margin: 0 auto;
    /* ADD: Forces any over-enthusiastic children to stay inside the box! */
    overflow: hidden;
}

.card {
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    /* min-height: 220px; */
    /* GLASSMORPHISM CORE */
    /* background: rgba(255, 255, 255, 0.4); */
    backdrop-filter: blur(12px);
    /* This creates the frosted effect */
    -webkit-backdrop-filter: blur(12px);
    /* Required for Safari support */

    /* THE GLASS BORDER */
    border: 10px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;

    position: relative;
    /* Required so the image stays inside this card */
    overflow: hidden;
    /* The "Cookie Cutter" that hides the overlap */
}

/* Update your pastel colors to be translucent too */
/* .hero { background: rgba(255, 255, 255, 0.5); }
/* .thoughts { background: rgba(232, 209, 255, 0.5); } /* Purple with 50% opacity */
/* .biz { background: rgba(255, 244, 209, 0.5); }      /* Yellow with 50% opacity */
/* .price { background: rgba(255, 209, 220, 0.5); }    /* Pink with 50% opacity */
/* .contact { background: rgba(255, 229, 209, 0.5); }  /* Orange with 50% opacity */

/* Hover state: make it slightly more opaque to "wake it up" */
.card:hover {
    background: var(--card-hover);
    border: 10px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.card-body {
    position: relative;
    z-index: 2;
    /* Ensures text stays on top of the icon */
    /* color: white; */
}









/* Ensure text stays ABOVE the image */
.card-content {
    position: relative;
    z-index: 2;
}

.card-header-mine {
    display: flex;
    /* Puts items in a row */
    flex-direction: column;
    align-items: center;
    /* Perfectly centers them vertically relative to each other */
    gap: 5px;
    /* Adds a nice space between the icon and the text */
    z-index: 5;
}

.card-header-mine svg {
    /* Optional: Prevent the SVG from shrinking if the text is long */
    flex-shrink: 0; 
    z-index: 10;
    /* Optional: Fine-tune the vertical position if the font looks "bottom-heavy" */
    /* transform: translateY(1px); */
}

.flewx-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}
.contact-header-mine .icon {
    display: flex;
    align-items: center;
}

.card-header-text {
    margin: 2px 0;
    font-size: 1.3rem;
    font-weight: bold;
}

.card-img-phone {
    position: absolute;
    bottom: -10px;
    /* Pulls it slightly off the bottom edge */
    right: -10px;
    /* Pulls it slightly off the right edge */
    width: 175px;
    /* Resize as needed */
    height: auto;
    transform: rotate(-15deg);
    /* ROTATION & SCALE */
    opacity: 1;
    /* Soften the image so it doesn't distract from text */
    z-index: 1;
    /* transition: transform 4s var(--bounce); */
    /* Optional: subtle transition if you want the image to move on hover */
    /* content: var(--phone-img); */
    /* transition: opacity 0.6s ease-in-out; */
    transition: 
        transform 4s var(--bounce), 
        opacity 0.6s ease-in-out;
    will-change: transform, opacity;
}

/* This image stays in the normal flow */
.dark-img {
    opacity: var(--dark-img-opacity);
}

/* This image sits perfectly on top of the dark one */
.light-img {
    opacity: var(--light-img-opacity);
}

/* Interaction: Bring the image forward slightly on hover, but still behind text */
.card:hover .card-img-phone {
    bottom: -5px;
    transform: rotate(-5deg) scale(1.2);
}

.card-img-flyer {
    position: absolute;
    bottom: -10px;
    width: 175px;
    height: auto;
    opacity: 1;
    transition: transform 4s var(--bounce);
    pointer-events: none;
    z-index: 2;
}

.card-img-flyer_front {
    right: 50px;
    transform: translateX(0) rotate(-10deg) scale(1);
    z-index: 2;
}

.card-img-flyer_back {
    right: 0px;
    transform: translateX(0) rotate(5deg) scale(1);
    z-index: 1;
}

.card:hover .card-img-flyer_front {
    /* 1. translateX(-100px) handles the move from right:50 to right:150 */
    /* 2. rotate(-10deg) straightens it up slightly */
    /* 3. scale(1.09) handles the growth */
    transform: translateX(-100px) rotate(-20deg) scale(1.09);
}

.card:hover .card-img-flyer_back {
    /* 1. translateX(-100px) handles the move from right:50 to right:150 */
    /* 2. rotate(-10deg) straightens it up slightly */
    /* 3. scale(1.09) handles the growth */
    transform: translateX(-20px) rotate(0deg) scale(1.09);
}

.card-img-thinking {
    position: absolute;
    /* 1. Set a fixed anchor point */
    bottom: -5px;
    right: 0;
    width: 400px;
    height: auto;
    z-index: 1;

    /* 2. Initial State: Slightly tucked away using translate */
    /* This replaces bottom: -10px and right: -10px */
    transform: translate(10px, 10px) rotate(0deg) scale(1);

    /* 3. Transition ONLY the transform and opacity for maximum smoothness */
    transition: transform 4s var(--bounce);
    pointer-events: none;
    /* Prevents the image from blocking card clicks */
}

.card:hover .card-img-thinking {
    /* 4. Hover State: Moves slightly left and up, tilts, and grows */
    /* translate(-10px, 0px) moves it relative to its 0,0 anchor */
    /* scale(1.022) replaces the width: 460px (450 * 1.022 ≈ 460) */
    transform: translate(-20px, 0px) rotate(0deg) scale(1.08);
}

.card-img-services {
    position: absolute;
    /* Set a stable anchor point */
    bottom: 0;
    /* top: 0; */
    right: -120px;
    /* left: 120px; */
    width: 300px;
    height: auto;
    opacity: 1;
    z-index: 1;

    /* INITIAL STATE: Use translate to push it off-screen */
    /* This replaces bottom: -200px and right: -200px */
    transform: translate(10px, 10px) scale(1) rotate(0deg);

    /* Transition everything for smoothness */
    transition: transform 3s var(--bounce);
    /* transition: transform 2s ease-in-out; */
    pointer-events: none;
    /* Prevents the image from stealing clicks */
}

.card:hover .card-img-services {
    /* HOVER STATE: Pull it back in and scale it up */
    /* translate(100px, 100px) is "less far out" than 200px */
    /* scale(1.125) replaces width: 450px (400 * 1.125 = 450) */
    transform: translate(-10px, 10px) scale(1.125) rotate(0deg);
}

.text-center {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center the actual text lines */
    /* min-height: 300px; */
}

/* _____ PRICING CARD _____ */

.card.price {
    position: relative;
    overflow: hidden;
}

.magnify-wrapper {
    position: absolute;
    bottom: 50px;
    left: 80px;
    width: 100%;
    height: 120px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* z-index: 100; */
    transform: rotate(336deg);
}

/* Base text animation */
@keyframes baseSlide {
    from { transform: translateX(50px) scale(1); }
    to { transform: translateX(-150px) scale(1); }
}

/* Zoomed text animation */
@keyframes zoomSlide {
    from { transform: translate(calc(-50% + 100px), -50%) scale(1); }
    to { transform: translate(calc(-50% - 300px), -50%) scale(1); }
}

/* Base text animation */
@keyframes baseSlide_out {
    from { transform: translateX(-150px) scale(1); }
    to { transform: translateX(50px) scale(1); }
}

/* Zoomed text animation */
@keyframes zoomSlide_out {
    from { transform: translate(calc(-50% - 300px), -50%) scale(1); }
    to { transform: translate(calc(-50% + 100px), -50%) scale(1); }
}

.text-base {
    position: absolute;
    font-size: 2.5rem;
    font-weight: bold;
    white-space: nowrap;
    
    /* Default State */
    opacity: 0;
    /* transform: translateX(50px); /* Match the 'from' of your animation */
    transform: translateX(50px) scale(0.5);
    animation: baseSlide_out 2s var(--bounce) forwards;
    /* This handles the FADE OUT and SLIDE BACK when unhovering */
    /* transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; */
    /* transition: opacity 0.4s ease-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); */
    /* Control the speed of the shrinking/fading here */
    /* transition: transform 0.6s ease-in-out; */
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
    transition: opacity 0.5s ease-out, transform 2s ease-out;
}

.text-zoom {
    position: absolute;
    font-size: 5rem;
    font-weight: bold;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    
    /* Default State */
    opacity: 0;
    /* transform: translate(calc(-50% + 100px), -50%); */
    /* transform: translate(calc(-50% + 100px), -50%); */
    transform: translateX(-50px);
    animation: zoomSlide_out 2s var(--bounce) forwards;

    /* This handles the FADE OUT and SLIDE BACK when unhovering */
    /* transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; */
    /* Control the speed of the enlarging/fading here */
    /* transition: transform 0.6s ease-in-out; */
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
    transition: opacity 0.5s ease-out, transform 2s ease-out;
}

/* The actual PNG Image */
.lens-image {
    position: absolute;
    z-index: 20;
    width: 160px;
    height: auto;
    /* Move this to center the "hole" of your PNG over the center */
    transform: translate(-12px, 50px) rotate(-10deg);
}

/* The "Mask" that shows the zoomed text */
.magnifier-circle {
    position: absolute;
    width: 89px;
    /* Adjust to match the hole in your PNG */
    height: 89px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
    /* Optional: subtle glass tint */
    background: linear-gradient(332deg, var(--itics-bg-orange) 0%, var(--bg) 70%, var(--itics-bg-blue) 100%);
    backdrop-filter: blur(1px);
}

.magnifier-circle span {
    position: absolute;
    font-size: 5rem;
    /* 2x Scale */
    font-weight: bold;
    white-space: nowrap;
    /* color: #000; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}

/* _____ THE HOVER TRIGGER _____ */

.card.price:hover .magnifier-circle {
    background: var(--bg)
}

/* _____ THE HOVER TRIGGER _____ */

.card.price:hover .text-base {
    opacity: 1;
    /* Trigger animation on hover */
    animation: baseSlide 2s var(--bounce) forwards;
}

.card.price:hover .text-zoom {
    opacity: 1;
    /* Trigger animation on hover */
    animation: zoomSlide 2s var(--bounce) forwards;
}

/* This is the magic layer that brings text to the front */
.card-text-layer {
    /* Optional: Give the text its own little "island" of glass */
    position: relative;
    z-index: 5;
    /* background: rgba(255, 255, 255, 0.2); */
    background-color: var(--glass-bg);
    transition: background-color 1.0s ease;
    padding: 6px;
    border-radius: var(--radius-smaller);
    backdrop-filter: blur(4px);
    display: inline-block;
    /* Only takes up as much space as needed */
    pointer-events: none;
    /* Allows clicks to pass through to the card */
    width: fit-content;
    /* Optional: if you want it to match the longest line of text */
    gap: 10px;
}

.card h3 {
    margin: 10px 0;
    font-size: 1.3rem;
}

.card-bottom-text {
    font-size: 0.7rem; 
    font-weight: bold; 
    color: var(--text-gray);
    transition: color 1.0s ease;
}

.card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
    transition: color 1.0s ease;
    line-height: 1.4;
}

.icon {
    font-size: 2.2rem;
}
.icon-phone {
    transform: rotate(-90deg);
}

/* MAIN PAGE CARD BUTTONS */
.card_button {
    /* .contact { */
    /* background: var(--card-contact); */
    background: linear-gradient(315deg, var(--itics-bg-orange) 0%, var(--bg) 50%, var(--itics-bg-blue) 100%);
    /* THE FIX: Stops the background from entering the border area */
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 140px;
}

/* _____ FOOTER _____ */

.main-footer {
    width: 100%;
    margin-top: 60px;
    /* Space between the grid and footer */
    padding: 20px 0;
    border-top: 1px solid var(--itics-bg-blue);
}

.footer-container {
    max-width: 1000px;
    /* Matches your grid width */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* Pushes content to opposite ends */
    align-items: center;
    padding: 0 20px;
}

/* Legal Links Styling */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.footer-links li a {
    display: inline-block;
    text-decoration: none;
    color: var(--itics-bg-blue);
    font-size: 0.85rem;
    /* transition: color 0.2s ease; */
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-links li a:hover {
    color: var(--itics-bg-orange);
    transform: translateY(-3px);
}

/* Social Media Icons Styling */
.social-media {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

/* .social-item img {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s var(--bounce);
}

.social-item:hover img {
    opacity: 1;
    transform: scale(1.2);
} */

.social-icon {
    fill: var(--itics-bg-blue); /* Your original blue-ish color */
    transition: fill 0.3s ease, transform 0.3s ease;
}

.social-item a:hover .social-icon {
    fill: var(--itics-bg-orange); /* Vibrant Orange */
    transform: translateY(-3px); /* Optional: slight lift effect */
}

/* Mobile Responsiveness for Footer */
@media (max-width: 600px) {
    .footer-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
}

/* _____ MY FLOATING-LABELS _____ */

/* 1. Container */
.my-input-group {
    position: relative;
    margin-bottom: 25px;
    width: 100%;
    z-index: 2;
    color: var(--text);
}

/* 2. The Input Field */
.my-input {
    width: 100%;
    height: 60px;
    /* Tall enough for the floating label */
    padding: 20px 15px 5px 15px;
    /* Extra top padding for the label space */
    font-size: 18px;
    border: 2px solid #ddd;
    border-radius: 10px;
    /* var(--border-radius); */
    background-color: var(--input-bg);
    color: var(--text);
    /* outline: none; */
    outline: 2px solid transparent;
    /* transition: border-color 0.2s; */
    transition: outline 0.2s, outline-offset 0.2s;
    box-sizing: border-box;
    background-color: var(--bg);
}

/* 3. The Label (Initial State: Large and Centered) */
.my-label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--kuoc-gray);
    font-size: 18px;
    pointer-events: none;
    /* Allows clicks to go "through" to the input */
    transition: all 0.2s ease-out;
    background-color: transparent;
}

/* 4. The "Float" Logic 
   Triggers when: 
   - Input is focused 
   - OR input is NOT showing the placeholder (meaning it has text)
*/
.my-input:focus~.my-label,
.my-input:not(:placeholder-shown)~.my-label {
    top: 15px;
    font-size: 13px;
    /* font-weight: bold; */
    color: gray;
    /* var(--primary-blue); */
    transform: translateY(-50%);
}

/* 5. Visual feedback on focus */
.my-input:focus {
    border: 6px solid #80b5c585;
    outline-offset: 6px;
    /* border-color: #80b5c5; /* var(--primary-blue); */
}

/* This hides the actual placeholder text across all modern browsers */
.my-input::placeholder {
    color: transparent;
    transition: color 0.2s;
}

/* Optional: If you WANT the hint to appear only AFTER they click/focus */
.my-input:focus::placeholder {
    color: #ccc;
    /* Or your preferred subtle gray */
}

.radio-group {
    display: flex;
    flex-direction: row;
    /* Put them in a line */
    gap: 40px;
    /* Large horizontal gap so they don't look crowded */
    flex-wrap: wrap;
    /* Important: allows them to stack on small phone screens */
}

.radio-container {
    /* display: flex; */
    /* align-items: center; */
    justify-content: space-between;
    position: relative;
    padding-left: 35px;
    /* margin-bottom: 15px; */
    cursor: pointer;
    /* font-size: 18px; */
    user-select: none;
    /* Prevents text highlighting on double-tap */
    color: var(--text);

}

/* 2. Hide the Browser's Default Radio Button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* 3. Create the Custom Outer Circle */
.custom-radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border: 2px solid #ccc;
    border-radius: 50%;
    /* Keeps it a perfect circle */
    transition: all 0.2s ease-in-out;

}

/* 4. On Hover, darken the border */
.radio-container:hover input~.custom-radio {
    border-color: var(--primary-blue);
}

/* 5. When Checked, change background and border */
.radio-container input:checked~.custom-radio {
    background-color: #fff;
    border-color: var(--primary-blue);
}

/* 6. Create the inner "Dot" (hidden by default) */
.custom-radio:after {
    content: "";
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-blue);
}

/* 7. Show the dot when checked */
.radio-container input:checked~.custom-radio:after {
    display: block;
}

/* 8. Accessibility: Show a glow when focused using Tab key */
.radio-container input:focus~.custom-radio {
    box-shadow: 0 0 0 4px rgba(24, 188, 156, 0.25);
    /* border: 6px solid #80b5c585; */
}

.contact-wrapper-hidden {
    display: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.contact-wrapper-visible {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* _____ MY BUTTON ______ */

/* --- Action Button --- */
.my-btn {
    background-color: var(--itics-bg-blue);
    border: none;
    color: white;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
    cursor: pointer;
}

.my-btn:hover {
    background-color: var(--itics-bg-orange);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: white;
}

.my-row {
    display: flex;
    flex-direction: row;
    /* Horizontal Alignment */

    align-items: baseline;
    /* Aligns the "feet" of the text */
    /* Vertical Alignment (Center items top-to-bottom) */
    /* align-items: center;  */

    /* Spacing between items (Modern way, replaces side margins) */
    gap: 10px;

    /* Responsive: allow items to wrap to a new line on small screens */
    flex-wrap: wrap;
}

.my-row-center {
    justify-content: space-around;
    /* Options: flex-start, center, flex-end, space-around */
}

/* _____ MODAL _____ */

/* Modal Blur */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    overflow: hidden;

    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.modal-content {
    background: var(--bg);
    margin: 10vh auto;
    /* padding: 28px; */
    border-radius: var(--radius-big);
    width: 85%;
    max-width: 750px;
    max-height: 80vh;
    overflow: hidden;
    /* Ensures nothing leaks out of the rounded corners */
    overflow-y: auto;
    position: relative;
    border: 10px solid rgba(218, 218, 218, 0.205);
    scrollbar-width: none;
    /* Hidden in Firefox by default */
    transform: translateY(-50px); /* Start slightly higher */
    transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth dropdown easing */
    /* transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth dropdown easing */
}

.modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal.is-visible .modal-container {
    transform: translateY(0); /* Slide down to center */
}

.modal-content-card {
    background-color: var(--bg);
    /* border-top-left-radius: 28px;
    border-top-right-radius: 28px; */
    border-radius: var(--radius-small);
    border: var(--theme-border) solid rgba(218, 218, 218, 0.3);
    /* The Magic Move */
    margin-top: -60px;
    /* Pulls the white box UP by 30px */
    position: relative;
    /* Ensures it sits ON TOP of the header */
    z-index: 10;

    /* Padding for the text inside */
    padding: 40px;
}

/* 2. The Modal Wrapper */
.modal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    transform: translateY(-50px); /* Start slightly higher */
    transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth dropdown easing */
    /* transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth dropdown easing */
}

/* 3. The Floating Close Button */
.modal-close-btn {
    position: sticky;
    /* Changed from absolute */
    top: 15px;
    /* Distance from the top of the white box */
    left: 100%;
    /* Pushes it to the far right */
    margin-right: 15px;
    /* Distance from the right edge */
    margin-bottom: -45px;
    /* "Lie" to the layout so the header can slide under it */

    width: 45px;
    height: 45px;
    background-color: rgba(128, 128, 128, 0.534);
    /* var(--primary-blue); */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    /* Ensure it stays above everything */
    transition: transform 0.2s, background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    /* line-height: 0; */
    float: right;
    /* Helps with the right-side alignment in a sticky context */
}

.modal-close-btn:hover {
    background-color: var(--itics-bg-orange);
    transform: scale(1.1);
}

.modal-content:hover,
.modal-content.is-scrolling {
    scrollbar-width: thin;
    /* Shows in Firefox when active */
    scrollbar-color: var(--itics-bg-blue) transparent;
}

/* Target the specific scrollable area in your modal */
.modal-content::-webkit-scrollbar {
    width: 8px;
    /* Width of the vertical scrollbar */
    height: 8px;
    /* Height of the horizontal scrollbar */
}

/* The Track (the background of the scrollbar) */
.modal-content::-webkit-scrollbar-track {
    background-color: transparent;
}

/* The Thumb (the draggable part) */
.modal-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* Hidden */
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s ease;

}

/* 2. Show on HOVER */
.modal-content:hover::-webkit-scrollbar-thumb {
    background-color: var(--itics-bg-blue);
    /* Your brand blue */
}

/* 3. Show during SCROLL (Active via JS) */
.modal-content.is-scrolling::-webkit-scrollbar-thumb {
    background-color: var(--itics-bg-blue);
}

.modal-header-text {
    color: var(--text-dm);
    padding-top: 20px;
    padding-left: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    /* Pushes content to the right */
    width: 100%;
}

/* __________ MODAL CONTENT __________ */

/* .modal-container {
    padding: 40px;
} */

/* _____ CONTACT _____ */
.modal-header {
    /* 2. Positioning */
    background-size: cover;
    /* Scales image to fill the area */
    background-position: center;
    /* Keeps the middle of the image visible */
    background-repeat: no-repeat;

    /* 3. Spacing & Text */
    /* padding: 80px 20px;          /* Increases height to show more image */
    text-align: left;
    height: 240px;
}

/* The container that holds the template data */
#modal-internal-content {
    /* opacity: 1; */
    transform: scale(1);
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

/* When this class is added, the content disappears */
#modal-internal-content.is-swapping {
    opacity: 0;
    transform: scale(0.5); /* Subtle "push back" effect */
}

/* _____ ABOUT _____ */

.about-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('static/header-about.jpg');
}

/* _____ CONTACT _____ */
.contact-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('static/header-contact.jpg');
}

/* _____ SERVICES _____ */
.services-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('static/header-services.jpg');
}

/* _____ BLOG _____ */
.blog-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('static/header-blog.jpg');
}

/* _____ PRICING _____ */
.pricing-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('static/header-pricing.jpg');
}

/* _____ T&Cs _____ */
.terms-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('static/header-terms.jpg');
}

.contact-card {
    /* background: white; */
    border-radius: 10px;
    padding: 16px 38px 16px 28px;
    margin-bottom: 10px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); */
    border: 2px solid #ddd;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
}

.button-contact {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* .contact-card h2 {
    color: var(--primary-blue);
    margin-top: 0;

    border-bottom: 2px solid var(--light-bg);
    padding-bottom: 10px;
} */

/* _____ SERVICE AREA _____ */


.service-area-card {
    background: var(--card-bg);
    border-radius: 12px;
    /* border: 1px solid #e2e8f0; */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* max-width: 400px; */
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    margin-bottom: 20px;
}

/* 1. Header Styling */
.service-area-card-header {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.service-area-card-header h3 {
    margin: 0;
    font-family: sans-serif;
    color: var(--white);
    font-size: 1.25rem;
}

/* 2. Arrow Button Physics */
.service-area-expand-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--itics-logo-gray);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. The Expandable "Drawer" */
.service-area-card-content {
    display: grid;
    grid-template-rows: 0fr; /* Starts completely shut */
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-area-content-inner {
    overflow: hidden; /* Necessary for the grid trick to work */
}

.service-area-content-inner p {
    padding: 0 20px 20px 20px; /* Pads text safely away from edges */
    margin: 0;
    color: #718096;
    line-height: 1.6;
    font-family: sans-serif;
}

/* 4. The Active/Expanded States */
.service-area-card.is-expanded .service-area-card-content {
    grid-template-rows: 1fr; /* Instantly slides open to match the exact text height */
}

.service-area-card.is-expanded .service-area-expand-btn {
    transform: rotate(180deg); /* Flips the arrow upside down! */
}

.area-map {
    position: relative;
    /* height: auto;
    width: 100%; */
    border: 1px var(--itics-logo-gray) solid; 
    border-radius: 10px;
    margin: 10px;
    overflow: hidden;
}

.area-list {
    height: auto;
    /* color: var(--white); */
}

.leaflet-container {
    border-radius: 10px;
}

.map-range-badge {
    /* position: absolute; */
    /* display: flex;
    justify-content: end; */
    position: absolute;
    top: 4px;         /* Distance from the top edge */
    right: 4px;       /* Distance from the right edge */
    z-index: 1000;     /* Leaflet tiles use z-index up to 400+, 1000 keeps it on top */
    
    /* Styling for the badge */
    /* background: rgba(10, 45, 78, 0.85); /* Dark blue with transparency */
    color: rgb(0, 0, 0);
    /* padding: 6px 12px; */
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: bold;
    backdrop-filter: blur(4px); /* Modern glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    /* width: fit-content; */
    /* width: 120px;
    height: 20px; */
    text-align: right;
    
}

/* .map-range-badge span {
    display: flex; 
    justify-content: end;
    align-items:flex-start;
} */
/* 1. Reset for your lists (since you're not using Bootstrap's CSS anymore) */
.list-unstyled {
    list-style: none;
    padding-left: 0;
    margin: 10px 0 0 0;
}

.list-unstyled li {
    margin-bottom: 5px;
    font-size: 0.95rem;
}

/* 2. The Grid Container */
.area-grid {
    display: flex;
    flex-direction: column; /* Default: Stacked vertically for mobile */
    gap: 10px;              /* Spacing between columns/rows */
    width: 100%;
    margin: 20px;
}

.map-footer {
    display: flex;
    justify-content: center;
}
/* _____ */

.my-textarea {
    /* Prevents horizontal stretching, allows vertical */
    resize: vertical;

    /* Good practice: set a min and max height so it doesn't 
       get too small or push the modal off the screen */
    min-height: 120px;
    max-height: 400px;

    /* Ensure it fills the width of your modal-content-card */
    width: 100%;
    box-sizing: border-box;
}

/* _____ PRICE _____ */

.container {
    max-width: 1000px;
    margin: auto;
    padding: 40px 20px;
}

/* THE SVG BACKGROUND */
.bg-img {
    position: absolute;
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
    /* filter: opacity(0.5); */
}

.bg-img-position {
    top: 50%;
    left: 50%;
    width: 670px;
}

.bg-img-position1 {
    top: 25%;
    left: 50%;
    width: 670px;
}

.bg-img-position2 {
    top: 7%;
    left: 50%;
    /* width: 100%; /* 320px; */
}

.opacity {
    opacity: 0.4;
}

h1 {
    margin: 0;
    font-size: 2.5rem;
}

.subtitle {
    font-style: italic;
    opacity: 0.9;
}

.blurb {
    background-color: var(--bg);
    border-radius: var(--radius-smaller);
    padding: 20px;
    margin: 30px 0;
    border-top: var(--theme-border) solid #dadada34;
    border-bottom: var(--theme-border) solid #dadada34;
    border-right: var(--theme-border) solid #dadada34;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.blurb-green {
    border-left: 5px solid var(--accent-teal);
}

.blurb-red {
    border-left: 5px solid var(--accent-red);
}

.blurb-yellow {
    border-left: 5px solid var(--accent-yellow);
}

.mb-20 {
    margin-bottom: 20px;
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* gap: 30px; */
}

.grid-gap-20 {
    gap: 20px;
}

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

.price-card {
    position: relative;
    /* background: var(--bg); */
    overflow: hidden;
    border-radius: 18px;
    padding: 30px;
    /* margin-bottom: 20px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    border: var(--theme-border) solid rgba(255, 255, 255, 0.2);
    background-color: var(--card-bg);
}

.price-card-header {
    display: flex;          /* 1. Enable Flexbox */
    align-items: center;    /* 2. Vertically center the icon and text */
    /* justify-content: center; /* 3. Horizontally center the whole group (optional) */
    gap: 10px;              /* 4. Add a nice space between the icon and text */
    height: 64px;
}

.price-card-border {
    padding: 10px;
    border: 6px solid transparent;
    background-image: linear-gradient(var(--bg), var(--bg)),
        linear-gradient(135deg, var(--itics-bg-blue), var(--itics-bg-orange));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.price-card h2 {
    display: flex;
    text-align: center;
    color: var(--white);
}

.price-item {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    /* align-items: center; */
    padding: 12px 0;
    /* border-bottom: 1px solid #eee; */
    border-bottom: 1px solid var(--text-gray);
    align-items: flex-start;
}

.price-item:last-child {
    border-bottom: none;
}

/* .service-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} */

.service-name {
    font-weight: 600;
    font-size: 1.05rem;
}

.service-price {
    color: var(--text-price);
    font-weight: bold;
    font-size: 1.1rem;
    margin-left: auto; /* This takes up all available space to the left */
    text-align: right;
    white-space: nowrap;
}

.service-desc {
    font-size: 0.9rem;
    color: var(--text-gray);
    display: block;
    margin-top: 4px;
    margin-bottom: 4px;
}

.hourly-box {
    background: var(--primary-blue);
    color: white;
    text-align: center;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
/* 🛠️ ADD THIS: Keeps the absolute ribbon trapped inside! */
    position: relative; 
    overflow: hidden;
}

.hourly-box h3 {
    margin: 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. The Red Triangle Corner */
.ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    /* This creates a 45-degree angled triangle in the top left */
    background: linear-gradient(135deg, #ff3b30 50%, transparent 50%);
    z-index: 1;
}

/* 3. The Text inside the Triangle */
.ribbon span {
    position: absolute;
    top: 20px;
    left: -8px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    /* Rotates the text to perfectly parallel the diagonal edge */
    transform: rotate(-45deg); 
    display: block;
    width: 100%;
    text-align: center;
}

.hourly-rate-default {
    font-size: 1rem;
    font-weight: normal;
}

/* 4. The Strikethrough Effect */
.hourly-rate-old-price {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.6); /* Fades the old price slightly */
    font-size: 2rem; /* Makes it slightly smaller than the new price */
    font-weight: bold;
    margin-right: 10px;
}

.hourly-rate-price {
    font-size: 3rem;
    font-weight: bold;
    margin: 10px 0;
}




footer {
    text-align: center;
    padding: 60px 20px;
    color: #777;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .price-item {
        flex-direction: column;
        align-items: flex-end;
    }

    .service-price {
        margin-top: 5px;
    }
}

/* _____ TERM & CONDITIONS _____ */

/* header {
    text-align: center;
    padding: 50px 20px;
    background-color: var(--primary-blue);
    color: white;
} */

.intro-text {
    font-style: italic;
    opacity: 0.9;
    margin-top: 10px;
}

/* .agreement-box {
    background: var(--bg);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-top: -30px;
} */

.section {
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.section:last-child {
    border-bottom: none;
}

.section-title svg {
    /* Prevents the SVG from shrinking in a flex container */
    flex-shrink: 0; 
    
    /* Forces the width to stay exactly 32px */
    min-width: 32px; 
    
    /* Keeps it from becoming an oval */
    aspect-ratio: 1 / 1; 
}

h2 {
    /* color: var(--primary-blue); */
    color: var(--text-header);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

h2 span {
    background: var(--accent-teal);
    color: white;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    margin-right: 15px;
}

ul {
    padding-left: 20px;
    margin-top: 10px;
}

li {
    margin-bottom: 10px;
}

.highlight-box {
    background-color: #fff9db;
    border-left: 5px solid #fcc419;
    padding: 20px;
    margin: 20px 0;
    font-size: 1rem;
}

.print-btn {
    display: block;
    width: fit-content;
    margin: 40px auto;
    background-color: var(--accent-teal);
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

footer {
    text-align: center;
    padding: 40px;
    color: #777;
    font-size: 0.9rem;
}

@media print {

    .print-btn,
    header {
        display: none;
    }

    .agreement-box {
        box-shadow: none;
        margin-top: 0;
        border: 1px solid #ccc;
    }

    body {
        background: white;
        font-size: 12pt;
    }
}


/* _____ BLOG _____ */

/* Header Styling */
/* .blog-header {
    text-align: center;
    margin-bottom: 50px;
} */

.blog-header h1 {
    /* color: var(--primary-blue); */
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* Individual Post Styling */
.post-card {
    background: var(--bg);
    border: var(--theme-border) solid rgba(255, 255, 255, 0.2);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
}

.post-date {
    color: var(--text-date);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.post-title {
    color: var(--text-header);
    font-size: 2rem;
    margin: 10px 0 25px 0;
    line-height: 1.2;
}

.post-content h3 {
    color: var(--text-header);
    margin-top: 30px;
}

.post-content p {
    margin-bottom: 20px;
}

/* .warning-box {
    background-color: var(--bg);
    border-radius: 10px;
    border-left: 5px solid #ff6b6b;
    border-top: var(--theme-border)  solid gray;
    border-bottom: var(--theme-border) solid gray;
    border-right: var(--theme-border) solid gray;
    box-shadow: white;
    padding: 20px;
    margin: 30px 0;
    font-style: italic;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
} */

.share-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 1rem;
    color: #777;
}


/* _____ LOGO _____ */
/* Stacks items vertically on mobile */
.overlapping-container {
    position: relative;
    width: auto;
    height: auto;
    /* background: #ffffff; */
    /* border-radius: 28px; */
    /* padding: 20px; */
    display: flex;
    flex-direction: column; /* MOBILE DEFAULT: Stacked */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* gap: 20px; /* Space between stacked elements */
}

.image-wrapper {
    display: flex;
    /* width: 100%;
    max-width: 183.41px;
    height: auto; */
    justify-content: center;
    height: 300px;
}

.image-wrapper img {
    /* max-width: 100%; */
    /* height: auto; */
    height: 280px;
    object-fit: contain;
    filter: brightness(var(--logo-text-shield-brightness));
    transition: filter 0.5s ease;
}

/* .text-wrapper3 {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
}

.text-wrapper3 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(var(--logo-brightness));
    transition: filter 0.3s ease;
} */

    /* Update the wrapper to have a specific height so % has a baseline */
    .text-wrapper {
        /* position: relative;  */
        width: 100%;
        height: auto;
        /* object-fit: contain; */
        /* display: inline-flex;
        flex-direction: column; */
        /* display: flex; */
        /* flex-direction: column; */
        /* background: rgb(0, 255, 76); */
        /* justify-content: center; */
    }

    /* Styling the small boxes */
    .small-box {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        object-fit: contain;
    }

    .box-top {
        height: 80%;
        /* max-width: 500px; */
        /* background: rgb(255, 0, 212); */
    }
    .box-top img {
        max-height: 100px;
        max-width: 100%;
        /* object-fit: contain; */
        /* object-position: top top; */
        filter: brightness(var(--logo-text-a-brightness));
        transition: filter 0.5s ease;
    }
    .box-bottom {
        height: 50px;
        
    }
    .box-bottom img {
        height: auto;
        max-width: 50%;

        object-fit: contain;
        object-position: center center;
        filter: brightness(var(--logo-text-b-brightness));
        transition: filter 0.5s ease;
    }


/* Desktop Grid Logic */
@media (min-width: 768px) {
    /* _____ WIDTH: 768px >>> _____ */
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 220px;
    }

    .tall {
        grid-row: span 2;
    }

    .wide {
        grid-column: span 2;
    }

    /* .card:hover {
        transform: translateY(-5px) scale(1.01);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.07);
    } */

    /* _____ LOGO _____  */
    /* Switch back to a horizontal row */
    .overlapping-container {
        /* position: relative; */
        display: flex;
        flex-direction: row; 
        align-items: center;
        overflow: hidden;
        width: auto;
        height: auto;
        gap: 10px;
    }

    .image-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    }

    .image-wrapper img {
        /* width: 183.42px;
        max-width: 100%; */
        max-height: 175px;
        object-fit: contain;
        filter: brightness(var(--logo));
        transition: filter 0.5s ease;
    }

    /* .text-wrapper3 {
        width: 500px;
        height: 200px;
        object-fit: contain;
        display: flex;
    } */

    /* .text-wrapper3 img {
        width: auto; */ /* Let the contain handle size */
        /* max-width: 100%;
        height: 200px;
        object-fit: contain;
        object-position: center center;
        filter: brightness(var(--logo-brightness));
        transition: filter 0.3s ease;
    } */

    /* Update the wrapper to have a specific height so % has a baseline */
    .text-wrapper {
        /* position: relative;  */
        width: 500px;
        height: 200px;
        object-fit: contain;
        /* display: inline-flex;
        flex-direction: column; */
        display: flex;
        flex-direction: column;
        /* background: red; */
    }

    /* Styling the small boxes */
    .small-box {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        /* object-fit: contain; */
    }

    .box-top {
        height: 80%;
        /* max-width: 500px; */
        /* background: yellow; */
    }
    .box-top img {
        max-height: 100px;
        max-width: 100%;
        /* object-fit: contain; */
        /* object-position: top top; */
        filter: brightness(var(--logo-text-a-brightness));
        transition: filter 0.5s ease;
    }
    .box-bottom {
        height: 20%;
        
    }
    .box-bottom img {
        height: auto;
        max-width: 60%;

        object-fit: contain;
        object-position: center center;
        filter: brightness(var(--logo-text-b-brightness));
        transition: filter 0.5s ease;
    }

    /* _____ MAP AREA _____ */
    .area-grid {
        flex-direction: row;        /* Side-by-side */
        justify-content: space-between;
    }

    .area-col {
        flex: 1; /* Each column takes up exactly 1/3 of the width */
    }
}

/* Responsive */
@media (max-width: 600px) {
    .post-card {
        padding: 25px;
    }

    .post-title {
        font-size: 1.6rem;
    }
}

/* @media (min-width: 500px) {

} */