@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: Arial, Helvetica, sans-serif; */
}


html {
-webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', sans-serif; /* Simpler is often better if you want consistency */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

 background: #fff;
}



/* body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif;
} */

.mccq-announcement-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1AFFAB;
    padding: 10px 16px;
    max-width: 100%;
    position: sticky;
    top: 76px;
    z-index: 999;
}

/* html,
body {
    font-family: 'Inter'

} */

a.abt-banner {
    text-decoration: none;
}

span.mccq-announcement-arrow a {
    text-decoration: none;
    color: #121212;
}


p.meta-nav {
    color: #121212;
    padding: 11px 14px;
    border-radius: 45px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 14px;
    width: 165px;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
    border: 1px solid;
}


/* wrapper for marquee */
.ancmntbr {
    flex: 1;
    /* takes remaining space */
    overflow: hidden;
    /* 🔥 CLIPS before arrow */
    position: relative;
}

/* moving marquee */
.mccq-announcement-marquee {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: marquee-left-right 18s linear infinite;
}

.newsletter-box input {
    width: 100%;
    padding: 0px 20px;
}

/* text */
.mccq-announcement-link {
    white-space: nowrap;
    color: #121212;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

/* arrow */
.mccq-announcement-arrow {
    flex-shrink: 0;
    /* 🔥 prevents overlap */
    font-size: 20px;
    cursor: pointer;
}

@keyframes marquee-left-right {
    from {
        transform: translateX(50%);
    }

    to {
        transform: translateX(0);
    }
}



/* Mobile */
@media (max-width: 768px) {
    .mccq-announcement-bar {
        top: 65px;
    }

    .mccq-announcement-link {
        font-size: 13px;
        line-height: 1.4;
    }



}



.page-id-16 .testimonials,
.page-id-18 .testimonials {
    display: none !important;
}

.nav-menu ul li.active>a {
    color: #2563eb;
    font-weight: 600;
}

.nav-menu ul li.active>a::after {
    content: '';
    display: block;
    height: 2px;
    background: #2563eb;
    margin-top: 4px;
}



.site-header {
    width: 100%;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;
}

.container {
    max-width: 1400px;
    margin: auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
}

.social-icons.mobile-soci-icons {
    display: none;
}





/*-----annimation nac2 -----start-----*/


/* ===== STICKY SECTION ===== */
.mccQb-section {
    height: 400vh;
    position: relative;
}


.mccQb-inner {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    height: 100vh;
    display: grid;
    grid-template-columns: 30% 22% 1fr;
    gap: 55px;
    padding: 120px 80px 120px;
    box-sizing: border-box;
    background: #F7F8F9;
will-change: transform;
}

.mccQb-left a {
    display: inline-block;
    background: #ffcc00;
    color: #000;
    font-weight: 600;
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    margin-top: 25px;
}

/* LEFT */
.mccQb-left h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.mccQb-left p {
    font-size: 18px;
    line-height: 1.6;
}

/* CENTER IMAGE */
.mccQb-center {
    display: flex;
    justify-content: center;
}

.mccQb-center img {
    transition: opacity 0.3s ease;
	height: 95%;
}

/* RIGHT TEXT */
.mccQb-right {
    overflow: hidden;
    height: auto;
}

.mccQb-track {
    transition: transform 0.3s ease;
will-change: transform;
}

.mccQb-text-block h3 {
    font-size: 28px;
    margin-bottom: 10px;
}

/* ===== PROGRESS BAR (FIXED) ===== */
.progress-wrapper {
    position: absolute;
    bottom: 10px;
    right: 80px;
    width: 36%;
    padding: 4px 10px;
    background: #fff;
    border-radius: 4px;
}
.mccQb-text-block h3,
p.support-desc,
.mccQb-text-block strong,
.mccQb-text-block li,
.mccQb-text-block p,
.solutions-header {
    opacity: 0.5;
}

.mccQb-text-block.active h3,
.mccQb-text-block.active p.support-desc,
.mccQb-text-block.active strong,
.mccQb-text-block.active li,
.mccQb-text-block.active p,
.mccQb-text-block.active .solutions-header {
    opacity: 1;
}


.progress-line {
    position: relative;
    height: 8px;
    background: #E5E5E5;
    margin-bottom: 5px;
    border-radius: 8px !important;
    overflow: auto;
}

.progress-fill {
    position: absolute;
    height: 100%;
    width: 0%;
    background: #2b5cff;
    transition: width 0.4s ease;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
}

.progress-steps span {
    font-size: 16px;
    opacity: 0.3;
    transition: opacity 0.3s ease, color 0.3s ease;
    font-style: italic;
    font-weight: 600;
}


.progress-steps span.active {
    opacity: 1;
    color: #2b5cff;
}



/*--------End NAC end ----------*/



.scroll-feature {
    height: 300vh;
    /* Controls scroll duration */
    position: relative;
    background: #fff;
}

.scroll-feature__inner {
    position: sticky;
    position: -webkit-sticky;
top: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 80px;
    box-sizing: border-box;
}

/* LEFT PHONE */
.scroll-feature__left {
    display: flex;
    justify-content: center;
}

/* RIGHT TEXT */
.scroll-feature__right {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.scroll-text-window {
    height: 500px;
    /* Default desktop height */
    overflow: hidden;
    position: relative;
}

.scroll-text-track {
    transition: transform 0.4s ease;
}



.scroll-text-block.is-active {
    opacity: 1;
}

.scroll-text-block h3 {
    font-size: 28px;
    margin-bottom: 12px;
}

/* PROGRESS BAR */
.scroll-progress {
    /* Removed absolute positioning */
    width: 100%;
    max-width: 300px;
    /* Optional constraint */
    margin-top: 40px;
    /* Ensure it's visible */
    position: relative;
}

.scroll-progress-line {
    height: 3px;
    background: #ddd;
    position: relative;
    margin-bottom: 10px;
}

.scroll-progress-fill {
    height: 100%;
    width: 0%;
    background: #2b5cff;
    transition: width 0.3s ease;
}

.scroll-progress-steps {
    display: flex;
    justify-content: space-between;
}

.scroll-progress-steps span {
    opacity: 0.4;
    font-weight: 600;
}

.scroll-progress-steps span.active {
    opacity: 1;
    color: #2b5cff;
}



.scroll-text-block-wrapper {
		display:none;
	}
	

/* RESPONSIVE */
@media (max-width: 900px) {

	.hide-sm{
	display:none;
	}

    .scroll-feature__inner {
        grid-template-columns: 1fr;
        /* Ensure wrapper is tall enough to stick */
        height: 90vh;
        padding: 20px;
        /* Re-assert sticky */
        position: sticky;
 position: -webkit-sticky;
        top: 10vh;
    }

    .scroll-feature {
        height: calc(100vh * 4);
    }

    .scroll-feature__left {
        display: none;
    }

    .scroll-feature__right {
        height: 90vh;
        position: relative;
        padding: 0px;
        overflow: hidden;
    }

/*     .scroll-text-window {
        height: calc(100vh - 100px);
        width: 100%;
        margin-top: 20px;
    }
 */

.scroll-text-window {
        height: calc(100vh - 120px); /* Keep the window fixed */
        overflow: hidden; 
    }


	.scroll-text-block-wrapper {
		padding: 20px;
		margin-top: 20px;
		display:block;

overflow: visible !important;
    height: auto;
    position: relative;

	}



/* 1. mobile CSs */
.scroll-text-block {
 
    height: auto; 
    align-self: flex-end; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    opacity: 1;
    
    
    background: linear-gradient(to bottom, #f5f5f5 42.86%, #FFFFFF 100%);
    border-radius: 10px;
    border: 1px solid #00000014;
    border-top: 2px solid #eebe00;
    margin-bottom: 20px; /* Increased for better spacing between stacked cards */

height: auto !important; /* Forces the card to only be as tall as its content */
    overflow: visible !important; /* Sticky won't work if this is hidden */
    min-height: 0 !important;
    display: flex;
    flex-direction: column;


    position: -webkit-sticky;
    position: sticky;
    align-self: flex-start;
    
    /* Default top: Header height (120px) + Gap (10px) */
    top: 130px; 
    
    margin-bottom: 20px;
    height: auto !important;
    transition: top 0.2s ease-out;
    will-change: top;
  }

  /* Applied when JS detects the card is taller than the viewport */
  .scroll-text-block.is-tall-card {
    top: var(--sticky-offset);
}
	



.scroll-text-block:nth-child(1) { z-index: 1; }
.scroll-text-block:nth-child(2) { z-index: 2; }
.scroll-text-block:nth-child(3) { z-index: 3; }
.scroll-text-block:nth-child(4) { z-index: 4; }

    .scroll-text-block::-webkit-scrollbar {
        display: none;
    }

    .scroll-progress {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 10px 0px;
        z-index: 10;
        background: white;
        right: 0px;
        max-width: 100%;
    }
}






/*----crash-annimation-----*/



.feature {
    padding: 72px 20px;
    /* Ensure opaque background */
    position: relative;
    z-index: 1;
}

.feature__wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 44px;
    align-items: start;
}

/* LEFT PHONE */
.phone {
    width: min(280px, 92vw);
}


.phone__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: opacity .25s ease, transform .25s ease;
}

.phone__screen img.is-switching {
    opacity: .2;
    transform: scale(1.03);
}

/* RIGHT */
.feature__title {
    margin: 0 0 18px;
}

.accordion {
    /* Removed border and background */
    background: transparent;
    /* Removed fixed height to allow large text to flow naturally */
    position: relative;
    margin-bottom: 20px;
}

/* each item behaves like "row" */
.acc-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 5px 18px;
    cursor: pointer;
    display: block;

    /* Removed border-bottom */
    transition: background .2s ease, opacity .2s ease;
}

.acc-body p,
.acc-body span,
.acc-body li {
    font-family: 'Inter';
    font-size: 16px;
    color: #121212;
    font-weight: 400;
}

.acc-item:last-child {
    border-bottom: 0;
}

.acc-head {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.acc-index {
    display: inline-flex;
    min-width: 34px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}

.acc-body {
    display: block;
    margin-top: 10px;
    color: #374151;
    line-height: 1.6;

    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: all 0.35s ease-out;
}

/* Custom Typography Classes */
.text-kicker {
    text-transform: uppercase;
    margin-top: 25px;
    margin-bottom: 5px;
}

.text-subhead {
    margin: 0 0 16px 0;
}

/* Main Accordion Title */


.acc-body ol {
    margin-top: 16px;
}

.acc-body li {
    margin-bottom: 8px;
}

/* Active item */
.acc-item.is-active {
    background: transparent;
    /* Removed background color */
}

/* Ensure content displays correctly */
.acc-item.is-active .acc-body {
    opacity: 1;
    max-height: 800px;
    /* Increased max-height for new content */
    padding-right: 10px;
}

.acc-item.is-active .acc-index {
    color: var(--text);
    border-color: var(--text);
}

.support-header {
    max-width: 1200px;
    margin: 0 auto;
}

/* Faded items */
.acc-item.is-faded {
    opacity: 0.4;
}

.acc-item.is-faded:hover {
    opacity: 0.8;
}

.acc-head {
    padding-bottom: 8px;
    /* added spacing */
}

.acc-text {
    font-size: 26px;
    font-weight: 700;
    font-family: 'Inter';
    line-height: 36px;
    color: #787878;
    margin-bottom: 0px;
}

.acc-item {
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

/* Responsive */
@media (max-width: 900px) {
    .feature__wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .accordion {
        height: auto;
    }

    .acc-item {
        padding: 0;
    }

    .feature__left {
        display: none;
    }





}

/* HERO SECTION */
.hero {
    height: 100vh;

}

/* The Sidebar (Phone) sticks, the Content (Accordion) scrolls */
.feature__left {
    position: sticky;
    top: 5vh;
    /* Center-ish vertical offset */
    height: fit-content;
    align-self: start;
    z-index: 10;
}

/* Title scrolls naturally now */
.feature__title {
    position: relative;
    /* Was sticky, now relative */
    z-index: 5;
}

/* On mobile, reset sticky */
@media (max-width: 900px) {
    .feature__left {
        position: relative;
        top: 0;
    }

    .feature__title {
        position: relative;
        top: 0;
    }

    .support-header {
        max-width: 100%;
        padding: 0px 0px 15px;
    }

    .feature {
        padding: 0px 20px;
    }


}



.acc-item.is-active span.acc-text {
    color: #121212;
}

.text-kicker {
    font-size: 20px;
    color: #121212;
    font-weight: 200;
}

.text-subhead {
    margin: 0px 0 6px;
    font-size: 18px;
    color: #121212;
    font-family: 'Inter';
    font-weight: 700;
}




/*---------------end crash annimation--------*/






/*---annimation start---*/


.mccQbank-right {
    margin-top: -70px;
}

/* SECTION — MUCH TALLER */


.mccqbank-inner {
    display: flex;
    min-height: 160vh;
    padding: 150px 0px 0px;
    gap: 80px;
    width: 1200px;
    margin: 0 auto;
}


/* LEFT IMAGE — STICKY LONGER */
.mccQbank-left {
    width: 35%;
    position: sticky;
    position: -webkit-sticky;
    top: 35%;
    transform: translateY(-20%);
    height: fit-content;
}

.mccQbank-left img {
    width: 100%;
    max-width: 280px;
}

/* RIGHT TEXT — MORE SPACING */
.mccQbank-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 🔥 MORE GAP BETWEEN TEXT */
}

/* TEXT STATES */
.mccQbank-text {
    font-size: 28px;
    /* 🔥 BIGGER TEXT */
    line-height: 1.4;
    opacity: 0.15;
    /* faded */
    transition: opacity 0.35s ease;
}

.mccQbank-text.center {
    opacity: 1;
    transform: translateY(-10px);
    /* highlighted */
}

.mccQbank-right p,
.mccQbank-right li {
    font-size: 16px;
    font-family: 'Inter';
    color: #121212;
    font-weight: 400;
    line-height: 26px;
}

.mccq-heading {
    width: 1200px;
    margin: 0 auto;
}


.mccq-heading h4 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'Inter';
    margin-bottom: 10px;
}

