/* =========================================================
   IICEA PVT. LTD.
   MAIN WEBSITE STYLESHEET
========================================================= */


/* =========================================================
   1. ROOT VARIABLES
========================================================= */

:root {

    --primary: #0b2545;
    --primary-light: #153e66;
    --primary-dark: #06182e;

    --blue: #168cff;
    --blue-dark: #0873d1;

    --cyan: #49d7f5;

    --yellow: #ffe500;

    --green: #20b94b;
    --green-dark: #12983a;

    --white: #ffffff;

    --black: #111111;

    --text: #1c2938;

    --text-light: #667589;

    --background: #ffffff;

    --light-bg: #f6f9fc;

    --border: #dce5ee;

    --shadow:
        0 15px 45px rgba(10, 35, 65, 0.10);

    --shadow-heavy:
        0 25px 70px rgba(0, 0, 0, 0.20);

    --radius-small: 8px;

    --radius:
        16px;

    --radius-large:
        25px;

    --container:
        1180px;

}


/* =========================================================
   2. RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Nunito",
        Arial,
        sans-serif;

    color:
        var(--text);

    background:
        var(--background);

    line-height:
        1.6;

    overflow-x:
        hidden;

}


img {

    max-width: 100%;

    height: auto;

    display: block;

}


a {

    text-decoration:
        none;

    color:
        inherit;

}


button,
input,
select,
textarea {

    font-family:
        inherit;

}


button {

    cursor:
        pointer;

}


ul {

    list-style:
        none;

}


/* =========================================================
   3. COMMON CONTAINER
========================================================= */

.container {

    width:
        min(
            var(--container),
            92%
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   4. ACCESSIBILITY
========================================================= */

.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;

}


/* =========================================================
   5. HEADER
========================================================= */

.site-header {

    position:
        sticky;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        92px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid #e7edf4;

    z-index:
        1000;

}


/* HEADER CONTAINER */

.nav-container {

    height:
        92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


/* =========================================================
   6. LOGO
========================================================= */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


/* Temporary text logo */

.logo-symbol {

    font-size:
        20px;

    font-weight:
        900;

    letter-spacing:
        -2px;

    color:
        var(--blue);

}



/* LOGO TEXT */

/* =====================================================
   IICEA LOGO IMAGE
   ===================================================== */

.logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.iicea-logo-img {
    width: 180px !important;
    height: auto !important;
    max-height: 75px !important;
    object-fit: contain !important;
    display: block !important;
}
@media (max-width: 768px) {
    .iicea-logo-img {
        width: 120px !important;
        max-width: 120px !important;
        max-height: 55px !important;
        height: auto !important;
    }
}


.logo-text strong {

    font-size:
        27px;

    line-height:
        1;

    font-weight:
        900;

    color:
        #101828;

    letter-spacing:
        -1px;

}


.logo-text span {

    font-size:
        9px;

    line-height:
        1.3;

    color:
        #6b7b8d;

    letter-spacing:
        2px;

    font-weight:
        900;

}


.logo-text small {

    font-size:
        9px;

    line-height:
        1.3;

    color:
        #0873d1;

    letter-spacing:
        .5px;

    font-weight:
        900;

}


/* =========================================================
   7. NAVIGATION
========================================================= */

.main-navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    height:
        100%;

}


.nav-link,
.dropdown-button {

    position:
        relative;

    border:
        0;

    background:
        transparent;

    color:
        #111827;

    font-size:
        16px;

    font-weight:
        800;

    padding:
        8px 0;

    transition:
        .25s ease;

}


.nav-link:hover,
.dropdown-button:hover {

    color:
        var(--blue);

}


/* ACTIVE HOME */

.nav-link.active {

    color:
        var(--blue);

}


.nav-link.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -5px;

    width:
        100%;

    height:
        3px;

    background:
        var(--blue);

    border-radius:
        10px;

}


/* =========================================================
   8. COURSES DROPDOWN
========================================================= */

.nav-dropdown {

    position:
        relative;

}


.dropdown-button {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.dropdown-button i {

    font-size:
        10px;

    transition:
        transform .25s ease;

}


/* DROPDOWN MENU */

.dropdown-menu {

    position:
        absolute;

    top:
        calc(
            100% + 22px
        );

    left:
        -25px;

    width:
        280px;

    padding:
        10px;

    background:
        var(--white);

    border:
        1px solid var(--border);

    border-radius:
        14px;

    box-shadow:
        var(--shadow-heavy);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(
            10px
        );

    transition:
        .25s ease;

}


/* LITTLE ARROW */

.dropdown-menu::before {

    content:
        "";

    position:
        absolute;

    top:
        -7px;

    left:
        30px;

    width:
        13px;

    height:
        13px;

    background:
        white;

    border-left:
        1px solid var(--border);

    border-top:
        1px solid var(--border);

    transform:
        rotate(45deg);

}


/* SHOW DROPDOWN */

.nav-dropdown:hover
.dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.dropdown-menu a {

    display:
        block;

    padding:
        11px 14px;

    border-radius:
        8px;

    font-size:
        14px;

    font-weight:
        700;

    color:
        var(--text);

    transition:
        .2s ease;

}


.dropdown-menu a:hover {

    background:
        #edf7ff;

    color:
        var(--blue);

    padding-left:
        18px;

}


/* =========================================================
   9. MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {

    display:
        none;

    width:
        45px;

    height:
        45px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--primary);

    font-size:
        20px;

}


/* =========================================================
   10. HERO SECTION
========================================================= */

.hero-section {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #1b4165 0%,
            #123453 55%,
            #071b31 100%
        );

    color:
        white;

}


/* HERO DECORATIVE CIRCLE */

.hero-background-shape {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.shape-one {

    width:
        600px;

    height:
        600px;

    right:
        -250px;

    top:
        -300px;

    background:
        rgba(
            30,
            186,
            250,
            .12
        );

}


.shape-two {

    width:
        450px;

    height:
        450px;

    left:
        -250px;

    bottom:
        -300px;

    background:
        rgba(
            255,
            229,
            0,
            .07
        );

}


/* HERO CONTAINER */

.hero-container {

    position:
        relative;

    z-index:
        2;

    min-height:
        650px;

    padding:
        75px 0;

    display:
        grid;

    grid-template-columns:
        1.12fr
        .88fr;

    gap:
        65px;

    align-items:
        center;

}


/* =========================================================
   11. HERO CONTENT
========================================================= */

.hero-content {

    max-width:
        700px;

}


/* LABEL */

.hero-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1.6px;

    color:
        var(--cyan);

    margin-bottom:
        15px;

}


.hero-label i {

    color:
        var(--yellow);

}


/* HERO TITLE */

.hero-content h1 {

    font-size:
        clamp(
            42px,
            5vw,
            67px
        );

    line-height:
        1.04;

    letter-spacing:
        -2px;

    font-weight:
        900;

    margin-bottom:
        24px;

}


.hero-content h1 span {

    display:
        inline;

    color:
        var(--yellow);

}


/* DESCRIPTION */

.hero-description {

    max-width:
        700px;

    color:
        #d5e5f4;

    font-size:
        18px;

    line-height:
        1.7;

    margin-bottom:
        25px;

}


/* =========================================================
   12. HERO FEATURES
========================================================= */

.hero-features {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px 25px;

    margin-bottom:
        28px;

}


.hero-feature {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #f0f7ff;

    font-size:
        14px;

    font-weight:
        800;

}


.hero-feature i {

    color:
        #38e85e;

    font-size:
        14px;

}


/* =========================================================
   13. BUTTONS
========================================================= */

.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        35px;

}


