﻿/* =========================================================
   IK EDUCATION - POLICY PAGES
   Privacy Policy
   Terms & Conditions
   Refund Policy
========================================================= */


/* =========================================================
   POLICY HERO - DARK
========================================================= */

.policy-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 0 45px;
    background: radial-gradient( circle at 85% 20%, rgba(8, 124, 196, .35), transparent 32% ), radial-gradient( circle at 10% 80%, rgba(245, 130, 32, .16), transparent 28% ), #032b43;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .policy-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(255, 255, 255, .035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, .035) 1px, transparent 1px );
        background-size: 38px 38px;
        pointer-events: none;
    }

    .policy-hero::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        right: -80px;
        top: -110px;
        border-radius: 50%;
        border: 55px solid rgba(255, 255, 255, .025);
        pointer-events: none;
    }

.policy-hero-content {
    position: relative;
    z-index: 1;
    max-width: 790px;
}


/* KICKER */

.policy-kicker {
    margin-bottom: 13px;
    color: #f58220;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}


/* TITLE */

.policy-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -2px;
}

    .policy-hero h1 span {
        color: #55c7e5;
    }


/* DESCRIPTION */

.policy-hero p {
    max-width: 650px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.8;
}


/* BREADCRUMB */

.policy-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    font-size: 13px;
}

    .policy-breadcrumb a {
        color: #8edcf0;
        font-weight: 700;
        text-decoration: none;
        transition: color .2s ease;
    }

        .policy-breadcrumb a:hover {
            color: #fff;
        }

    .policy-breadcrumb span {
        color: rgba(255, 255, 255, .45);
    }

        .policy-breadcrumb span:last-child {
            color: rgba(255, 255, 255, .75);
        }



/* =========================================================
   MAIN
========================================================= */

.policy-section {
    padding: 75px 0 90px;
    background: #fff;
}

.policy-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 38px;
    align-items: start;
}


/* =========================================================
   MAIN CONTENT CARD
========================================================= */

.policy-content {
    min-width: 0;
    padding: 42px;
    border: 1px solid #e0eaf0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(3, 43, 67, .055);
}

.policy-intro {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e8eff3;
}

.policy-intro-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    color: #f58220;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

.policy-intro h2 {
    margin: 0 0 14px;
    color: #032b43;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.7px;
}

.policy-intro p {
    margin: 0;
    color: #526a78;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   POLICY SECTIONS
========================================================= */

.policy-block {
    position: relative;
    margin-bottom: 34px;
}

    .policy-block:last-child {
        margin-bottom: 0;
    }

.policy-block-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 13px;
}

.policy-number {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef8ff;
    color: #087cc4;
    font-size: 11px;
    font-weight: 900;
}

.policy-block h3 {
    margin: 5px 0 0;
    color: #032b43;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.policy-block h4,
.policy-block h5,
.policy-block h6 {
    margin: 22px 0 10px;
    color: #032b43;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 800;
}

.policy-block p {
    margin: 0 0 13px;
    color: #3f5663;
    font-size: 14px;
    line-height: 1.85;
}

    .policy-block p:last-child {
        margin-bottom: 0;
    }

.policy-block a {
    color: #087cc4;
    font-weight: 700;
    text-decoration: none;
}

    .policy-block a:hover {
        text-decoration: underline;
    }


/* =========================================================
   LISTS
========================================================= */

.policy-list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

    .policy-list li {
        position: relative;
        margin-bottom: 10px;
        padding-left: 23px;
        color: #3f5663;
        font-size: 14px;
        line-height: 1.8;
    }

        .policy-list li:last-child {
            margin-bottom: 0;
        }

        .policy-list li::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 2px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #f58220;
        }


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.policy-highlight {
    margin: 20px 0;
    padding: 19px 20px;
    border-left: 4px solid #087cc4;
    border-radius: 0 12px 12px 0;
    background: #f6fbfe;
}

    .policy-highlight p {
        margin: 0;
        color: #334f5e;
        font-size: 13px;
        line-height: 1.8;
    }


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.policy-contact-box {
    margin-top: 18px;
    padding: 19px;
    border-radius: 14px;
    background: #f7fafc;
    border: 1px solid #e1eaef;
}

.policy-contact-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 9px;
    color: #526a78;
    font-size: 13px;
    line-height: 1.65;
}

    .policy-contact-row:last-child {
        margin-bottom: 0;
    }

    .policy-contact-row strong {
        color: #032b43;
        font-weight: 800;
    }

    .policy-contact-row span,
    .policy-contact-row a {
        min-width: 0;
        overflow-wrap: anywhere;
    }


/* =========================================================
   SIDE
========================================================= */

.policy-side {
    position: sticky;
    top: 110px;
}

.policy-side-card {
    overflow: hidden;
    padding: 28px;
    border-radius: 20px;
    background: #032b43;
    color: #fff;
}

.policy-side-kicker {
    margin-bottom: 12px;
    color: #8fe7f4;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.policy-side-card h2 {
    margin: 0;
    color: #fff;
    font-size: 27px;
    line-height: 1.18;
    font-weight: 800;
}

    .policy-side-card h2 span {
        color: #f58220;
    }

.policy-side-card > p {
    margin: 14px 0 22px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.75;
}

