body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', sans-serif;
        }

        /* Logo Box */
        .logo-box {
            border: 3px solid #001f4d;
            padding: 0px 15px;
            font-size: 28px;
            font-weight: 700;
            color: #001f4d;
        }

        /* Navbar */
        .navbar-nav .nav-link {
            font-weight: 500;
            margin-left: 20px;
            color: #001f4d !important;
            font-size: 17px;
        }
        .navbar-nav .nav-link:hover {
            color: #003399 !important;
        }

        /* Hero Section */
        .hero {
            position: relative;
            width: 100%;
        }
        .hero img {
            width: 100%;
            height: 85vh;
            object-fit: cover;
        }

        /* Heading Box */
        .hero-text-box {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            padding: 40px 60px;
            text-align: center;
            border-radius: 10px;
        }
        .hero-text-box h1 {
            font-size: 60px;
            font-weight: 700;
            color: #001f4d;
            line-height: 1.2;
        }

        /* Responsive Fix */
        @media (max-width: 768px) {
            .hero-text-box h1 {
                font-size: 34px;
            }
            .hero img {
                height: 60vh;
            }
        }




        
        .about-img-main {
            position: relative;
        }

        .about-img-main img {
            width: 100%;
            border-radius: 10px;
        }

        .small-img-box {
            position: absolute;
            bottom: -40px;
            right: -40px;
            width: 55%;
            border-radius: 10px;
            border: 10px solid #fff;
        }

        .stats-box {
            position: absolute; 
            bottom: 20px;
            left: 20px;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .stats-box img {
            width: 40px;
        }

        .feedback-section img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid #fff;
            margin-right: -15px;
        }

        .quote-line {
            border-left: 4px solid #0d6efd;
            padding-left: 15px;
            font-style: italic;
        }

        /* Mobile Adjustments */
        @media(max-width:768px){
            .small-img-box{
                width: 70%;
                right: 0;
                bottom: -30px;
            }
            .stats-box{
                left: 0;
                bottom: -60px;
            }
        }
 




        .hero-section {
            position: relative;
            width: 100%;
            min-height: 2vh;
            background: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=80') no-repeat center center/cover;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(5, 16, 58, 0.75);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding-top: 150px;
            padding-bottom: 150px;
            color: #fff;
        }

        .hero-title {
            font-size: 48px;
            font-weight: 700;
            line-height: 1.3;
        }

        .hero-sub {
            font-size: 20px;
            margin-bottom: 30px;
            max-width: 600px;
        }

        .gap-text {
            margin-bottom: 15px;
            display: block;
            letter-spacing: 2px;
            font-weight: 600;
            color: #d8d8d8;
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 32px;
            }
            .hero-sub {
                font-size: 16px;
            }
        }




        .profile-card {
            background: #ffffff;
            border-radius: 13px;
            overflow: hidden;
            box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
            transition: 0.3s;
        }

        .profile-card:hover {
            transform: translateY(-8px);
        }

        .cover-img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .profile-img {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            border: 5px solid #ffffff;
            margin-top: -55px;
            object-fit: cover;
        }

        .social-icons i {
            font-size: 18px;
            margin: 0 8px;
            color: #1a1a1a;
            transition: 0.3s;
            cursor: pointer;
        }

        .social-icons i:hover {
            color: #0d6efd;
            transform: scale(1.2);
        } 




         .title {
            font-size: 40px;
            font-weight: 600;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 10px;
        }

        .divider {
            width: 120px;
            height: 3px;
            background: #000;
            margin: 0 auto 40px;
        }

        .image-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .text-box {
            padding: 30px;
            background: #fff;
            text-align: center;
        }

        .text-box h4 {
            font-weight: 600;
            margin-bottom: 15px;
        }

        .text-box p {
            font-size: 14px;
            color: #444;
            margin-bottom: 10px;
        }

        .learn-btn {
            border: 1px solid #000;
            padding: 8px 25px;
            font-size: 14px;
            background: transparent;
            transition: 0.3s;
            margin-top: 8px;
        }

        .learn-btn:hover {
            background: blue;
            color: #fff;
        }

        .grid-box {
            background: white;
            border-radius: 4px;
            overflow: hidden;
            transition: 0.3s;
        }

        .grid-box:hover {
            transform: scale(1.02);
            box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
        }

        
        /* Card wrapper - prevents stretch */
        .card-wrapper {
            width: 100%;
            padding-bottom: 50px;
            max-width: 430px;
            margin: auto;
        }

        /* Credit Card */
        .credit-card {
            width: 100%;
            border-radius: 18px;
            padding: 28px;
            background: #000 url("https://www.transparenttextures.com/patterns/black-paper.png");
            background-size: cover;
            aspect-ratio: 16/9;
            color: white;
            position: relative;
            overflow: hidden;
            transition: .35s;
        }

        .credit-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 40px rgba(0,0,0,0.35);
        }

        /* Chip */
        .card-chip {
            width: 55px;
            height: 40px;
            border-radius: 8px;
            background: linear-gradient(135deg, #d9c378, #b59145);
            position: absolute;
            top: 25px;
            right: 25px;
            box-shadow: inset 0 0 5px rgba(0,0,0,.5);
        }

        /* Brand Logo */
        .brand {
            position: absolute;
            top: 22px;
            left: 20px;
            display: flex;
            align-items: center;
        }

        .mc-circle {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }

        .red { background: #e60000; }
        .yellow { background: #ffbe00; margin-left: -10px; }

        /* Card Number */
        .card-number {
            font-size: 1.45rem;
            letter-spacing: 3px;
            margin-top: 75px;
        }

        .label {
            font-size: .75rem;
            text-transform: uppercase;
            color: #bbbbbb;
        }

        .value {
            font-size: 1.2rem;
            font-weight: 600;
        }

        .info-row {
            margin-top: 25px;
        }

        /* 🔥 PERFECT FIX — 750px to 1450px → 2 per row */
        @media (min-width: 750px) and (max-width: 1450px) {
            .col-lg-4, .col-md-6 {
                flex: 0 0 50% !important;
                max-width: 50% !important;
            }

            .card-wrapper {
                max-width: 420px !important;
            }

            .credit-card {
                aspect-ratio: 16/9.4;
                padding: 26px;
            }

            .card-number {
                font-size: 1.35rem;
            }
        }

        /* Mobile optimization */
        @media (max-width: 576px) {
            .credit-card {
                padding: 22px;
                aspect-ratio: 16/10;
            }

            .card-number {
                font-size: 1.25rem;
            }
        }



        
        footer {
            background: #111;
            padding: 60px 0 20px;
        }

        .footer-logo {
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .footer-slogan {
            color: #b3b3b3;
            font-size: 14px;
            margin-top: -6px;
        }

        .footer-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #ffffff;
        }

        .footer-links a {
            display: block;
            font-size: 14px;
            color: #b3b3b3;
            margin-bottom: 6px;
            text-decoration: none;
            transition: 0.2s;
        }

        .footer-links a:hover {
            color: white;
            padding-left: 2px;
        }

        .footer-divider {
            width: 100%;
            height: 1px;
            background: #333;
            margin: 40px 0 30px;
        }

        .social-icons a {
            width: 38px;
            height: 38px;
            background: white;
            border-radius: 50%;
            border: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 6px;
            color: white;
            transition: .3s;
        }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

        .copyright {
            margin-top: 15px;
            font-size: 13px;
            color: #b3b3b3;
        }

        /* Responsive Tweaks */
        @media (max-width: 768px) {
            footer {
                text-align: center;
            }
            .social-icons {
                justify-content: center !important;
            }
        }



          .banner-section {
            width: 100%;
            overflow: hidden;
        }

        .banner-img {
            width: 100%;
            height: 60vh;
            object-fit: cover;
            border-radius: 12px;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .banner-img {
                height: 35vh;
            }
        }



        /* ---------- FULL SCREEN BLACK OVERLAY (REMOVE IF NOT NEEDED) ---------- */
        .overlay-full {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.0); /* Removed, only hero overlay needed */
            z-index: 1;
        }

        /* Hero Banner */
        .hero-section {
            background: url("image/a3.jpg") center/cover no-repeat;
            height: 100vh;
            position: relative;
            color: white;
        }

        /* ---------- HERO IMAGE OVERLAY ---------- */
        .hero-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.55); /* Dark black coat */
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 3; /* Above overlay */
            padding-top: 150px;
        }

        /* Buttons */
        .btn-gradient {
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            border: none;
            padding: 10px 22px;
            text-decoration: none;
            color: white;
            border-radius: 40px;
            font-weight: 600;
        }

        .btn-outline {
            border: 2px solid white;
            padding: 10px 22px;
            color: white;
            border-radius: 40px;
            font-weight: 600;
        }

        /* Navbar */
        .navbar-custom {
            position: absolute;
            width: 100%;
            padding: 15px 0;
            z-index: 30;
            background: transparent !important;
        }

        .navbar-nav .nav-link {
            font-weight: 500;
            color: white !important;
        }

        .btn-nav1 {
            border: 2px solid white;
            padding: 5px 18px;
            border-radius: 30px;
            color: white;
        }

        .btn-nav2 {
            padding: 5px 18px;
            border-radius: 30px;
            text-decoration: none;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            color: white;
            margin-left: 10px;
        }

        @media (max-width: 768px) {
            .hero-content {
                padding-top: 120px;
                text-align: center;
            }
        } 


        .overlay-full {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.0);
            z-index: 1;
        }

        /* Hero Section */
        .hero-section {
            background: url("image/a3.jpg") center/cover no-repeat;
            height: 100vh;
            position: relative;
            color: white;
        }

        /* Hero overlay */
        .hero-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.55);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 3;
            padding-top: 150px;
        }

        /* Buttons */
        .btn-gradient {
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            border: none;
            padding: 10px 22px;
            text-decoration: none;
            color: white;
            border-radius: 40px;
            font-weight: 600;
        }

        .btn-outline {
            border: 2px solid white;
            padding: 10px 22px;
            color: white;
            border-radius: 40px;
            font-weight: 600;
        }

        /* Navbar */
        .navbar-custom {
            position: absolute;
            width: 100%;
            padding: 15px 0;
            z-index: 30;
            background: transparent !important;
            
        }

        .navbar-nav .nav-link {
            font-weight: 500;
            color: white !important;
        }

        .btn-nav1 {
            border: 2px solid white;
            padding: 5px 18px;
            border-radius: 30px;
            color: white;
        }

        .btn-nav2 {
            padding: 5px 18px;
            border-radius: 30px;
            text-decoration: none;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            color: white;
            margin-left: 10px;
        }

        /* MOBILE STYLES */
        @media (max-width: 768px) {
            .hero-content {
                padding-top: 120px;
                text-align: center;
            }

            .hero-content .d-flex {
                justify-content: center !important; /* Buttons center */
            }

            /* Dropdown menu color */
            .navbar-collapse {
                background-color: #dd5f5f; /* gray background */
                padding: 15px;
                border-radius: 10px;
            }

            .navbar-nav .nav-link {
                color: white !important;
                margin: 5px 0;
            }

            /* Navbar background on mobile */
            .navbar-custom {
 background: #dd5f5f;            }
        }