.msec {
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #f8f9fa;
        color: #333;
    }

    /* Navbar */
    .navbar-brand img.logo {
        max-height: 50px;
        object-fit: contain;
    }

    .nav-link {
        font-weight: 500;
        color: black;
        transition: color 0.3s ease;
    }

    .nav-link:hover,
    .nav-link.active {
        color: #107fc2 !important;
        font-weight: 600;
    }

    /* a {
        color: #107fc2 !important;
      } */

    .cont-btn {
        background-color: #107fc2;
        color: #fff !important;
        padding: 8px 20px !important;
        border-radius: 25px;
        font-weight: 600;
        transition: background-color 0.3s ease;
        text-decoration: none;
    }

    .cont-btn:hover {
        background-color: #0056b3;
        color: #fff !important;
        text-decoration: none;
    }

    /* Carousel */
    .slider-top img {
        max-height: 450px;
        object-fit: cover;
        width: 100%;
    }

    /* Section Titles */
    h2.section-title {
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: #202122;
        text-align: center;
    }

    h4 {
        color: #107fc2;
    }

    /* About Section */
    #about {
        /* padding: 1rem 1rem; */
        /* background: #fff; */
    }

    /* PM WANI Ecosystem Section */
    #ecosystem {
        background: #fff;
        /* padding: 1rem 1rem; */
    }

    #ecosystem .ecosystem-card {
        border-radius: 12px;
        box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
        background: #f0f8ff;
        padding: 1.5rem;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: default;
    }

    #ecosystem .ecosystem-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
    }

    #ecosystem .ecosystem-card h5 {
        color: #107fc2;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

    #ecosystem .ecosystem-card p {
        font-size: 0.95rem;
        color: #444;
        margin: 0;
    }

    /* Wifi Plans */
    #plans .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 12px;
        border: none;
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
    }

    #plans .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
    }

    #plans .card-title {
        color: #107fc2;
        font-weight: 600;
    }

    .certifisec {
        .card-container {
            position: relative;
            cursor: pointer;

        }

        .card-content {
            transition: filter 0.3s ease;
        }

        .pdf-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-52%, -50%);
            font-size: 19px;
            color: #252222;
            opacity: 0;
            pointer-events: none;
            z-index: 2;
            transition: opacity 0.3s ease;
            font-weight: 600;
            background: white;
            padding: 6px 12px;
            border-radius: 12px;
        }

    }

    .card-container:hover .card-content {
        filter: blur(1px);
    }

    .card-container:hover .pdf-icon {
        opacity: 1;
        pointer-events: auto;
    }


    /* Offer Section */
    #offer {
        background: #e9f0ff;
        padding: 1rem 1rem;
    }

    #offer .offer-item {
        text-align: center;
        padding: 1.5rem;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 6px rgb(0 0 0 / 0.1);
        margin-bottom: 1.5rem;
    }

    #offer .offer-item h5 {
        color: #107fc2;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

    #our-offering {
        padding: 1rem 1rem;
    }

    #our-offering .nav-tabs .nav-link.active {
        color: #107fc2 !important;
        background: #d8ecfb;
    }

    #our-offering .nav-tabs .nav-link {
        color: black !important;
    }

    #our-offering .tab-card {
        border: none !important;
        margin-top: 38px;
        background-color: #94c3f22e;
    }

    /* FAQ */
    #faq-section {
        padding: 2rem 1rem;
        background: #f8f9fa;
    }

    .accordion-button:not(.collapsed) {
        color: #107fc2;
        background-color: #e9f0ff;
    }

    #faq-section .accordion-item {
        margin-bottom: 20px;
        border: 0;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    /* Footer */
    footer {
        background: #212529;
        color: #adb5bd;
        padding: 0.5rem 1rem;
        text-align: center;
        font-size: 0.9rem;
    }

    .overcard {
        transition: transform 0.3s ease;
    }

    .overcard:hover {
        transform: scale(1.02);
        /* slight zoom on hover */
    }

    .card-title {
        text-align: center;
        color: #107fc2;
        font-weight: 600;
        font-size: 20px;
    }

    .shadow-sm1 {
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border: none;

    }

    #ecosystem {
        .card-title {
            color: #107fc2;
            font-weight: 600;
        }
    }

    .w-84 {
        width: 83%;
    }

    /* Responsive fixes */
    @media (max-width: 576px) {
        #plans .card-body {
            padding: 1rem;
        }
    }

    @media (min-width: 992px) {
        .navbar-expand-lg .navbar-nav .nav-link {
            padding-right: 15px;
            padding-left: 15px;
        }
    }

    .main-footer ul {
        display: block;justify-content: center;
    
    }
    
    .main-footer ul li {
        display: block;
        color: var(--text-white);
        font-size: 15px;
        font-weight: 400;
        font-family: var(--primary-font);
        text-transform: uppercase;
        margin: auto 0;
        position: relative;
        padding: 8px;
    
    }
    
    .main-footer ul li a {
        color: var(--text-white);
        text-decoration: none;
    }
    
    .main-footer ul li a:hover {
        color: var(--primary-text);
    }
    ol, ul, dl {
        margin-top: 0;
        margin-bottom: 0;
    }

    .model-popup{
        margin-top: 0px;
    }
    .model-popup .modal-header{
        display:block;
        border-bottom: none;
    }
    .model-popup .modal-header h2{
        text-align: center;
        margin-top: 1.5rem;
    }
}