:root {
     --primary-blue: #1d1554;
     --silver: #fff;
     --cyan: #9FD8DE;
     --off-white: #FFFFF0;
     --black: #000000;
 }

 * {
     margin: 0;

     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     background-color: var(--black);
     color: var(--off-white);
     line-height: 1.6;
     overflow-x: hidden;
 }

 .serif {
     font-family: 'Crimson Pro', serif;
 }

 /* Navigation */
 nav {
     position: absolute;
     top: 0;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30px 60px;
     z-index: 1100;
 }

 .logo-area {
     display: flex;
     align-items: center;
     gap: 12px;
     text-transform: uppercase;
     font-weight: 700;
     letter-spacing: 2px;
     font-size: 14px;
     z-index: 1102;
 }

 .nav-links {
     display: flex;
     gap: 49px;
     align-items: center;
 }

 .nav-item {
     position: relative;
 }

 .nav-item a {
     color: #fff;
 }

 @media (max-width: 768px) {
     .nav-item a {
         color: #1d1554;
     }
 }

 .nav-links a {
     color: #FFFFF0;
     text-decoration: none;
     text-transform: uppercase;
     font-size: 15px;
     font-weight: 800;
     letter-spacing: 1px;
     transition: color 0.3s;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 /* Desktop */
 nav a {
     color: #fff;
 }

 /* Mobile */
 @media (max-width: 768px) {
     nav a {
         color: #1d1554;
     }
 }

 @media (max-width: 768px) {
     .nav-item a {
         color: #1d1554;
     }
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background-color: var(--off-white);
     min-width: 200px;
     padding: 15px 0;
     border-radius: 4px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all 0.3s ease;
     list-style: none;
     margin-top: 10px;
 }

 .nav-item:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown-menu li a {
     color: var(--primary-blue) !important;
     padding: 10px 25px;
     font-size: 10px;
     display: block;
     white-space: nowrap;
 }

 .menu-toggle {
     display: none;
     flex-direction: column;
     gap: 6px;
     cursor: pointer;
     z-index: 1102;
     padding: 10px;
 }

 .menu-toggle span {
     display: block;
     width: 25px;
     height: 2px;
     background-color: #1d1554;
     transition: all 0.3s ease;
 }

 /* Base Nav State (Desktop) */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 25px 5%;
     /* Initial large padding */
     transition: all 0.4s ease-in-out;
     z-index: 1000;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 /* Nav Item Base Color */
 .nav-item a {
     /* color: var(--primary-blue);  */
     text-decoration: none;
     transition: color 0.3s ease;
 }

 /* SCROLLED STATE */
 nav.scrolled {
     padding: 1px 2%;
     /* Reduced padding on scroll */
     background: #ffffff;
     /* Solid white background */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }

 nav.scrolled .nav-item a {
     color: #1d1554;
     /* Blue-Navy color on scroll */
 }

 /* Ensure the mobile menu burger also changes color on scroll if needed */
 nav.scrolled #menu-toggle span {
     background: #1d1554;
 }

 @media (max-width: 1024px) {

     /* 1. Ensure the main nav links container allows vertical growth */
     .nav-links {
         display: flex;
         flex-direction: column;
         overflow-y: auto;
         /* Allows scrolling if menu is long */
     }

     /* 2. Hide dropdowns by default on mobile */
     .nav-item.has-dropdown .dropdown-menu {
         display: none;
         position: static;
         /* This is the key: it stays in the document flow */
         width: 100%;
         box-shadow: none;
         /* Remove desktop shadows */
         padding-left: 20px;
         /* Indent sub-items for visual hierarchy */
     }

     /* 3. Show dropdown when the parent has the 'active' class (from your JS) */
     .nav-item.has-dropdown.active>.dropdown-menu {
         display: block;
     }

     /* 4. Optional: Rotate the arrow icon when active */
     .nav-item.has-dropdown.active svg {
         transform: rotate(180deg);
         transition: transform 0.3s ease;
     }
 }

 @media (max-width: 1024px) {

     /* 1. Show the Hamburger Menu */
     .menu-toggle {
         display: flex;
     }

     /* 2. Transform Nav Links into a Mobile Sidebar/Overlay */
     .nav-links {
         position: fixed;
         top: 0;
         right: 0;
         /* Hidden off-canvas via transform (not negative offset) so it
            doesn't extend the page width and create a right-side gap. */
         transform: translateX(100%);
         width: 80%;
         /* Adjust width as needed */
         height: 100vh;
         background-color: #fff;
         /* White background for mobile menu */
         padding: 100px 40px;
         flex-direction: column;
         align-items: flex-start;
         gap: 30px;
         transition: transform 0.4s ease-in-out;
         box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
         z-index: 1101;
     }

     /* 3. Class to be toggled via JavaScript */
     .nav-links.active {
         transform: translateX(0);
     }

     /* 4. Adjust Link Colors for Mobile Visibility */
     .nav-links a {
         color: #1d1554 !important;
         /* Ensure visibility on white bg */
         font-size: 18px;
         width: 100%;
     }

     /* 5. Mobile Dropdown Adjustments */
     .nav-item {
         width: 100%;
     }

     .dropdown-menu {
         position: static;
         /* Put back in normal flow */
         opacity: 1;
         visibility: visible;
         display: none;
         /* Controlled by your JS 'active' class */
         transform: none;
         box-shadow: none;
         background: transparent;
         padding-left: 20px;
         margin-top: 0;
     }

     /* Show dropdown when parent is clicked/active */
     .nav-item.has-dropdown.active .dropdown-menu {
         display: block;
     }

     .dropdown-menu li a {
         padding: 10px 0;
         font-size: 14px;
     }

     /* 6. Fix Logo Z-Index so it stays above the menu if needed */
     .logo-area {
         z-index: 1102;
     }
 }

 /* Hero Section Refactor */
 .hero {
     min-height: 90vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     padding: 0 60px;
 }

 #hero-video {
     position: absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     z-index: -1;
     transform: translate(-50%, -50%);
     object-fit: cover;
     filter: brightness(0.8);
 }

 .hero-content {
     max-width: 800px;
     text-align: left;
     z-index: 2;
     margin-top: 120px;
 }

 .hero-title {
     font-size: clamp(3rem, 7vw, 4.4rem);
     margin: 10px 0;
     font-weight: 900;
     line-height: 1.1;
     color: var(--silver);
 }

 .hero-subtitle {
     text-transform: uppercase;
     letter-spacing: 4px;
     font-size: 13px;
     color: var(--silver);
     font-weight: 700;
     display: block;
     margin-bottom: 10px;
 }

 .hero-description {
     font-size: 16px;
     color: var(--silver);
     opacity: 0.9;
     margin-top: 20px;
     max-width: 750px;
 }

 /* Logo Marquee */
 .marquee-container {
     position: absolute;
     bottom: 23px;
     left: 0;
     width: 100%;
     background: rgba(255, 255, 255, 0.075);
     backdrop-filter: blur(1px);
     padding: 20px 0;
     overflow: hidden;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .marquee-content {
     display: flex;
     width: calc(450px * 22);
     animation: scroll 30s linear infinite;
 }

 .marquee-content span {
     width: 250px;
     text-align: center;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.6);
 }

 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(calc(-250px * 7));
     }
 }

 /* --- Mobile & Tablet Adjustments --- */

 @media (max-width: 1024px) {
     .hero {
         padding: 0 20px;
         /* Reduce side padding */
         justify-content: center;
         /* Center content on tablets */
         min-height: 50vh;
     }
 }

 @media (max-width: 768px) {
     .hero {
         display: flex;
         flex-direction: column;
         justify-content: center;
         /* Centered content with generous top/bottom padding so it never
            collides with the fixed header or the bottom marquee. */
         padding: 120px 24px 120px;
         min-height: 100vh;
     }

     .hero-content {
         /* ... existing properties ... */
         margin-top: 0;
         position: relative;
         z-index: 5;
         /* Ensures text stays above the dark overlay */
     }

     .hero-description {
         margin: 15px auto 0;
         font-size: 15px;
         text-align: justify;
     }

     .marquee-container {
         padding: 15px 0;
         bottom: 10px;
         /* Bring marquee closer to bottom */
     }

     .marquee-content span {
         width: 180px;
         /* Narrower items for smaller screens */
         font-size: 12px;
     }

     /* Adjust animation for the new width to prevent jumping */
     @keyframes scroll {
         0% {
             transform: translateX(0);
         }

         100% {
             transform: translateX(calc(-180px * 7));
         }
     }
 }

 @media (max-width: 480px) {
     .hero-title {
         font-size: 2.5rem;
         /* Fallback for very small screens */
     }

     .hero-subtitle {
         letter-spacing: 2px;
         font-size: 11px;
     }
 }

 /* --- Video Responsiveness --- */

 @media (max-width: 1024px) {
     #hero-video {
         /* Ensure video doesn't get too thin on tablets */
         width: auto;
         height: 100%;
     }
 }

 @media (max-width: 768px) {
     #hero-video {
         /* On mobile, we prioritize height to ensure no white gaps appear 
           at the top or bottom of the hero section */
         min-height: 100%;
         width: auto;
         /* Slight increase in brightness for mobile screens if needed, 
           or keep your 0.8 filter */
         filter: brightness(0.9);
     }

     /* Adding a dark overlay to ensure text readability on mobile */
     .hero::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(to bottom,
                 rgba(0, 0, 0, 0.4) 0%,
                 rgba(0, 0, 0, 0.2) 50%,
                 rgba(0, 0, 0, 0.6) 100%);
         z-index: 1;
     }
 }

 /* Fix for very tall/narrow phones */
 @media (max-aspect-ratio: 9/16) {
     #hero-video {
         width: auto;
         height: 100%;
     }
 }


 /* Ribbon */
 .ribbon {
     position: absolute;
     top: 0;
     right: 10%;
     width: 45px;
     height: 155px;
     background-color: var(--primary-blue);
     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 85%, 0% 100%);
     z-index: -1;
 }

 /* Responsive */
 @media (max-width: 1024px) {
     nav {
         padding: 20px 30px;
     }

     .hero {
         padding: 0 30px;
     }

     .hero-title {
         font-size: 2.9rem;
         text-align: left;
     }
 }

 @media (max-width: 768px) {
     .menu-toggle {
         display: flex;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: 0;
         width: 100%;
         height: 100vh;
         background-color: #fff;
         flex-direction: column;
         color: var(--primary-blue);
         justify-content: center;
         transform: translateX(100%);
         transition: transform 0.5s ease;
         z-index: 1101;
     }

     .nav-links.open {
         transform: translateX(0);
     }

     .hero-content {
         text-align: center;
         margin: 0 auto;
     }

     .marquee-container {
         bottom: 0px;
     }

     /* .consultation-bar { flex-direction: column; gap: 10px; text-align: center; padding: 15px; } */
 }

 .ivory-showcase-section {
     --ivory-bg: #FFFFF0;
     --ivory-text: #1a1a1a;
     --ivory-accent: #c5a059;
     --ivory-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     --ivory-serif: 'Playfair Display', serif;

     position: relative;
     width: 100%;
     height: auto;
     padding: 60px 2rem;
     background-color: var(--ivory-bg);
     color: var(--ivory-text);
     font-family: var(--ivory-font);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     margin: 0;
 }

 .ivory-showcase-section .grain-texture {
     position: absolute;
     inset: 0;
     opacity: 0.04;
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
 }

 .ivory-showcase-section .content-viewport {
     max-width: 1000px;
     width: 100%;
     height: 280px;
     position: relative;
 }

 .ivory-showcase-section .quote-slide {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
 }

 .ivory-showcase-section .quote-slide.is-active {
     opacity: 1;
     visibility: visible;
     transform: translateY(-50%);
 }

 .ivory-showcase-section .quote-heading {
     font-size: 3.1rem;
     line-height: 1.2;
     font-weight: 700;
     margin-bottom: 3rem;
     letter-spacing: -0.01em;
 }

 .ivory-showcase-section .quote-heading em {
     font-family: var(--ivory-serif);
     font-style: italic;
     color: var(--ivory-accent);
 }

 .ivory-showcase-section .meta-box {
     display: flex;
     align-items: center;
     gap: 2rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(26, 26, 26, 0.1);
     width: fit-content;
 }

 .ivory-showcase-section .timer-rail {
     width: 80px;
     height: 1px;
     background: rgba(26, 26, 26, 0.08);
     position: relative;
 }

 .ivory-showcase-section .timer-fill {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 0%;
     background: var(--ivory-accent);
 }

 .ivory-showcase-section .attribution {
     display: flex;
     flex-direction: column;
 }

 .ivory-showcase-section .attr-label {
     font-size: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 0.25em;
     color: rgba(26, 26, 26, 0.4);
     margin-bottom: 0.2rem;
 }

 .ivory-showcase-section .attr-name {
     font-size: 0.9rem;
     font-weight: 600;
     letter-spacing: 0.05em;
 }

 /* --- Ivory Showcase Responsiveness --- */

 @media (max-width: 1024px) {
     .ivory-showcase-section .quote-heading {
         font-size: 2.5rem;
         /* Slightly smaller for tablets */
     }
 }

 @media (max-width: 768px) {
     .ivory-showcase-section {
         height: auto;
         /* Remove fixed height for mobile */
         min-height: 40vh;
         padding: 1rem 1.5rem;
         margin-bottom: 50px;
     }

     .ivory-showcase-section .content-viewport {
         height: auto;
         /* Allow the container to grow with the text */
         min-height: 150px;
         display: flex;
         align-items: center;
     }

     .ivory-showcase-section .quote-slide {
         position: relative;
         /* Switch to relative so they stack properly in the flow */
         top: 0;
         transform: translateY(20px);
         display: none;
         /* Hide by default */
     }

     .ivory-showcase-section .quote-slide.is-active {
         display: block;
         /* Show only active slide */
         transform: translateY(0);
         /* Reset centering transform */
     }

     .ivory-showcase-section .quote-heading {
         font-size: 2.2rem;
         /* Scale down the title significantly */
         margin-bottom: 2rem;
         text-align: center;
     }

     .ivory-showcase-section .meta-box {
         margin: 0 auto;
         /* Center the attribution box */
         gap: 1.5rem;
     }
 }

 @media (max-width: 480px) {
     .ivory-showcase-section .quote-heading {
         font-size: 2.5rem;
         line-height: 1.3;
     }

     .ivory-showcase-section .timer-rail {
         width: 50px;
         /* Shorten the line on small phones */
     }
 }

 /* Base Reset */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --bg-color: #FFFFF0;
     --primary-blue: #1B1553;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--bg-color);
     color: var(--primary-blue);
     -webkit-font-smoothing: antialiased;
 }

 /* Main Container */
 .hero-layout {
     position: relative;
     width: 100%;
     min-height: 70vh;
     display: flex;
     align-items: center;
     padding: 60px 0;
 }

 /* Background Layer with Vertical Blending */
 .background-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     overflow: hidden;
 }

 .bg-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/bg.avif');
     background-size: cover;
     background-position: center;
     filter: grayscale(30%) blur(1px);
     opacity: 0.18;
     /* Create the top and bottom blend */
     -webkit-mask-image: linear-gradient(to bottom,
             transparent 0%,
             black 20%,
             black 80%,
             transparent 100%);
     mask-image: linear-gradient(to bottom,
             transparent 0%,
             black 20%,
             black 80%,
             transparent 100%);
 }

 /* The Fog Overlay (Radial focus for the text area) */
 .fog-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 25% 50%, transparent 0%, var(--bg-color) 85%);
     z-index: 2;
 }

 /* Content Container */
 .content-wrapper {
     position: relative;
     z-index: 10;
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 80px;
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     align-items: center;
     gap: 60px;
 }

 .text-content {
     max-width: 600px;
     display: flex;
     flex-direction: column;
     gap: 28px;
 }

 /* Typography */
 .eyebrow-text {
     font-size: 13px;
     color: #71717a;
     text-transform: uppercase;
     letter-spacing: 4px;
     font-weight: 600;
     padding: 0px 0px 0px 0px;
 }

 .main-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(40px, 5.5vw, 78px);
     font-weight: 900;
     line-height: 1.1;
     color: var(--primary-blue);
 }

 .body-text {
     font-size: 17px;
     color: #3f3f46;
     line-height: 1.7;
     max-width: 500px;
 }

 .body-text b {
     color: var(--primary-blue);
     font-weight: 700;
 }

 /* Visual Element: Floating Slider */
 .image-slider-frame {
     position: relative;
     width: 100%;
     aspect-ratio: 4/5;
     max-height: 65vh;
     border-radius: 8px;
     overflow: hidden;
     /* box-shadow: 0 30px 80px rgba(27, 21, 83, 0.12);
            background: white; */
     padding: 10px;
     /* Polaroid feel */
 }

 .slider-inner {
     width: 100%;
     height: 100%;
     position: relative;
     border-radius: 4px;
     overflow: hidden;
 }

 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 2s ease;
     transform: scale(1.1);
     object-fit: cover;
 }

 .slide.active {
     opacity: 1;
     transform: scale(1);
 }

 .image-slider-frame .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out;
     /* Smooth fade effect */
     object-fit: cover;
 }

 .image-slider-frame .slide.active {
     opacity: 1;
 }

 /* Branding Ornament */
 .brand-footer {
     margin-top: 20px;
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .accent-dot {
     width: 8px;
     height: 8px;
     background: var(--primary-blue);
     border-radius: 50%;
 }

 .brand-name {
     font-size: 11px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #a1a1aa;
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     /* Let the section grow with its stacked content instead of being
        locked to one viewport height (which made the image overflow into
        the next section). */
     .hero-layout {
         height: auto;
         min-height: 100vh;
         align-items: flex-start;
     }

     .content-wrapper {
         grid-template-columns: 1fr;
         padding: 80px 40px;
         text-align: center;
         justify-items: center;
     }

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

     .image-slider-frame {
         width: 70%;
         max-height: 50vh;
         margin-top: 20px;
     }

     .fog-overlay {
         background: var(--bg-color);
         opacity: 0.95;
     }
 }

 @media (max-width: 640px) {
     .image-slider-frame {
         width: 100%;
     }

     .main-title {
         font-size: 38px;
     }

     .content-wrapper {
         padding: 10px 5px;
     }
 }

 /* CSS Variables for consistent branding */
 :root {
     --crimson-dark: #1d1554;
     --crimson-accent: #c5a059;
     --brand-red: #000;
     --bg-cream: #f9f7f2;
     --card-white: #ffffff;
     --text-gray: #666666;
     --card-width: 340px;
     --card-height: 500px;
     --gap: 1.5rem;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--bg-cream);
     color: var(--crimson-dark);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
 }


 /* * ==========================================
         * TOP HERO SECTION WITH BLUR
         * ==========================================
         */

 .hero-section {
     min-height: 50vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     padding: 2rem;
     position: relative;
     z-index: 10;
     /* Using the same image as the showcase below */
     background-image: url('../img/bgg.avif');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 /* The Blur Overlay */
 .hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* Heavy blur and darkening to keep text legible */
     /* background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);  */
     z-index: -1;
 }

 .hero-content {
     max-width: 900px;
     animation: fadeIn 1.5s ease-out;
     margin-top: 110px;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* * ==========================================
         * PARALLAX SHOWCASE STYLES
         * ==========================================
         */

 .ivy-showcase-wrapper {
     position: relative;
     height: 850vh;
     width: 100%;
     background-color: #000;
 }

 .ivy-sticky-view {
     position: sticky;
     top: 0;
     height: 100vh;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* FIXED BACKGROUND IMAGE FOR SHOWCASE */
 .ivy-fixed-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/bgg.avif');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     z-index: 0;
 }

 .ivy-overlay-grid {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
     background-size: 50px 50px;
     z-index: 1;
     opacity: 0.5;
 }

 .ivy-slides-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
 }

 .ivy-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.8s ease;
 }

 .ivy-slide.active {
     opacity: 1;
     pointer-events: auto;
 }

 .ivy-center-content {
     text-align: center;
     z-index: 10;
     max-width: 900px;
     padding: 0 20px;
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .ivy-slide.active .ivy-center-content {
     opacity: 1;
     transform: translateY(0);
     transition-delay: 0.2s;
 }

 .ivy-pre-title {
     font-family: 'Playfair Display', serif;
     font-style: italic;
     font-size: clamp(1.1rem, 2vw, 1.4rem);
     color: #fff;
     margin-bottom: 12px;
     display: block;
 }

 .ivy-uni-name {
     font-size: clamp(2.5rem, 10vw, 3.4rem);
     font-weight: 800;
     letter-spacing: -0.04em;
     line-height: 0.9;
     margin-bottom: 25px;
     display: block;
     text-transform: uppercase;
     color: #fff;
     text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .ivy-description {
     font-size: 1.1rem;
     color: #e2e8f0;
     max-width: 589px;
     margin: 0 auto 40px;
     line-height: 1.7;
     font-weight: 400;
 }

 .ivy-btn {
     display: inline-block;
     padding: 16px 40px;
     border: 2px solid #fff;
     text-decoration: none;
     color: #fff;
     font-weight: 800;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     transition: all 0.4s ease;
     background: transparent;
 }

 .ivy-btn:hover {
     background: #fff;
     color: #000;
     transform: translateY(-3px);
 }

 /* University Detail Cards */
 .ivy-card {
     position: absolute;
     width: 260px;
     background: #fff;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
     border-radius: 8px;
     overflow: hidden;
     z-index: 5;
     opacity: 0;
     transform: translateY(60px);
     transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .ivy-slide.active .ivy-card {
     opacity: 1;
     transform: translateY(0);
 }

 .ivy-card img {
     width: 100%;
     height: 230px;
     object-fit: cover;
     display: block;
 }

 .ivy-card-info {
     padding: 20px;
     text-align: left;
 }

 .ivy-card-name {
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     margin: 0 0 4px 0;
     color: #1e1b4b;
 }

 .ivy-card-title {
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #64748b;
     margin: 0;
 }

 /* Positions */
 .ivy-left-card {
     left: 5%;
     top: 15%;
 }

 .ivy-right-card {
     right: 5%;
     bottom: 15%;
 }

 /* Navigation Progress */
 .ivy-progress {
     position: absolute;
     right: 40px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .ivy-dot-wrapper {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     cursor: pointer;
 }

 .ivy-dot-label {
     color: #fff;
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-right: 15px;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .ivy-dot-wrapper:hover .ivy-dot-label {
     opacity: 1;
 }

 .ivy-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     border: 2px solid transparent;
     transition: all 0.4s ease;
 }

 .ivy-dot.active {
     background: #fff;
     transform: scale(1.4);
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }

 /* --- COMPLETELY RESPONSIVE MEDIA QUERIES --- */

 /* Tablets and small laptops */
 @media (max-width: 850px) {

     /* 1. Re-enable and straighten the cards */
     .ivy-card {
         display: block !important;
         width: 160px;
         border-radius: 12px;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         transform: translateY(30px);
     }

     .ivy-card img {
         height: 110px;
         object-fit: cover;
     }

     .ivy-card-info {
         padding: 10px;
         text-align: center;
     }

     .ivy-card-name {
         font-size: 0.85rem;
         font-weight: 600;
     }

     /* 2. Positioning: Straightened */
     .ivy-left-card {
         left: 20px;
         top: 12%;
         transform: translateY(30px);
     }

     .ivy-right-card {
         right: 20px;
         bottom: 15%;
         transform: translateY(30px);
     }

     /* 3. Entrance Animation (Straight) */
     .ivy-slide.active .ivy-left-card,
     .ivy-slide.active .ivy-right-card {
         opacity: 1;
         transform: translateY(0);
         transition: transform 0.6s ease-out, opacity 0.6s ease-out;
     }

     /* Progress dots adjustments */
     .ivy-progress {
         right: 20px;
     }

     /* Hide dot labels on touch devices to avoid overlapping */
     .ivy-dot-label {
         display: none;
     }
 }

 /* Standard Mobile Phones */
 @media (max-width: 600px) {

     /* Stack the slide vertically: country text on its own row, the two
        university cards side-by-side below it — instead of floating over
        the text and overlapping it. */
     .ivy-slide {
         flex-flow: row wrap;
         align-content: center;
         justify-content: center;
         gap: 8px;
         padding: 60px 14px 16px;
     }

     .ivy-center-content {
         order: -1;
         flex: 0 0 100%;
         padding: 0 10px;
     }

     .ivy-description {
         line-height: 1.35;
     }

     .ivy-btn {
         padding: 8px 20px;
         font-size: 0.65rem;
     }

     /* Cards back to normal flow (no longer absolutely positioned) */
     .ivy-card {
         display: block !important;
         position: static;
         width: 43%;
         max-width: 150px;
         transform: none;
         margin: 0;
     }

     .ivy-card img {
         height: 66px;
     }

     .ivy-card-info {
         padding: 5px 5px 7px;
         text-align: center;
     }

     .ivy-card-name {
         font-size: 0.72rem;
         margin-bottom: 2px;
     }

     .ivy-card-title {
         font-size: 0.56rem;
     }

     /* Progress dots become a horizontal row at the bottom-center */
     .ivy-progress {
         flex-direction: row;
         right: auto;
         top: auto;
         left: 50%;
         bottom: 14px;
         transform: translateX(-50%);
         gap: 12px;
     }

     .ivy-dot {
         width: 7px;
         height: 7px;
     }
 }

 /* Extra Small Phones (e.g. iPhone SE, old Androids) */
 @media (max-width: 360px) {
     .ivy-uni-name {
         font-size: 1.8rem;
     }

     .ivy-card img {
         height: 80px;
     }

     .ivy-card-name {
         font-size: 0.72rem;
     }
 }

 .portfolio-intro {
     padding: 8px 5% 32px;
     display: block;
     text-align: center;
 }

 .section-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(3rem, 8vw, 3.8rem);
     line-height: 0.9;
     color: #d1d1d1;
     text-transform: uppercase;
 }

 .section-description {
     max-width: 500px;
     margin: 16px auto 0;
     font-size: 1rem;
     color: #555;
     line-height: 1.7;
     padding-bottom: 10px;
 }

 /* Responsive Fixes */
 @media (max-width: 900px) {
     .portfolio-intro {
         padding-top: 20px;
     }

     /* Stacked, static testimonial cards: photo on top, info below */
     .gallery-wrapper {
         flex-direction: column;
         height: auto;
         gap: 24px;
         padding: 0 5% 40px;
         overflow: visible;
     }

     .gallery-card {
         height: auto;
         flex: none;
         display: flex;
         flex-direction: column;
         cursor: default;
     }

     .gallery-card:hover {
         flex: none;
     }

     .gallery-card img {
         position: static;
         width: 100%;
         height: 320px;
     }

     /* Name already shown inside the info box on mobile */
     .persistent-name {
         display: none;
     }

     .card-info {
         position: static;
         width: 100%;
         height: auto;
         opacity: 1;
         transform: none;
         background: #0a192f;
         padding: 20px;
         white-space: normal;
         pointer-events: auto;
     }

     .testimonial-text {
         max-height: none;
         opacity: 1;
         overflow: visible;
         margin-top: 10px;
     }
 }

 /* Allow the big section title to wrap on phones instead of overflowing */
 @media (max-width: 767px) {
     .section-title {
         white-space: normal;
         font-size: clamp(1.8rem, 9vw, 3rem);
     }
 }

 /* Persistent Name Label for Desktop & Mobile */
 .persistent-name {
     position: absolute;
     bottom: 20px;
     left: 20px;
     z-index: 5;
     color: #ffffff;
     text-shadow: 0px 2px 4px rgba(0,0,0,0.9), 0px 4px 12px rgba(0,0,0,0.8);
     transition: opacity 0.3s ease;
     pointer-events: none;
     text-align: left;
 }
 .persistent-name h4 {
     font-size: 1.15rem;
     margin: 0 0 4px 0;
     line-height: 1.2;
     font-weight: 800;
 }
 .persistent-name span {
     font-size: 0.85rem;
     opacity: 0.9;
     font-weight: 600;
 }
 .gallery-card:hover .persistent-name {
     opacity: 0;
 }

 /* 1. Ensure the container allows the flex items to breathe */
 .gallery-wrapper {
     display: flex;
     flex-direction: row;
     gap: 10px;
     width: 100%;
     height: 70vh;
     padding: 0 5% 40px;
     /* Allow the active card to push others if needed, but keep it contained */
     overflow: hidden;
 }

 .gallery-card {
     position: relative;
     flex: 1;
     /* Default collapsed state */
     height: 100%;
     border-radius: 16px;
     overflow: hidden;
     transition: var(--transition);
     cursor: pointer;
     min-width: 60px;
     /* Increased slightly for better tap targets */
 }

 /* 2. Fix the Expansion */
 .gallery-card:hover {
     flex: 10;
     /* Increased to give more room for text */
 }

 /* 3. Refine the Info Overlay */
 .card-info {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 30px;
     background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
     color: white;
     opacity: 0;
     transform: translateY(20px);
     transition: var(--transition);
     pointer-events: none;
     z-index: 10;
     white-space: nowrap;
 }

 .gallery-card:hover .card-info {
     opacity: 1;
     transform: translateY(0);
     white-space: normal;
 }

 /* Testimonial Text Styling */
 .testimonial-text {
     font-size: 0.95rem;
     line-height: 1.5;
     margin-top: 12px;
     font-style: italic;
     color: #e2e8f0;
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .gallery-card:hover .testimonial-text {
     max-height: 400px;
     opacity: 1;
     margin-top: 12px;
     transition-delay: 0.1s;
 }

 /* "Read more" button — hidden on desktop (cards expand on hover) */
 .read-more-btn {
     display: none;
 }

 /* 4. Ensure Image stays centered during the rapid scale */
 .gallery-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: crisp-edges;
     filter: contrast(1.05) saturate(1.05);
     position: absolute;
     top: 0;
     left: 0;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* --- DESKTOP LAYOUT OVERRIDE --- */
 @media (min-width: 901px) {
     .gallery-card {
         background: #0a192f;
     }
     
     .gallery-card:hover img {
         width: 40%;
     }

     .card-info {
         top: 0;
         bottom: auto;
         right: 0;
         left: auto;
         width: 60%;
         height: 100%;
         background: #0a192f;
         transform: translateX(30px);
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 50px;
     }

     .gallery-card:hover .card-info {
         transform: translateX(0);
         pointer-events: auto;
     }
 }

 @media (max-width: 900px) {
     .portfolio-intro {
         padding: 20px 5% 10px;
         text-align: center;
     }

     .section-description {
         margin: 16px auto 0;
     }


     /* Hide scrollbar for a cleaner aesthetic */
     .gallery-wrapper::-webkit-scrollbar {
         display: none;
     }



     .project-name {
         font-size: 1.1rem;
         line-height: 1.4;
     }
 }

 @media (max-width: 900px) {
     .gallery-wrapper {
         display: flex;
         flex-direction: column;
         overflow: visible;
         white-space: normal;
         padding: 0 5% 40px;
         height: auto;
         align-items: stretch;
     }

     .gallery-card {
         flex: none;
         margin-right: 0;
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         vertical-align: top;
     }

     /* Image and info must be in normal flow (not absolute) so the card
        has real height — otherwise the cards collapse and disappear. */
     .gallery-card img {
         position: static;
         width: 100%;
         height: 300px;
     }

     .persistent-name {
         display: none;
     }

     .card-info {
         position: static;
         width: 100%;
         height: auto;
         opacity: 1;
         transform: none;
         padding: 20px;
         white-space: normal;
         pointer-events: auto;
         /* Allow text to wrap inside the card */
         background: #0a192f;
     }

     .testimonial-text {
         max-height: none;
         opacity: 1;
         overflow: visible;
         margin-top: 10px;
     }
 }

 :root {
     --bg-color: #fdfcf9;
     --accent-color: #1a1a1a;
     --text-muted: #666;
     --card-bg: #ffffff;
     --primary-gold: #fff0ff;
     /* Variables for Consultation Bar */
     --off-white: #f8f9fa;
     --primary-blue: #1a2b48;
     --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     background-color: var(--bg-color);
     color: var(--accent-color);
     line-height: 1.6;
     overflow-x: hidden;
 }

 .section-padding {
     padding: 23px 5%;
 }

 .container {
     max-width: 1000px;
     margin: 0 auto;
 }

 /* Header Style */
 .header {
     text-align: center;
     margin-bottom: 60px;
 }

 .header h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(2.5rem, 5vw, 4rem);
     font-weight: 700;
 }

 .header p {
     font-size: 0.8rem;
     color: var(--primary-gold);
     letter-spacing: 3px;
     text-transform: uppercase;
     font-weight: 600;
     margin-bottom: 10px;
 }

 /* FAQ Styling */
 .faq-grid {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 40px;
 }

 .faq-item {
     background: var(--card-bg);
     border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 12px;
     overflow: hidden;
     transition: var(--transition);
 }

 .faq-question {
     width: 100%;
     padding: 24px 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: none;
     border: none;
     cursor: pointer;
     text-align: left;
     outline: none;
 }

 .question-text {
     font-size: 1.05rem;
     font-weight: 600;
     color: #333;
     padding-right: 20px;
 }

 .icon-box {
     width: 24px;
     height: 24px;
     min-width: 24px;
     position: relative;
     transition: var(--transition);
 }

 .icon-box::before,
 .icon-box::after {
     content: '';
     position: absolute;
     background: var(--accent-color);
     transition: var(--transition);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .icon-box::before {
     width: 2px;
     height: 14px;
 }

 .icon-box::after {
     width: 14px;
     height: 2px;
 }

 .faq-item.active {
     border-color: var(--primary-gold);
 }

 .faq-item.active .icon-box {
     transform: rotate(45deg);
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
 }

 .faq-item.active .faq-answer {
     max-height: 1000px;
 }

 .answer-inner {
     padding: 0 32px 32px;
     color: var(--text-muted);
     font-size: 0.95rem;
 }



 /* --- Desktop Styles (Modified for better flexibility) --- */
 .consultation-bar {
     width: 100%;
     background-color: var(--off-white);
     color: var(--primary-blue);
     padding: 20px 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 1000;
     transition: all 0.3s ease;
     /* Smooth transition for state changes */
     box-sizing: border-box;
     /* Ensures padding doesn't break width */
 }

 /* Fixed state when scrolling */
 .consultation-bar.is-fixed {
     position: fixed;
     bottom: 0;
     left: 0;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
     /* Softened shadow */
 }

 /* Static state for when it's tucked above the footer */
 .consultation-bar.is-static {
     position: relative;
     box-shadow: none;
 }

 .consultation-text {
     font-weight: 600;
     font-size: 14px;
     letter-spacing: 0.5px;
     line-height: 1.4;
 }

 .consultation-btn {
     background-color: var(--primary-blue);
     color: var(--off-white);
     border: none;
     padding: 12px 30px;
     text-transform: uppercase;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     cursor: pointer;
     transition: 0.3s;
     text-decoration: none;
     display: inline-block;
     white-space: nowrap;
     /* Prevents button text from wrapping */
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 768px) {
     .consultation-bar {
         padding: 12px 4%;
         /* Use percentage for safe-area spacing */
         flex-direction: column;
         /* Stack text and button */
         text-align: center;
         gap: 12px;
         /* Adds space between text and button when stacked */
     }

     .consultation-text {
         font-size: 10.5px;
         /* Slightly smaller for mobile */
         max-width: 100%;
     }

     .consultation-btn {
         width: 100%;
         /* Full width button on mobile for better UX */
         padding: 12px 16px;
         font-size: 10px;
     }
 }

 /* Extra small screens / iPhones */
 @media (max-width: 480px) {
     .consultation-bar {
         padding: 10px 16px;
     }

     .consultation-text {
         font-size: 10px;
     }
 }

 /* Footer */
 footer {
     background: var(--off-white);
     color: #777;
     padding: 80px 5% 40px;
     position: relative;
     z-index: 10;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 40px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .footer-col h4 {
     color: #1b1553;
     margin-bottom: 20px;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 900;
 }

 .footer-col ul {
     list-style: none;
 }

 .footer-col ul li {
     margin-bottom: 10px;
     font-size: 0.9rem;
 }

 /* Center footer headings, links and social icons on mobile */
 @media (max-width: 768px) {
     .footer-col {
         text-align: center;
     }

     .footer-col ul {
         justify-content: center;
     }
 }

 @media (max-width: 768px) {
     .consultation-bar {
         padding: 20px;
         flex-direction: column;
         gap: 15px;
         text-align: center;
     }

     .video-side,
     .form-side {
         min-width: 100%;
     }

     .video-text h2 {
         font-size: 2rem;
     }
 }

 /* ============================================================
    Global mobile down-scaling — shrink oversized headings,
    paragraphs, images and section spacing on phones.
    Content is unchanged; only sizes are reduced.
    ============================================================ */
 @media (max-width: 600px) {
     /* Headings */
     .hero-title {
         font-size: clamp(1.9rem, 9vw, 2.4rem);
     }

     .main-title {
         font-size: clamp(1.8rem, 8vw, 2.3rem);
     }

     .ivy-uni-name {
         font-size: clamp(1.3rem, 6vw, 1.7rem);
         margin-bottom: 8px;
     }

     .ivy-pre-title {
         font-size: 0.82rem;
     }

     .header h1 {
         font-size: clamp(1.8rem, 8vw, 2.3rem);
     }

     .header {
         margin-bottom: 32px;
     }

     .section-title {
         font-size: clamp(1.6rem, 8.5vw, 2.3rem);
     }

     .video-text h2 {
         font-size: 1.6rem;
     }

     /* Body / paragraph text */
     .hero-description {
         font-size: 14px;
     }

     .body-text {
         font-size: 14.5px;
     }

     .ivy-description {
         font-size: 0.8rem;
         margin-bottom: 12px;
     }

     .section-description {
         font-size: 0.9rem;
     }

     .question-text {
         font-size: 0.95rem;
     }

     .answer-inner {
         font-size: 0.9rem;
         padding: 0 20px 24px;
     }

     /* Spacing */
     .faq-question {
         padding: 18px 20px;
     }

     .section-padding {
         padding: 32px 5%;
     }

     footer {
         padding: 48px 5% 32px;
     }

     .footer-grid {
         gap: 28px;
     }

     /* Images / cards — keep photo + caption joined as one rounded card */
     .gallery-card {
         border-radius: 14px;
         overflow: hidden;
     }

     .gallery-card img {
         height: auto;
         aspect-ratio: 4 / 5;
         object-fit: cover;
         object-position: center;
     }

     .card-info {
         padding: 12px 14px;
     }

     .project-name {
         font-size: 0.9rem;
         line-height: 1.3;
     }

     /* Trim the quote to 3 lines so the dark caption stays compact and the
        card reads as a single unit (photo + short caption). */
     .testimonial-text {
         font-size: 0.78rem;
         line-height: 1.4;
         margin-top: 7px;
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     .gallery-card.expanded .testimonial-text {
         display: block;
         -webkit-line-clamp: unset;
         overflow: visible;
     }

     /* Show the Read more / Read less toggle on mobile */
     .read-more-btn {
         display: inline-block;
         margin-top: 8px;
         padding: 0;
         background: transparent;
         border: none;
         color: #c5a059;
         font-size: 0.78rem;
         font-weight: 700;
         letter-spacing: 0.03em;
         cursor: pointer;
     }
 }