span.gray-text {
    color: #787878;
}

.mccq-heading p {
    font-size: 16px;
    color: #121212;
    font-weight: 400;
    line-height: 26px;
    margin-top: 10px;
    width: 70%;
}


.mccq-heading h4 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'Inter';
    margin-bottom: 10px;
}

.mccQbank-text h4 {
    font-size: 26px;
    font-weight: 700;
    font-family: 'Inter';
    margin-bottom: 10px;

}

.mccQbank-text h5 {
    FONT-WEIGHT: 400;
    font-size: 20px;
    line-height: 26px;
    font-family: 'Inter';
    margin: 25px 0px 10px;
}

.mccQbank-text li {
    list-style: none;
    margin: 10px 0px;
}

.mccQbank-text h6 {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    font-family: 'Inter';
    margin-bottom: 10px;
}


.mccQbank-left {
    position: sticky;
    position: -webkit-sticky;
    top: 35%;
    transform: translateY(-14%);
}

/* stack images in same place 
.mccQbank-left img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 280px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mccQbank-left img.active {
  opacity: 1;
}
*/


/* MAIN SECTION */
.mccQbank-section {
    position: relative;
}



/* LEFT IMAGE */
.mccQbank-left {
    width: 35%;
    position: sticky;
    position: -webkit-sticky;
    top: 30%;
}

.mccQbank-left.release {
    position: relative;
    top: auto;
}

.mccQbank-left img {
    width: 100%;
    max-width: 280px;
    display: block;
}

/* RIGHT TEXT */

.mccQbank-text {
    opacity: 0.15;
    transition: opacity 0.35s ease;
}

.mccQbank-text.center {
    opacity: 1;
}


.mccQbank-left {
    display: flex;
    justify-content: center;
}

.mccQbank-left img:not(#stickyImage) {
    display: none !important;
}



/*-----annimation end here----*/







/* Logo */
.logo img {
    height: 40px;
}

nav.nav-menu {
    margin: auto 33px auto 209px;
}

/* Navigation */
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 22px;
}

.nav-menu a {
    text-decoration: none;
    font-size: 15px;
    color: #121212;
    font-weight: 500;
    padding-bottom: 6px;
    position: relative;
}


.mccq-hero-media {
    border-radius: 15px;
    overflow: auto;
}

/* Active menu */
.nav-menu li.active a {
    color: #1a4cff;
}

.nav-menu li.active a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #1a4cff;
    left: 0;
    bottom: 0;
}

/* Login Button */
.login-btn {
    background: #ffc107;
    color: #121212;
    padding: 15px 36px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 14px;
}

.login-btn:hover {
    background: #ffb300;
}

