* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --black: #030303;

    --gold: #d7a84b;

    --gold-light: #ffe3a0;

    --gold-dark: #8b5d18;

    --white: #ffffff;

    --muted: #aaa7a0;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background: #030303;

    color: var(--white);

    font-family: "Cairo", sans-serif;

    overflow-x: hidden;

}



/* =========================
BACKGROUND
========================= */

.background {

    position: fixed;

    inset: 0;

    z-index: -5;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(180,120,30,.10),
            transparent 35%
        ),

        radial-gradient(
            circle at 50% 80%,
            rgba(255,180,50,.04),
            transparent 35%
        ),

        #030303;

}


.background::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    opacity: .35;

}


.gold-light {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

}


.light-one {

    width: 300px;

    height: 300px;

    background:
        rgba(212,157,54,.13);

    top: -150px;

    left: -100px;

}


.light-two {

    width: 250px;

    height: 250px;

    background:
        rgba(212,157,54,.08);

    right: -120px;

    bottom: 10%;

}


.blue-light {

    position: absolute;

    width: 200px;

    height: 200px;

    background:
        rgba(20,80,130,.08);

    filter: blur(100px);

    left: 30%;

    bottom: 30%;

}



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

.container {

    width: min(
        calc(100% - 26px),
        600px
    );

    margin: auto;

    padding:

        25px 0
        30px;

}



/* =========================
LOGO
========================= */

.logo-box {

    width: 95px;

    height: 95px;

    margin:
        0 auto 5px;

    border-radius: 25px;

    overflow: hidden;

    background: #050505;

    border:
        1px solid
        rgba(215,168,75,.35);

    box-shadow:

        0 10px 35px
        rgba(0,0,0,.7),

        0 0 30px
        rgba(215,168,75,.12);

    animation:

        logoIn .8s ease;

}


.logo-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



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

.hero {

    text-align: center;

}


.teacher-wrapper {

    position: relative;

    width: 100%;

    height: 330px;

    margin:
        -5px auto -15px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    overflow: hidden;

}


.teacher-glow {

    position: absolute;

    width: 240px;

    height: 240px;

    border-radius: 50%;

    background:

        rgba(218,160,55,.13);

    filter: blur(70px);

    bottom: 20px;

}


.teacher {

    position: relative;

    z-index: 2;

    height: 345px;

    width: auto;

    max-width: 95%;

    object-fit: contain;

    object-position: bottom;

    filter:

        drop-shadow(
            0 20px 35px
            rgba(0,0,0,.9)
        );

    animation:

        teacherIn 1s ease;

}



/* =========================
IDENTITY
========================= */

.identity {

    position: relative;

    z-index: 3;

}


.small-title {

    color: var(--gold);

    font-family: "Montserrat";

    font-size: 12px;

    letter-spacing: 3px;

    font-weight: 800;

}


h1 {

    margin-top: 5px;

    font-size: 26px;

    font-weight: 900;

}


.identity p {

    color: #ddd8ce;

    font-size: 14px;

    margin-top: 3px;

}


.official {

    display: inline-block;

    margin-top: 10px;

    padding:

        4px 14px;

    border-radius: 50px;

    border:
        1px solid
        rgba(215,168,75,.25);

    color: var(--gold-light);

    background:
        rgba(215,168,75,.05);

    font-size: 9px;

    letter-spacing: 1px;

}



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

.main-actions {

    margin-top: 25px;

    display: grid;

    gap: 12px;

}


.main-button {

    min-height: 82px;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 13px;

    text-decoration: none;

    color: white;

    border-radius: 21px;

    background:

        linear-gradient(
            120deg,
            rgba(25,25,25,.92),
            rgba(10,10,10,.85)
        );

    border:
        1px solid
        rgba(255,255,255,.09);

    box-shadow:

        0 15px 35px
        rgba(0,0,0,.45);

    transition:
        .25s ease;

}