.btn {

    min-height:
        50px;

    padding:
        13px 22px;

    border-radius:
        9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    font-size:
        14px;

    font-weight:
        900;

    border:
        2px solid transparent;

    transition:
        .25s ease;

}


.btn-primary {

    background:
        var(--blue);

    color:
        #fff;

}


.btn-primary:hover {

    background:
        #0878df;

    transform:
        translateY(
            -3px
        );

    box-shadow:
        0 12px 30px
        rgba(
            20,
            140,
            255,
            .30
        );

}


.btn-outline {

    color:
        #fff;

    border-color:
        #7faed4;

}


.btn-outline:hover {

    background:
        #fff;

    color:
        var(--primary);

}


.btn-dark {

    background:
        var(--primary);

    color:
        #fff;

}


.btn-dark:hover {

    background:
        #123b65;

    transform:
        translateY(
            -2px
        );

}


.btn-light {

    background:
        #fff;

    color:
        var(--primary);

}


.btn-light:hover {

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0 10px 25px
        rgba(
            0,
            0,
            0,
            .18
        );

}


/* =========================================================
   14. HERO STATISTICS
========================================================= */

.hero-statistics {

    display:
        flex;

    align-items:
        center;

    gap:
        35px;

}


.hero-stat {

    position:
        relative;

}


.hero-stat:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    width:
        1px;

    height:
        42px;

    background:
        rgba(
            255,
            255,
            255,
            .18
        );

    right:
        -18px;

    top:
        4px;

}


.hero-stat strong {

    display:
        block;

    font-size:
        28px;

    color:
        #fff;

    line-height:
        1;

}


.hero-stat span {

    display:
        block;

    color:
        #adc6df;

    font-size:
        11px;

    margin-top:
        5px;

}


/* =========================================================
   15. HERO FORM
========================================================= */

.hero-form-wrapper {

    width:
        100%;

}


.hero-form-card {

    position:
        relative;

    background:
        #071644;

    border:
        2px solid
        #39c8e9;

    padding:
        32px;

    border-radius:
        6px;

    box-shadow:
        0 25px 65px
        rgba(
            0,
            0,
            0,
            .25
        );

}


/* FORM HEADING */

.form-heading {

    text-align:
        center;

    margin-bottom:
        22px;

}


.form-heading h2 {

    font-size:
        31px;

    line-height:
        1.1;

    margin-bottom:
        6px;

    color:
        #fff;

}


.form-heading h2 span {

    color:
        var(--yellow);

}


.form-heading p {

    color:
        #a9c1d9;

    font-size:
        13px;

}


/* =========================================================
   16. FORM
========================================================= */

.lead-form {

    display:
        grid;

    gap:
        13px;

}


.form-group {

    width:
        100%;

}


.lead-form input,
.lead-form select,
.lead-form textarea {

    width:
        100%;

    background:
        #fff;

    color:
        #263445;

    border:
        1px solid
        #d1dce7;

    border-radius:
        7px;

    padding:
        14px 15px;

    font-size:
        14px;

    outline:
        none;

    transition:
        .2s ease;

}


.lead-form input::placeholder,
.lead-form textarea::placeholder {

    color:
        #7a8794;

}


.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(
            22,
            140,
            255,
            .15
        );

}


.lead-form textarea {

    resize:
        vertical;

    min-height:
        85px;

}


/* =========================================================
   17. SUBMIT BUTTON
========================================================= */

.form-submit-btn {

    width:
        100%;

    min-height:
        52px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--green);

    color:
        white;

    font-size:
        15px;

    font-weight:
        900;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    transition:
        .25s ease;

}


.form-submit-btn:hover {

    background:
        var(--green-dark);

    transform:
        translateY(
            -2px
        );

}


/* SECURITY TEXT */

.form-security {

    text-align:
        center;

    color:
        #8ea7bf;

    font-size:
        10px;

    margin-top:
        12px;

}


.form-security i {

    color:
        #42d6f2;

    margin-right:
        5px;

}


/* =========================================================
   18. TRUST SECTION
========================================================= */

.trust-section {

    background:
        #f5f8fc;

    border-bottom:
        1px solid
        var(--border);

}


.trust-container {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        20px;

    padding:
        24px 0;

}


.trust-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.trust-icon {

    width:
        47px;

    height:
        47px;

    border-radius:
        12px;

    background:
        #fff;

    color:
        var(--blue);

    display:
        grid;

    place-items:
        center;

    font-size:
        20px;

    box-shadow:
        0 5px 18px
        rgba(
            10,
            35,
            65,
            .08
        );

}


.trust-item strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        13px;

}


.trust-item small {

    display:
        block;

    color:
        var(--text-light);

    font-size:
        10px;

}


/* =========================================================
   19. COMMON SECTION
========================================================= */

.section-padding {

    padding:
        90px 0;

}


/* SECTION LABEL */

.section-label {

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1.8px;

    margin-bottom:
        10px;

}


/* SECTION HEADINGS */

.section-header h2,
.about-content h2,
.contact-content h2 {

    color:
        var(--primary);

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    line-height:
        1.1;

    letter-spacing:
        -1px;

    margin:
        0;

}


.section-header h2 span,
.about-content h2 span,
.contact-content h2 span {

    color:
        var(--blue);

}


/* =========================================================
   20. ABOUT SECTION
========================================================= */

.about-section {

    background:
        #fff;

}


.about-grid {

    display:
        grid;

    grid-template-columns:
        1.08fr
        .92fr;

    gap:
        70px;

    align-items:
        center;

}


.about-content p {

    color:
        var(--text-light);

    font-size:
        15px;

    margin-top:
        18px;

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--blue);

    font-weight:
        900;

    margin-top:
        20px;

}


.text-link:hover {

    gap:
        13px;

}


/* ABOUT CARD */

.about-card {

    background:
        linear-gradient(
            135deg,
            #edf8ff,
            #f8fcff
        );

    border:
        1px solid
        #cfe8f8;

    padding:
        45px;

    border-radius:
        25px;

    box-shadow:
        var(--shadow);

}


.about-card-icon {

    width:
        75px;

    height:
        75px;

    border-radius:
        20px;

    background:
        var(--primary);

    color:
        white;

    display:
        grid;

    place-items:
        center;

    font-size:
        30px;

}


.about-card h3 {

    color:
        var(--primary);

    font-size:
        27px;

    margin:
        20px 0 5px;

}


.about-card p {

    color:
        var(--text-light);

    font-size:
        14px;

}


/* MINI STATS */

.about-mini-stats {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        10px;

    margin-top:
        28px;

}


.about-mini-stats div {

    background:
        #fff;

    border-radius:
        12px;

    padding:
        14px 8px;

    text-align:
        center;

}


.about-mini-stats strong {

    display:
        block;

    color:
        var(--blue);

    font-size:
        21px;

}


.about-mini-stats span {

    color:
        var(--text-light);

    font-size:
        10px;

}


/* =========================================================
   21. STATISTICS SECTION
========================================================= */

.statistics-section {

    background:
        var(--primary);

    color:
        #fff;

}


.statistics-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    padding:
        45px 0;

}


.stat-box {

    text-align:
        center;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );

}


.stat-box:last-child {

    border-right:
        0;

}


.stat-box strong {

    display:
        block;

    font-size:
        40px;

    line-height:
        1;

    color:
        var(--yellow);

}


.stat-box span {

    display:
        block;

    color:
        #bfd2e5;

    font-size:
        12px;

    font-weight:
        700;

    margin-top:
        7px;

}


/* =========================================================
   22. COURSES SECTION
========================================================= */

.courses-section {

    background:
        #f7f9fc;

}


.section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;

    margin-bottom:
        40px;

}


.courses-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        20px;

}


/* COURSE CARD */