/* Mobile menu icon */
.mobile-menu-icon {
    display: none;
    font-size: 26px;
    cursor: pointer;
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: #21f7b5;
    padding: 24px;
    transform: translateX(100%);
    transition: 0.3s ease;
    z-index: 999;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Mobile Header */
.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-header img {
    height: 24px;
}

.close-btn {
    font-size: 24px;
    cursor: pointer;
}

/* Links */
.mobile-links {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mobile-links a {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    margin-bottom: 18px;
}

.mobile-links a.active {
    color: #1a4cff;
    border-left: 3px solid #1a4cff;
    padding-left: 10px;
}

/* Bottom Section */
.mobile-bottom {
    background: #2f5be7;
    margin: 40px -24px -24px;
    padding: 30px 24px;
    color: #fff;
}

.mobile-bottom h3 {
    font-size: 22px;
    margin-bottom: 16px;
    font-weight: 300;
}

.mobile-bottom .login-btn {
    display: inline-block;
    margin-bottom: 42px;
}

.policy-links a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 15px;
}

.mobile-bottom p {
    font-size: 15px;
    margin-top: 20px;
}

/* Responsive rules */
@media (max-width: 992px) {
    .container {
        justify-content: space-between;
    }

    .nav-menu,
    .header-btn {
        display: none;
    }

    .mobile-menu-icon {
        display: block;
    }
}

.site-footer {
    background: #2f5be7;
    color: #fff;
    padding: 60px 24px 30px;
    margin-top: 15px;
}

/* TOP SECTION */
.footer-top {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-top h2 {
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 24px;
}

.trial-btn {
    background: #ffc107;
    color: #121212;
    padding: 17px 28px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}

.newsletter-title {
    font-size: 17px;
    margin-bottom: 12px;
}

.footer-top-right {
    justify-items: end;
}

.newsletter-box {
    display: flex;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    width: 381px;
}

.footer-top h2 {
    font-size: 40px;
    margin-bottom: 39px;
}

.newsletter-box button {
    height: 43px;
    background: #ffc107;
    width: 52px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 39px;
    margin-right: 1px;
    border: none;
    margin-top: 1px;
}

.newsletter-box input {
    border: 0px;
}

.more-info {
    display: block;
    margin: 25px 0 60px 0px;
    color: #fff;
    font-size: 15px;
}



/*-----NAC annimation------*/

/* Spacer before section */
.spacer {
    height: 100vh;
}

/* Scroll wrapper gives scroll length */
.pin-wrapper {
    height: 300vh;
    position: relative;
}

/* Pinned section */
.mccQ-sup-inner {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: #fff;
    width: 1300px;
    margin: 0 auto;
}

.pin-section.pinned {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* LEFT IMAGE */
.left {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}

.left img {
    width: 280px;
    transition: opacity 0.3s ease;
}

/* RIGHT CONTENT */
.right {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-block {
    display: none;
    font-size: 28px;
    line-height: 1.4;
}

.text-block.active {
    display: block;
}

/* PROGRESS STEPS */
.steps {
    position: absolute;
    bottom: 40px;
    right: 60px;
    display: flex;
    gap: 20px;
}

.step {
    font-size: 16px;
    opacity: 0.3;
    position: relative;
}

.step::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 3px;
    background: black;
    transition: width 0.3s ease;
}

.step.active {
    opacity: 1;
}

.step.active::after {
    width: 100%;
}

/* Spacer after section */
.spacer-bottom {
    height: 100vh;
}



/*------end NAC annimation-------*/

/*------NAC annimation 2---*/


/*----NAC annimation 2end----*/







.store-buttons img {
    height: 40px;
    width: 134px;
    margin-right: 10px;
}

.hrline hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 40px auto;
    /* 👈 centers it */
    max-width: 1200px;
    width: 100%;
}

/* MAIN FOOTER */
.footer-links.fl {
    align-content: center;
    padding-top: 34px;
}

.footer-links {
    align-content: flex-end;
}

.footer-main {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-brand img {
    height: 40px;
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    padding-right: 61px;
    font-weight: 400;
}

.footer-brand .social-icons a img {
    margin: 0px;
    width: 32px;
    height: 32px;
}

.footer-brand .social-icons {
    display: flex;
}

.social-icons a {
    width: 36px;
    height: 36px;
    color: #2f5be7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    font-weight: 700;
}

.footer-links h4 {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.footer-links a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 16px;
}

/* BOTTOM */
.footer-bottom {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    font-size: 14px;

}

.bottom-links a {
    color: #fff;
    text-decoration: none;
}

/* MOBILE */
@media (min-width: 768px) {
    .footer-top-left {
        width: 529px;
    }


}

@media (max-width: 768px) {
    .footer-top-right {
        justify-items: start;
    }

    .mccQbank-text h4,
    .mccq-heading h4 {
        font-size: 22px;
    }

    .pricing-section,
    .mccQbank-right {
        margin-top: 0px !important;
    }


    footer-brand img {
        width: 152px;
        height: 24px;
    }

    .footer-top-left h2 br {
        display: none;
    }

    .logo img {
        height: 24px;
    }

    .footer-main {
        gap: 15px;
        flex-wrap: wrap;
        display: flex;
    }

    .footer-links {
        width: 47%;
    }

    .footer-links.fl {
        padding-top: 0px;
    }

    .footer-top {
        flex-direction: column;
    }

    .footer-top h2 {
        font-size: 22px;
    }

    .newsletter-box {
        width: 100%;
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .doctor-card h4 {
        font-size: 18px;
        font-weight: 700;
        line-height: 38px;
    }

    .category-nac-osce,
    nav.navigation.post-navigation,
    div#comments {
        width: 100% !important;
        margin: 0 auto;
        padding: 30px 15px !important;
    }

    .category-nac-osce h1.entry-title {
        font-size: 22px !important;
    }

    .mccqbank-inner,
    .mccq-heading {
        width: 100%;
        padding: 20px;
        flex-flow: column;

    }

    .mccq-heading p,
    .mccQbank-right {
        width: 100%;
    }

    .mccQbank-left {
        display: none;
    }

    .mccQbank-text {
        opacity: 1;
    }

    .mccQbank-right {
        gap: 10px;
    }


}

/**faq**/
.faq-question span {
    color: #121212;
    font-size: 18px;
    font-weight: 590;
    line-height: 32px;
}

.faq-section {
    padding: 0px 20px;
    background: #fff;
    padding-bottom: 65px;

}

.faq-container {
    max-width: 1200px;
    margin: auto;
}

.faq-title {
    text-align: center;
    font-size: 42px;
    margin-bottom: 8px;
}

.faq-subtitle {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

.faq-item {
    border-bottom: 1px solid #e5e5e5;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 13px 0 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    text-align: left !important;
}

.faq-icon {
    font-size: 28px;
    font-weight: 300;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer p {
    padding-bottom: 16px;
    max-width: 1200px;
    font-size: 15px;
    line-height: 1.7;
    color: #121212;
    font-weight: 400;
}

/* ACTIVE */
.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-item.active .faq-icon {
    content: "−";
}

/* MOBILE */
@media (max-width: 768px) {
    .faq-title {
        font-size: 30px;
    }

    .faq-question {
        font-size: 18px;
    }

    .faq-answer p {
        font-size: 15px;
    }
}

/** testimonial section**/
.testimonials {
    /* Light background */
    color: #000;
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;
}

.label {
    letter-spacing: 2px;
    font-size: 16px;
    color: #121212;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.testimonials h2 {
    /* font-family: 'Inter', sans-serif; */
    font-size: 30px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 20px;
}

/* SLIDER CONTAINER */
.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: auto;
    position: relative;
    gap: 5px;
}

.slider-mask {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    /* Space for shadows */
}

.slider {
    will-change: transform;
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: max-content;
    /* Allow flex items to size naturally */
}

/* CARDS */
.card {
    background: #fff;
    color: #000;
    border-radius: 20px;
    padding: 40px;
    flex-shrink: 0;
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* font-family: 'Inter', sans-serif; */
}

.card.small {
    width: 416px;
    height: 552px;
    background: #F7F8F9;
}

.card.big {
    width: 400px;
    height: 552px;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    /* Reset padding for video card */
}

/* Card Content Styles */

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.quote {
    font-size: 20px;
    line-height: 1.6;
    color: #121212;
    font-weight: 500;
    flex-grow: 1;
    margin-bottom: 20px;
    font-family: 'Inter';
    margin-top: 20px;
}

/* SIGNATURES */
.signature {
    font-family: Shadows Into Light;
    font-size: 34px;
    color: #2f5be7;
    /* Blue signature color */
    margin: 0 0 5px;
    font-weight: 400;
}

.signature.text-white {
    color: #fff;
}

.university {
    font-size: 18px;
    color: #888;
    line-height: 1.4;
    display: block;
    font-style: italic;
}

.university.text-white {
    color: rgba(255, 255, 255, 0.8);
}

/* VIDEO CARD SPECIFIC */
.video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);*/
    border-radius: 20px;
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    padding: 40px;
}

.video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.play-btn {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.play-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
}

.play-icon {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 18px;
    padding-left: 4px;
    /* Optical adjustment */
}

/* NAV BUTTONS */
.nav {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav:hover {
    color: #000;
}

.slider-mask {
    scroll-behavior: smooth;
}

/* MOBILE */
@media (max-width: 900px) {
    .slider {
        gap: 15px;
    }

    .card.small {
        width: 300px;
    }

    .card.big {
        width: 320px;
    }
}

@media (max-width: 768px) {
    .signature {
        font-size: 34px;
    }

    .quote {
        font-size: 18px;
        margin-top: 5px;
    }

    section.testimonials.about-tt {
        padding-top: 0px;
    }

    .university {
        font-size: 16px;
    }

    .testimonials h2 {
        font-size: 23px;
        margin-bottom: 0px;
    }

    .testimonials {
        padding: 40px 20px 30px;
    }

    h2 {
        font-size: 28px;
    }

    .slider-container {
        flex-direction: column;
    }

    .slider-mask {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
    }

    .slider {
        gap: 20px;
        width: auto;
        /* Let it scroll */
    }

    .card {
        scroll-snap-align: center;
        width: 85vw !important;
        /* Full width on mobile */
        height: auto;
        min-height: 510px;
    }

    .nav {
        display: none;
    }
}

/* collab section*/
.collaborations {
    background: #fff;
    padding: 20px 20px;
    text-align: center;
}

.collaborations h2 {
    font-size: 40px;
    margin-bottom: 50px;
    color: #121212;
    font-weight: 700;
}

/* LOGO ROW */
.collab-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    flex-wrap: nowrap;
    /* IMPORTANT: stays horizontal */
}

/* LOGOS */
.collab-logos img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

/* MOBILE */

@media (max-width: 768px) {
    testimonials h2 {
        font-size: 22px;
    }

    .collaborations {
        padding: 20px 15px;
        max-width: 100%;
    }

    .collaborations h2 {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .collab-logos {
        gap: 25px;
        /* reduce spacing */
    }

    .collab-logos img {
        max-height: 31px;
        /* scale down logos */
    }
}

/*prep tools*/
.study-tools {
    background: #ffffff;
    padding: 40px 20px;
}

.study-wrapper {
    max-width: 1200px;
    margin: auto;
    background: #F7F8F9;
    border-radius: 30px;
    padding: 40px 50px;
    text-align: center;
}

.study-wrapper h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #121212;
}

.subtitle {
    font-size: 16px;
    color: #121212;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
}

.cta-btn {
    display: inline-block;
    background: #ffcc00;
    color: #121212;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 11px;
    font-size: 14px;
}

/* GRID */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* CARD */
.tool-card {
    text-align: center;
    border: 1px solid #E5E5E5;
    padding-top: 16px;
    border-radius: 13px;
}

.tool-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.tool-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* IMAGE CARD */
.tool-image {
    background: #f7f8f9;
    border-radius: 18px;
}

.tool-image img {
    width: 250px;
    height: auto;
    display: block;
    border-radius: 12px;
    float: right;
}

section.study-tools.mob-view {
    display: none;
}

/* MOBILE */
@media (max-width: 768px) {
    .tool-image img {
        width: 295px;
    }

    section.study-tools.mob-view {
        display: block;
    }

    section.study-tools.dektop-view {
        display: none;
    }

    .study-wrapper {
        padding: 15px 20px;
    }

    .study-wrapper h2 {
        font-size: 22px;
    }

    .subtitle {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        /* VERTICAL STACK */
    }

    .tool-card {
        text-align: center;
    }

    .mobile-menu-icon {
        background: #FFCB00;
        padding: 10px 8px;
        display: flex;
        border-radius: 8px;
    }

    .mobile-bottom h3 {
        font-weight: 700;
    }

}

/*our services*/
.our-services {
    padding: 47px 0;
    background: #fff;
    /* font-family: 'Inter', sans-serif; */
}

.container-services {
    max-width: 1200px;
    margin: auto;
    padding: 0 0px;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 30px;
}

.header-text {
    max-width: 600px;
}

.header-text h2 {
    font-size: 40px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 12px;
}

.header-text h2 span {
    color: #888;
    /* Gray for "Our" */
}

.header-text p {
    font-size: 16px;
    color: #121212;
    line-height: 1.5;
}

.services-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.our-services .btn {
    padding: 18px 24px;
    border-radius: 8px;
    /* Slightly rounded, not pill */
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    transition: opacity 0.3s;
}

.our-services .btn:hover {
    opacity: 0.9;
}

.btn.primary {
    background: #ffd700;
    /* Yellow */
    color: #121212;
    border-radius: 30px;
}

.btn.secondary {
    background: #eef4ff;
    /* Light Blue */
    color: #265DE5;
    /* Blue text */
    border-radius: 30px;
}

/* SERVICE GRID STYLES */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.service-col {
    border-right: 1px solid #e5e7eb;
}

.service-col:last-child {
    border-right: none;
}

.service-col h3 {
    background: #f9fafb;
    padding: 12px 24px;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    font-style: italic;
    border-bottom: 1px solid #e5e7eb;
}

.service-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-col ul li {
    padding: 12px 20px;
    font-size: 18px;
    color: #121212;
    border-bottom: 1px solid #e5e7eb;
    line-height: 32px;
    font-weight: 350;
}

.service-col ul li:last-child {
    border-bottom: none;
}

/* MOBILE SERVICES */

@media (max-width: 768px) {
    .service-col ul li {
        font-size: 16px;
    }

    section.sg-blog-section h2 {
        font-size: 22px !important;
        text-align: center !important;
        margin-block: 20px !important;

    }

    .news-inner {
        max-width: 100%;
        padding-block: 30px;
    }

    section.our-services a.btn.secondary {
        padding: 18px 37px;
    }

    .services-buttons {
        flex-direction: column;
    }

    .our-services {
        padding: 20px 24px;
    }

    .service-col h3 {
        font-size: 18px;
    }

    .header-text h2 {
        font-size: 22px;
    }

    .services-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-grid {
        grid-template-columns: 1fr;
        /* Stack vertically! */
        border-radius: 12px;
        border: 0px;
    }

    .service-col {
        border-right: none;
        border-bottom: 8px solid #f3f4f6;
        /* Separator between stacks */
    }

    .service-col:last-child {
        border-bottom: none;
    }

    .service-col {
        border-right: 1px solid #e5e7eb !important;
        border: 1px solid #e5e7eb !important;
        margin-bottom: 20px;
        border-radius: 20px;
        overflow: auto;
    }

    .comparison-table th {
        font-size: 18px !important;
    }

    .study-tools {
        padding: 15px 20px 30px;
    }

    .mob-l-left a {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

    .mobile-links a {
        margin: 25px 0px;
    }

    .mobile-links {
        margin-top: 0px;
    }

    .left-menu a {
        font-weight: 700 !important;
    }


}

/*bridge gap sectioon*/
.bridges-gap {
    padding: 40px 0;
    /* font-family: 'Inter', sans-serif; */
    background: #fff;
}

.gap-header {
    margin-bottom: 27px;
}

.gap-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #121212;
}

.gap-header h2 span {
    color: #888;
    /* Gray for "How" */
}

.gap-header p {
    color: #444;
    font-size: 16px;
}

.comparison-table-wrapper {
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    /* Verified from image */
    overflow: hidden;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e7eb;
}

/* Header Row */
.comparison-table thead tr {
    background: #f9fafb;
}

.comparison-table th {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
    color: #121212;
    line-height: 32px;
}

.comparison-table th.feature-col {
    text-align: left;
    width: 40%;
}

td.yes {
    border-right: 1px solid #E5E5E5;
}

th.brand-col {
    border-right: 1px solid #E5E5E5;
    border-left: 1px solid #E5E5E5;
}

.comparison-table td.feature-name {
    font-weight: 600;
    font-style: italic;
    color: #121212;
    font-size: 18px;
    padding-left: 24px;
    background-color: #F7F8F9;
}

.comparison-table td.yes,
.comparison-table td.no {
    text-align: center;
}

/* Remove last border */
.comparison-table tr:last-child td {
    border-bottom: none;
}

/* Icons */
.yes svg,
.no svg {
    display: block;
    margin: auto;
}

/* MOBILE GAP TABLE - COMPACT */
@media (max-width: 768px) {
    .bridges-gap {
        padding: 25px;
    }

    .study-wrapper h2 {
        margin-bottom: 6px;
    }

    .gap-header h2 {
        font-size: 22px;
    }

    .comparison-table-wrapper {
        border-radius: 12px;
        /* removed overflow-x to avoid slide if possible, fitting content */
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 6px;
        /* Reduced padding */
        font-size: 13px;
    }

    .comparison-table th.feature-col {
        width: 40%;
        /* Let feature take space */
    }

    .comparison-table td.feature-name {
        font-size: 16px;
        padding-left: 10px;
        line-height: 1.3;
    }

    /* Scale down icons */
    .yes svg,
    .no svg {
        width: 32px;
        height: 32px;
    }
}

/*status section*/
/* ---------- Stats Section ---------- */
.stats-section {
    padding: 37px 20px;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto 70px;
    background: linear-gradient(90deg, #1dffb3, #2cff9a);
    border-radius: 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 20px;
    text-align: center;
}

.stat-box h3 {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.stat-box p {
    font-size: 15px;
    color: #003b2a;
}

/* ---------- Problem Section ---------- */
.problem-section {
    padding: 37px 20px;
}

.problem-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #F7F8F9;
    border-radius: 24px;
    padding: 38px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
}

/* Left */
.problem-content h2 {
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #121212;
}

.problem-content h2 span {
    color: #7a7a7a;
    font-weight: 700;
}

.problem-desc {
    font-size: 16px;
    color: #555;
    line-height: 26px;
    margin-bottom: 17px;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 17px;
}

.problem-list {
    list-style: none;
    padding: 0;
}

.problem-list li {
    font-size: 16px;
    margin-bottom: 0px;
    padding-left: 18px;
    position: relative;
    line-height: 30px;
    color: #121212;
}

.problem-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 22px;
}

/* Right cards */
.problem-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.doctor-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    line-height: 22px;

}

.doctor-card img {
    object-fit: cover;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-position: top;
}

.doctor-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.doctor-card p {
    font-size: 15px;
    color: #121212;
    margin-bottom: 8px;
    font-weight: 500;
    line-height: 22px;
    font-style: italic;
}

p.hafiha {
    margin-bottom: 23px;
}

img.bilal-image {
    width: 121px;
}

.doctor-card a {
    font-size: 15px;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.doctor-card a img {
    width: auto;
    height: auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .trusted-section {
        padding: 22px 33px;
    }

    .trusted-container {
        flex-direction: column;
    }

    .stats-section {
        padding: 19px 20px;
    }

    .doctor-card {
        flex-direction: column;
    }

    .stat-box p {
        font-size: 16px;
        padding-inline: 13px;
    }

    .stat-box h3 {
        font-size: 26px;
    }

    .stats-container {
        grid-template-columns: 1fr 1fr;
        row-gap: 30px;
    }

    .problem-container {
        grid-template-columns: 1fr;
        padding: 25px 25px;
    }

    .problem-content h2 {
        font-size: 22px;
    }

    .stats-container {
        margin: 0 auto 50px;
    }


}

/* Trusted by students */
.trusted-section {
    padding: 32px 33px;
    overflow: hidden;
    max-width: 1300px;
    margin: auto;
}

/* Container */
.trusted-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Fixed text */
.trusted-text {
    min-width: 300px;
}

.trusted-text h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 8px;
}

.trusted-text p {
    font-size: 17px;
    color: #121212;
}

/* Slider wrapper */
.trusted-slider {
    width: 100%;
    overflow: hidden;
}

/* Track */
.trusted-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: fit-content;
    animation: scroll-logos 15s linear infinite;
}

.trusted-track img {
    height: 50px;
    width: auto;
    flex-shrink: 0;
    opacity: 0.9;
}

/* Animation */
@keyframes scroll-logos {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .trusted-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .trusted-text {
        min-width: auto;
        width: 100%;
        justify-items: center;
    }

    .trusted-text h2 {
        font-size: 24px;
    }

    .trusted-text p {
        font-size: 18px;
    }

    .trusted-slider {
        width: 100%;
    }

    .trusted-track {
        gap: 40px;
        animation-duration: 20s;
    }

    .trusted-track img {
        height: 38px;
    }

    section.scrl-sec {
        padding: 0px 20px;
    }

    .scroll-text-block h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .scroll-text-block h4.solutions-header {
        opacity: 1;
        font-weight: 400;
        margin: 10px 0px;
    }

    .scroll-progress-line {
        height: 8px;
        border-radius: 8px;
        overflow: auto;
    }

    .scroll-progress-steps span {
        opacity: 0.4;
        font-weight: 600;
        font-size: 16px;
        font-weight: 600;
        font-style: italic;
        font-family: 'Inter';
        color: #787878;
    }

    .scroll-progress-steps {
        margin-bottom: 10px;
    }

    .subscription-section {
        padding: 49px 20px 20px 20px;
    }



}


