/*==================================================
        CONTACT PAGE
==================================================*/

.contact-page {

    --accent: #ef902d;
    --accent-dark: #d97812;

    --title: #171717;
    --text: #666;
    --border: #ececec;

    --bg: #fff;
    --card: #ffffff;

    --radius: 24px;

    --shadow:
        0 12px 40px rgba(0, 0, 0, .06);

    --shadow-hover:
        0 22px 60px rgba(0, 0, 0, .10);

    background: #fff;

    color: var(--title);

}

.contact-page a {

    color: inherit;
    text-decoration: none;

}

/* .contact-page~.footer,
.contact-page~.scroll-top-btn {

    display: none;

} */

/*================ SECTIONS ================*/

.contact-hero,
.contact-form-section {

    min-height: auto;
    height: auto;
    overflow: visible;

}

/*================ CONTAINER ================*/

.contact-hero .container,
.contact-form-section .container {

    width: min(92%, 1280px);

    margin: auto;

}

/*================ TAG ================*/

.contact-page .section-tag {

    display: inline-flex;

    align-items: center;

    padding: 10px 20px;

    border-radius: 999px;

    background: #fff6ed;

    color: var(--accent);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .4px;

}

/*================ BUTTONS ================*/

.contact-page .btn-fill {
    border-radius: 999px;

    padding: 15px 33px;

    font-weight: 600;

    box-shadow:
        0 12px 28px rgba(239, 144, 45, .25);

}

.contact-page .btn-outline {

    border-radius: 999px;

    padding: 13px 28px;

    font-size: 15px;


}

/*================ COMMON CARD ================*/

.contact-page .card {

    background: #fff;

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition: .35s;

}

.contact-page .card:hover {

    transform: translateY(-6px);

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

}

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

.contact-hero {

    background:
        radial-gradient(circle at top right,
            rgba(239, 144, 45, .10),
            transparent 35%),
        linear-gradient(180deg, #fff, #fffaf5);

    padding-top: 72px;
    padding-bottom: 22px;

}

.contact-hero-grid {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 42px;

}

/*================ LEFT =================*/

.contact-hero-content {

    max-width: 560px;

}

.contact-hero-content h1 {

    margin: 14px 0;

    font-size: clamp(2.6rem, 4vw, 3.9rem);

    line-height: 1.05;

    font-weight: 700;

    color: #171717;

}

.contact-hero-content h1 span {

    color: var(--accent);

}

.contact-hero-content p {

    font-size: 16px;

    color: #6b7280;

    line-height: 1.65;

    max-width: 500px;

    margin-bottom: 24px;

}

.contact-hero-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}

/*================ RIGHT =================*/

.contact-hero-visual {

    display: flex;

    justify-content: center;

    align-items: center;

}

/*================ ILLUSTRATION =================*/

.education-illustration {

    position: relative;

    width: 400px;

    height: 400px;

    border-radius: 36px;

    background: #fff;

    border: 1px solid #f1f1f1;

    overflow: hidden;

    box-shadow:

        0 20px 60px rgba(0, 0, 0, .08);

}

.education-illustration::before {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background:

        rgba(239, 144, 45, .08);

    right: 40px;

    top: 40px;

}

.education-illustration::after {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #ef902d,
            #ffbf72);

    bottom: 45px;

    right: 40px;

    box-shadow:

        0 20px 40px rgba(239, 144, 45, .30);

}

/*================ MAIN PANEL =================*/

.main-panel {

    position: absolute;

    left: 60px;

    top: 70px;

    width: 235px;

    padding: 22px;

    border-radius: 28px;

    background: #fff;

    z-index: 5;

}

.panel-dot {

    width: 54px;

    height: 54px;

    border-radius: 18px;

    display: block;

    background:

        linear-gradient(135deg,
            #ef902d,
            #ffb55d);

    margin-bottom: 22px;

}

.panel-line {

    display: block;

    height: 10px;

    border-radius: 50px;

    margin-top: 14px;

    background: #eceff4;

}

.panel-line.long {

    width: 100%;

}

.panel-line {

    width: 75%;

}

.panel-line.short {

    width: 55%;

    background: #f6d4b0;

}

/*================ FLOATING CARDS =================*/

.illustration-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 16px 18px;

    border-radius: 18px;

    background: #fff;

    box-shadow:

        0 16px 35px rgba(0, 0, 0, .10);

    font-size: 15px;

    font-weight: 600;

    z-index: 10;

}