.course-card {

    background:
        #fff;

    border:
        1px solid
        #e0e8f0;

    border-radius:
        17px;

    padding:
        24px;

    box-shadow:
        0 7px 25px
        rgba(
            10,
            35,
            65,
            .045
        );

    transition:
        .3s ease;

}


.course-card:hover {

    transform:
        translateY(
            -7px
        );

    box-shadow:
        var(--shadow);

    border-color:
        #b9dcf6;

}


/* COURSE ICON */

.course-icon {

    width:
        58px;

    height:
        58px;

    border-radius:
        15px;

    background:
        #eaf5ff;

    color:
        var(--blue);

    display:
        grid;

    place-items:
        center;

    font-size:
        24px;

}


/* COURSE TAG */

.course-tag {

    display:
        inline-block;

    margin-top:
        14px;

    padding:
        4px 9px;

    border-radius:
        20px;

    background:
        #eaf6ff;

    color:
        #0b76c9;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1px;

}


/* COURSE TITLE */

.course-card h3 {

    color:
        var(--primary);

    font-size:
        20px;

    line-height:
        1.25;

    margin:
        11px 0 7px;

}


.course-card p {

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.65;

    min-height:
        83px;

    margin-bottom:
        10px;

}


.course-card > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--blue);

    font-size:
        13px;

    font-weight:
        900;

}


.course-card > a:hover {

    gap:
        12px;

}


/* =========================================================
   23. WHY CHOOSE US
========================================================= */

.why-section {

    background:
        #fff;

}


.centered {

    justify-content:
        center;

    text-align:
        center;

}


.benefits-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        20px;

}


.benefit-card {

    padding:
        28px;

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    background:
        #fff;

    transition:
        .25s ease;

}


.benefit-card:hover {

    transform:
        translateY(
            -5px
        );

    box-shadow:
        var(--shadow);

}


.benefit-card > i {

    font-size:
        26px;

    color:
        var(--blue);

}


.benefit-card h3 {

    color:
        var(--primary);

    font-size:
        19px;

    margin:
        12px 0 6px;

}


.benefit-card p {

    color:
        var(--text-light);

    font-size:
        13px;

}


/* =========================================================
   24. PLACEMENTS
========================================================= */

.placements-section {

    background:
        #f7f9fc;

}


.placements-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        20px;

}


.placement-card {

    background:
        #fff;

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    padding:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    transition:
        .25s ease;

}


.placement-card:hover {

    transform:
        translateY(
            -5px
        );

    box-shadow:
        var(--shadow);

}


/* AVATAR */

.placement-avatar {

    width:
        65px;

    height:
        65px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );

    color:
        white;

    display:
        grid;

    place-items:
        center;

    font-size:
        18px;

    font-weight:
        900;

}


.placement-card h3 {

    color:
        var(--primary);

    font-size:
        17px;

}


.placement-card p {

    color:
        var(--text-light);

    font-size:
        11px;

    margin:
        1px 0;

}


.placement-card strong {

    color:
        #13a541;

    font-size:
        14px;

}


.placement-cta {

    background:
        linear-gradient(
            135deg,
            #eef8ff,
            #fff
        );

}


/* =========================================================
   25. CAREER CTA
========================================================= */

.career-cta {

    padding:
        60px 0;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #0b2442,
            #12639e
        );

}


.career-cta-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.career-cta h2 {

    font-size:
        40px;

    line-height:
        1.1;

    margin:
        5px 0;

}


.career-cta p {

    color:
        #c9dced;

    font-size:
        14px;

}


/* =========================================================
   26. CONTACT SECTION
========================================================= */

.contact-section {

    background:
        var(--primary);

    color:
        white;

}


.contact-grid {

    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        70px;

    align-items:
        start;

}


.contact-content .section-label {

    color:
        var(--cyan);

}


.contact-content h2 {

    color:
        #fff;

}


.contact-content > p {

    color:
        #c5d8ea;

    font-size:
        15px;

    margin-top:
        18px;

}


/* CONTACT DETAILS */

.contact-details {

    display:
        grid;

    gap:
        16px;

    margin-top:
        30px;

}


.contact-details a,
.contact-details > div {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

}


.contact-details i {

    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    border-radius:
        11px;

    background:
        #17395f;

    color:
        var(--cyan);

    display:
        grid;

    place-items:
        center;

}


.contact-details small {

    display:
        block;

    color:
        #8ea8c2;

    font-size:
        10px;

}


.contact-details strong {

    display:
        block;

    color:
        #fff;

    font-size:
        13px;

}


/* =========================================================
   27. CONTACT FORM
========================================================= */

.contact-form {

    background:
        #fff;

    border-radius:
        18px;

    padding:
        30px;

    display:
        grid;

    gap:
        13px;

    box-shadow:
        var(--shadow-heavy);

}


.contact-form input,
.contact-form select,
.contact-form textarea {

    width:
        100%;

    border:
        1px solid
        #d1dce7;

    border-radius:
        8px;

    padding:
        14px 15px;

    font-size:
        14px;

    outline:
        none;

    color:
        #263445;

    background:
        #fff;

}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(
            22,
            140,
            255,
            .12
        );

}


.contact-form textarea {

    resize:
        vertical;

}


/* =========================================================
   28. FLOATING BUTTONS
========================================================= */

.floating-buttons {

    position:
        fixed;

    left:
        15px;

    bottom:
        25px;

    display:
        grid;

    gap:
        9px;

    z-index:
        900;

}


.floating-btn {

    width:
        58px;

    height:
        58px;

    border-radius:
        17px;

    background:
        white;

    display:
        grid;

    place-items:
        center;

    font-size:
        29px;

    box-shadow:
        0 7px 25px
        rgba(
            0,
            0,
            0,
            .20
        );

    transition:
        .25s ease;

}


.floating-btn:hover {

    transform:
        scale(
            1.08
        );

}


.whatsapp-btn {

    color:
        #14b84a;

}


.call-btn {

    color:
        #13a73f;

}


/* =========================================================
   29. FOOTER
========================================================= */

.footer {

    background:
        #061426;

    color:
        #b8c8da;

    padding-top:
        60px;

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr
        .7fr
        .8fr
        1fr;

    gap:
        40px;

    padding-bottom:
        50px;

}


.footer-logo {

    font-size:
        30px;

    font-weight:
        900;

    color:
        #fff;

}


.footer-logo span {

    font-size:
        9px;

    letter-spacing:
        1.5px;

    color:
        #7891aa;

}


.footer-grid p {

    font-size:
        13px;

    margin-top:
        10px;

    max-width:
        330px;

}


.footer-grid h4 {

    color:
        #fff;

    margin-bottom:
        15px;

}


.footer-grid > div > a {

    display:
        block;

    font-size:
        13px;

    margin:
        8px 0;

    transition:
        .2s ease;

}


.footer-grid > div > a:hover {

    color:
        white;

}


/* =========================================================
   30. SOCIAL LINKS
========================================================= */

.social-links {

    display:
        flex;

    gap:
        9px;

    margin-top:
        15px;

}


.social-links a {

    width:
        35px;

    height:
        35px;

    border-radius:
        9px;

    background:
        #11283f;

    display:
        grid !important;

    place-items:
        center;

    color:
        #fff;

    margin:
        0 !important;

}


.social-links a:hover {

    background:
        var(--blue);

}


/* =========================================================
   31. FOOTER BOTTOM
========================================================= */

.footer-bottom {

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    padding:
        18px 0;

    font-size:
        11px;

}


/* =========================================================
   32. PLACEMENT POPUP
========================================================= */

.placement-overlay {

    position:
        fixed;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background:
        rgba(
            0,
            0,
            0,
            .78
        );

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        3000;

    overflow:
        hidden;

}


/* SHOW POPUP */