section.scrl-sec,
.scroll-feature {
    display: none;
}


.hero-slider {
    width: 100%;
    padding: 9px 20px;
}

/* Track */
.hero-slider .hero-slider-track {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    max-width: 1400px;
    height: 520px;
    margin: auto;
}

/* Slides */
.hero-slider .hero-slide.active {
    border-radius: 24px;
}

.hero-slider .hero-slide {
    position: absolute !important;
    inset: 0;
    background-image: url("images/Frame 13 (1).png");
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-position: center;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.9s ease, opacity 0.9s ease;
}

.hero-slider .hero-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.hero-slider .hero-slide.prev-slide {
    transform: translateX(-100%);
}

/* Content */
.hero-slider .hero-content {
    color: #fff;
    max-width: 900px;
    padding: 40px;
}

.hero-slider .hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
}

.hero-slider .hero-content h1 span {
    color: #34f5a3;
}

.hero-slider .hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: 400;
}

.hero-slider .hero-content button {
    background: #facc15;
    border: none;
    padding: 16px 36px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #121212;
}

/* Navigation */
.hero-slider .hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.hero-slider .hero-prev {
    left: -19px;
}

.hero-slider .hero-next {
    right: -19px;
}

/* Mobile */
@media (max-width: 768px) {
    .hero-slider .hero-slider-track {
        height: 270px;
    }

    .hero-slider .hero-content h1 {
        font-size: 22px;
        margin-bottom: 14px;
    }

    img.bilal-image {
        width: 70px;
    }

    .hero-slider .hero-content p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .hero-slider .hero-content button {
        padding: 12px 26px;
        font-size: 15px;
    }
}

/** MCCQE-1 css**/
/*banner*/
.mccq-hero {
    background: #ffffff;
    padding: 19px 20px;
}

.mccq-hero-inner {
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
    background: #F7F8F9;
    border-radius: 28px;
    padding: 50px;
}

/* Left content */
.mccq-hero-tag {
    font-size: 16px;
    color: #121212;
    display: block;
    margin-bottom: 14px;
}

.mccq-hero-content h1 {
    font-size: 62px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 15px;
}

.mccq-hero-content h1 span {
    color: #2563eb;
}

.mccq-hero-content p {
    font-size: 18px;
    color: #374151;
    margin-bottom: 25px;
}

.mccq-hero-btn {
    display: inline-block;
    background: #facc15;
    color: #121212;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

/* Right media */
.mccq-hero-media {
    position: relative;
    flex-shrink: 0;
}


.mccq-hero-media img {
    width: 472px;
    border-radius: 16px;
    height: 392px;
}

.mccq-play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .nac-challenges {
        padding: 55px 20px 0px !important;
    }

    .mccq-hero-inner {
        gap: 23px;
    }

    section.mccq-hero {
        padding-block: 20px;
    }

    span.mccq-hero-tag {
        font-size: 16px;
    }

    .mccq-hero-content p {
        font-size: 16px;
        line-height: 26px;
        padding-right: 24px;
        margin-bottom: 10px;
    }

    .mccq-hero-media {
        width: 100% !important;
        height: 200px !important;
    }

    a.mccq-hero-btn {
        font-size: 14px;
    }

    .mccq-hero-inner {
        flex-direction: column;
        padding: 30px 20px 20px 12px;
    }

    .mccq-hero-content h1 {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 7px;
    }

    .mccq-hero-media img {
        width: 100%;
        height: 232px;
    }

    .support-block {
        margin-bottom: 20px !important;
    }

    .pricing-card {
        padding: 20px !important;
    }

	.pricing-card:first-child {
		padding-bottom: 70px!important;
	}

    .pricing-box {
        gap: 20px !important;
    }

    .pricing-left p br {
        display: none;
    }


}

/*real challanges*/
.mccq-challenges {
    padding: 59px 20px;
    text-align: center;
}

.mccq-challenges h2 {
    font-size: 40px;
    margin-bottom: 35px;
    color: #121212;
    font-weight: 700;
}

.mccq-challenges h2 span {
    color: #787878;
    font-weight: 700;
}

.mccq-challenge-grid {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.challenge-card p {
    text-align: left;
    font-size: 18px;
    line-height: 32px;
}

.challenge-card {
    background: #f9fafb;
    border-radius: 24px;
    padding: 30px 20px;
    font-size: 16px;
    text-align: left;
}

.challenge-card img {
    margin-bottom: 8px;
    width: 40px;
}

@media (max-width: 768px) {

    section.mccq-challenges {
        padding-block: 0px;
    }

    .mccq-challenges h2 {
        font-size: 22px;
        text-align: left;
        line-height: 1.3;

    }

    .challenge-card p {
        font-size: 16px;
        line-height: 27px;
    }

    .mccq-challenge-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .challenge-card {
        padding: 20px 14px;
        font-size: 14px;
    }
}

/* MCCQ Support Section */
.mccq-support {
    padding: 35px 20px;
    background: #fff;
}

/* Header Container (Top) */
.mccq-support-header-container {
    max-width: 1300px;
    margin: 0 auto 50px auto;
}

.mccq-support-header-container h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #121212;
}

.mccq-support-header-container h2 span {
    color: #787878;
    font-weight: 700;
}

.mccq-support-intro {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    max-width: 700px;
}


/* LEFT: Image Wrapper (Sticky) */

.bundle-card.highlight {
    color: #ffffff !important;
}

.mccq-support-image img {
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    height: 592px;
}

/* RIGHT: Content */
/* RIGHT: Content */

.mccq-content-step .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    padding: 20px 0;
    position: relative;
}

.mccq-content-step .steps:after {
    background: #cdcdcd;
    position: absolute;
    top: 10px;
    width: 100%;
    height: 3px;
    content: "";
}

.mccq-support-image.story-left {
    text-align: center;
}

.mccq-content-step span.is-current {
    position: relative;
    color: #5e70e7;
}

.mccq-content-step span.is-current:after {
    content: "";
    background: #5e70e7;
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    top: -10px;
    z-index: 99;
}

.mccq-support-content {
    padding-top: 0;
    height: 100%;
    max-height: 584px;
    overflow: auto;
}

.mccq-support-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Support Blocks */
.support-block {
    margin-bottom: 43px;
    line-height: 26px;
}

.support-block h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}

.support-desc {
    font-size: 16px;
    color: #121212;
    line-height: 22px;
    margin-bottom: 30px;
}

.solutions-header {
    font-size: 20px;
    color: #121212;
    /* Gray header */
    font-weight: 500;
    margin-bottom: 15px;
}

/* Solution Items */
.solution-item {
    margin-bottom: 30px;
    line-height: 26px;
}



.solution-item strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.solution-item p.small {
    font-size: 16px;
    color: #121212;
    margin-bottom: 15px;
}

/* Numbered List Styling */
.numbered-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.numbered-list li {
    font-size: 16px;
    color: #121212;
    margin-bottom: 3px;
    display: flex;
    /* alignment */
    align-items: flex-start;
    line-height: 22px;
}

.num {
    /* font-family: monospace, sans-serif; */
    /* Monospace for alignment */
    color: #111;
    font-weight: 500;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Button */
.mccq-support-btn {
    display: inline-block;
    background: #facc15;
    color: #000;
    padding: 16px 36px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    margin-top: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {

    .support-block h3 {
        font-size: 22px;
        text-align: left;
    }

    .mccq-support-btn {
        font-size: 14px;
        margin-top: 0px;
    }

    .support-block h3 {
        font-size: 22px;
    }

    p.support-desc {
        line-height: 26px;
    }

    .mccq-support-header-container h2 {
        font-size: 22px;
        padding-right: 30px;
        margin-bottom: 5px;
    }

    .mccq-support-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mccq-support-image {
        display: none;
        position: relative;
        /* Unstick on mobile */
        top: 0;
        max-width: 300px;
        margin: 0 auto;
    }

    .mccq-support-content h2 {
        font-size: 30px;
    }

    .mccq-support-intro {
        font-size: 16px;
        margin-bottom: 5px;
    }
}

/*subscribe-plans*/
.pricing-section {
    padding: 0px 20px 20px 20px;
    margin-top: 0px;
}

.pricing-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* MAIN BOX */
.pricing-box {
    max-width: 1300px;
    margin: auto;
    background: #F7F8F9;
    border-radius: 28px;
    padding: 40px 40px;
    display: grid;
    grid-template-columns: 272px 1fr;
    gap: 40px;
    align-items: center;
}

/* LEFT */
.pricing-left h3 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 14px;
    font-weight: 700;
}

.pricing-left span {
    color: #787878;
    font-weight: 700;
}

.pricing-left p {
    font-size: 16px;
    color: #6b7280;
    line-height: 26px;
}

/* RIGHT */
.pricing-right {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* CARDS ROW */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pricing-card {
    background: #ffffff;
    padding: 28px 30px;
    border-radius: 22px;
}

.duration {
    font-size: 18px;
    color: #6b7280;
}

.pricing-card h4 {
    font-size: 24px;
    color: #2563eb;
    margin: 6px 0;
}

.note {
    font-size: 20px;
    color: #111;
    line-height: 26px;
}

/* BUTTON ROW */
.pricing-actions {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.pricing-actions .btn-outline {
    padding: 14px 30px;
    border-radius: 999px;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
}

.pricing-section .btn-primary {
    padding: 14px 62px;
    border-radius: 999px;
    background: #facc15;
    color: #000;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 768px) {
    .pricing-left h3 {
        font-size: 22px;
        text-align: center;
    }

    .pricing-left h3 br {
        display: none;
    }

    .pricing-left p {
        font-size: 16px;
        text-align: center;
    }

    p.duration {
        font-size: 16px;
    }

    .pricing-card em {
        font-size: 16px;
    }

    section.pricing-section {
        padding-block: 27px;
    }

    h2.pricing-title {
        font-size: 22px;
        /* text-align: left; */
    }

    .pricing-box {
        grid-template-columns: 1fr;
        padding: 20px 20px;
    }

    .pricing-left {
        text-align: left;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-actions {
        flex-direction: row;
        gap: 5px;
    }

    a.nac-btn {
        font-size: 14px;
    }

    .bundle-section {
        margin: 0px 20px;
        border-radius: 20px;
    }

}

.pricing-actions a {
    text-align: center;
}

@media (min-width: 768px) {
    .pricing-actions {
        padding-left: 100px;
    }

    .pricing-actions {
        justify-content: left;
    }

    .pricing-left {
        padding-bottom: 63px;
    }


}

/*bundel section*/

.bundle-wrapper {
    max-width: 1200px;
    margin: auto;
    background: #2c5fe0;
    border-radius: 30px;
    padding: 30px 65px 55px 65px;
    text-align: center;
    color: #fff;
}

.bundle-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.bundle-subtitle {
    max-width: 720px;
    margin: 0 auto 26px;
    font-size: 16px;
    line-height: 26px;
    opacity: 0.95;
}

.bundle-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    box-shadow: 0px 8px 32px 0px #00000014;
}

.bundle-card {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 30px;
    text-align: left;
    position: relative;
    box-shadow: 0px 8px 32px 0px #00000014;
    border: 0.1px solid #ffffff;
}

.bundle-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.bundle-desc {
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.3;

}

.bundle-price p {
    font-size: 13px;
}

.bundle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.bundle-tags span {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
}

.bundle-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
}

.bundle-price strong {
    font-size: 16px;
}

.bundle-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 10px 0;
}

/*.highlight {
  background: rgba(255, 255, 255, 0.22);
}
*/

.badge {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 12px;
}

/* Buttons */
.bundle-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}


.bundle-section .btn-outline {
    padding: 14px 28px;
    border-radius: 30px;
    background: #eef2ff;
    color: #2c5fe0;
    font-weight: 600;
    text-decoration: none;
}

.bundle-section .btn-primary {
    padding: 14px 66px;
    border-radius: 30px;
    background: #ffcc00;
    color: #000;
    font-weight: 600;
    text-decoration: none;
}

