/* ---------- Variables ---------- */
      :root {
        --brand-dark: #002f63; /* Dark Blue */
        --brand-sky: #1fb2e6; /* Sky Blue */
        --accent: #ff7a00; /* UI Orange */
        --green: #4caf50;
        --red: #f44336;
        --muted: #6e7280;
        --bg-soft: #f6f8fb; /* Background color for Sections 3 and 5 */
        --footer-bg: #fff;
        --copyright-bg: #001830;
        --white: #ffffff;
        --maxw: 1200px;
        --card-radius: 12px;
        --video-bg-color: #002f63;
      }

      /* ---------- Global ---------- */
      * {
        box-sizing: border-box;
      }
      /* @font-face {
        font-family: 'Akriti';
        src: url('../fonts/Akriti.woff2') format('woff2'),
             url('../fonts/Akriti.woff') format('woff'),
             url('../fonts/Akriti.ttf') format('truetype');
        unicode-range: U+0900-097F;
        font-display: swap;
      } */
      html,
      body {
        height: 100%;
        /* Prevents the default horizontal margin/padding that some browsers add */
        padding: 0;
        margin: 0;
        
        /* Ensures the body width is exactly the visible screen area */
        width: 100%; 
        
        /* CRITICAL: Hides any content that attempts to extend beyond the 100% width */
        overflow-x: hidden; 
      }
      body {
        font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial;
        color: #111827;
        margin: 0;
        background: #fff;
        line-height: 1.45;
      }
      /* body.np {
        font-family: 'Akriti', 'Noto Sans Devanagari', sans-serif;
      }
      body.en {
        font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
      } */
      .container-narrow {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 16px;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        display: block;
      }

      /* ------------------------------------
      SECTIONS 1-4 STYLES (Kept for context)
    ------------------------------------ */
      header.site-header {
        background: #fff;
        padding: 10px 0;
      }
      /* --- Final CSS for Entire Image Visibility (Using contain) --- */

      /* Hero Carousel Container */
#heroCarousel {
    width: 100%; 
    background-color: #f5f5f5; /* Optional: background for any empty space */
}

/* Carousel Item - Remove any height constraints */
.carousel-item {
    height: auto;
}

/* Hero Banner Image - Show full image without cropping */
.hero-banner-img {
    width: 100%;
    height: auto; 
    object-fit: contain; /* Changed from 'cover' to 'contain' - this prevents cropping */
    display: block;
    margin: 0 auto; /* Centers the image if there's extra space */
}