.placement-overlay.show {

    display:
        flex;

}


/* =========================================================
   33. POPUP CARD
========================================================= */

.placement-popup {

    position:
        relative;

    width:
        min(
            450px,
            90%
        );

    background:
        linear-gradient(
            160deg,
            #ffffff,
            #f2f8ff
        );

    padding:
        30px 25px 24px;

    text-align:
        center;

    border-radius:
        5px;

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            .40
        );

    animation:
        popupAppear
        .4s
        ease;

}


/* =========================================================
   34. POPUP CLOSE BUTTON
========================================================= */

.popup-close {

    position:
        absolute;

    top:
        10px;

    right:
        10px;

    width:
        35px;

    height:
        35px;

    border:
        0;

    border-radius:
        50%;

    background:
        #fff;

    color:
        #333;

    box-shadow:
        0 4px 15px
        rgba(
            0,
            0,
            0,
            .12
        );

    display:
        grid;

    place-items:
        center;

    font-size:
        16px;

}


.popup-close:hover {

    background:
        #f1f4f8;

}


/* =========================================================
   35. POPUP CONTENT
========================================================= */

.popup-label {

    font-size:
        10px;

    letter-spacing:
        2px;

    color:
        var(--blue);

    font-weight:
        900;

}


.placement-popup h2 {

    color:
        #111;

    font-size:
        25px;

    line-height:
        1.2;

    margin:
        5px 0 18px;

}


.popup-avatar {

    width:
        145px;

    height:
        145px;

    margin:
        0 auto 12px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );

    border:
        7px solid
        #fff;

    box-shadow:
        0 8px 28px
        rgba(
            0,
            0,
            0,
            .18
        );

    color:
        white;

    display:
        grid;

    place-items:
        center;

    font-size:
        38px;

    font-weight:
        900;

}


/* SALARY */

.popup-salary {

    display:
        inline-block;

    background:
        var(--yellow);

    color:
        #111;

    font-size:
        25px;

    font-weight:
        900;

    padding:
        4px 17px;

    border-radius:
        25px;

}


.placement-popup h3 {

    color:
        #111;

    font-size:
        22px;

    margin:
        12px 0 0;

}


.placement-popup > p {

    color:
        #697789;

    font-size:
        13px;

}


.popup-company {

    color:
        #176fc8;

    font-size:
        13px;

    font-weight:
        900;

}


.popup-footer {

    margin-top:
        18px;

    color:
        #111;

    font-size:
        18px;

    font-weight:
        900;

}


.popup-footer span {

    color:
        var(--blue);

    margin:
        0 3px;

}


/* =========================================================
   36. CONFETTI
========================================================= */

.confetti-container {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

}


.confetti-container i {

    position:
        absolute;

    top:
        -30px;

    width:
        8px;

    height:
        18px;

    opacity:
        .9;

    animation:
        confettiFall
        5s
        linear
        infinite;

}


/* =========================================================
   37. ANIMATIONS
========================================================= */

@keyframes popupAppear {

    from {

        opacity:
            0;

        transform:
            scale(
                .88
            )
            translateY(
                20px
            );

    }

    to {

        opacity:
            1;

        transform:
            scale(
                1
            )
            translateY(
                0
            );

    }

}


@keyframes confettiFall {

    0% {

        transform:
            translateY(
                -10vh
            )
            rotate(
                0deg
            );

    }

    100% {

        transform:
            translateY(
                120vh
            )
            rotate(
                720deg
            );

    }

}


/* =========================================================
   38. TABLET
========================================================= */

@media
(
    max-width:
    1100px
) {


    .main-navigation {

        gap:
            18px;

    }


    .hero-container {

        gap:
            40px;

    }


    .courses-grid {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }


}


/* =========================================================
   39. TABLET / SMALL LAPTOP
========================================================= */

@media
(
    max-width:
    980px
) {


    .site-header {

        height:
            80px;

    }


    .nav-container {

        height:
            80px;

    }


    .main-navigation {

        gap:
            14px;

    }


    .nav-link,
    .dropdown-button {

        font-size:
            14px;

    }


    .hero-container {

        grid-template-columns:
            1fr;

        padding:
            60px 0;

    }


    .hero-content {

        max-width:
            800px;

    }


    .hero-form-wrapper {

        max-width:
            650px;

        margin:
            auto;

        width:
            100%;

    }


    .about-grid {

        grid-template-columns:
            1fr;

    }


    .about-card {

        max-width:
            650px;

    }


    .trust-container {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .benefits-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .placements-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .contact-form {

        max-width:
            700px;

    }


    .footer-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


}


/* =========================================================
   40. MOBILE NAVIGATION
========================================================= */

@media
(
    max-width:
    760px
) {


    .mobile-menu-btn {

        display:
            grid;

        place-items:
            center;

    }


    .main-navigation {

        position:
            absolute;

        top:
            80px;

        left:
            0;

        right:
            0;

        height:
            auto;

        padding:
            15px 4%;

        background:
            #fff;

        border-bottom:
            1px solid
            var(--border);

        box-shadow:
            var(--shadow);

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

    }


    .main-navigation.open {

        display:
            flex;

    }


    .nav-link,
    .dropdown-button {

        width:
            100%;

        text-align:
            left;

        padding:
            12px;

    }


    .nav-link.active::after {

        display:
            none;

    }


    /* MOBILE DROPDOWN */

    .nav-dropdown {

        width:
            100%;

    }


    .dropdown-button {

        justify-content:
            space-between;

    }


    .dropdown-menu {

        position:
            static;

        width:
            100%;

        padding:
            0 0 0 10px;

        border:
            0;

        border-radius:
            0;

        box-shadow:
            none;

        opacity:
            1;

        visibility:
            visible;

        transform:
            none;

        display:
            none;

    }


    .nav-dropdown.open
    .dropdown-menu {

        display:
            block;

    }


    .dropdown-menu::before {

        display:
            none;

    }


    .nav-dropdown:hover
    .dropdown-menu {

        display:
            none;

    }


    .nav-dropdown.open:hover
    .dropdown-menu {

        display:
            block;

    }


    /* HERO */

    .hero-container {

        padding:
            55px 0;

    }


    .hero-content h1 {

        font-size:
            43px;

    }


    .hero-description {

        font-size:
            16px;

    }


    .hero-features {

        grid-template-columns:
            1fr;

    }


    .hero-statistics {

        flex-wrap:
            wrap;

        gap:
            20px;

    }


    .hero-stat:not(:last-child)::after {

        display:
            none;

    }


    /* COURSES */

    .courses-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    /* CTA */

    .career-cta-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .career-cta h2 {

        font-size:
            34px;

    }


}


/* =========================================================
   41. SMALL MOBILE
========================================================= */

@media
(
    max-width:
    560px
) {


    .container {

        width:
            92%;

    }


    .logo-symbol {

        font-size:
            17px;

    }


    .logo-text strong {

        font-size:
            22px;

    }


    .logo-text span {

        font-size:
            7px;

    }


    .logo-text small {

        font-size:
            7px;

    }


    .section-padding {

        padding:
            65px 0;

    }


    .hero-container {

        padding:
            50px 0;

    }


    .hero-content h1 {

        font-size:
            40px;

        letter-spacing:
            -1.5px;

    }


    .hero-label {

        font-size:
            10px;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .btn {

        width:
            100%;

    }


    .hero-form-card {

        padding:
            23px 18px;

    }


    .form-heading h2 {

        font-size:
            26px;

    }


    /* TRUST */

    .trust-container {

        grid-template-columns:
            1fr;

    }


    /* STATS */

    .statistics-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .stat-box {

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .12
            );

        padding:
            20px 5px;

    }


    .stat-box:nth-child(
        3
    ),
    .stat-box:nth-child(
        4
    ) {

        border-bottom:
            0;

    }


    .stat-box strong {

        font-size:
            31px;

    }


    /* COURSES */

    .courses-grid {

        grid-template-columns:
            1fr;

    }


    /* BENEFITS */

    .benefits-grid {

        grid-template-columns:
            1fr;

    }


    /* PLACEMENTS */

    .placements-grid {

        grid-template-columns:
            1fr;

    }


    /* ABOUT */

    .about-card {

        padding:
            28px;

    }


    .about-mini-stats {

        grid-template-columns:
            1fr;

    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns:
            1fr;

    }


    /* FLOATING BUTTONS */

    .floating-buttons {

        left:
            10px;

        bottom:
            15px;

    }


    .floating-btn {

        width:
            51px;

        height:
            51px;

        border-radius:
            15px;

        font-size:
            24px;

    }


    /* POPUP */

    .placement-popup {

        width:
            91%;

        padding:
            27px 18px 22px;

    }


    .placement-popup h2 {

        font-size:
            21px;

    }


    .popup-avatar {

        width:
            120px;

        height:
            120px;

        font-size:
            32px;

    }


    .popup-salary {

        font-size:
            21px;

    }


}


/* =========================================================
   42. VERY SMALL DEVICES
========================================================= */

@media
(
    max-width:
    380px
) {


    .hero-content h1 {

        font-size:
            35px;

    }


    .hero-statistics {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


    .hero-stat strong {

        font-size:
            24px;

    }


    .hero-stat span {

        font-size:
            10px;

    }


}
/* =========================================================
   SCROLL REVEAL ANIMATION
========================================================= */

.scroll-reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}


.scroll-reveal.revealed {

    opacity: 1;

    transform:
        translateY(0);

}


/* Respect user's reduced-motion preference */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}