/* ===============================
   Responsive – Tablets
================================ */
@media (max-width: 1024px) {
    .bundle-wrapper {
        padding: 50px 30px;
    }

    .bundle-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================
     Responsive – Mobile
  ================================ */
@media (max-width: 767px) {
    .mccq-hero .mccq-hero-media iframe {
        width: 100%;
    }

    .bundle-wrapper {
        padding: 0px;
        border-radius: 22px;
    }

    .bundle-title {
        font-size: 22px;
        margin-bottom: 0px;
    }

    .bundle-subtitle {
        font-size: 16px;
        padding: 9px;
        margin-bottom: 10px;
    }

    /* 🔑 Single card per row */
    .bundle-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bundle-card {
        padding: 24px;
    }

    .bundle-card h3 {
        font-size: 18px;
    }

    .bundle-desc {
        font-size: 13px;
    }

    .bundle-price strong {
        font-size: 16px;
    }

    /* Buttons stacked & centered */
    .bundle-actions {
        flex-direction: column;
        gap: 14px;
        margin-top: 20px;
        align-items: center;

    }

    .pricing-actions .btn-primary {
        padding: 14px 20px;
        text-align: center;
        font-size: 14px;
    }

    .pricing-actions .btn-outline {
        padding: 14px 28px !important;
        font-size: 14px;
    }

    .pricing-right {
        gap: 15px;
    }

}

/*home banner*/
/* ===============================
   NAC Hero Banner
================================ */
.nac-hero {
    padding: 20px 20px;
}

.nac-hero-inner {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    padding: 65px;
    padding-bottom: 0px;
    background: linear-gradient(180deg, #F7F8F9 42.86%, #FFFFFF 100%);
    border-radius: 24px;
}

/* Eyebrow */
.nac-eyebrow {
    display: block;
    font-size: 18px;
    color: #666;
    margin-bottom: 14px;
    font-weight: 400;
}

/* Title */
.nac-title {
    text-align: center;
    font-size: 62px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #121212;
}

.nac-title span {
    color: #265DE5;
    font-weight: 800;
}

/* Subtitle */
.nac-subtitle {
    font-size: 18px;
    color: #555;
    margin-bottom: 28px;
    font-weight: 400;
}

/* CTA */
.nac-btn {
    display: inline-block;
    background: #ffcc00;
    color: #000;
    font-weight: 600;
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 25px;
}

/* Video Card */
.nac-video-card {
    position: relative;
    max-width: 864px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    height: 480px;
}

.nac-video-card iframe {
    width: 100%;
    height: 100%;
}

.nac-video-card img {
    width: 100%;
    display: block;
    border-radius: 16px;
}

/* Play Button */
.nac-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ===============================
     Responsive
  ================================ */
@media (max-width: 768px) {

    .nac-hero-inner {
        padding: 27px 10px 0px 10px;
    }

    .nac-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .nac-subtitle {
        font-size: 16px;
        line-height: 26px;
        padding-inline: 20px;
        margin-bottom: 10px;
    }

    .nac-video-card {
        border-radius: 14px;
        height: 176px;
        width: 312px;
    }
}

/*real challanges*/
.nac-challenges {
    padding: 70px 20px;
    background: #ffffff;
}

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

.nac-challenges .nac-icon img {
    width: 40px;
}

.nac-challenges .nac-title {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 30px;
    color: #111;
}

.nac-challenges .nac-title span {
    color: #787878;
    font-weight: 700;
}

.nac-challenges .nac-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.nac-challenges .nac-card {
    text-align: left;
    padding: 13px;
    width: 282px;
}

.nac-challenges .nac-icon {
    font-size: 28px;
    margin-bottom: 16px;
}

.nac-challenges .nac-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #111;
}

.nac-challenges .nac-card p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .nac-challenges .nac-card h3 {
        text-align: left;
        margin-bottom: 3px;
    }

    .nac-challenges .nac-title {
        font-size: 22px;
        margin-bottom: 10px;
        text-align: left;
        line-height: 26px;
    }

    .nac-challenges .nac-card p {
        text-align: left;
    }

    .nac-challenges .nac-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .nac-challenges .nac-card {
        text-align: center;
        display: flex;
        width: auto;
        padding: 16px 10px;
        gap: 10px;
    }

    .nac-grid-card-inner {
        display: flex;
        flex-direction: column;
    }

    .nac-challenges .nac-icon {
        font-size: 32px;
    }
}


/* ===== MOBILE STICKY FIX ===== */
@media (max-width: 768px) {

    #mccQbSection {
        display: none;
    }

    #mccQbSection2 {
        display: none;
    }

    section.scrl-sec,
    .scroll-feature {
        display: block;
    }

    .mccQb-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }

    #mccQbTrack {
        position: relative;
        will-change: transform;
    }

    .mccQb-text-block {
        min-height: 80vh;
        opacity: 0.3;
        transition: opacity 0.3s ease;
    }

    .mccQb-text-block.active {
        opacity: 1;
    }

    /* Progress bar fixed at bottom */
    .progress-wrapper {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
    }
}


/*-----old NAC -----*/






/*--end old NAC-----*/



@media (max-width: 760px) {
    .story-section .story-media img {
        height: 176px;
    }

    .success-right h3 {
        font-size: 22px;
    }

    .success-center {
        display: none;
    }

    .success-left p {
        text-align: left;
    }

    .success-left h2 {
        font-size: 22px;
        text-align: left;
    }

    .success-left h2 br {
        display: none;
    }
}

/* MOBILE */
@media (max-width: 900px) {
    .step-progress {
        max-width: 300px;
        margin: 30px auto 0;
    }

    .success-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .success-left h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .mccQb-inner {
        gap: 0px;
    }


    .mccQb-left p {
        font-size: 16px;
        line-height: 1.6;
    }

    .mccQb-text-block h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .success-right {
        text-align: left;
    }

    .steps {
        justify-content: center;
    }
}

/*subscription plan*/
/* SECTION */
.subscription-section {
    padding: 80px 20px 20px 20px;
    text-align: center;
    /* font-family: Arial, sans-serif; */
}

.bundle-price img {
    width: 19px;
}

/* MAIN TITLE */
.subscription-section .main-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* CONTAINER */
.subscription-box {
    max-width: 1300px;
    margin: 0 auto;
    background: #f7f7f7;
    border-radius: 24px;
    padding: 40px 30px;
}

/* SUB TITLE */
.subscription-section .sub-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

font-family:inter;

.subscription-section .sub-title span {
    color: #8a8a8a;
    font-weight: 600;
}

/* DESCRIPTION */
.subscription-section .sub-desc {
    max-width: 650px;
    margin: 0 auto 25px;
    color: #555;
    line-height: 1.6;
    font-size: 16px;
}

/* PLANS */
.subscription-section .plans-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

/* CARD */
.subscription-section .plan-card {
    background: #fff;
    border-radius: 20px;
    width: 432px;
    text-align: left;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
}

/* TEXT */
.subscription-section .plan-duration {
    color: #787878;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 500;
    font-family: 'Inter';
}

.subscription-section .plan-price {
    font-size: 24px;
    font-weight: 700;
    color: #2f5eff;
    margin-bottom: 15px;
}

.subscription-section .plan-note {
    font-size: 20px;
    color: #121212;
    font-weight: 500;
    font-style: italic;
}

/* BUTTONS */
.subscription-section .action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.subscription-section .btn-outline {
    padding: 14px 28px;
    border-radius: 50px;
    color: #2f5eff;
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
}

.subscription-section .btn-primary {
    padding: 14px 40px;
    background: #ffcc00;
    border-radius: 50px;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

/* 📱 MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .subscription-section .main-title {
        font-size: 28px;
    }

    .subscription-section .sub-title {
        font-size: 22px;
    }

    .subscription-section .plans-row {
        flex-direction: column;
        align-items: center;
    }

    .subscription-section .plan-card {
        width: 100%;
        max-width: 360px;
    }

    .subscription-section .action-buttons {
        flex-direction: column;
    }

    .subscription-section .btn-primary,
    .subscription-section .btn-outline {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

/*bundle section*/
.bundle-section-1 {
    padding: 20px 20px;
    /* font-family: Arial, sans-serif; */
}

.bundle-section-1 .bundle-wrapper {
    background: #2f5fe3;
    border-radius: 28px;
    padding: 50px;
    display: flex;
    gap: 40px;
    color: #fff;
    max-width: 1300px;
    margin: auto;
}

/* LEFT */
.bundle-section-1 .bundle-left {
    flex: 1;
}

.bundle-section-1 .bundle-left h2 {
    font-size: 32px;
    margin-bottom: 15px;
    text-align: left;
}

.bundle-section-1 .bundle-left p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 292px;
    text-align: left;
}

.bundle-section-1 .bundle-actions {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 260px;
}

.bundle-section-1 .btn-outline-white {
    background: #fff;
    color: #2f5fe3;
    padding: 14px;
    border-radius: 50px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}


.bundle-section-1 .btn-yellow {
    background: #ffcc00;
    color: #000;
    padding: 14px;
    border-radius: 50px;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
}

/* RIGHT */
.bundle-section-1 .bundle-cards {
    flex: 2;
    display: flex;
    gap: 24px;
}

/* CARD */
.bundle-section-1 .bundle-card {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 17px;
    flex: 1;
    backdrop-filter: blur(10px);
}

.bundle-section-1 .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bundle-section-1 .bundle-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.bundle-section-1 .badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.bundle-section-1 .price-row img {
    width: 20px;
}

.bundle-section-1 .price-row strong {
    display: flex;
    gap: 5px;
}

.bundle-section-1 .card-sub {
    font-size: 13px;
    margin-bottom: 18px;
    padding-right: 10px;
}

/* PILLS */
.bundle-section-1 .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.bundle-section-1 .pill-row span {
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
}

/* PRICE */
.bundle-section-1 .price-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.bundle-section-1 .price-row strong {
    font-size: 16px;
}

.bundle-section-1 .price-row p {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 10px;

}

.bundle-section-1 .price {
    font-size: 16px;
    font-weight: 700;
}

.bundle-section-1 .divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 10px 0;
}

.bundle-cards .bundle-actions {
    display: none;
}

/* 📱 MOBILE */
@media (max-width: 900px) {
    .bundle-section-1 .bundle-wrapper {
        flex-direction: column;
    }

    .bundle-section-1 .bundle-cards {
        flex-direction: column;
    }

    .bundle-section-1 .bundle-left p {
        max-width: 100%;
    }

    .bundle-section-1 .bundle-actions {
        max-width: 100%;
    }
}

/*banner*/
.story-section {
    padding: 20px 20px;
    /* font-family: Arial, sans-serif; */
}

