/* =========================================
   CORE PLUS - PREMIUM UI STYLESHEET (V2)
   ========================================= */

:root {
    --primary-color: #0F2C59;
    /* Deep Navy */
    --secondary-color: #DAC0A3;
    /* Soft Gold/Beige */
    --accent-color: #0b57d0;
    /* Bright Blue */
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --white: #ffffff;
    --light-bg: #f8fafc;
    --navbar-height: 80px;
    /* Defined height for calculation */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--navbar-height);
    /* Ensure anchor links stop below nav */
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    background-color: var(--light-bg);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.5px;
}

a {
    text-decoration: none !important;
    transition: var(--transition);
}

/* -----------------------------------------
   2. NAVBAR - Calculated & Premium
   ----------------------------------------- */
.navbar {
    background: rgba(15, 44, 89, 0.95);
    /* Deep Navy */
    backdrop-filter: blur(12px);
    padding: 0;
    min-height: var(--navbar-height); /* Changed from height to min-height for mobile menu */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    z-index: 1050; /* Ensure it stays on top */
}

.navbar-brand {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white) !important;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    padding: 0;
}

.navbar-brand sub {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--secondary-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 10px 15px !important;
    margin: 0 5px;
    border-radius: 6px;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.1);
}

.navbar-toggler {
    border: none;
    padding: 0.5rem; /* Add padding for click area */
    margin-right: 1rem; /* Spacing from right edge */
    z-index: 1051; /* Ensure above brand/hero */
    position: relative;
}

.navbar-toggler:focus {
    box-shadow: none; /* Remove default browser outline */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* -----------------------------------------
   3. HERO SECTION - Setup & layout
   ----------------------------------------- */
/* -----------------------------------------
   3. HERO SECTION - REDESIGNED (SPLIT + ANGLE)
   ----------------------------------------- */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 750px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--white); /* Right side background */
    padding-top: var(--navbar-height);
}

/* The Angled Blue Background on the Left */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a4f9c 100%); /* Subtle gradient */
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
    z-index: 1;
}

/* Ensure content sits above the background */
.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 15px;
}

.hero-text-col {
    padding-right: 2rem;
    color: var(--white);
    text-align: left;
}

/* Established Badge */
.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 18px;
    border-radius: 50px; /* Pill shape */
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    color: var(--secondary-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 1.5rem;
    text-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Deep shadow */
}

.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    font-weight: 400;
    max-width: 550px;
    line-height: 1.7;
}

/* Hero Image on Right (Full Bleed) */
.hero-right-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%; /* Covers right half */
    height: 100%;
    background: url('../img/hero_bg_1.png') no-repeat center center;
    background-size: cover;
    z-index: 0; /* Behind content but check intersection with blue bg */
}