/* =========================================================
   PLACEMENT POPUP STUDENT PHOTO
========================================================= */

.placement-popup .popup-avatar {

    width: 145px;
    height: 145px;

    margin: 0 auto 14px;

    border-radius: 50%;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );

    border:
        7px solid #ffffff;

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, .18);

    display: grid;

    place-items: center;

    color: #ffffff;

    font-size: 38px;

    font-weight: 900;

}


.placement-popup .popup-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

}


/* =========================================================
   STUDENT CHANGE ANIMATION
========================================================= */

.student-change {

    animation:
        studentChange
        .45s
        ease;

}


@keyframes studentChange {

    0% {

        opacity: .2;

        transform:
            scale(.92);

    }

    100% {

        opacity: 1;

        transform:
            scale(1);

    }

}


/* =========================================================
   PLACEMENT POPUP MOBILE PHOTO
========================================================= */

@media (max-width: 560px) {

    .placement-popup .popup-avatar {

        width: 120px;

        height: 120px;

        border-width: 6px;

    }

}

/* =========================================================
   PLACEMENT CARD STUDENT PHOTOS
========================================================= */

.placement-card .placement-avatar {

    width: 70px;

    height: 70px;

    min-width: 70px;

    border-radius: 50%;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );

    border:
        3px solid #ffffff;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, .15);

}


.placement-card .placement-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

}


/* Mobile */

@media (max-width: 560px) {

    .placement-card .placement-avatar {

        width: 62px;

        height: 62px;

        min-width: 62px;

    }

}
/* =========================================================
   PLACEMENT POPUP
========================================================= */

.placement-overlay {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.78);

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 99999;

    overflow: hidden;
}


.placement-overlay.show {

    display: flex;
}


/* =========================================================
   POPUP CARD
========================================================= */

.placement-popup {

    position: relative;

    width: min(620px, 92%);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f9ff 100%
        );

    padding: 38px 35px 32px;

    text-align: center;

    border-radius: 7px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.45);

    animation:
        popupIn 0.45s ease;
}


/* =========================================================
   POPUP ANIMATION
========================================================= */

@keyframes popupIn {

    0% {

        opacity: 0;

        transform:
            scale(0.88)
            translateY(25px);
    }

    100% {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.popup-close {

    position: absolute;

    top: 14px;
    right: 14px;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    border: 2px solid #222;

    background: #ffffff;

    color: #222;

    font-size: 21px;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;

    transition: all 0.25s ease;
}


.popup-close:hover {

    background: #111;

    color: #ffffff;

    transform: rotate(90deg);
}


/* =========================================================
   POPUP LABEL
========================================================= */

.popup-label {

    color: #168cff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 3px;

    margin-bottom: 8px;
}


/* =========================================================
   POPUP TITLE
========================================================= */

.placement-popup h2 {

    margin: 0 0 25px;

    color: #111111;

    font-size: 34px;

    line-height: 1.15;

    font-weight: 900;
}


/* =========================================================
   STUDENT PHOTO CIRCLE
========================================================= */

.placement-popup .popup-avatar {

    width: 190px;

    height: 190px;

    margin: 0 auto 20px;

    border-radius: 50%;

    overflow: hidden;

    background: #eaf4ff;

    border: 8px solid #ffffff;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.20);

    position: relative;

    display: block;
}


/* =========================================================
   ACTUAL STUDENT IMAGE
========================================================= */

.placement-popup .popup-avatar img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: 50%;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   PHOTO CHANGE ANIMATION
========================================================= */

.placement-popup .popup-avatar img.photo-changing {

    opacity: 0;

    transform: scale(0.92);
}


.placement-popup .popup-avatar img.photo-visible {

    opacity: 1;

    transform: scale(1);
}


/* =========================================================
   SALARY
========================================================= */

.popup-salary {

    display: inline-block;

    background: #ffe000;

    color: #111111;

    padding: 7px 24px;

    border-radius: 35px;

    font-size: 27px;

    font-weight: 900;

    line-height: 1.2;

    margin-bottom: 12px;

    box-shadow:
        0 5px 15px rgba(255, 214, 0, 0.25);
}


/* =========================================================
   STUDENT NAME
========================================================= */

.placement-popup h3 {

    margin: 4px 0 3px;

    color: #111111;

    font-size: 29px;

    font-weight: 900;
}


/* =========================================================
   COURSE
========================================================= */

.placement-popup > p {

    margin: 0 0 4px;

    color: #718096;

    font-size: 16px;

    font-weight: 600;
}


/* =========================================================
   COMPANY
========================================================= */

.popup-company {

    color: #0873d1;

    font-size: 16px;

    font-weight: 900;
}


/* =========================================================
   FOOTER TEXT
========================================================= */

.popup-footer {

    margin-top: 28px;

    color: #111111;

    font-size: 22px;

    font-weight: 900;
}


.popup-footer span {

    color: #168cff;

    padding: 0 5px;
}


/* =========================================================
   CONFETTI
========================================================= */

.confetti-container {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    overflow: hidden;

    z-index: 1;
}


.confetti-container i {

    position: absolute;

    top: -30px;

    width: 9px;

    height: 18px;

    opacity: 0.9;

    animation:
        confettiFall
        5s
        linear
        infinite;
}


@keyframes confettiFall {

    0% {

        transform:
            translateY(-10vh)
            rotate(0deg);
    }

    100% {

        transform:
            translateY(120vh)
            rotate(720deg);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .placement-popup {

        width: 92%;

        padding:
            30px 20px 25px;
    }


    .placement-popup h2 {

        font-size: 25px;

        margin-bottom: 20px;
    }


    .placement-popup .popup-avatar {

        width: 145px;

        height: 145px;

        border-width: 6px;
    }


    .popup-salary {

        font-size: 22px;

        padding:
            6px 18px;
    }


    .placement-popup h3 {

        font-size: 24px;
    }


    .popup-company {

        font-size: 13px;
    }


    .popup-footer {

        font-size: 18px;

        margin-top: 20px;
    }


    .popup-close {

        width: 42px;

        height: 42px;

        font-size: 18px;
    }

}
/* =========================================================
   IICEA PLACEMENT POPUP - FINAL SIZE FIX
   PASTE THIS AT THE VERY BOTTOM OF style.css
========================================================= */


/* ---------------------------------------------------------
   POPUP OVERLAY
--------------------------------------------------------- */

#placementPopup {

    position: fixed !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: none !important;

    align-items: center !important;

    justify-content: center !important;

    background: rgba(0, 0, 0, 0.78) !important;

    z-index: 999999 !important;

    overflow: hidden !important;

}


/* ---------------------------------------------------------
   SHOW POPUP
--------------------------------------------------------- */

#placementPopup.show {

    display: flex !important;

}


/* ---------------------------------------------------------
   POPUP CARD - SMALLER SIZE
--------------------------------------------------------- */

#placementPopup .placement-popup {

    position: relative !important;

    width: 460px !important;

    max-width: 90vw !important;

    height: auto !important;

    max-height: 90vh !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    padding: 25px 22px 20px !important;

    margin: 0 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f9ff 100%
        ) !important;

    border-radius: 6px !important;

    text-align: center !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.40) !important;

    animation:
        iiceaPopupIn
        0.4s
        ease !important;

}