.student-card {

    top: 92px;

    right: 35px;

}

.course-card-mini {

    bottom: 55px;

    left: 45px;

}

.illustration-card i {

    color: var(--accent);

}

/*================ ORBIT =================*/

.illustration-orbit {

    position: absolute;

    right: 82px;

    bottom: 82px;

    width: 72px;

    height: 72px;

    border-radius: 26px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fff;

    box-shadow:

        0 16px 35px rgba(0, 0, 0, .10);

    z-index: 20;

}

.illustration-orbit i {

    color: var(--accent);

    font-size: 34px;

}

/*================ QUICK CONTACT =================*/

.contact-quick {

    margin-top: 28px;

    grid-column: 1/-1;

    display: grid;

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

    gap: 16px;

}

.quick-card {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px;

    background: #fff;

    border: 1px solid #f1f1f1;

    border-radius: 22px;

    box-shadow:

        0 12px 30px rgba(0, 0, 0, .06);

}

.quick-card:hover {

    transform: translateY(-6px);

}

.quick-card i {

    width: 4cap;

    height: 48px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fff4e8;

    color: var(--accent);

    font-size: 18px;

}

.quick-card h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

}

.quick-card span {

    display: block;

    margin-top: 6px;

    color: #70798b;

    font-size: 14px;

}

/*==================================================
            CONTACT SECTION
==================================================*/

.contact-form-section {

    background: #fffdf9;

    padding-top: 65px;
    padding-bottom: 18px;

}

/*================ LAYOUT =================*/

.contact-container {

    display: grid;

    grid-template-columns: 1.65fr .75fr;

    gap: 20px;

    align-items: stretch;

}

/*================ FORM CARD =================*/

.contact-form-card {

    background: #fff;

    border-radius: 28px;

    padding: 26px;

    border: 1px solid #efefef;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .06);

}

.form-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 18px;

}

.form-heading h2 {

    font-size: 30px;

    font-weight: 700;

    color: #171717;

    margin: 0;

}

/*================ FORM =================*/

.contact-form {

    display: flex;

    flex-direction: column;

}

.form-grid {

    display: grid;

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

    gap: 14px;

}

.field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.field-full {

    grid-column: 1/-1;

}

.field span {

    font-size: 14px;

    font-weight: 600;

    color: #444;

}

/*================ INPUTS =================*/

.contact-form input,

.contact-form textarea {

    width: 100%;

    border: 1px solid #e5e7eb;

    background: #fff;

    border-radius: 16px;

    padding: 15px 18px;

    font-size: 15px;

    color: #222;

    transition: .3s;

}

.contact-form input {

    height: 48px;

}

.contact-form textarea {

    height: 120px;

    resize: none;

}

.contact-form input:focus,

.contact-form textarea:focus {

    outline: none;

    border-color: #ef902d;

    box-shadow: 0 0 0 4px rgba(239, 144, 45, .12);

}

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

.contact-submit {

    margin-top: 16px;

    width: 100%;

    justify-content: center;

    gap: 10px;

    border-radius: 999px;

    min-height: 48px;

    font-size: 17px;

}

/*================ ALERT =================*/

.public-alert {

    padding: 15px 18px;

    border-radius: 16px;

    margin-bottom: 22px;

    font-size: 15px;

}

.public-alert.success {

    background: #eefaf2;

    color: #14793d;

    border: 1px solid #c7edd2;

}

.public-alert.error {

    background: #fff2f2;

    color: #d53131;

    border: 1px solid #ffd0d0;

}

/*================ INFO CARD =================*/

.contact-info-card {

    background: #fff;

    border-radius: 28px;

    padding: 24px;

    border: 1px solid #efefef;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .06);

    display: flex;

    flex-direction: column;

}

.info-card-header {

    margin-bottom: 18px;

}

.info-card-header h2 {

    font: size 25px;

    line-height: 1.1;

    font-weight: 700;

}

/*================ INFO LIST =================*/

.info-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.info-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 14px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #efefef;

    transition: .3s;

}

.info-item:hover {

    transform: translateX(6px);

    border-color: #ef902d;

}

.info-item i {

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 16px;

    background: #fff5eb;

    color: #ef902d;

    font-size: 20px;

}

.info-item span {

    display: block;

    font-size: 13px;

    color: #888;

    margin-bottom: 4px;

    text-transform: uppercase;

    letter-spacing: .5px;

}

.info-item strong {

    font-size: 16px;

    color: #222;

}

/*================ SOCIAL =================*/