/* Ensure blue bg is comfortably top-left */
.hero-section::before {
    z-index: 1; /* Above image? */
    filter: drop-shadow(10px 0 15px rgba(0,0,0,0.3)); /* Shadow on the diagonal cut */
    /* Blue gradient layer */
    /* Let's make sure the blue overlaps the image stylishly */
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .hero-section {
        height: auto;
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 60px;
        text-align: center;
        flex-direction: column; /* Stack image and content */
        display: flex; /* Use flex for column layout */
    }

    /* On mobile, maybe hide the full split or stack it? 
       User wanted "Right side white area", likely implies desktop split.
       On mobile, we usually stack. Let's make the background image specific for mobile or hide it? 
       Usually full bleed right image becomes a top banner or hidden. 
       Let's keep it simple: Show image as background of section or put it back in flow? 
       Let's hide the absolute right bg and put an image in flow or just use background.
    */
    
    .hero-right-bg {
        position: relative;
        height: 300px; /* Force some height */
        width: 100%;
        margin-left: 0;
        margin-bottom: 2rem;
        display: block; /* ensure visible */
        left: auto;
        right: auto;
    }

    .hero-section::before {
        width: 100%;
        height: 100%;
        clip-path: none; 
        background: linear-gradient(180deg, var(--primary-color) 0%, #1a4f9c 100%);
        opacity: 0.95; /* Make it cover the image if it's there? No, the text needs a bg */
        position: absolute;
        z-index: 0;
        filter: none; /* Remove shadow on mobile */
    }
    
    .hero-content-wrapper {
        z-index: 2;
        width: 100%;
    }

    .hero-text-col {
        padding-right: 0;
        text-align: center;
        margin-bottom: 3rem;
    }

    .hero-title {
        font-size: 2rem; /* Reduced from 2.5rem for mobile */
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 6px 14px;
        margin-bottom: 1.5rem;
    }
}

/* Hero Cards - Improved Grid */
.hero-cards-container {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.transparent-card {
    background: rgba(255, 255, 255, 0.08);
    /* More glassy */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    height: 100%;
}

.transparent-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.transparent-card p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* Explore Button */
.btn-explore {
    background: var(--white);
    color: var(--primary-color);
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-explore:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* -----------------------------------------
   4. SERVICES SECTION
   ----------------------------------------- */
/* Ensure cards are uniform */
.service-card {
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    border: none;
    box-shadow: var(--shadow-sm);
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.service-card .card-overlay {
    position: absolute;
    inset: 0;
    /* Darker gradient at bottom for text readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%);
    transition: background 0.3s ease;
}

.service-card:hover .card-overlay {
    background: linear-gradient(to top, rgba(15, 44, 89, 0.95) 0%, rgba(15, 44, 89, 0.6) 100%);
}

.service-card .card-body {
    position: relative;
    z-index: 2;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 380px;
    /* Fixed height for consistency */
}

.service-card .card-body i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    /* Make icons pop */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.service-card .card-title {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.service-card .card-text {
    color: #f3f4f6;
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Limit text lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -----------------------------------------
   6. ABOUT SECTION (HOMEPAGE)
   ----------------------------------------- */
.about-img-wrapper {
    position: relative;
    padding-bottom: 20px;
    padding-right: 20px;
}

.about-img-wrapper img {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.experience-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-color);
    color: var(--white);
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(11, 87, 208, 0.4);
    text-align: center;
    border: 4px solid var(--white);
}

.custom-btn-hover {
    transition: all 0.3s ease;
}
.custom-btn-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(11, 87, 208, 0.3) !important;
}


/* -----------------------------------------
   7. WHY CHOOSE US SECTION
   ----------------------------------------- */
.feature-card {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0,0,0,0.05);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    border-color: transparent;
}

.feature-card .icon-box {
    transition: transform 0.3s ease;
}

.feature-card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

/* -----------------------------------------
   8. CLIENTS - INFINITE SCROLL
   ----------------------------------------- */
.slider {
    height: 120px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider::before,
.slider::after {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    content: "";
    height: 120px;
    position: absolute;
    width: 150px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slide-track {
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(250px * 20); /* card width * number of slides (original + duplicate) */
}

.slide {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.slide img {
    max-width: 100%;
    max-height: 80px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slide img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 10)); } /* move by half the total width */
}

/* -----------------------------------------
   9. STATS COUNTER SECTION
   ----------------------------------------- */
.stat-card {
    transition: transform 0.3s ease, background 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.15) !important;
}

.stat-icon {
    transition: transform 0.3s ease;
}

.stat-card:hover .stat-icon {
    transform: scale(1.2);
}

/* -----------------------------------------
   10. TESTIMONIALS SECTION
   ----------------------------------------- */
.testimonial-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
}

.testimonial-card .quote-icon i {
    transform: rotate(180deg); /* Style choice for opening quote */
}

/* -----------------------------------------
   11. FOOTER
   ----------------------------------------- */


.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.section-title p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    left: 30px; /* Moved to left */
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: float 3s ease-in-out infinite; /* Add gentle float animation */
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* -----------------------------------------
   13. CUSTOM TABS (Visa Page)
   ----------------------------------------- */
.sticky-tabs .nav-pills .nav-link {
    background-color:  #f7db86; /* Inactive Background: White (Blue text only) */
    color:#0F2C59 !important; /* Inactive Text: Bright Blue */
    border: 1px solid rgba(0,0,0,0.1);
    margin: 0 5px;
    border-radius: 50px;
    padding: 12px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.sticky-tabs .nav-pills .nav-link:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
}

.sticky-tabs .nav-pills .nav-link.active {
    background-color: #ffc107 !important; /* Active Background: Gold */
    color: #000 !important; /* Active Text: Black for contrast on Gold */
    border-color: #ffc107;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/* -----------------------------------------
   12. PREMIUM SERVICE CARD (Global)
   ----------------------------------------- */
.service-card {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    color: #fff;
    border: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #1a1a1a; /* Dark fallback */
    height: 100%;
}

.service-card:hover {
    transform: translateY(-12px); /* Removed scale(1.02) */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

/* Background Image & Gradient Overlay */
.service-card .card-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

/* Double overlay for readability: Image + Dark Gradient */
.service-card .card-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.9));
    z-index: 1;
}



