/* ================================================
    Main SECTION
    ================================================ */
    
    .main-slider {
        width: 100%;
        position: relative;
        overflow: hidden;

        padding-top: 65px;
    }

    /* .slides {
        position: relative;
        width: 100%;
    } */

        .slides {
        position: relative;
        width: min(1530px, 100%);
        margin: 0 auto;
    }

    .slide {
        display: none;
        width: 100%;
        position: relative;
    }

    .slide.active {
        display: block;
    }

    .slide img {
        width: 100%;
        height: 600px;    
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* @media (min-width: 1600px) {
    .slides {
        max-width: 1400px;
        margin: 0 auto;
    }
} */
     /* .slide {
        display: none;
        width: 100%;
        position: relative;
        text-align: center;
    }

    .slide img {
        width: min(1400px, 90%);
        height: auto;
        margin: 0 auto;
        display: block;
    } */

    .slide-btn {
        position: absolute;
        bottom: 19%;
        left: 11.5%;

        background: #FF9900;
        color: white;
        border: none;
        border-radius: 10px;
        font-family: 'Montserrat', sans-serif;

        padding: clamp(6px, 0.7vw, 14px) clamp(12px, 1.8vw, 28px);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }

    .slide-btn:hover {
        background: #e68a00;   /* darker orange */
        /* box-shadow: 0 8px 20px rgba(255, 153, 0, 0.35); */
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;

    width: clamp(28px, 3vw, 45px);
    height: clamp(28px, 3vw, 45px);
    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.45);
    color: white;
    font-size: clamp(16px, 1.8vw, 24px);
    cursor: pointer;
}

.arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.prev {
    top: 50%;
    left: 3.5%;
}

.next {
    top: 50%;
    right: 3.5%;
}
/* .prev {
    top: 54%;
    left: clamp(10px, 2vw, 40px);
}

.next {
    top: 54%;
    right: clamp(10px, 2vw, 40px);
} */

    /* ================================================
    BENEFITS SECTION
    ================================================ */

    .benefits {
        padding: 80px 20px;
    }

    .benefits-img {
        width: 100%;
        max-width: 1300px;
        height: auto;
        margin: 0 auto;
        display: block;
    }


    /* ================================================
    MOST ADVANCE SECTION
    ================================================ */
 .most-advance {
    padding-bottom: 80px;
}

.most-advance-img {
    width: 100%;
    height: auto;
    display: block;
}

/* only for large screens / zoomed out */
@media (min-width: 1600px) {
    .most-advance {
        display: flex;
        justify-content: center;
    }

    .most-advance-img {
        width: 1400px;
    }
}
    /* ================================================
    ROLE BASED SECTION
    ================================================ */

    .section-header{
        text-align:center;
        margin-bottom:25px;
    }

    .section-header h2{
        font-size:clamp(24px,4vw,35px);
        font-weight:700;
        margin-bottom:10px;
    }

    .section-header p{
        font-size:18px;
        color:#626161;
        max-width:1100px;
        margin:auto;
        line-height:1.6;
        font-weight:500;
    }

    /* ================================================
    ROLE TABS SECTION
    ================================================ */
    .role-tabs{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:15px;
        margin-top:30px;
        margin-bottom:30px;
    }

    .role-tab{
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;

        padding:18px 5px;
        border-radius:12px;
        cursor:pointer;
        background:#fff;

        transition:all 0.3s ease;
    }

    .role-tab:hover{
        transform:translateY(-5px);
        box-shadow:0 8px 20px rgba(0,0,0,0.12);
    }

    .role-tab img{
        width:30px;
        height:30px;
        transition:transform 0.3s ease;
    }

    .role-tab:hover img{
        transform:scale(1.15);
    }

    .role-tab span{
        font-size:18px;
        font-weight:600;
    }

    .admin{
        border:1px solid #01A2FF;
    }

    .teacher{
        border:1px solid #F15EF5;
    }

    .student{
        border:1px solid #9BCC18;
    }

    .parent{
        border:1px solid #8830FD;
    }

    .admin.active{
        background:#E2F4FF;
    }

    .role-tab.active{
        transform:translateY(-3px);
        box-shadow:0 6px 16px rgba(0,0,0,0.12);
    }

    .teacher.active{
        background:#FBE8FC;
    }

    .student.active{
        background:#F6FFE8;
    }

    .parent.active{
        background:#F5EEFF;
    }
    .role-section{
        width:min(1200px,95%);
        margin:50px auto;
        padding:clamp(16px,3vw,35px);

        background:#fff;
        border-radius:24px;

        box-shadow:0 12px 40px rgba(0,0,0,0.15);
    }

    /* ================================================
    ROLE CONTENT SECTION
    ================================================ */
    .role-content{
        margin-top:20px;
    }

    .role-panel{
        display:none;
    }

    .role-panel.active{
        display:block;
    }

    .role-panel img{
        width:100%;
        display:block;
        border-radius:12px;
    }


    /* ================================================
    INSTITUTE RUN MOBILE APP
    ================================================ */
    .instirun {
    padding-top: 80px;
    padding-bottom: 50px;
}