/* Makes the entire slide clickable */
.carousel-item a {
    display: block;
    width: 100%;
}
      .two-tone {
        display: flex;
        height: 14px;
        width: 100%;
      }
      .two-tone .left {
        width: 80%;
        background: var(--brand-dark);
      }
      .two-tone .right {
        width: 20%;
        background: var(--brand-sky);
      }
      .section-feature {
        background: var(--accent);
        padding: 105px 0;
      }


      /* --- Videos Section Styling --- */
      .videos-section{ 
          background-color: var(--bg-soft); 
          padding-top: 85px; 
          padding-bottom: 70px; 
          text-align: center; 
      }
      .videos-title{ 
          color: var(--accent); 
          margin-bottom:50px; 
          font-size: clamp(20px, 3vw, 28px); 
          font-weight: 600; 
      }
      .splide {
        max-width: 1200px; /* Much bigger max-width */
        margin: 0 auto;
        padding: 0 20px;
      }
      
      .splide__slide img {
        width: 100%;
        height: 100%; /* Changed from auto to 100% */
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 12px;
        display: block;
      }
      
      .splide__arrow {
        background: #ff7a00;
        top: 40%; /* Move arrows up - adjust this value as needed */
        transform: translateY(-50%); /* Centers the arrow at the new position */
      }
      .splide__arrow svg {
          fill: #f6f8fb;
      }

      /* Desktop arrow positioning */
      .splide__arrow--prev {
        left: -70px;
      }
      .splide__arrow--next {
        right: -70px;
      }
      
      /* Mobile: Hide arrows completely */
      @media (max-width: 768px) {
        .splide__arrow {
          display: none !important;
        }

        .videos-section {
            padding-bottom: 20px;
        }
      }
      
      /* .splide__pagination {
        margin-bottom: -35px;
      }
      .splide__pagination__page.is-active {
        background: #ff7a00;
      }
      
      .splide__pagination__page {
        background: #ccc;
      } */
      
      .video-slide-title {
        font-size: clamp(14px, 1.8vw, 17px);
        font-weight: 500;
        color: var(--text-color, #333);
        margin-top: 15px;
        text-align: center;
        padding: 0 10px;
        line-height: 1.4;
      }

      .splide__slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 15px;
      }

      .splide__slide a {
          display: block;
          position: relative;
          width: 100%;
          overflow: hidden;
          border-radius: 12px;
          aspect-ratio: 16 / 9; /* Added: Forces container to maintain aspect ratio */
          background-color: #000; /* Added: Prevents white flicker while loading */
      }

      /* YouTube play icon overlay - Red button background (SMALLER) */
      .splide__slide a::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px; /* Reduced from 80px */
        height: 42px; /* Reduced from 56px */
        background: rgba(255, 0, 0, 0.9);
        border-radius: 10px; /* Reduced from 14px */
        transition: background 0.3s ease;
        pointer-events: none;
      }

      /* YouTube play icon overlay - White play triangle (SMALLER) */
      .splide__slide a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-35%, -50%);
        width: 0;
        height: 0;
        border-left: 18px solid white; /* Reduced from 24px */
        border-top: 11px solid transparent; /* Reduced from 14px */
        border-bottom: 11px solid transparent; /* Reduced from 14px */
        z-index: 1;
        transition: transform 0.3s ease;
        pointer-events: none;
      }

      /* Hover effect for YouTube icon */
      .splide__slide a:hover::after {
        background: rgba(255, 0, 0, 1);
      }

      .splide__slide a:hover::before {
        transform: translate(-35%, -50%) scale(1.1);
      }
      
      /* Mobile adjustments for play icon */
      @media (max-width: 480px) {
        .splide__slide a::after {
          width: 50px; /* Reduced */
          height: 35px; /* Reduced */
        }
        .splide__slide a::before {
          border-left: 15px solid white; /* Reduced */
          border-top: 9px solid transparent; /* Reduced */
          border-bottom: 9px solid transparent; /* Reduced */
        }
      }


      .brief-section {
        padding: 85px 0;
        background: #fff;
        text-align: center;
      }
      .brief-section h3 {
        color: var(--accent);
        font-size: clamp(18px, 2.5vw, 28px);
        margin-bottom: 35px;
        font-weight: 600;
      }
      .content-card-list {
        text-align: left;
      }
      .content-card-list ul {
          padding: 0 110px;
      }
      .content-card-list li {
        color: #333;
        font-size: 17px;
        line-height: 1.8;
        margin-bottom: 5px;
        margin-left: 10px;
      }

      /* New/Updated Styling for the Image */
      .feature-left {
        color: white;
      }
      .feature-right img {
        /* Ensure the image is treated as a block for margin: auto to work */
        display: block;

        /* Center the image horizontally within its parent column */
        margin: 0 auto;

        /* NEW STYLES BELOW */
        /* Rounded Corners */
        border-radius: 12px; /* Adjust radius as needed, 12px is a common size */

        /* Shadow */
        box-shadow: 0 11px 33px rgb(0 0 0 / 25%); /* Subtle shadow: horizontal, vertical, blur, color */
      }

      /* Style for the modal content border */
      #learnMoreModal .modal-content {
        /* Set the border color, style, and thickness */
        border: 5px solid var(--accent, #f89423) !important;

        /* Ensure default rounded corners are kept */
        border-radius: 0.5rem;
      }

      /* Styling for the custom 'बन्द गर्नुहोस्' button in the modal footer */
      #learnMoreModal .modal-footer .btn-secondary {
        background: #ff7a00;
        border: 0px; /* Removes the default Bootstrap border */
        color: #fff; /* Ensures text remains white for contrast */

        /* Optional: Add a slight hover effect */
        transition: background-color 0.2s ease;
      }

      #learnMoreModal .modal-footer .btn-secondary:hover {
        background: #e87000; /* Slightly darker orange on hover */
        color: #fff;
      }

      /* ------------------------------------
      SECTION 5: CONTACT FORM (REFINED)
    ------------------------------------ */
      .contact-section {
        background: #fbf6f3;
        padding: 95px 0;
      }
      .contact-card {
        background: #fff;
        border-radius: 18px; /* High radius to match image_3b84a8.png */
        padding: clamp(30px, 5vw, 45px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      }
      .contact-title {
        font-size: clamp(20px, 3vw, 24px);
        font-weight: 600;
        color: #111827;
        margin-bottom: 30px;
      }
      /* Styling for form fields to match image_3b84a8.png */
      .form-control-custom {
        height: 50px;
        border-radius: 10px; /* Rounded corners */
        border: 1px solid #ddd;
        /* padding-left: 45px; Space for the icon */
        font-size: 15px;
        box-shadow: none !important;
      }
      .form-floating > .form-control-custom,
      .form-floating > .form-control-custom:focus {
        padding-top: 1.5rem; /* Adjust padding for float effect */
        padding-bottom: 0.6rem;
      }
      .form-group-with-icon {
        position: relative;
        margin-bottom: 20px;
      }
      .form-group-with-icon i {
        position: static; /* Icon is now part of the normal flow */
        /* Remove other positioning rules: top, left, transform */
        color: var(--muted);
        font-size: 16px;
        z-index: 1; 
        /* We will use Bootstrap's me-3 class for margin, or add: margin-right: 15px; */
      }

      .form-group-with-icon .fa-quote-left {
          top: 18px; /* Original top value */
          transform: translateY(0); /* Original reset transform */
      }
      /* Special styling for Textarea */
      .form-control-message {
        height: 150px;
        resize: none;
      }
      .form-control-message + label {
        padding-top: 15px !important;
      }

      /* Submit Button */
      .btn-submit-form {
        background-color: var(--accent);
        color: white;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        transition: background-color 0.2s;
        width: 100%;
      }
      .btn-submit-form:hover {
        background-color: #e87000;
        color: white;
      }

      /* Left Column Nepali Text */
      .contact-text-left {
        padding-right: 20px;
        align-self: center;
        margin-bottom: 20px;
      }
      .contact-text-left h4 {
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 600;
        line-height: 1.7;
        color: #aa1e24; /* Slightly muted color for this text */
        max-width: 450px;
      }
      .contact-text-left p {
        color: #000;
        font-size: 17px;
        margin-top: 15px;
      }
      .contact-section .row {
        align-items: center; /* Vertically align content */
      }

      /* ------------------------------------
 FOOTER STYLES (SIMPLIFIED & UPDATED)
 ------------------------------------ */
      .site-footer {
        background: #fff; /* White background */
        padding: 30px 0;
        font-size: 14px;
        line-height: 1.6;
        color: #333;
      }

      .footer-main-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .footer-left {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .footer-left .logo-img {
        width: 280px; /* Placeholder width */
        height: auto;
      }
      .footer-left .social-icons {
        display: flex;
        gap: 5px;
        margin-top: 5px;
        margin-left: 3px;
      }
      .footer-left .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
      }
      .social-icons a[aria-label="Facebook"] {
          background-color: #2f6ff4; /* Twitter Blue */
      }
      .social-icons a[aria-label="LinkedIn"] {
          background-color: #357cff; /* Twitter Blue */
      }.social-icons a[aria-label="YouTube"] {
          background-color: #ff1e1d; /* Twitter Blue */
      }.social-icons a[aria-label="Instagram"] {
          /* Full Instagram Gradient Approximation */
          background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #5c85ff 90%);
          /* Fallback for older browsers that don't support gradients */
          background-color: #C13584; 
      }
      .footer-right {
        display: flex;
        gap: 25px;
        text-align: left;
      }
      .contact-group h5 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 15px;
        color: #aa1e24; /* Red color from image_2e4b98.png */
        margin-bottom: 5px;
      }
      .contact-group a,
      .contact-group span {
        display: block;
        font-size: 14px;
        color: #111827;
      }

      /* Sub-footer / Divider styles (The bar below the main content) */
      .sub-footer-bar {
        background-color: #fff;
        padding: 15px 0;
        border-top: 1px solid #ddd;
      }
      .sub-footer-content {
        display: flex;
        justify-content: flex-start;
        font-size: 12px;
        color: #666;
      }
      .sub-footer-content a {
        color: #aa1e24;
        text-decoration: underline;
        margin-left: 5px;
      }

      /* Old elements removed/modified */
      .multi-bar,
      .copyright-bar {
        display: none;
      }

      .form-check-input {
        border: var(--bs-border-width) solid #dbdbdb;
      }

      /* Optional: Adjust aspect ratio for smaller screens (taller image) */
      /* @media (max-width: 768px) {
        .carousel-item {
          padding-bottom: 46%;
          background-position: left top;
          width: 100%; 
        }
      } */

      /* Language Switcher */
        /* .lang-switcher {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            gap: 5px;
        }

        .lang-switcher a {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #333;
            padding: 2px 6px;
            transition: 0.3s;
        }

        .lang-switcher a img {
            height: 11px; 
            width: auto;
            margin-right: 4px;
        }

        .lang-switcher a:hover,
        .lang-switcher a.active {
            color: #aa1e24;
        }

        /* Separator */
        .lang-switcher span {
            margin: 0 3px;
            color: #555;
        } */
        .lang-switcher .btn {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            background: #fff;
            border: 1px solid #ccc;
            padding: 2px 8px;
        }

        .lang-switcher .btn:hover,
        .lang-switcher .btn:focus {
            color: #ff7a00;
            border-color: #ff7a00;
        }

        .lang-switcher .dropdown-menu {
            min-width: 100px;
            padding: 0;
        }

        .lang-switcher .dropdown-item {
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
        }

        .lang-switcher .dropdown-item.active {
            background-color: #f0f0f0;
            font-weight: 600;
            color: black;
        }

        .lang-switcher .dropdown-item:hover {
            background-color: #f8f8f8;
        }

        /* Nepali flag */
        .lang-switcher .np-flag {
          height: 16px;
        }

        /* English flag */
        .lang-switcher .en-flag {
          height: 12px;
        }

        #form-submit:disabled {
          background-color: #ff7a00 !important;
          color: #fff !important;
        }

      @media (max-width: 767.98px) {
        .footer-main-content {
          flex-direction: column;
          text-align: center;
        }
        .footer-left,
        .footer-right {
          align-items: center;
          margin-bottom: 20px;
        }
        .footer-right {
          flex-direction: column;
          gap: 20px;
          text-align: center;
        }
        .sub-footer-content {
          justify-content: center;
          text-align: center;
        }
      }

      /* Responsive adjustments */
      @media (max-width: 991.98px) {
        .contact-text-left {
          padding-right: 0;
          text-align: center;
          margin-bottom: 30px;
        }
        .contact-text-left h4 {
          max-width: none;
          margin: 0 auto;
        }
        .footer-content {
          flex-direction: column;
          text-align: center;
        }
        .footer-info {
          text-align: center;
        }
        .feature-right img {
          margin-top: 50px;
        }
        .splide__arrow--prev {
        margin-left: 0px;
        }
        .splide__arrow--next {
          margin-right: 0px;
        }
        .content-card-list ul {
          padding: 0 20px;
        }
        .site-header .brand-left img {
            /* Set the height and width to 25px */
            height: 25px !important;
            width: auto !important;  /* Set width to maintain aspect ratio */
        }

        .site-header .brand-right .ifc-logo{
            height: 25px !important;
            width: auto !important; /* Use 'auto' to maintain aspect ratio for non-square logos */
        }

        /* .lang-switcher {
            font-size: 12px;
        }
            */

        /* .lang-switcher a img {
            height: 11px !important;
        }  */

        .lang-switcher .btn {
            font-size: 12px;
            padding: 2px 6px;
        }

        .lang-switcher .dropdown-item {
            font-size: 12px;
            padding: 4px 10px;
        }

        /* .lang-switcher .dropdown-item img {
            height: 14px;
        } */

        /* Nepali flag */
        .lang-switcher .np-flag {
          height: 16px;
        }

        /* English flag */
        .lang-switcher .en-flag {
          height: 12px;
        }
        
      }