.story-wrapper {
    background: linear-gradient(to bottom,
            #f9f9f9 0%,
            #f9f9f9 70%,
            #ffffff 100%);
    border-radius: 28px;
    padding: 50px;
    max-width: 1300px;
    margin: auto;
}

/* TEXT */
.story-label {
    font-size: 18px;
    color: #444;
}

.story-content h1 {
    font-size: 62px;
    line-height: 1.25;
    margin: 14px 0;
    font-weight: 800;
    color: #000;
    width: 74%;
}

.highlight {
    color: #2f5fe3;
}

.story-subtext {
    font-size: 18px;
    color: #121212;
    margin-bottom: 24px;
}

.story-btn {
    display: inline-block;
    background: #ffcc00;
    color: #000;
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}

/* IMAGE */
.story-media {
    margin-top: 40px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    width: 1260px;
    height: 704px;
}

.story-media iframe {
    width: 100%;
    height: 100%;
}

.story-media img {
    width: 100%;
    display: block;
    border-radius: 20px;
    height: 704px;
}

/* PLAY BUTTON */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    color: black;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* 📱 MOBILE */
@media (max-width: 768px) {

    .bundle-left .bundle-actions {
        display: none;
    }

    .bundle-cards .bundle-actions {
        display: block;
        flex-direction: row;
    }

    .bundle-section-1 .bundle-left h2 {
        font-size: 22px;
        text-align: center;
    }

    .bundle-section-1 .bundle-left p {
        font-size: 16px !important;
        text-align: center;
        padding-inline: 14px;
    }

    .bundle-section-1 .bundle-wrapper {
        padding: 30px 15px;
    }

    .story-wrapper {
        padding: 30px 20px 0px;
    }

    .story-content h1 {
        font-size: 22px;
        width: 100%;
    }

    .story-btn {
        padding: 12px 22px;
    }

    .play-btn {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .story-section {
        padding: 11px 20px;
    }

    .card.small {
        padding: 20px;
        height: auto !important;
    }

    .card-header {
        margin-bottom: 15px;
    }

    .faq-section {
        padding-bottom: 20px;
    }

    .faq-item:last-child {
        border-bottom: 0px;
    }

    .site-footer {
        padding: 40px 24px 30px;
    }

    .trial-btn {
        padding: 14px 28px;
    }

    .footer-brand img {
        height: 24px;
        margin-bottom: 16px;
    }

    .hrline hr {
        margin: 20px auto;
    }

    .footer-brand p {
        font-size: 16px;
        margin-bottom: 20px;
        padding-right: 0;
        font-weight: 400;
    }

    .social-icons {
        margin-top: 20px !important;
    }

    .story-media {
        width: 100%;
        height: 180px;
    }

}

/*real challanges*/
.challenge-section {
    padding: 14px 20px;
}

.challenge-box {
    max-width: 1200px;
    margin: auto;
    background: #f9f9f9;
    border-radius: 24px;
    padding: 30px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
}

.challenge-left h2 {
    font-size: 39px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.challenge-left h2 span {
    color: #787878;
    font-weight: 600;
}

.challenge-left p {
    font-size: 16px;
    color: #121212;
    max-width: 575px;
    line-height: 26px;
}

.challenge-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.challenge-right li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    margin-bottom: 18px;
    color: #111;
}

.challenge-right .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/*support sucess*/
.support-section {
    padding: 75px 20px;
}

.support-wrapper {
    max-width: 1200px;
    margin: auto;
}

.support-header h2 {
    font-size: 40px;
    margin-bottom: 10px;
}

.support-header h2 span {
    color: #787878;
}

.support-header p {
    max-width: 620px;
    color: #555;
    margin-bottom: 50px;
    font-size: 16px;
    line-height: 26px;
}

.support-content {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;
    align-items: flex-start;
}

.phone-wrap img {
    height: 592px;
}

.support-text h3 {
    font-size: 26px;
    margin-bottom: 10px;
}

p.muted-p {
    border-block: 2px solid #f2f2f2;
    padding-block: 11px;
}

.support-text p {
    color: #121212;
    ;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 26px;
}

.solution-block strong {
    font-size: 20px;
    color: #121212;
    font-weight: 200;
}

.solution-block ul {
    list-style-type: auto;
}

.solution-block h4 {
    margin: 8px 0 12px;
    font-size: 18px;
}

.solution-block ul {
    padding-left: 18px;
}

.solution-block li {
    margin-bottom: 8px;
}

.muted-questions p {
    color: #787878;
    font-size: 26px;
    margin-top: 22px;
}

.support-section .cta-btn {
    display: inline-block;
    margin-top: 50px;
    background: #ffcc00;
    color: #000;
    padding: 15px 28px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

@media (max-width: 768px) {
    .muted-questions p {
        font-size: 18px;
    }

    .challenge-box {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .acc-text {
        font-size: 18px;
        line-height: 26px;
        color: #787878;
        margin-bottom: 5px;
    }

    .challenge-left h2 {
        font-size: 22px;
    }

    .challenge-left h2 br {
        display: none;
    }

    .support-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .phone-wrap {
        text-align: center;
    }

    .support-header h2 {
        font-size: 22px;
    }
}

/*subscription plan*/
.subscription-section-1 {
    background: #ffffff;
    padding: 20px 20px;
}

.section-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 30px;
}

.subscription-section-1 .plan-features li {
    font-size: 18px;
    display: flex;
    gap: 9px;
}

.subscription-section-1 .plan-card {
    width: 1200px;
    margin: 0 auto;
    background: #f7f7f7;
    border-radius: 28px;
    padding: 34px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.subscription-section-1 .plan-content {
    flex: 1;
}

.subscription-section-1 .plan-label {
    color: #9b9b9b;
    font-weight: 700;
}

.subscription-section-1 .plan-content h3 {
    font-size: 40px;
    margin: 10px 0 20px;
    font-weight: 700;
}

.subscription-section-1 .plan-desc {
    font-size: 18px;
    line-height: 1.7;
    color: #121212;
    margin-bottom: 30px;
}

.subscription-section-1 .plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.subscription-section-1 .plan-features li {
    position: relative;
    margin-bottom: 16px;
    font-size: 16px;
}

.subscription-section-1 .plan-features li {
    font-size: 18px;
}

.subscription-section-1 .plan-actions {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
}

.subscription-section-1 .plan-actions {
    font-size: 14px;
}

.subscription-section-1 .btn-outline {
    padding: 14px 26px;
    border-radius: 999px;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    background: #fff;
}

.subscription-section-1 .btn-primary {
    padding: 14px 26px;
    border-radius: 999px;
    background: #facc15;
    color: #121212;
    text-decoration: none;
    font-weight: 600;
}

.subscription-section-1 .plan-image {
    flex: 0.9;
    text-align: right;
}

.subscription-section-1 .plan-image img {
    max-width: 100%;
    height: 464px;
}

.bundle-tags .crash_course {
    flex-direction: column;
}

.nac-mobile {
    display: none;
}



@media (max-width: 768px) {
    .support-header p {
        margin-bottom: 0px;
    }

    .support-section {
        padding: 20px 20px;
    }

    .subscription-section-1 .plan-image {
        display: none;
    }

    .support-section .phone-wrap img {
        display: none;
    }

    .subscription-section-1 .plan-card {
        flex-direction: column;
        padding: 20px 24px;
        gap: 40px;
        width: 100%;
    }

    .subscription-section-1 .plan-features li {
        align-items: flex-start;
    }


    .subscription-section-1 .plan-content h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .subscription-section-1 .plan-content h3 br {
        display: none;
    }

    .subscription-section-1 .section-title {
        font-size: 22px;
    }

    .subscription-section-1 .plan-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .subscription-section-1 .btn-outline,
    .subscription-section-1 .btn-primary {
        width: 100%;
        text-align: center;
    }

    .subscription-section-1 .plan-image {
        text-align: center;
    }

    .bundle-section {
        padding: 22px 20px;
        background: #2a5bd8;
    }

    .mccQb-inner {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .mccQb-center {
        display: none;
    }

    .progress-wrapper {
        position: absolute;
        bottom: 0;
        right: 5px;
        width: 97%;
        margin: 0 auto;
    }



}

/* HERO */
.pricing-hero-2 {
    margin: 22px;
    padding: 60px 40px;
    border-radius: 22px;
    background-image: url("images/Frame 13 (1).png");
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

.pricing-hero-content {
    position: relative;
    z-index: 2;
}

.pricing-hero-2 .hero-tag {
    font-size: 18px;
    opacity: 0.9;
    font-weight: 500;
    display: block;
    letter-spacing: 0.5px;
}

.pricing-hero-2 h1 {
    font-size: 62px;
    line-height: 1.2;
    margin: 0 0 5px;
    font-weight: 800;
}

.pricing-hero-2 h1 .highlight {
    color: #3affbd;
    /* Lighter Mint/Green for 'Perfect Plan' */
}

.pricing-hero-2 p {
    max-width: 950px;
    margin: 0 auto;
    font-size: 18px;
    opacity: 0.95;
    line-height: 1.6;
}

/* Response adjustments */

@media (max-width: 768px) {
    .pricing-hero-2 p {
        font-size: 16px;
        padding-inline: 24px;
    }

    .pricing-hero-2 {
        padding: 20px 10px;
    }

    .pricing-hero-2 h1 {
        font-size: 22px;
        padding-inline: 10px;
        margin: 0 0 5px;
    }
}

/* PRICING */
.pricing-section-2 {
    padding: 55px 20px 20px 20px;
}

.pricing-section-2 .pricing-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 30px;
}

.pricing-section-2 .pricing-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.pricing-section-2 .pricing-card {
    background: #f8f8f8;
    border-radius: 20px;
    padding: 25px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 384px;
    position: relative;
    min-height: 500px;
}

.pricing-section-2 .pricing-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #121212;
}

.pricing-section-2 .card-desc {
    font-size: 16px;
    line-height: 1.6;
    margin: 15px 0 25px;
    font-weight: 400;
    color: #121212;
}

.pricing-section-2 .card-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pricing-section-2 .btn-yellow {
    background: #facc15;
    border: none;
    border-radius: 999px;
    padding: 12px 23px;
    font-weight: 600;
    cursor: pointer;
}

.pricing-section-2 .trial-link {
    background: #fff;
    color: #2563eb;
    border: none;
    border-radius: 999px;
    padding: 11px 23px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.pricing-section-2 .price-list strong {
    font-size: 18px;
}

.pricing-section-2 .price-list {
    margin-top: 25px;
}

.pricing-section-2 .price-list p {
    margin: 14px 0 2px;
    padding-block: 5px;
    font-size: 18px;
    color: #121212;
    font-weight: 600;
}

.pricing-section-2 .price-list span {
    font-size: 16px;
    color: #787878;
    font-style: italic;
}

.pricing-section-2 .learn-more {
    display: flex;
    margin-top: 22px;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    align-items: center;
    position: absolute;
    bottom: 15px;
}

@media (max-width: 768px) {
    .bundle-left h2 {
        font-size: 22px;
    }

    .pricing-section-2 .pricing-title {
        font-size: 22px;
        margin-bottom: 37px;
    }

    .pricing-section-2 {
        padding: 20px 20px 20px 20px;
    }

    .pricing-section-2 .pricing-hero {
        padding: 50px 20px;
        margin: 15px;
    }

    .pricing-section-2 .pricing-hero h1 {
        font-size: 28px;
    }

    .pricing-section-2 .pricing-section {
        padding: 50px 20px;
    }

    .pricing-section-2 .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-section-2 .pricing-card {
        padding: 25px;
        width: 100%;
    }

    .pricing-section-2 .card-actions {
        flex-direction: row;
        align-items: flex-start;
    }

    .pricing-section-2 .btn-yellow {
        width: 100%;
        text-align: center;
    }
}

span.badge img {
    width: 13px;
    height: 10px;
    align-self: center;
}

/*bundel section*/
.bundle-plans-section {
    padding: 39px 81px;
    background: #2d5fe0;
    border-radius: 24px;
    color: #fff;
    margin: 28px;
    width: 1200px;
    justify-self: center;
}

.bundle-container {
    max-width: 1200px;
    margin: auto;
}

.bundle-top {
    display: grid;
    grid-template-columns: 0.7fr 1.2fr;
    gap: 40px;
    margin-bottom: 39px;
    border-bottom: 1px solid #678EED;
    padding-bottom: 33px;
}

.bundle-left h2 {
    font-size: 32px;
    font-weight: 800;
}

.bundle-left p {
    margin: 15px 0 25px;
    line-height: 26px;
    opacity: 0.95;
    font-weight: 400;

}

ul.bundle-right li {
    font-size: 16px;
    font-weight: 400;
}

.bundle-buttons {
    display: flex;
    gap: 15px;
}

.bundle-btn-yellow {
    background: #facc15;
    border: none;
    border-radius: 999px;
    padding: 17px 45px;
    font-weight: 700;
    cursor: pointer;
}

.bundle-btn-outline {
    background: #fff;
    color: #2563eb;
    border: none;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 700;
    cursor: pointer;
}

.bundle-right {
    list-style: disc;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
    align-content: space-evenly;
}

/* CARDS */
.bundle-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.bundle-card {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 20px 25px 15px 25px;
    position: relative;
}

.bundle-sub {
    font-size: 13px;
    margin: 10px 0 15px;
    opacity: 0.9;
}

.bundle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.bundle-tags span {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.bundle-price {
    display: flex;
    justify-content: space-between;
    gap: 9px;
    padding-top: 3px;
    margin-top: 0px;
    flex-wrap: wrap;

}

.bundle-price span {
    font-size: 16px;
    opacity: 0.85;
    display: flex;
    gap: 4px;
}

span.badge {
    display: flex;
    gap: 10px;
}

.bundle-price b {
    font-size: 18px;
}

/* BEST SELLER */
.bundle-card.featured {
    background: rgba(255, 255, 255, 0.18);
}

.best-seller {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #facc15;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .gallery-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    a.gallery-btn {
        font-size: 14px;
    }

    section.sg-blog-section h2 {
        font-size: 22px !important;
    }

    .news-inner {
        width: 100%;
        padding: 29px;
    }

    .bundle-plans-section {
        margin: 20px;
        padding: 30px 20px;
        width: 92%;
    }

    .bundle-top {
        grid-template-columns: 1fr;
    }

    .bundle-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .bundle-btn-yellow,
    .bundle-btn-outline {
        width: 100%;
        text-align: center;
    }

    .bundle-cards {
        grid-template-columns: 1fr;
    }
}

/* mccq built */
.mccq-why-section {
    padding: 30px 20px 0px 20px;
    background: #ffffff;
}

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

/* Section Header (Top) */
.mccq-section-header {
    margin-bottom: 25px;
    max-width: 700px;
}

.mccq-section-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
    color: #121212;
}

.mccq-section-header h2 span {
    color: #8b8b8b;
    font-weight: 700;
}

.mccq-subtitle {
    font-size: 16px;
    color: #444;
    margin-bottom: 0;
}

/* Grid Layout */
.mccq-block-content {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    /* Image Left, List Right */
    gap: 60px;
    align-items: center;
    margin-bottom: 35px;
}

.mccq-block-content.reverse-layout {
    grid-template-columns: 1.2fr 0.7fr;
    /* List Left, Image Right */
}

/* Image */
.mccq-image img {
    width: 399px;
    border-radius: 32px;
    display: block;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    height: 322px;
    object-fit: cover;
}

/* List Styles */
.mccq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mccq-list li {
    margin-bottom: 11px;
}

.mccq-list strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 0px;
}

.mccq-list span {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    section.blogs-down {
        width: 100% !important;
        padding: 20px !important;
    }

    .mccq-image img {
        width: 100%;
        height: 300px;
        justify-self: center;

    }

    .mccq-why-section {
        padding: 20px 20px;
    }

    .mccq-block-content,
    .mccq-block-content.reverse-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 60px;
    }

    .mccq-section-header h2 {
        font-size: 22px;
    }
}

/* FACES SECTION */
/* ===============================
   FACES SECTION
================================ */
.mccq-faces-section {
    padding: 70px 20px;
    background: #ffffff;
}

.mccq-faces-container {
    max-width: 1200px;
    margin: 0 auto;
}

.mccq-faces-title {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 60px;
    color: #000;
}

.mccq-faces-title span {
    color: #8b8b8b;
}

/* GRID */
.mccq-faces-grid {
    display: grid;
    grid-template-columns: 1.8fr 0.9fr;
    gap: 25px;
}

/* COMMON CARD */
.mccq-face-card {
    background: #f9fafb;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.mccq-face-card.hover-card {
    height: 552px;
    background-image: url(/wp-content/uploads/2026/02/image-34.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

/* ===============================
   LEFT CARD – FINAL IMAGE MATCH
================================ */
.mccq-face-card.large {
    display: grid;
    grid-template-columns: 60% 40%;
    background: #f7f7f7;
    border-radius: 32px;
    overflow: hidden;
    height: 552px;
}

/* CONTENT */
.mccq-face-content {
    padding: 40px 0px 17px 40px;
    display: flex;
    flex-direction: column;
}

/* DESCRIPTION TEXT */
.mccq-face-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #2e2e2e;
    margin-bottom: 16px;
}


/* PUSH FOOTER DOWN */
.mccq-face-content p:last-of-type {
    margin-bottom: 28px;
}

/* LINKEDIN ICON */
.mccq-linkedin {
    width: 30px;
    height: 30px;
    background: #e39b2f;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    margin-bottom: 12px;
}

/* SIGNATURE */
.mccq-signature {
    font-family: 'Caveat', cursive;
    font-size: 34px;
    color: #2563eb;
    margin-bottom: 6px;
    text-align: end;

}

/* ROLE */
.mccq-role {
    font-size: 13px;
    color: #8c8c8c;
    font-style: italic;
    line-height: 1.45;
    max-width: 100%;
    text-align: end;
}

/* IMAGE */
.mccq-face-card.large .mccq-face-image {
    height: 100%;
}

.mccq-face-card.large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}



/* ===============================
     RIGHT CARD (FIXED)
  ================================ */
.hover-card {
    cursor: pointer;
}

.hover-card img {
    filter: grayscale(100%);
    width: -webkit-fill-available;
}

/* Overlay */
.mccq-hover-overlay {
    position: absolute;
    inset: 0;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.05));
    transition: background 0.4s ease;
}