.insti-img {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 1600px) {
    .instirun {
        max-width: 1400px;
        margin: 0 auto;
    }
}


    /* ================================================
    INTEGRATED SECTION
    ================================================ */
    .integrated-section {
        text-align: center;
        padding: 70px 20px 30px;
        background: #ffffff;
    }

    .integrated-heading {
        font-size: clamp(22px, 3vw, 36px);
        font-weight: 700;
        color: #000;
        margin: 0 0 16px;
        line-height: 1.3;
    }

    .integrated-subtitle {
        font-size: clamp(18px, 1.3vw, 18px);
        font-weight: 500;
        color: #626161;
        max-width: 1200px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* ================================================
    INTEGRATION CARDS
    ================================================ */
    .integration-cards {
        padding: 24px 80px 70px;
        background: #fff;
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .integration-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 28px 22px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .integration-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
    }

    .integration-card img {
        width: 96px;
        height: 56px;
        object-fit: contain;
        margin-bottom: 14px;
        display: block;
    }

    .integration-card h4 {
        font-size: clamp(16px, 1.5vw, 20px);
        font-weight: 700;
        color: #FF9900;
        margin: 0 0 8px;
    }

    .integration-card p {
        font-size: clamp(13px, 1.2vw, 16px);
        color: #5A6A7A;
        line-height: 1.55;
        margin: 0;
    } 


    /* ================================================
    BROCHURE BANNER
    ================================================ */

    .banner{
        width: 100%;
        max-width: 1300px;
        margin: 70px auto;
        position: relative;
        padding: 0 20px;
    }

    .banner-img{
        width:100%;
        display:block;
    }

    .brochure-btn{
        position:absolute;
        top:72%;
        left:63.5%;
        transform:translate(-50%, -50%);

        display:flex;
        align-items:center;
        gap:10px;

        padding:10px 20px;

        background:#F5A000;
        color:#fff;

        text-decoration:none;
        font-size:18px;
        font-weight:700;

        border-radius:5px;
    }

    /* ================================================
    FAQ SECTION
    ================================================ */

    /* FAQ Container */
    .faq-section{
        max-width:1200px;
        margin:80px auto;
        padding:0 20px;
    }

    /* Heading */
    .faq-header{
        text-align:center;
        margin-bottom:20px;
    }

    .faq-header h2{
        font-size:clamp(24px,5vw,42px);
        font-weight:700;
        margin-bottom:10px;
    }

    .faq-header p{
        font-size:18px;
        font-weight: 500;
        color:#667085;
    }

    /* FAQ Items */
    .faq-item{
        border-bottom:1px solid #E5E7EB;
    }

    .faq-question{
        display:flex;
        justify-content:space-between;
        align-items:center;
        cursor:pointer;
        padding:22px 0;

        transition:all 0.3s ease;
        border-radius:8px;
    }

    .faq-question:hover{
        background:#F8FAFC;
    }

    .faq-question:hover h3{
        color:#2196F3;
    }

    .faq-question h3{
        margin:0;
        font-size:18px;
        font-weight:600;
        color:#111827;
    }

    .faq-icon{
        font-size:20px;
        color:#6B7280;
        transition:0.3s ease;
    }

    .faq-icon img{
        width:18px;
        height:18px;
        transition:all 0.3s ease;
    }
    .faq-question:hover .faq-icon img{
        transform:translateX(3px);
    }

    .faq-answer{
        max-height:0;
        overflow:hidden;

        font-size:16px;
        line-height:1.7;
        color:#6B7280;

        transition:max-height 0.3s ease;
    }

    .faq-item.active .faq-answer{
        max-height:200px;
        padding-bottom:20px;
    }

    .faq-item.active .faq-icon img{
        transform:rotate(180deg);
    }

    /* ================================================
    CONTACT SECTION
    ================================================ */
    .contact-section {
        padding: 50px 70px;
        background: #fff;
    }

    .contact-container {
        display: flex;
        gap: 32px;
        align-items: center;
        padding: 32px;
        border-radius: 24px;
        background: #ffffff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    }

    .contact-container::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 24px;
        background:
            radial-gradient(circle at top left, rgba(123, 97, 255, 0.30), transparent 22%),
            radial-gradient(circle at top right, rgba(255, 217, 0, 0.30), transparent 22%),
            radial-gradient(circle at bottom left, rgba(0, 149, 255, 0.30), transparent 22%),
            radial-gradient(circle at bottom right, rgba(0, 200, 255, 0.30), transparent 22%);
        z-index: 0;
        pointer-events: none;
    }

    .contact-container {
        position: relative;
        z-index: 1;
    }

    .contact-left {
        flex-shrink: 0;
    }

    .contact-left img {
        width: clamp(220px, 32vw, 450px);
        height: auto;
        object-fit: cover;
        border-radius: 16px;
        display: block;
    }

    .contact-right {
        flex: 1;
        min-width: 0;
    }

    .contact-right h2 {
        font-size: clamp(22px, 2.5vw, 36px);
        font-weight: 700;
        margin: 0 0 20px;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .form-row {
        display: flex;
        gap: 18px;
    }

    .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .form-group.full {
        width: 100%;
    }

    .form-group label {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
    }

    .form-group input {
        padding: 11px 14px;
        border-radius: 10px;
        border: 1px solid #dcdcdc;
        font-size: 14px;
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        box-sizing: border-box;
        outline: none;
        transition: border-color 0.2s;
        color: #333;
    }

    .message-box {
        width: 100%;
        height: 80px;
        padding: 11px 14px;
        border-radius: 10px;
        border: 1px solid #dcdcdc;
        font-size: 14px;
        font-family: 'Montserrat', sans-serif;
        resize: vertical;
        box-sizing: border-box;
    }

    .form-group input:focus,
    .message-box:focus {
        border-color: #197AE9;
        box-shadow: 0 0 0 3px rgba(25, 122, 233, 0.08);
        outline: none;
    }

    .form-group input::placeholder {
        color: #aaa;
    }

    .submit-btn {
        width: fit-content;
        padding: 12px 32px;
        border-radius: 10px;
        border: none;
        background: #FF9900;
        color: white;
        font-weight: 600;
        font-size: 16px;
        font-family: 'Montserrat', sans-serif;
        cursor: pointer;
        transition: background 0.2s;
    }

    .submit-btn:hover {
        background: #e68a00;
    }

    /* ================================================
    REQUEST DEMO BANNER
    ================================================ */
    .demo-banner {
        position: relative;
        width: 100%;
        max-width: 1300px;
        margin: 50px auto;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .demo-banner .banner-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 10px;
        display: block;
    }

    .banner-btn {
        position: absolute;
        top: 53%;
        left: 82%;
        transform: translate(-50%, -50%);
    }



    /* ====================================================
    RESPONSIVE BREAKPOINTS
    ==================================================== */

    /* ── LARGE DESKTOP (≤ 1440px) ── */
    @media (max-width: 1440px) {
    
        .integration-cards {
            padding: 24px 60px 60px;
        }

        .contact-section {
            padding: 80px 50px;
        }
    }

    /* ── LAPTOP (≤ 1200px) ── */
    @media (max-width: 1200px) {

        .slide img{
            max-height: 520px;
        }

        .slide-btn{
            left:14%;
            bottom:70px;
            transform:translateX(-50%);

            padding:10px 12px;
            font-size:14px;
            border-radius:10px;

            min-width:150px;
            text-align:center;
        }

        .arrow {
        width: 38px;
        height: 38px;
        font-size: 20px;
        }

        .prev {
            left: 2.5%;
            top: 50%;
        }

        .next {
            right: 2.5%;
            top: 50%;
        }

        .integration-cards {
            padding: 20px 40px 50px;
        }

        .contact-section {
            padding: 60px 40px;
        }

        .brochure-btn{
            left: 90%;      /* same horizontal position as desktop */
            top: 75%;         /* same vertical position as desktop */
            bottom: auto;

            transform: translate(-50%, -50%);

            padding: 8px 14px;
            font-size: 20px;
            gap: 8px;
        }

    }

    /* ── TABLET LANDSCAPE (≤ 1024px) ── */
    @media (max-width: 1024px) {

        .slide img{
        max-height: 450px;
        }

        .slide-btn{
            left:18%;
            bottom:70px;
            transform:translateX(-50%);

            padding:10px 12px;
            font-size:14px;
            border-radius:10px;

            min-width:150px;
            text-align:center;
        }

        /* Integration cards → 2 cols */
        .card-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .integration-cards {
            padding: 20px 30px 50px;
        }

        /* College → 3 cols */
        .college-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        /* Contact */
        .contact-section {
            padding: 60px 28px;
        }

        .brochure-btn{
            left: 67%;      /* same horizontal position as desktop */
            top: 75%;         /* same vertical position as desktop */
            bottom: auto;

            transform: translate(-50%, -50%);

            padding: 8px 14px;
            font-size: 20px;
            gap: 8px;
        }
    
        /* Footer store buttons */
        .playstore-btn {
            top: 22%;
        }

        .appstore-btn {
            top: 44%;
        }
    }

    /* ── TABLET PORTRAIT (≤ 768px) ── */
    @media (max-width: 768px) {

        .slide{
            width:100%;
        }
        .slide img{
            width:100%;
            height:auto;
            object-fit:contain;
            display:block;
        }

        .slide-btn{
            left:21%;
            bottom:50px;
            transform:translateX(-50%);

            padding:10px 12px;
            font-size:14px;
            border-radius:10px;

            min-width:150px;
            text-align:center;
        }

        .arrow {
            width: 30px;
            height: 30px;
            font-size: 16px;
        }

        .prev {
            left: 3.0%;
            top: 48%;
        }

        .next {
            right: 3.0%;
            top: 48%;
        }

        /* Integration */
        .card-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

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

        .integration-cards {
            padding: 16px 20px 40px;
        }


        /* Contact — stack image above form */
        .contact-section {
            padding: 40px 20px;
        }

        .contact-container {
            flex-direction: column;
            gap: 22px;
            padding: 22px;
            align-items: stretch;
        }

        .contact-left img {
            width: 100%;
            max-height: 260px;
            object-fit: cover;
        }

        .form-row {
            flex-direction: column;
            gap: 16px;
        }

        .brochure-btn{
            left: 66%;      /* same horizontal position as desktop */
            top: 72%;         /* same vertical position as desktop */
            bottom: auto;

            transform: translate(-50%, -50%);

            padding: 8px 16px;
            font-size: 14px;
            gap: 6px;
        }

        .brochure-btn img{
            width: 16px;
            height: 16px;
        }
        .demo-banner {
            margin: 30px auto;
        }

        /* Footer store buttons */
        .playstore-btn {
            top: 20%;
        }

        .appstore-btn {
            top: 42%;
        }
    }

    /* ── MOBILE (≤ 480px) ── */
    @media (max-width: 480px) {
        .slide{
            width:100%;
        }

        .slide img{
            width:100%;
            height:auto;
            display:block;
        }

        .slide-btn{
            left:21%;
            bottom:20px;
            transform:translateX(-50%);

            padding:6px 10px;
            font-size:8px;
            border-radius:6px;

            min-width:50px;
            text-align:center;
        }

        .arrow {
            width: 24px;
            height: 24px;
            font-size: 12px;
        }

        .prev {
            left: 2%;
            top: 48%;
        }

        .next {
            right: 2%;
            top: 48%;
        }
        .tagline {
            font-size: 13px;
        }

        .tagline-line {
            width: 175px;
        }

        .features {
            flex-direction: column;
            gap: 10px;
        }

        .role-tabs{
            grid-template-columns:1fr;
        }

        /* Integration — 2 tight cols */
        .card-grid {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .integration-cards {
            padding: 14px 14px 36px;
        }

        .integration-card {
            padding: 14px;
        }

        .integration-card img {
            width: 64px;
            height: 42px;
        }

        /* Contact */
        .contact-section {
            padding: 28px 12px;
        }

        .contact-container {
            padding: 16px;
            gap: 18px;
        }

        .submit-btn {
            font-size: 15px;
            padding: 11px 26px;
        }

        .brochure-btn{
            left: 65%;      /* same horizontal position as desktop */
            top: 75%;         /* same vertical position as desktop */
            bottom: auto;

            transform: translate(-50%, -50%);

            padding: 4px 8px;
            font-size: 6px;
            gap: 4px;
        }

        .brochure-btn img{
            width: 10px;
            height: 10  px;
        }

        /* Demo banner */
        .demo-banner {
            padding: 0 12px;
            margin: 24px auto;
        }

    

        /* Footer store buttons */
        .playstore-btn,
        .appstore-btn {
            right: 4%;
            width: 21%;
        }

        .playstore-btn {
            top: 20%;
        }

        .appstore-btn {
            top: 42%;
        }
    }

    /* ── VERY SMALL MOBILE (≤ 360px) ── */
    @media (max-width: 360px) {

        .slide{
            width:100%;
        }

        .slide img{
            width:100%;
            height:auto;
            display:block;
        }

        .slide-btn{
            left:20%;
            bottom:20px;
            transform:translateX(-50%);

            padding:6px 10px;
            font-size:6px;
            border-radius:4px;

            min-width:30px;
            text-align:center;
        }

        .arrow {
            width: 20px;
            height: 20px;
            font-size: 10px;
        }

        .prev {
            left: 2%;
            top: 48%;
        }

        .next {
            right: 2%;
            top: 48%;
        }

        .card-grid {
            grid-template-columns: 1fr;
        }

        .integration-cards {
            padding: 12px 12px 30px;
        } 

        .brochure-btn{
            left: 66%;      /* same horizontal position as desktop */
            top: 75%;         /* same vertical position as desktop */
            bottom: auto;

            transform: translate(-50%, -50%);

            padding: 4px 8px;
            font-size: 6px;
            gap: 4px;
        }

        .demo-btn-overlay {
            top: 55%;
            font-size: 11px;
            padding: 6px 14px;
        }

    }


    .required {
        color: red;
        margin-left: 2px;
        font-weight: 700;
    }