.policy-side-contact {
    padding: 16px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .11);
}

.policy-side-contact-label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.policy-side-contact a {
    display: block;
    color: #8fe7f4;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .policy-side-contact a:hover {
        text-decoration: underline;
    }

.policy-side-links {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.policy-side-link {
    min-height: 43px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

    .policy-side-link:hover,
    .policy-side-link.active {
        background: #087cc4;
        color: #fff;
    }

    .policy-side-link span {
        color: #f58220;
    }

    .policy-side-link:hover span,
    .policy-side-link.active span {
        color: #fff;
    }


/* =========================================================
   CLOSING
========================================================= */

.policy-closing {
    margin-top: 32px;
    padding: 22px;
    border-radius: 14px;
    background: #032b43;
    color: #fff;
}

    .policy-closing strong {
        display: block;
        margin-bottom: 6px;
        color: #fff;
        font-size: 15px;
    }

    .policy-closing p {
        margin: 0;
        color: rgba(255,255,255,.74);
        font-size: 13px;
        line-height: 1.75;
    }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .policy-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .policy-side {
        position: static;
    }

    .policy-side-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 25px;
        align-items: center;
    }

        .policy-side-card > p {
            margin-bottom: 0;
        }

    .policy-side-right {
        min-width: 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .policy-hero {
        padding: 45px 0 50px;
    }

        .policy-hero .container {
            width: 100%;
            max-width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            box-sizing: border-box;
        }

    .policy-hero-content {
        max-width: 100%;
    }

    .policy-kicker {
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .policy-hero h1 {
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: -1px;
    }

    .policy-hero p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.7;
    }

    .policy-breadcrumb {
        margin-top: 20px;
        font-size: 12px;
    }

    .policy-section {
        padding: 45px 0 60px;
    }

    .policy-layout {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .policy-content {
        width: 100%;
        padding: 25px 19px;
        border-radius: 17px;
        box-sizing: border-box;
    }

    .policy-intro {
        margin-bottom: 27px;
        padding-bottom: 23px;
    }

        .policy-intro h2 {
            font-size: 24px;
            line-height: 1.3;
        }

        .policy-intro p,
        .policy-block p,
        .policy-list li {
            font-size: 13px;
            line-height: 1.8;
        }

    .policy-block {
        margin-bottom: 29px;
    }

    .policy-block-head {
        gap: 10px;
    }

    .policy-number {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .policy-block h3 {
        margin-top: 4px;
        font-size: 16px;
    }

    .policy-contact-row {
        grid-template-columns: 1fr;
        gap: 2px;
        margin-bottom: 12px;
    }

    .policy-side-card {
        display: block;
        padding: 24px 20px;
    }

        .policy-side-card h2 {
            font-size: 25px;
        }

        .policy-side-card > p {
            margin-bottom: 20px;
        }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .policy-hero {
        padding: 38px 0 43px;
    }

        .policy-hero h1 {
            font-size: 32px;
        }

        .policy-hero p {
            font-size: 13px;
        }

    .policy-content {
        padding: 22px 16px;
    }

    .policy-side-card {
        padding: 22px 17px;
    }
}
/* =========================================================
   PRIVACY / POLICY LISTS
   Same font appearance as normal paragraph
========================================================= */

.policy-block ul,
.policy-block .list-style-two {
    margin: 12px 0 18px;
    padding: 0;
    list-style: none;
}

    .policy-block ul li,
    .policy-block .list-style-two li {
        position: relative;
        margin: 0 0 10px;
        padding-left: 24px;
        /* EXACT SAME TEXT STYLE AS .policy-block p */
        color: #3f5663;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.85;
    }

        .policy-block ul li:last-child,
        .policy-block .list-style-two li:last-child {
            margin-bottom: 0;
        }


        /* =========================================================
   SMALL ORANGE BULLET
========================================================= */

        .policy-block ul li::before,
        .policy-block .list-style-two li::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #f58220;
        }


        /* =========================================================
   TEXT INSIDE LIST
========================================================= */

        .policy-block ul li strong,
        .policy-block .list-style-two li strong {
            color: #3f5663;
            font-family: inherit;
            font-size: inherit;
            font-weight: 700;
        }


        /* Links */

        .policy-block ul li a,
        .policy-block .list-style-two li a {
            color: #087cc4;
            font-family: inherit;
            font-size: inherit;
            font-weight: 700;
            text-decoration: none;
        }

            .policy-block ul li a:hover,
            .policy-block .list-style-two li a:hover {
                text-decoration: underline;
            }


        /* =========================================================
   LONG LIST ITEMS WITH <br>
========================================================= */

        .policy-block .list-style-two li br {
            display: block;
            content: "";
            margin-top: 4px;
        }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .policy-block ul,
    .policy-block .list-style-two {
        margin: 10px 0 16px;
    }

        .policy-block ul li,
        .policy-block .list-style-two li {
            margin-bottom: 9px;
            padding-left: 22px;
            /* SAME AS YOUR MOBILE .policy-block p */
            font-size: 13px;
            line-height: 1.8;
        }

            .policy-block ul li::before,
            .policy-block .list-style-two li::before {
                top: 9px;
                left: 2px;
                width: 6px;
                height: 6px;
            }
}