/* Always visible */
.mccq-hover-basic h3 {
    font-size: 34px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 6px;
    font-family: Shadows Into Light;
}

.mccq-hover-short {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

/* Hidden content */
.mccq-hover-text {
    max-height: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.45s ease;
}

.mccq-hover-text p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

/* Hover animation */
.hover-card:hover .mccq-hover-overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.9),
            rgba(0, 0, 0, 0.6));
}

.hover-card:hover .mccq-hover-text {
    max-height: 430px;
    transform: translateY(0);
}

.faces-mobile {
    display: none;
}

.mccq-face-card.hover-card:hover p.mccq-hover-short {
    display: none;
}

/* ===============================
     RESPONSIVE
  ================================ */
@media (max-width: 900px) {
    .mccq-faces-title {
        margin-bottom: 0;
    }

    section.mccq-faces-section {
        padding-bottom: 40px;
    }

    .mccq-faces-grid {
        display: none;
    }

    .mccq-faces-grid,
    .mccq-face-card.large {
        grid-template-columns: 1fr;
    }

    .hover-card .mccq-hover-text {
        max-height: none;
        transform: none;
    }

    .mccq-face-card.large .mccq-face-image {
        height: 320px;
    }

    .mccq-face-content {
        padding: 32px 26px;
    }

    .faces-mobile {
        padding: 20px;
        display: block;
    }

    .face-card {
        background: #F7F8F9;
        border-radius: 24px;
        padding: 22px 18px 26px;
        margin-bottom: 10px;
    }

    .face-img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 14px;
    }

    .face-desc {
        font-size: 16px;
        line-height: 1.6;
        color: #121212;
        margin-bottom: 16px;
        font-weight: 400;
    }

    .linkedin-icon img {
        width: 22px;
        margin-bottom: 12px;
    }

    .face-name {
        font-family: Shadows Into Light;
        font-size: 34px;
        color: #1a4cff;
        margin-bottom: 6px;
        font-weight: 400;
        line-height: 29px;
    }

    .face-role {
        font-size: 16px;
        line-height: 1.5;
        color: #777;
        font-family: 'Inter';
        font-style: italic;
        font-weight: 500;
    }

}


.mccq-signature {
    font-family: Shadows Into Light;
    margin-top: -50px;
}



/*real learner*/
.learners-section {
    padding: 40px 20px;
    background: #ffffff;
}

.learners-section .learners-container {
    max-width: 1200px;
    margin: auto;
    background: #f7f7f7;
    border-radius: 32px;
    padding: 40px 40px;
    text-align: center;
}

.learners-section .learners-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
}

.learners-section .learners-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

/* Grid */
.learners-section .learners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Card */
.learners-section .learners-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    text-align: left;
}

/* Icon */
.learners-section .learners-icon {
    font-size: 28px;
    margin-bottom: 18px;
}

/* Card Title */
.learners-section .learners-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #111;
}

/* Card Text */
.learners-section .learners-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

@media (max-width: 1024px) {
    .learners-section .learners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .learners-section .learners-container {
        padding: 40px 20px;
    }

    .learners-section .learners-title {
        font-size: 22px;
    }

    .learners-section .learners-grid {
        grid-template-columns: 1fr;
    }
}

/*contact*/
.contact-section {
    background: #ffffff;
    padding: 20px 20px;
}

.contact-wrapper {
    max-width: 98%;
    margin: auto;
    background: linear-gradient(to bottom, #f9f9f9 0%, #f9f9f9 50%, #ffffff 100%);
    border-radius: 40px;
    padding: 70px 80px 50px 80px;
    display: flex;
    gap: 50px;
}

.contact-left {
    flex: 0.6;
}

.contact-left h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: #121212;
}

.contact-left h2 span {
    color: #777;
}

.contact-left p {
    margin-top: 16px;
    font-size: 16px;
    color: #121212;
    max-width: 420px;
    line-height: 26px;
}

.social-icons {
    margin-top: 40px;
}

.social-icons a img {
    width: 32px;
    margin-right: 7px;
    height: 32px;
}

/* FORM */
.contact-form {
    flex: 1;
    border-radius: 24px;
    background: #ffffff;
    padding: 28px;
}

.contact-form form {
    border-radius: 30px;
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}

.contact-form form input,
.contact-form form select,
.contact-form form textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 30px;
    border: 1px solid #e3e3e3;
    font-size: 14px;
    outline: none;
    color: #787878;
}

textarea {
    border-radius: 24px;
    height: 140px;
    resize: none;
    font-family: 'Inter';
}

.phone-field {
    display: flex;
    align-items: center;
    border: 1px solid #e3e3e3;
    border-radius: 30px;
    overflow: hidden;
}

.phone-field select {
    border: none;
    padding: 14px;
    background: transparent;
}

.phone-field input {
    border: none;
}

.contact-form button {
    margin-top: 22px;
    background: #ffcc00;
    border: none;
    padding: 14px 50px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    float: right;
}

/* FLOATING ICONS */
.floating-icons {
    position: fixed;
    right: 20px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.floating-icons a {
    width: 54px;
    height: 54px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .contact-wrapper {
        flex-direction: column;
        padding: 40px 25px;
        gap: 25px;
    }

    .form-row select,
    .phone-field {
        width: 100% !important;
    }

    .form-row {
        flex-direction: column;
    }

    .contact-left h2 {
        font-size: 34px;
    }
}

/**float icons**/
.social-float {
    position: fixed;
    right: 20px;
    top: 85%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 9999;
}

.float-btn {
    width: 56px;
    height: 56px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.float-btn img {
    width: 28px;
    height: 28px;
}

.float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/*----
@media (min-width: 1920px) and (max-width: 2560px)  {
  .mccqbank-inner {
     min-height: 150vh;
  }

.progress-wrapper {
    bottom: 104px;
    right: 80px;
    width: 40%;
}

.mccQb-center img {
    width: auto;
}
.mccQb-right {
      height: 550px;
}

}
----*/

/* Mobile adjustment */
@media (max-width: 768px) {
    .contact-form button {
        float: left;
    }

    .more-info {
        margin: 25px 0 24px 0px;
    }

    .contact-form {
        background: none;
        padding: 0px;
    }

    .contact-left h2 {
        font-size: 22px;
    }

    .social-float {
        right: 12px;
    }

    .float-btn {
        width: 48px;
        height: 48px;
    }

    .float-btn img {
        width: 24px;
        height: 24px;
    }

    .mccq-faces-section {
        padding: 20px 20px 0px !important;
        background: #ffffff;
    }

    .mccq-faces-title {
        font-size: 22px;
        font-weight: 700;
    }

    .pricing-hero-2 {
        background-position: right;
    }


}



section.blogs-down {
    width: 1376px;
    justify-self: center;
    padding: 36px 94px;
}

.blog-hero {
    position: relative;
    width: 100%;
    min-height: 420px;
    background-image: url("images/blogs-bg-img.webp");
    /* replace with your image path */
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    margin: 20px auto;
    max-width: 1376px;
    overflow: hidden;
}

.blog-card {
    display: block;
}

.load-more-btn {
    text-align: center;
    margin-top: 40px;
}

#loadMore {
    background: #f7c600;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
}

/* Dark overlay */
.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

/* Content */
.blog-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    height: 100%;
    padding: 60px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    align-items: center;
}

/* Latest Blog tag */
.blog-tag {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 5px;
}

/* Title */
.blog-hero-content h1 {
    font-size: 62px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 10px;
    text-align: center;
}

.blog-hero-content h1 span {
    color: #27f2b2;
    /* green highlight */
}

/* Date */
.blog-date {
    font-size: 16px;
    opacity: 0.85;
    margin-bottom: 15px;
}

/* Button */
.blog-btn {
    display: inline-block;
    background: #ffc800;
    color: #000;
    padding: 12px 26px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
}

.blog-btn:hover {
    background: #ffb700;
}

section.collaborations.news-collab h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

section.blogs-down .load-more-btn a {
    color: #000000;
    text-decoration: none;
    background: #FFCB00;
    padding: 17px 60px;
    font-size: 14px;
    border-radius: 24px;
    font-weight: 600;
}

.news-inner {
    width: 1200px;
    justify-self: center;
    background: #F7F8F9;
    padding-block: 40px;
    border-radius: 24px;
}

.exams-mobile {
    display: none;
}

.social-float a.float-btn.whatsapp {
    display: none;
}




@media (max-width: 768px) {
    .exams-mobile {
        display: block;
        padding-bottom: 0px !important;
    }

    #blogSearch {
        padding: 14px 16px;
        width: 100%;
        border-radius: 24px;
    }

    section.exams-section {
        display: none;
    }

    section.sg-blog-section h2 {
        font-size: 22px;
    }

    .sg-load-more {
        text-align: left !important;

    }

    .sg-load-more a {
        margin-top: 0px !important;
    }

    section.collaborations.news-collab h2 {
        font-size: 22px;
        margin-bottom: 18px;
    }

    news-inner {
        padding-block: 29px;
    }

    section.sg-blog-section {
        width: 100%;
        padding: 0px 22px 20px;
    }

    .blog-hero {
        border-radius: 16px;
        min-height: 248px;
        width: 90%;
    }

    .blog-hero-content {
        padding: 40px 24px;
    }

    .blog-hero-content h1 {
        font-size: 22px;
    }

    .gallery-title {
        margin-bottom: 30px !important;
    }

    .gallery-btn {
        margin-top: 25px !important;
    }

}



/*blogs page*/
/* CATEGORY BAR */
/* CATEGORY BAR */
.blog-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 25px;
}

span.sg-blog-category {
    display: none;
}

.form-row select,
.phone-field {
    width: 50%;
}

.blog-category-tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 5px;
    width: 100%;

    /* smooth + mobile friendly */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* HIDE scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.load-more-btn {
    justify-self: center;
    margin-top: 45px;
}

.blog-category-tabs li {
    padding: 12px 23px;
    border-radius: 20px;
    background: #f2f4f7;
    font-size: 15px;
    cursor: pointer;
    transition: .2s;
    color: #787878;
    list-style: none;
}

.blog-category-tabs li.active {
    background: #2f6df6;
    color: #fff;
}

#blogSearch {
    padding: 10px 16px;
    width: 280px;
    border-radius: 20px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
}

/* GRID */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* CARD */
.blog-card {
    overflow: hidden;
}

.blog-image img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto!important;
    object-fit: cover;
    border-radius: 20px;
}

/* META */
.blog-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 10px 0 6px;
    color: #777;
    align-items: baseline;
}

.blog-cat {
    background: #f1f3f5;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 14px;
}

.blog-title {
    font-size: 18px;
    font-weight: 500;
    margin: 6px 0;
    line-height: 26px;
    color: #121212;
    text-decoration: none !important;
    min-height: 48px;
}