/* ---------------------------------------------------------
   POPUP OPEN ANIMATION
--------------------------------------------------------- */

@keyframes iiceaPopupIn {

    from {

        opacity: 0 !important;

        transform:
            scale(0.90)
            translateY(15px) !important;

    }

    to {

        opacity: 1 !important;

        transform:
            scale(1)
            translateY(0) !important;

    }

}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

#placementPopup #popupClose {

    position: absolute !important;

    top: 10px !important;

    right: 10px !important;

    width: 40px !important;

    height: 40px !important;

    min-width: 40px !important;

    min-height: 40px !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 2px solid #222222 !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    color: #222222 !important;

    font-size: 18px !important;

    line-height: 1 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    z-index: 9999999 !important;

}


/* ---------------------------------------------------------
   CLOSE BUTTON HOVER
--------------------------------------------------------- */

#placementPopup #popupClose:hover {

    background: #111111 !important;

    color: #ffffff !important;

    transform: rotate(90deg) !important;

}


/* ---------------------------------------------------------
   RECENT PLACEMENT LABEL
--------------------------------------------------------- */

#placementPopup .popup-label {

    display: block !important;

    margin: 0 0 5px 0 !important;

    padding: 0 !important;

    color: #168cff !important;

    font-size: 11px !important;

    line-height: 1.3 !important;

    font-weight: 900 !important;

    letter-spacing: 2.5px !important;

}


/* ---------------------------------------------------------
   MAIN TITLE
--------------------------------------------------------- */

#placementPopup h2 {

    margin: 0 0 14px 0 !important;

    padding: 0 !important;

    color: #111111 !important;

    font-size: 26px !important;

    line-height: 1.15 !important;

    font-weight: 900 !important;

}


/* ---------------------------------------------------------
   STUDENT PHOTO CONTAINER
--------------------------------------------------------- */

#placementPopup .popup-avatar {

    width: 135px !important;

    height: 135px !important;

    min-width: 135px !important;

    min-height: 135px !important;

    max-width: 135px !important;

    max-height: 135px !important;

    margin: 0 auto 12px auto !important;

    padding: 0 !important;

    border-radius: 50% !important;

    overflow: hidden !important;

    background: #eaf4ff !important;

    border: 6px solid #ffffff !important;

    box-sizing: border-box !important;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.18) !important;

}


/* ---------------------------------------------------------
   STUDENT PHOTO
--------------------------------------------------------- */

#placementPopup .popup-avatar img {

    width: 100% !important;

    height: 100% !important;

    min-width: 100% !important;

    min-height: 100% !important;

    max-width: none !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;

    object-position: center !important;

    border: 0 !important;

    border-radius: 50% !important;

}


/* ---------------------------------------------------------
   PHOTO TRANSITION
--------------------------------------------------------- */

#placementPopup .popup-avatar img.photo-changing {

    opacity: 0 !important;

    transform: scale(0.94) !important;

}


#placementPopup .popup-avatar img.photo-visible {

    opacity: 1 !important;

    transform: scale(1) !important;

}


/* ---------------------------------------------------------
   SALARY
--------------------------------------------------------- */

#placementPopup .popup-salary {

    display: inline-block !important;

    width: auto !important;

    margin: 0 0 7px 0 !important;

    padding: 5px 17px !important;

    background: #ffe000 !important;

    color: #111111 !important;

    border-radius: 25px !important;

    font-size: 21px !important;

    line-height: 1.2 !important;

    font-weight: 900 !important;

    box-shadow:
        0 5px 15px rgba(255, 214, 0, 0.20) !important;

}


/* ---------------------------------------------------------
   STUDENT NAME
--------------------------------------------------------- */

#placementPopup h3 {

    margin: 2px 0 2px 0 !important;

    padding: 0 !important;

    color: #111111 !important;

    font-size: 22px !important;

    line-height: 1.3 !important;

    font-weight: 900 !important;

}


/* ---------------------------------------------------------
   COURSE
--------------------------------------------------------- */

#placementPopup #popupStudentCourse {

    margin: 0 0 2px 0 !important;

    padding: 0 !important;

    color: #718096 !important;

    font-size: 13px !important;

    line-height: 1.5 !important;

    font-weight: 600 !important;

}


/* ---------------------------------------------------------
   COMPANY
--------------------------------------------------------- */

#placementPopup .popup-company {

    margin: 0 !important;

    padding: 0 !important;

    color: #0873d1 !important;

    font-size: 13px !important;

    line-height: 1.5 !important;

    font-weight: 900 !important;

}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

#placementPopup .popup-footer {

    margin: 15px 0 0 0 !important;

    padding: 0 !important;

    color: #111111 !important;

    font-size: 17px !important;

    line-height: 1.3 !important;

    font-weight: 900 !important;

}


#placementPopup .popup-footer span {

    color: #168cff !important;

    padding: 0 3px !important;

}


/* ---------------------------------------------------------
   CONFETTI
--------------------------------------------------------- */

#placementPopup .confetti-container {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 1 !important;

}


/* ---------------------------------------------------------
   MOBILE POPUP
--------------------------------------------------------- */

@media (max-width: 600px) {

    #placementPopup .placement-popup {

        width: 350px !important;

        max-width: 90vw !important;

        padding:
            22px 16px 18px !important;

    }


    #placementPopup h2 {

        font-size: 21px !important;

        margin-bottom: 12px !important;

    }


    #placementPopup .popup-avatar {

        width: 105px !important;

        height: 105px !important;

        min-width: 105px !important;

        min-height: 105px !important;

        max-width: 105px !important;

        max-height: 105px !important;

        border-width: 5px !important;

        margin-bottom: 10px !important;

    }


    #placementPopup .popup-salary {

        font-size: 18px !important;

        padding: 5px 15px !important;

    }


    #placementPopup h3 {

        font-size: 19px !important;

    }


    #placementPopup #popupStudentCourse {

        font-size: 12px !important;

    }


    #placementPopup .popup-company {

        font-size: 12px !important;

    }


    #placementPopup .popup-footer {

        font-size: 15px !important;

        margin-top: 12px !important;

    }


    #placementPopup #popupClose {

        width: 35px !important;

        height: 35px !important;

        min-width: 35px !important;

        min-height: 35px !important;

        font-size: 16px !important;

        top: 8px !important;

        right: 8px !important;

    }

}