.main-button:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(215,168,75,.45);

    box-shadow:

        0 20px 45px
        rgba(0,0,0,.6),

        0 0 25px
        rgba(215,168,75,.08);

}


.button-icon {

    flex:
        0 0 52px;

    width: 52px;

    height: 52px;

    border-radius: 17px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

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

}


.app-button {

    border-color:
        rgba(215,168,75,.4);

    background:

        linear-gradient(
            110deg,
            rgba(86,57,18,.45),
            rgba(18,18,18,.9)
        );

}


.app-button .button-icon {

    background:

        linear-gradient(
            135deg,
            #e9c26c,
            #9b651c
        );

}


.platform-button .button-icon {

    background:

        linear-gradient(
            135deg,
            #596dff,
            #764bff
        );

}


.whatsapp-button .button-icon {

    background: #25d366;

}


.button-content {

    flex: 1;

    text-align: right;

}


.button-content strong {

    display: block;

    font-size: 15px;

    font-weight: 800;

}


.button-content span {

    display: block;

    margin-top: 2px;

    color: #918d86;

    font-size: 10px;

}


.button-arrow {

    color: #756f65;

    font-size: 22px;

}



/* =========================
SECTION TITLE
========================= */

.section-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin:

        28px 0 13px;

}


.section-title span {

    flex: 1;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(215,168,75,.35)
        );

}


.section-title span:last-child {

    background:

        linear-gradient(
            90deg,
            rgba(215,168,75,.35),
            transparent
        );

}


.section-title p {

    color: #b6afa3;

    font-size: 11px;

    white-space: nowrap;

}



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

.socials {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

}


.social {

    min-height: 70px;

    padding: 10px;

    display: flex;

    align-items: center;

    gap: 9px;

    text-decoration: none;

    color: white;

    border-radius: 18px;

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

    border:
        1px solid
        rgba(255,255,255,.07);

    transition:
        .25s ease;

}


.social:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(215,168,75,.3);

}


.social-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: Arial;

    font-weight: 900;

    font-size: 19px;

}


.facebook .social-icon {

    background: #1877f2;

}


.youtube .social-icon {

    background: #ff0033;

}


.instagram .social-icon {

    background:

        linear-gradient(
            135deg,
            #7b2cff,
            #ff2d78,
            #ff9b2f
        );

}


.tiktok .social-icon {

    background: #111;

    border:
        1px solid #333;

}


.social strong {

    display: block;

    font-size: 12px;

}


.social small {

    color: #777;

    font-size: 9px;

}


.social b {

    margin-right: auto;

    color: #666;

    font-size: 15px;

}



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

footer {

    text-align: center;

    margin-top: 30px;

}


.footer-logo {

    font-family: "Montserrat";

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2px;

}


.footer-logo span {

    color: var(--gold);

}


footer p {

    margin-top: 4px;

    color: #555;

    font-family: "Montserrat";

    font-size: 9px;

    letter-spacing: 2px;

}


.stars {

    color: var(--gold);

    font-size: 9px;

    letter-spacing: 5px;

    margin-top: 10px;

}


footer small {

    display: block;

    margin-top: 10px;

    color: #444;

    font-size: 8px;

}



/* =========================
ANIMATIONS
========================= */

@keyframes logoIn {

    from {

        opacity: 0;

        transform:
            scale(.7)
            translateY(-20px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


@keyframes teacherIn {

    from {

        opacity: 0;

        transform:
            translateY(35px)
            scale(.95);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}



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

@media(max-width:430px) {

    .container {

        width:
            calc(100% - 20px);

        padding-top: 18px;

    }


    .logo-box {

        width: 82px;

        height: 82px;

        border-radius: 22px;

    }


    .teacher-wrapper {

        height: 285px;

    }


    .teacher {

        height: 300px;

    }


    h1 {

        font-size: 22px;

    }


    .socials {

        gap: 8px;

    }


    .social {

        padding: 8px;

    }

}