.blog-excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    display: none;
}

.blog-card a {
    text-decoration: none;
}

.read-more {
    display: flex;
    margin-top: 6px;
    color: #265DE5;
    font-size: 18px;
    font-weight: 500;
    align-items: center;
}


/*blog-detail page---*/

.post.type-post {
    width: 1200px;
    margin: 0 auto;
    padding: 50px 0px;
}

.category-nac-osce h1.entry-title {
    font-size: 40px;
    font-weight: 700;
    color: #121212;
    font-family: 'Inter';
    margin-bottom: 20px;
}

div#comments {
    width: 1200px;
    margin: 0 auto;
	max-width: 100%;
}

.entry-content p,
div#comments p {
    font-size: 16px;
    color: #121212;
    line-height: 26px;
    font-weight: 400;
    font-family: 'Inter';
}

p.comment-form-comment textarea#comment {
    margin-top: 20px;
}

p.form-submit input {
    width: auto;
    background: #ffc107;
    color: #121212;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter';
    margin-top: 15px;
    padding: 14px 20px;
    border: 0px;
    border-radius: 42px;
}

p.meta-nav {
    display: flex;
    color: #121212;
    font-size: 16px;
    font-family: 'Inter';
}

.nav-links a {
    text-decoration: none;
}

p.post-title {
    color: #121212;
    font-size: 16px;
    font-family: 'Inter';
}

h2.screen-reader-text {
    margin-bottom: 20px;
}

figure.post-thumbnail img {
    width: 100% !important;
    object-fit: cover;
    border-radius: 20px;
    aspect-ratio: 16/9 !important;
    height: auto!important;
}

.post.type-post h1.entry-title {
    margin-bottom: 10px;
}

input#wp-comment-cookies-consent {
    margin-right: 5px;
}

.mccq-hero-media {
    width: 472px;
    height: 392px;
    overflow: hidden;
}

.mccq-hero-media iframe {
    width: 100%;
    height: 100%;
}

.tab-scroll {
    mask-image: linear-gradient(to right,
            transparent,
            black 20px,
            black calc(100% - 20px),
            transparent);
}

ul.blog-category-tabs li {
    scroll-snap-align: start;
}


header.entry-header.alignwide {
    margin-bottom: 30px;
}

nav.navigation.post-navigation {
    width: 1200px;
    margin: 0 auto;
}

.phone-field select,
.phone-field input {
    border: 0px !important;
}

form#commentform p {
    margin-bottom: 15px;
}

input#wp-comment-cookies-consent input {
    width: 5% !important;
}

p.comment-form-cookies-consent {
    display: flex;
    flex: 1;
}

input#author,
input#email,
input#url,
textarea#comment {
    width: 100%;
    padding: 14px 18px;
    border-radius: 30px;
    border: 1px solid #e3e3e3;
    font-size: 14px;
    outline: none;
    color: #787878;
}




/* RESPONSIVE */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .exams-mobile {
        max-width: 100%;
        padding: 24px 16px 40px;
        background: #fff;
    }

    .exams-heading {
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 28px;
    }

    /* Exam Card */
    .exam-card {
        border: 1px solid #e6e6e6;
        border-radius: 28px;
        padding: 22px 20px;
        margin-bottom: 20px;
        background: #fff;
    }

    /* Top Row */
    .exam-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

    /* Category */
    .exam-category {
        font-size: 18px;
        font-weight: 700;
        color: #000;
    }

    /* Date */
    .exam-date {
        font-size: 16px;
        font-weight: 500;
        color: #111;
    }

    /* Title */
    .exam-title {
        font-size: 16px;
        line-height: 1.45;
        color: #000;
        margin: 0;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-filter-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* news*/
/* SECTION */
.sg-blog-section {
    width: 1376px;
    justify-self: center;
    padding: 23px 94px;
}

/* GRID */
.sg-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* CARD */
section.sg-blog-section h2 {
    font-size: 40px;
    text-align: center;
    margin-block: 35px;
    font-weight: 700;
    color: #121212;
}

.sg-blog-card {
    overflow: hidden;
}

.sg-blog-card a {
    text-decoration: none;
}

/* IMAGE */
.sg-blog-image img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto!important;
    object-fit: cover;
    border-radius: 20px;
}

/* META */
.sg-blog-meta {
    /*display: flex;*/
    justify-content: space-between;
    font-size: 12px;
    margin: 0px 0 6px;
    color: #777;
    align-items: baseline;
}

.sg-blog-category {
    background: #f1f3f5;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 14px;
}

/* TITLE */
.sg-blog-title {
    font-size: 18px;
    font-weight: 500;
    margin: 6px 0;
    line-height: 26px;
    color: #121212;
}

/* EXCERPT */
.sg-blog-excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    display: none;
}

/* READ MORE */
.sg-blog-readmore {
    display: flex;
    margin-top: 10px;
    color: #265DE5;
    font-size: 18px;
    font-weight: 500;
}

/* LOAD MORE */
.sg-load-more {
    margin-top: 10px;
    text-align: center;
}

.sg-load-more a {
    display: inline-block;
    margin-top: 40px;
    padding: 14px 44px;
    background: #ffc700;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .sg-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    section.gallery-section {
        padding-block: 30px;
    }

    .sg-blog-grid {
        grid-template-columns: 1fr;
    }
}

/* news page gallery*/
.gallery-section {
    max-width: 1200px;
    margin: auto;
    padding: 60px 0;
    text-align: center;
    /* font-family: Inter, sans-serif; */
}

.gallery-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #121212;
}

/* EXACT GRID */
.gallery-grid {
    display: grid;
    grid-template-columns: 384px 384px 384px;
    grid-template-rows: 280px 280px;
    gap: 24px;
    justify-content: center;
}

/* BASE CARD */
.gallery-card {
    position: relative;
    width: 384px;
    height: 280px;
    border-radius: 22px;
    overflow: hidden;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* VIDEO CARD */
.video-card {
    grid-row: span 2;
    height: 584px;
}

/* OVERLAY */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.overlay p {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

/* PLAY BUTTON */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 2;
}

/* BUTTON */
.gallery-btn {
    display: inline-block;
    margin-top: 40px;
    padding: 16px 48px;
    background: #ffc700;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    color: #121212;
    font-size: 14px;
}

.phone-field select {
    flex: 0 0 35%;
    padding-inline: 0px;
}

.phone-field input[type="tel"] {
    flex: 0 0 65%;
}

/* =========================
   RESPONSIVE STACK (MOBILE)
   ========================= */

@media (max-width: 991px) {

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
        padding: 0 20px;
    }

    .gallery-card,
    .video-card {
        width: 100%;
        height: 240px;
        /* SAME HEIGHT FOR ALL */
        grid-row: auto;
    }

    .play-btn {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .overlay p {
        font-size: 16px;
    }

    .gallery-title {
        font-size: 30px;
    }

    .post.type-post {
        width: 100%;
        padding: 50px 20px;
    }

    figure.post-thumbnail img {
        height: 200px !important;
    }

    .post.type-post h1.entry-title {
        font-size: 22px;
    }


}



.exams-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 16px;
    margin: 41px auto 30px auto;
}

.exams-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* Table container */
.exams-table-wrapper {
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

/* Table */
.exams-table {
    width: 100%;
    border-collapse: collapse;
}

.exams-table thead {
    background: #fafafa;
}

.exams-table th {
    text-align: left;
    padding: 12px 20px;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    border-bottom: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
}

.exams-table td {
    padding: 14px 20px;
    font-size: 16px;
    color: #121212;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #e9e9e9;
}

.exams-table tr:last-child td {
    border-bottom: none;
}

/* Column widths (matches image spacing) */
.exams-table th:nth-child(1),
.exams-table td:nth-child(1) {
    width: 200px;
}

.exams-table th:nth-child(2),
.exams-table td:nth-child(2) {
    width: 200px;
}


/* small devices  */
@media (max-width: 757px) {
    .pricing-actions .btn-outline {
        padding: 14px 20px !important;
    }
}







/* New CSS */


#mccQbSection2 {
    padding: 50px 0px 0px;
    gap: 80px;
    width: 1200px;
    margin: 0 auto 80px;
}

#mccQbSection2 .mccq-heading{
	text-align:center;
}

#mccQbSection2 .mccq-heading p{
	margin: auto;
}

.mccqe-mobile-wrapper{
margin-top: 40px;

}

.mccqe-mobile-wrapper .mccq-heading{
    padding: 20px 0;
}


#mccQbSection2 .mccQb-left {
	width: 35%;
	display:flex;
	justify-content:center;
}


#mccQbSection2 .mccQb-right {
	width: 65%;
}





#mccQbSection2 .mccQb-inner {
    position: sticky;
    position: -webkit-sticky;
    top: 90px;
    height: 87vh;
    display: flex;
    padding: 50px 80px 50px;
    box-sizing: border-box;
    background: #fff;
    will-change: transform;
    flex-direction: row;
}

.mccQb-left img {
    width: 100%;
    max-width: 260px;
    display: block;
    height: fit-content;
}

#mccQbSection2 h3 {
    font-size: 26px;
    font-weight: 700;
    font-family: 'Inter';
    margin-bottom: 10px;
}



.mccqe-mobile-wrapper {
	display:none;
}


/* mobile css */

.mccqe-mobile-wrapper .mccQbank-text {
    position: -webkit-sticky;
    position: sticky;
    align-self: flex-start;
    
    /* Matches your header height (120px) + 10px buffer */
    top: 110px; 
    
    /* Layout preservation */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    
    /* Visuals from your screenshots */
    background: linear-gradient(to bottom, #f5f5f5 42.86%, #FFFFFF 100%);
    border-radius: 10px;
    border: 1px solid #00000014;
    border-top: 2px solid #eebe00;
    margin-bottom: 14px;
font-size: 14px;
    
    /* Animation for smooth switching */
    transition: top 0.3s ease;
    will-change: top;


}

/* Override applied by JavaScript for cards taller than the viewport */
.mccqe-mobile-wrapper .mccQbank-text.is-tall-card {
    top: var(--sticky-offset) !important;
}

/* The "Sticky Bottom" state for tall cards */
.mccqe-mobile-wrapper .mccQbank-text.stick-bottom {
top: auto !important; 
    bottom: 20px !important;
    align-self: flex-end; /* This helps in flex containers */
}



/* small devices  */
@media (max-width: 757px) {
    .mccqe-mobile-wrapper {
    padding: 20px;
    margin-top: 20px;
    display: block;
 }
}






/* ===============================
   BLOG PAGINATION STYLING
================================ */

#blog-pagination-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Base style for all pagination numbers and buttons */
#blog-pagination-container .page-numbers {
    display: inline-block;
    padding: 10px 18px;
    background-color: #ffffff; /* White background */
    color: #333333; /* Dark text */
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    cursor: pointer;
}

/* Subtle off-white on hover */
#blog-pagination-container a.page-numbers:hover {
    background-color: #f8f9fa; /* Subtle off-white */
    border-color: #ffc107; /* Yellow border hint */
    color: #000;
}

/* ACTIVE PAGE - Yellow background (#ffc107) */
#blog-pagination-container .page-numbers.current {
    background-color: #ffc107; /* Your specific yellow */
    color: #000; /* Black text for better contrast */
    border-color: #ffc107;
}

/* Dots (...) styling */
#blog-pagination-container .page-numbers.dots {
    background-color: transparent;
    border: none;
    cursor: default;
}

/* Prev/Next Arrows specific styling */
#blog-pagination-container .prev.page-numbers,
#blog-pagination-container .next.page-numbers {
    background-color: #333;
    color: #fff;
}

#blog-pagination-container .prev.page-numbers:hover,
#blog-pagination-container .next.page-numbers:hover {
    background-color: #ffc107;
    color: #000;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    #blog-pagination-container .page-numbers {
        padding: 8px 14px;
        font-size: 14px;
    }
}




.posted-by {
    margin-top: 26px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    font-weight: 500;
    flex-wrap: wrap;
    justify-content: space-between;
}

.post-taxonomies {
    margin-top: 24px;
}

.nav-links {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.nav-next a {
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: flex-end;
}





figure.post-thumbnail {
    margin-bottom: 16px;
}

.entry-title {
    width: 65%;
}

.entry-content .wp-block-heading {
    margin-top: 24px;
    margin-bottom: 10px;
    clear: both;
}

.entry-content figure {
	max-width: 50%;
 margin-bottom: 12px;
}

.entry-content figure img {
	max-width: 100%;
}

.entry-content p, div#comments p {
    margin-bottom: 12px;
}



/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
	.nav-links .post-title{
		display: none;
	}


.entry-title {
    width: 100%;
}


.entry-content figure {
	max-width: 100%;
width: 100%;
}


.post.type-post, div#comments, nav.navigation.post-navigation {
    padding: 50px 24px;
}

}




#newsletter-form{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


#newsletter-form .g-recaptcha {
    scale: 0.8;
    transform-origin: top left;
}







/*  end of new css */