/* =========================================================
   IICEA FONT SYSTEM
   QUICKXPERT-STYLE TYPOGRAPHY
========================================================= */


/* ---------------------------------------------------------
   NORMAL WEBSITE FONT
--------------------------------------------------------- */

html,
body {

    font-family:
        'Poppins',
        sans-serif !important;

}


/* ---------------------------------------------------------
   MAIN HEADINGS
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        'Lilita One',
        cursive !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   HERO HEADING
--------------------------------------------------------- */

.hero-section h1,
.hero h1,
.hero-content h1,
.hero-title {

    font-family:
        'Lilita One',
        cursive !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   SECTION HEADINGS
--------------------------------------------------------- */

.section-title,
.section-heading,
.section-header h2 {

    font-family:
        'Lilita One',
        cursive !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   PLACEMENT HEADING
--------------------------------------------------------- */

.iicea-placement-heading h2 {

    font-family:
        'Lilita One',
        cursive !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   PLACEMENT STUDENT NAME
--------------------------------------------------------- */

.iicea-student-content h3 {

    font-family:
        'Lilita One',
        cursive !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   POPUP HEADING
--------------------------------------------------------- */

#placementPopup h2 {

    font-family:
        'Lilita One',
        cursive !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   POPUP STUDENT NAME
--------------------------------------------------------- */

#placementPopup h3 {

    font-family:
        'Lilita One',
        cursive !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

nav,
.navbar,
.main-navigation,
.main-navigation a,
.nav-link {

    font-family:
        'Poppins',
        sans-serif !important;

    font-weight: 600 !important;

}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

button,
.btn,
a.btn,
.iicea-placement-button {

    font-family:
        'Poppins',
        sans-serif !important;

    font-weight: 700 !important;

}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

input,
textarea,
select,
label {

    font-family:
        'Poppins',
        sans-serif !important;

}


/* ---------------------------------------------------------
   HERO DESCRIPTION
--------------------------------------------------------- */

.hero-section p,
.hero p,
.hero-content p {

    font-family:
        'Poppins',
        sans-serif !important;

}


/* ---------------------------------------------------------
   PLACEMENT BODY TEXT
--------------------------------------------------------- */

.iicea-student-content p,
.iicea-company {

    font-family:
        'Poppins',
        sans-serif !important;

}


/* ---------------------------------------------------------
   POPUP BODY
--------------------------------------------------------- */

#placementPopup p,
#placementPopup .popup-company,
#placementPopup .popup-footer {

    font-family:
        'Poppins',
        sans-serif !important;

}


/* ---------------------------------------------------------
   IMPORTANT:
   LILITA ONE DOES NOT NEED 700/800/900
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title {

    font-weight: 400 !important;

}

/* =========================================================
   IICEA PLACEMENTS PAGE
   ========================================================= */

.iicea-placement-page-container {
    width: 92% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.iicea-page-header {
    width: 100% !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf1f5 !important;
    position: relative !important;
    z-index: 9999 !important;
}

.iicea-header-container {
    width: 92% !important;
    max-width: 1240px !important;
    min-height: 82px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.iicea-logo img {
    width: 155px !important;
    max-height: 65px !important;
    object-fit: contain !important;
}

.iicea-main-nav {
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
}

.iicea-main-nav a {
    color: #172033 !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: .3s ease !important;
}

.iicea-main-nav a:hover,
.iicea-main-nav a.active {
    color: #128fe5 !important;
}

.iicea-mobile-menu {
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 25px !important;
    color: #128fe5 !important;
}


/* =========================================================
   HERO
   ========================================================= */

.iicea-placement-page-hero {
    position: relative !important;
    min-height: 540px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background:
        linear-gradient(
            120deg,
            #071d3b 0%,
            #0a3563 50%,
            #087fc5 100%
        ) !important;
}

.iicea-placement-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(43, 190, 255, .25),
            transparent 35%
        ) !important;
}

.iicea-placement-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 780px !important;
    padding: 90px 0 !important;
}

.iicea-placement-page-label {
    display: inline-block !important;
    padding: 8px 18px !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 30px !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}

.iicea-placement-hero-content h1 {
    margin: 20px 0 18px !important;
    color: #ffffff !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 68px !important;
    line-height: 1.05 !important;
    font-weight: 400 !important;
}

.iicea-placement-hero-content h1 span {
    display: block !important;
    color: #6ed8ff !important;
}

.iicea-placement-hero-content p {
    max-width: 690px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
}

.iicea-placement-hero-buttons {
    display: flex !important;
    gap: 15px !important;
    margin-top: 32px !important;
}

.iicea-placement-primary-btn,
.iicea-placement-secondary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 0 25px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    transition: .3s ease !important;
}

.iicea-placement-primary-btn {
    background: #ffffff !important;
    color: #087fc5 !important;
}

.iicea-placement-primary-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}

.iicea-placement-secondary-btn {
    border: 2px solid rgba(255,255,255,.7) !important;
    color: #ffffff !important;
}

.iicea-placement-secondary-btn:hover {
    background: #ffffff !important;
    color: #087fc5 !important;
}


/* =========================================================
   STATS
   ========================================================= */

.iicea-placement-stats {
    background: #f6faff !important;
    padding: 55px 0 !important;
}

.iicea-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
}

.iicea-stat-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 28px 20px !important;
    text-align: center !important;
    box-shadow: 0 8px 30px rgba(18, 75, 110, .07) !important;
    border: 1px solid #e8f2fa !important;
}

.iicea-stat-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #eaf7ff !important;
    color: #098cda !important;
    font-size: 23px !important;
}

.iicea-stat-number {
    color: #087fc5 !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 38px !important;
    line-height: 1 !important;
}