.contact-social {

    display: flex;

    gap: 14px;

    margin-top: 28px;

}

.contact-social a {

    width: 48px;

    height: 48px;

    border-radius: 16px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fff5eb;

    color: #ef902d;

    transition: .3s;

}

.contact-social a:hover {

    background: #ef902d;

    color: #fff;

}

.call-button {

    margin-top: 28px;

    width: 100%;

    justify-content: center;

}

/*==================================================
            CONTACT PAGE - MOBILE
==================================================*/
@media (max-width:991px) {
    .contact-page .btn-outline {
        border-radius: 999px;
        padding: 13px 28px;
        font-size: 15px;
        height: 20px;
        margin-top: 12px;
        font-weight: 600;
    }

    /*---------------- Hero ----------------*/

    .contact-hero {
        padding: 24px 0 18px;
    }

    .contact-hero-grid {
        display: block;
    }

    .contact-hero-content {
        max-width: 100%;
        text-align: center;
    }

    .contact-hero-visual,
    .contact-quick {
        display: none;
    }

    .contact-hero-content h1 {
        font-size: 22px;
        line-height: 1.08;
        margin: 18px 0;
    }

    .contact-hero-content p {
        font-size: 15px;
        line-height: 1.7;
        max-width: 95%;
        margin: 0 auto 24px;
    }

    .contact-hero-actions {
        display: flex;
        gap: 12px;
    }

    .contact-hero-actions a {
        flex: 1;
        justify-content: center;
    }

    /*---------------- Section ----------------*/

    .contact-form-section {
        padding: 16px 0 80px;
    }

    .contact-form-section .container {
        width: 94%;
        max-width: 480px;
        margin: auto;
        padding: 0;
    }

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

    /*---------------- Cards ----------------*/

    .contact-form-card,
    .contact-info-card {
        width: 100%;
        margin: 0 auto;
        padding: 22px;
        border-radius: 28px;
    }

    /*---------------- Form Heading ----------------*/

    .form-heading {
        display: block;
        margin-bottom: 22px;
    }

    .form-heading .section-tag {
        display: inline-flex;
        margin-bottom: 14px;
    }

    .form-heading h2 {
        font-size: clamp(36px, 8vw, 46px);
        line-height: 1.1;
        margin: 0;
    }

    /*---------------- Form ----------------*/

    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .field-full {
        grid-column: auto;
    }

    .field span {
        display: none;
        font-size: 16px;
        margin-bottom: 4px;
    }

    .contact-form input {
        height: 56px;
        border-radius: 18px;
        font-size: 15px;
    }

    .contact-form textarea {
        height: 150px;
        border-radius: 18px;
        font-size: 15px;
    }

    .contact-submit {
        margin-top: 18px;
        height: 56px;
        font-size: 17px;
    }

    /*---------------- Contact Info ----------------*/

    .info-card-header {
        display: block;
        margin-bottom: 18px;
    }

    .info-card-header .section-tag {
        margin-bottom: 14px;
    }

    .info-card-header h2 {
        font-size: clamp(34px, 8vw, 42px);
        line-height: 1.1;
        margin: 0;
    }

    .info-list {
        gap: 12px;
    }

    .info-item {
        padding: 14px 16px;
        gap: 14px;
        border-radius: 18px;
        min-height: 82px;
    }

    .info-item i {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 18px;
        flex-shrink: 0;
    }

    .info-item span {
        font-size: 12px;
        margin-bottom: 3px;
        letter-spacing: .4px;
    }

    .info-item strong {
        font-size: 13px;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-social {
        justify-content: center;
        gap: 12px;
        margin-top: 18px;
    }

    .contact-social a {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .call-button {
        margin-top: 18px;
        min-height: 54px;
        font-size: 17px;
    }

}

/*==================================================
            SMALL MOBILE
==================================================*/
@media (max-width:480px) {

    .contact-form-section .container {
        width: 92%;
    }

    .contact-form-card,
    .contact-info-card {
        padding: 20px;
        border-radius: 24px;
    }

    .section-tag {
        font-size: 12px;
        padding: 9px 18px;
    }

    .form-heading h2 {
        font-size: 22px;
    }

    .info-card-header h2 {
        font-size: 24px;
    }

    .contact-form input {
        height: 54px;
    }

    .contact-form textarea {
        height: 140px;
    }

    .info-item {
        min-height: 78px;
        padding: 13px 14px;
    }

    .info-item strong {
        font-size: 10px;
    }

}