/* Card Content */
.service-card .card-body {
    position: relative;
    z-index: 2;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to bottom like modern UI */
    height: 100%;
    min-height: 400px; /* Ensure visual consistency */
}

.service-card i {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, #ffd700, #ffaa00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.service-card h2, .service-card .card-title {
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    color: #fff;
}

.service-card p, .service-card .card-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
}

.service-card ul {
    margin-bottom: 2rem;
    padding-left: 1rem;
    list-style: none;
}

.service-card ul li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
}

.service-card ul li::before {
    content: "\f26b"; /* Bootstrap icon check circle */
    font-family: bootstrap-icons;
    color: #ffd700;
    margin-right: 10px;
    font-size: 1.1em;
}

/* Action Button */
.service-card .btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.service-card .btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.whatsapp-float img {
    width: 35px;
    height: 35px;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

/* Logos */
.logo-card {
    width: 160px;
    height: 90px;
    background: var(--white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 0 1rem;
    transition: all 0.3s ease;
}

.logo-card:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.logo-img {
    max-width: 80%;
    max-height: 80%;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-card:hover .logo-img {
    filter: grayscale(0);
    opacity: 1;
}

/* -----------------------------------------
   6. FOOTER
   ----------------------------------------- */
footer {
    background: #081226;
    /* Darkest Navy */
    color: rgba(255, 255, 255, 0.7);
    padding-top: 4rem;
    padding-bottom: 2rem;
    font-size: 0.9rem;
}

footer h5,
footer h6 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

footer .bi {
    color: var(--secondary-color);
}

/* -----------------------------------------
   RESPONSIVE
   ----------------------------------------- */
@media (max-width: 768px) {
    :root {
        --navbar-height: 70px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .transparent-card {
        padding: 1.2rem;
    }

    .service-card .card-body {
        height: auto;
        min-height: 300px;
    }
}

/* -----------------------------------------
   14. CONTACT FORM STYLES
   ----------------------------------------- */
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating > .form-control:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-control:focus {
    box-shadow: none;
    background-color: #fff !important; /* White on focus */
    border: 1px solid var(--primary-color) !important;
}

/* Enhancing the floating label color */
.form-floating > label {
    color: var(--text-light);
}

.form-floating > .form-control:focus ~ label {
    color: var(--primary-color);
    font-weight: 600;
}
/* =========================================
   LOADER STYLES
   ========================================= */
#loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 99999;
  display: flex !important; /* Ensure flex is active for centering */
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loader-logo {
  width: 150px; /* Adjust base size */
  animation: zoomInOut 2s infinite ease-in-out;
}

@keyframes zoomInOut {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* Hidden state for loader */
body.loaded #loader-container {
  opacity: 0;
  visibility: hidden;
}

/* =========================================
   FOOTER LOGO
   ========================================= */
.footer-logo {
  max-width: 200px; /* Adjust as needed */
  height: auto;
  display: block;
}

/* -----------------------------------------
   14. VISA CARD GRID REDESIGN
   ----------------------------------------- */

.visa-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Soft shadow */
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    text-align: center;
}

.visa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.visa-card-img {
    height: 140px;
    width: 100%;
    object-fit: cover;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.visa-card-body {
    padding: 15px;
}

.visa-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--primary-color);
    text-transform: uppercase;
}

.visa-divider {
    height: 1px;
    background-color: rgba(0,0,0,0.08);
    margin: 10px 0;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.visa-price {
    font-weight: 600;
    color: #c0392b; /* Reddish for price/attention */
    font-size: 0.95rem;
    margin: 0;
    text-transform: uppercase;
}

.visa-price span {
    color: #7f8c8d;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 4px;
}

/* Modal Styling Tweaks */
.visa-modal-header {
    background-color: var(--primary-color);
    color: white;
}
.visa-modal-header .btn-close {
    filter: invert(1);
}