.iicea-stat-title {
    margin-top: 9px !important;
    color: #5b6878 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.iicea-placement-stories,
.iicea-placement-process {
    padding: 95px 0 !important;
}

.iicea-placement-section-heading {
    max-width: 760px !important;
    margin: 0 auto 70px !important;
    text-align: center !important;
}

.iicea-placement-section-heading > span {
    color: #118edc !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

.iicea-placement-section-heading h2 {
    margin: 12px 0 15px !important;
    color: #172033 !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 48px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
}

.iicea-placement-section-heading h2 strong {
    color: #118edc !important;
    font-weight: 400 !important;
}

.iicea-placement-section-heading p {
    margin: 0 !important;
    color: #687687 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}


/* =========================================================
   PLACEMENT CARDS
   ========================================================= */

.iicea-placement-page-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 70px 25px !important;
}

.iicea-placement-page-card {
    position: relative !important;
    padding: 88px 25px 28px !important;
    background: #ffffff !important;
    border: 2px solid #1595e5 !important;
    border-top: 7px solid #1595e5 !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-shadow: 0 12px 35px rgba(13, 89, 135, .08) !important;
    transition: .35s ease !important;
}

.iicea-placement-page-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(13, 89, 135, .15) !important;
}

.iicea-page-student-image {
    position: absolute !important;
    top: -58px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 140px !important;
    height: 140px !important;
    padding: 6px !important;
    background: #ffffff !important;
    border: 2px solid #1595e5 !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.13) !important;
}

.iicea-page-student-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.iicea-page-student-info {
    width: 100% !important;
}

.iicea-page-success {
    display: inline-block !important;
    color: #1595e5 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

.iicea-page-student-info h3 {
    margin: 7px 0 3px !important;
    color: #138bd5 !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 28px !important;
    font-weight: 400 !important;
}

.iicea-page-stars {
    color: #ff9d00 !important;
    font-size: 17px !important;
    letter-spacing: 2px !important;
    margin-bottom: 18px !important;
}

.iicea-page-course,
.iicea-page-company {
    margin: 10px 0 !important;
    color: #657282 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.iicea-page-course i,
.iicea-page-company i {
    width: 18px !important;
    color: #1595e5 !important;
    margin-right: 4px !important;
}

.iicea-page-salary {
    display: inline-block !important;
    margin-top: 12px !important;
    padding: 8px 19px !important;
    background: #fff3c8 !important;
    color: #7d5c00 !important;
    border-radius: 30px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}


/* =========================================================
   PROCESS
   ========================================================= */

.iicea-placement-process {
    background: #f6faff !important;
}

.iicea-process-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.iicea-process-card {
    position: relative !important;
    padding: 35px 25px 30px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e3eef7 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.05) !important;
    text-align: center !important;
}

.iicea-process-number {
    position: absolute !important;
    top: 15px !important;
    right: 18px !important;
    color: #dcecf7 !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 30px !important;
}

.iicea-process-icon {
    width: 65px !important;
    height: 65px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #eaf7ff !important;
    color: #0b8bd8 !important;
    font-size: 24px !important;
}

.iicea-process-card h3 {
    margin: 0 0 10px !important;
    color: #172033 !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 27px !important;
    font-weight: 400 !important;
}

.iicea-process-card p {
    margin: 0 !important;
    color: #6b7785 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   CTA
   ========================================================= */

.iicea-placement-cta-section {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.iicea-placement-cta-box {
    padding: 45px 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(
            120deg,
            #087fc5,
            #07508d
        ) !important;
    box-shadow: 0 18px 45px rgba(8,127,197,.2) !important;
}

.iicea-placement-cta-box > div {
    max-width: 720px !important;
}

.iicea-placement-cta-box span {
    color: #aee8ff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
}

.iicea-placement-cta-box h2 {
    margin: 8px 0 10px !important;
    color: #ffffff !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 42px !important;
    font-weight: 400 !important;
}

.iicea-placement-cta-box h2 strong {
    color: #72dcff !important;
    font-weight: 400 !important;
}

.iicea-placement-cta-box p {
    margin: 0 !important;
    color: rgba(255,255,255,.8) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
}

.iicea-placement-cta-button {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 25px !important;
    background: #ffffff !important;
    color: #087fc5 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    transition: .3s ease !important;
}

.iicea-placement-cta-button:hover {
    transform: translateY(-3px) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.iicea-page-footer {
    background: #071d35 !important;
    padding-top: 60px !important;
}

.iicea-footer-container {
    width: 92% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1.3fr !important;
    gap: 50px !important;
    padding-bottom: 45px !important;
}

.iicea-footer-logo {
    width: 150px !important;
    background: #ffffff !important;
    padding: 7px !important;
    border-radius: 5px !important;
}

.iicea-footer-column p,
.iicea-footer-column a {
    color: rgba(255,255,255,.68) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

.iicea-footer-column p {
    margin-top: 18px !important;
}

.iicea-footer-column h3 {
    margin: 0 0 18px !important;
    color: #ffffff !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 25px !important;
    font-weight: 400 !important;
}

.iicea-footer-column a {
    display: block !important;
    margin: 9px 0 !important;
    text-decoration: none !important;
}

.iicea-footer-column a:hover {
    color: #63d7ff !important;
}

.iicea-footer-column p i {
    width: 22px !important;
    color: #55cfff !important;
}

.iicea-footer-bottom {
    padding: 18px 20px !important;
    text-align: center !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.5) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .iicea-placement-hero-content h1 {
        font-size: 55px !important;
    }

    .iicea-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .iicea-placement-page-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .iicea-process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .iicea-footer-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .iicea-header-container {
        min-height: 72px !important;
    }

    .iicea-main-nav {
        display: none !important;
        position: absolute !important;
        top: 72px !important;
        left: 0 !important;
        width: 100% !important;
        padding: 18px 25px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0,0,0,.1) !important;
    }

    .iicea-main-nav.show {
        display: flex !important;
    }

    .iicea-main-nav a {
        width: 100% !important;
        padding: 12px 0 !important;
    }

    .iicea-mobile-menu {
        display: block !important;
    }

    .iicea-placement-page-hero {
        min-height: 500px !important;
    }

    .iicea-placement-hero-content {
        padding: 70px 0 !important;
    }

    .iicea-placement-hero-content h1 {
        font-size: 42px !important;
    }

    .iicea-placement-hero-content p {
        font-size: 14px !important;
    }

    .iicea-placement-hero-buttons {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .iicea-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .iicea-stat-card {
        padding: 20px 10px !important;
    }

    .iicea-stat-number {
        font-size: 30px !important;
    }

    .iicea-placement-stories,
    .iicea-placement-process {
        padding: 65px 0 !important;
    }

    .iicea-placement-section-heading {
        margin-bottom: 60px !important;
    }

    .iicea-placement-section-heading h2 {
        font-size: 36px !important;
    }

    .iicea-placement-page-grid {
        grid-template-columns: 1fr !important;
        gap: 80px !important;
        padding: 0 8px !important;
    }

    .iicea-process-grid {
        grid-template-columns: 1fr !important;
    }

    .iicea-placement-cta-box {
        padding: 35px 25px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .iicea-placement-cta-box h2 {
        font-size: 35px !important;
    }

    .iicea-footer-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

}
/* CSS CODE */
:root {
  --primary-blue: #0080ff;
  --dark-navy: #0d274d;
  --accent-green: #10b981;
  --soft-blue-bg: #f5f9ff;
  --card-bg: #ffffff;
  --card-border: #e6eef8;
  --card-border-hover: #b8d7ff;
  --text-muted: #627d98;
  --card-radius: 18px;
}

.faq-section {
  width: 100%;
  max-width: 1240px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

/* Header matched to screenshot styling */
.faq-header {
  text-align: left;
  margin-bottom: 34px;
}

.faq-tag {
  display: inline-block;
  color: var(--primary-blue);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 10px;
}

.faq-title {
  font-size: 38px;
  font-weight: 900;
  color: var(--dark-navy);
  margin: 0 0 10px 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.faq-title .faq-highlight {
  color: var(--primary-blue);
}

.faq-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 400;
}

/* 2-Row Layout */
.faq-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

.faq-row:last-child {
  margin-bottom: 0;
}

.faq-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Rounded Cards like Student Placement Box */
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 18px 24px;
  box-shadow: 0 4px 14px rgba(13, 39, 77, 0.03);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.faq-item:hover {
  border-color: var(--card-border-hover);
  box-shadow: 0 8px 22px rgba(0, 128, 255, 0.08);
  transform: translateY(-1px);
}

.faq-item[open] {
  border-color: var(--primary-blue);
  box-shadow: 0 10px 28px rgba(0, 128, 255, 0.12);
}

/* Summary / Trigger Bar */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-q-text {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dark-navy);
  line-height: 1.45;
  transition: color 0.2s ease;
}

.faq-item[open] .faq-q-text {
  color: var(--primary-blue);
}

/* Rounded Icon Badge */
.faq-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--soft-blue-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.faq-icon {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1;
  display: inline-block;
  transition: transform 0.28s ease;
}

.faq-item[open] .faq-icon-box {
  background: var(--primary-blue);
}

.faq-item[open] .faq-icon {
  color: #ffffff;
  transform: rotate(45deg);
}

/* Accordion Answer Content */
.faq-answer {
  border-top: 1px solid #f0f4f9;
  margin-top: 14px;
  padding-top: 14px;
}

.faq-answer p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #486581;
}

/* Responsive Styles */
@media (max-width: 900px) {
  .faq-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  .faq-title {
    font-size: 28px;
  }

  .faq-item {
    padding: 16px 18px;
    border-radius: 14px;
  }

  .faq-q-text {
    font-size: 14.5px;
  }
}