/* =========================================================
   GURU TATWA
   GLOBAL
========================================================= */

:root {

    --gt-bg: #020817;

    --gt-header-bg: #030914;

    --gt-gold: #D4AF37;

    --gt-gold-light: #F5D76E;

    --gt-gold-bright: #FFD968;

    --gt-white: #FFFFFF;

    --gt-text: #E8ECF2;

    --gt-text-muted: #8F9AAA;

    --gt-border:
    rgba(255, 255, 255, 0.10);

    --gt-header-height: 82px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {

    margin: 0;
    padding: 0;

    background:

    radial-gradient(
        circle at 10% 0%,
        rgba(212, 175, 55, 0.035),
        transparent 28%
    ),

    radial-gradient(
        circle at 90% 0%,
        rgba(30, 70, 130, 0.08),
        transparent 35%
    ),

    var(--gt-bg);

    color:
    var(--gt-text);

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

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


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

/* =========================================================
   GURU TATWA HEADER
========================================================= */

.gt-header {
    display: block !important;

    width: 100%;
    height: 78px;

    background: #020817;

    border-bottom: 1px solid rgba(245, 185, 0, 0.15);

    position: relative;
    z-index: 9999;

    visibility: visible !important;
    opacity: 1 !important;
}


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

.gt-header-inner {
    width: 100%;
    max-width: 1400px;

    height: 100%;

    margin: 0 auto;
    padding: 0 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


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

.gt-logo {
    display: flex !important;

    align-items: center;

    text-decoration: none;

    visibility: visible !important;
}


.gt-logo img {
    display: block !important;

    width: 175px;
    height: auto;

    max-width: 100%;
}


/* =========================================================
   DESKTOP ACCOUNT
========================================================= */

.gt-header-actions {
    display: flex;

    align-items: center;
}


.gt-account-btn {
    display: inline-flex;

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

    gap: 8px;

    min-height: 42px;

    padding: 0 18px;

    border: 1px solid #f5b900;

    border-radius: 8px;

    background: transparent;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: 0.25s ease;
}


.gt-account-btn .material-symbols-rounded {
    color: #f5b900;

    font-size: 20px;
}


.gt-account-btn:hover {
    background: #f5b900;

    color: #020817;
}


.gt-account-btn:hover .material-symbols-rounded {
    color: #020817;
}


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

.gt-mobile-actions {
    display: none;
}


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

@media (max-width: 767px) {

    .gt-header {
        display: block !important;

        width: 100%;
        height: 68px;

        background: #020817;
    }


    .gt-header-inner {
        width: 100%;

        height: 68px;

        padding: 0 18px;

        display: flex;

        align-items: center;

        justify-content: space-between;
    }


    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .gt-logo {
        display: flex !important;

        align-items: center;
    }


    .gt-logo img {
        display: block !important;

        width: 145px;

        height: auto;
    }


    /* -----------------------------------------------------
       HIDE DESKTOP BUTTON
    ----------------------------------------------------- */

    .gt-header-actions {
        display: none !important;
    }


    /* -----------------------------------------------------
       MOBILE USER
    ----------------------------------------------------- */

    .gt-mobile-actions {
        display: flex !important;

        align-items: center;

        justify-content: center;

        gap: 8px;
    }

    .gt-mobile-subscription {
        width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #f5b900 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #f5b900 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    }


    .gt-mobile-account {
        width: 40px;
        height: 40px;

        display: flex !important;

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

        border: 1px solid #f5b900;

        border-radius: 50%;

        background: transparent;

        color: #f5b900;

        text-decoration: none;

        flex-shrink: 0;
    }


    .gt-mobile-account .material-symbols-rounded {
        font-size: 21px;

        color: #f5b900;
    }

}

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

.gt-explore-footer {

    grid-column:
    1 / -1;

    padding-top:
    18px;

    border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.gt-explore-footer a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
    var(--gt-gold-light);

    font-size:
    13px;

    font-weight:
    700;
}


.gt-explore-footer
.material-symbols-rounded {

    font-size:
    19px;
}


/* =========================================================
   SEARCH
========================================================= */

.gt-search-wrapper {

    flex: 1;

    min-width: 0;

    display: flex;

    justify-content: center;
}


.gt-search-form {

    position: relative;

    width: 100%;

    max-width: 650px;

    height: 48px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,0.055),
        rgba(255,255,255,0.025)
    );

    border:
    1px solid
    rgba(255,255,255,0.12);

    border-radius:
    11px;

    box-shadow:

    inset 0 1px 0
    rgba(255,255,255,0.035),

    0 5px 25px
    rgba(0,0,0,0.15);

    transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.gt-search-form:hover {

    border-color:
    rgba(212,175,55,0.28);
}


.gt-search-form:focus-within {

    border-color:
    rgba(212,175,55,0.60);

    box-shadow:

    0 0 0 3px
    rgba(212,175,55,0.055),

    0 8px 30px
    rgba(0,0,0,0.20);
}


/* =========================================================
   SEARCH ICON
========================================================= */

.gt-search-icon {

    flex-shrink: 0;

    margin-left:
    16px;

    color:
    #798598;

    font-size:
    21px;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.gt-search-input {

    flex: 1;

    min-width: 0;

    width: 100%;

    height: 100%;

    padding:
    0 14px;

    border: 0;

    outline: 0;

    background:
    transparent;

    color:
    #FFFFFF;

    font-size:
    14px;

    font-weight:
    500;
}


.gt-search-input::placeholder {

    color:
    #8994A5;

    opacity:
    1;
}


.gt-search-input::-webkit-search-cancel-button {

    appearance:
    none;
}


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

.gt-search-btn {

    position: relative;

    flex-shrink: 0;

    width:
    54px;

    height:
    100%;

    padding:
    0;

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    border:
    0;

    cursor:
    pointer;

    color:
    #111111;

    background:

    linear-gradient(
        135deg,
        #C99B25 0%,
        #D4AF37 45%,
        #F5D76E 100%
    );

    transition:
    all 0.25s ease;
}


.gt-search-btn:hover {

    background:

    linear-gradient(
        135deg,
        #D4AF37,
        #FFE083
    );

    box-shadow:
    0 0 20px
    rgba(212,175,55,0.20);
}


.gt-search-btn .material-symbols-rounded {

    font-size:
    23px;
}


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

.gt-header-actions {

    flex-shrink: 0;

    display:
    flex;

    align-items:
    center;

    gap:
    8px;

    margin-left:
    auto;
}


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

.gt-header-icon {

    width:
    42px;

    height:
    42px;

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid
    transparent;

    border-radius:
    50%;

    background:
    transparent;

    color:
    #D4AF37;

    cursor:
    pointer;

    transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.gt-header-icon
.material-symbols-rounded {

    font-size:
    24px;
}


.gt-header-icon:hover {

    color:
    #F5D76E;

    background:
    rgba(212,175,55,0.09);

    border-color:
    rgba(212,175,55,0.15);

    transform:
    translateY(-1px);
}


/* =========================================================
   LOGIN
========================================================= */

.gt-login-btn {

    height:
    42px;

    padding:
    0 20px;

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    border:
    1px solid
    rgba(212,175,55,0.50);

    border-radius:
    8px;

    color:
    #FFFFFF;

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

    font-size:
    13px;

    font-weight:
    700;

    white-space:
    nowrap;

    transition:
    all 0.25s ease;
}


.gt-login-btn:hover {

    color:
    var(--gt-gold-light);

    border-color:
    var(--gt-gold);

    background:
    rgba(212,175,55,0.07);
}


/* =========================================================
   REGISTER
========================================================= */

.gt-register-btn {

    height:
    42px;

    padding:
    0 21px;

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

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

    border-radius:
    8px;

    color:
    #111111;

    background:

    linear-gradient(
        135deg,
        #D4AF37,
        #F5D76E
    );

    font-size:
    13px;

    font-weight:
    800;

    white-space:
    nowrap;

    box-shadow:
    0 5px 20px
    rgba(212,175,55,0.12);

    transition:
    all 0.25s ease;
}


.gt-register-btn:hover {

    transform:
    translateY(-1px);

    background:

    linear-gradient(
        135deg,
        #E4BD42,
        #FFE58A
    );

    box-shadow:
    0 8px 28px
    rgba(212,175,55,0.25);
}


/* =========================================================
   MATERIAL SYMBOLS
========================================================= */

.material-symbols-rounded {

    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;

    line-height:
    1;
}


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

.gt-main {

    width:
    100%;

    min-height:
    calc(100vh - var(--gt-header-height));
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .gt-header-inner {

        padding:
        0 22px;

        gap:
        18px;
    }


    .gt-logo-wrapper {

        width:
        205px;
    }


    .gt-logo img {

        width:
        195px;
    }


    .gt-explore-btn {

        font-size:
        13px;
    }


    .gt-search-form {

        max-width:
        520px;
    }


    .gt-explore-dropdown {

        width:
        680px;
    }

}


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

@media (max-width: 991px) {

    :root {

        --gt-header-height:
        74px;
    }


    .gt-header-inner {

        padding:
        0 16px;

        gap:
        12px;
    }


    .gt-logo-wrapper {

        width:
        160px;
    }


    .gt-logo img {

        width:
        155px;
    }


    .gt-explore-btn {

        padding:
        0 5px;

        font-size:
        12px;
    }


    .gt-search-form {

        height:
        44px;

        max-width:
        none;
    }


    .gt-search-input {

        font-size:
        12px;

        padding:
        0 10px;
    }


    .gt-search-icon {

        margin-left:
        11px;

        font-size:
        19px;
    }


    .gt-search-btn {

        width:
        46px;
    }


    .gt-header-icon {

        width:
        38px;

        height:
        38px;
    }


    .gt-header-icon
    .material-symbols-rounded {

        font-size:
        22px;
    }


    .gt-login-btn,
    .gt-register-btn {

        height:
        39px;

        padding:
        0 13px;

        font-size:
        12px;
    }

}


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

@media (max-width: 767px) {

    :root {

        --gt-header-height:
        68px;
    }


    .gt-header-inner {

        padding:
        0 12px;

        gap:
        8px;
    }


    .gt-logo-wrapper {

        width:
        auto;
    }


    .gt-logo img {

        width:
        115px;
    }


    /* Explore becomes icon/text compact */

    .gt-explore-btn span:first-child {

        display:
        none;
    }


    .gt-explore-btn {

        width:
        36px;

        height:
        38px;

        justify-content:
        center;
    }


    .gt-explore-btn
    .material-symbols-rounded {

        font-size:
        22px;
    }


    .gt-search-wrapper {

        flex:
        1;
    }


    .gt-search-form {

        height:
        40px;

        border-radius:
        8px;
    }


    .gt-search-icon {

        display:
        none;
    }


    .gt-search-input {

        font-size:
        10px;

        padding:
        0 10px;
    }


    .gt-search-btn {

        width:
        38px;
    }


    .gt-search-btn
    .material-symbols-rounded {

        font-size:
        19px;
    }


    .gt-header-actions {

        gap:
        3px;
    }


    .gt-header-icon {

        width:
        35px;

        height:
        35px;
    }


    .gt-header-icon
    .material-symbols-rounded {

        font-size:
        20px;
    }


    .gt-login-btn,
    .gt-register-btn {

        height:
        35px;

        padding:
        0 9px;

        border-radius:
        7px;

        font-size:
        10px;
    }


    /* Mobile explore dropdown */

    .gt-explore-dropdown {

        position:
        fixed;

        top:
        var(--gt-header-height);

        left:
        10px;

        right:
        10px;

        width:
        auto;

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

        padding:
        20px;

        max-height:
        calc(100vh - var(--gt-header-height) - 20px);

        overflow-y:
        auto;
    }

}


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

@media (max-width: 480px) {

    .gt-logo img {

        width:
        220px;
    }


    .gt-explore-btn {

        display:
        none;
    }


    .gt-header-icon {

        width:
        32px;

        height:
        32px;
    }


    .gt-header-icon
    .material-symbols-rounded {

        font-size:
        19px;
    }


    .gt-login-btn {

        display:
        none;
    }


    .gt-register-btn {

        padding:
        0 9px;

        font-size:
        10px;
    }

}

.gt-header-icon {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px;

    background: rgba(212, 175, 55, 0.035);

    color: #D4AF37;

    cursor: pointer;

    transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.gt-header-icon .material-symbols-rounded {
    font-size: 22px;
}

.gt-header-icon:hover {
    color: #F5D76E;

    border-color: #D4AF37;

    background:
    rgba(212, 175, 55, 0.10);

    box-shadow:
    0 0 15px rgba(212, 175, 55, 0.12);

    transform: translateY(-1px);
}

@media (max-width: 767px) {

    .gt-header-icon {
        width: 36px;
        height: 36px;
        border-radius: 7px;
    }

    .gt-header-icon .material-symbols-rounded {
        font-size: 20px;
    }

}


/* =========================================================
   MOBILE MENU OVERLAY
   ========================================================= */

   .gt-mobile-menu-overlay {
    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 99998 !important;

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

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.gt-mobile-menu-overlay.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   MOBILE SIDE MENU
   ========================================================= */

   .gt-mobile-menu {
    position: fixed !important;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 99999 !important;

    width: min(380px, 88vw);

    height: 100vh;

    padding: 20px;

    overflow-y: auto;

    background:
    linear-gradient(
        180deg,
        #061326 0%,
        #020916 100%
    );

    border-left: 1px solid
    rgba(245, 189, 33, 0.25);

    box-shadow:
    -15px 0 50px rgba(0, 0, 0, 0.5);

    box-sizing: border-box;

    transform: translateX(100%);

    visibility: hidden;

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


.gt-mobile-menu.active {
    transform: translateX(0);

    visibility: visible;
}


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

   .gt-mobile-menu-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding-bottom: 18px;

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

    color: #ffffff;

    font-size: 20px;

    font-weight: 600;
}


.gt-mobile-menu-top button {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 1px solid
    rgba(255, 255, 255, 0.15);

    border-radius: 8px;

    background: transparent;

    color: #ffffff;

    cursor: pointer;
}


.gt-mobile-menu-top button:hover {
    color: #f5bd21;

    border-color: #f5bd21;
}


/* =========================================================
   USER AREA
   ========================================================= */

   .gt-mobile-user {
    display: flex;

    align-items: center;

    gap: 13px;

    margin: 22px 0;

    padding: 15px;

    border: 1px solid
    rgba(245, 189, 33, 0.15);

    border-radius: 10px;

    background:
    rgba(245, 189, 33, 0.035);
}


.gt-mobile-user-avatar {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 46px;
    height: 46px;

    border: 1px solid
    rgba(245, 189, 33, 0.45);

    border-radius: 50%;

    color: #f5bd21;
}


/* =========================================================
   NAV
   ========================================================= */

   .gt-mobile-nav {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 4px;
}


.gt-mobile-nav a,
.gt-mobile-nav-button {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    min-height: 52px;

    padding: 0 12px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #d8e0eb;

    text-decoration: none;

    font-family: inherit;

    font-size: 14px;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;
}


.gt-mobile-nav a:hover,
.gt-mobile-nav-button:hover {
    background:
    rgba(245, 189, 33, 0.08);

    color: #f5bd21;
}


.gt-mobile-nav
.material-symbols-rounded {
    color: #f5bd21;

    font-size: 21px;
}


.gt-mobile-arrow {
    margin-left: auto;
}


/* =========================================================
   DIVIDER
   ========================================================= */

   .gt-mobile-divider {
    width: 100%;

    height: 1px;

    margin: 20px 0;

    background:
    rgba(255, 255, 255, 0.08);
}


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

   .gt-mobile-account {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.gt-mobile-login,
.gt-mobile-register {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 45px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;
}


.gt-mobile-login {
    border: 1px solid
    rgba(245, 189, 33, 0.5);

    color: #f5bd21;
}


.gt-mobile-register {
    background: #f5bd21;

    color: #07111f;
}
/* =========================================================
   GURU TATWA HERO
========================================================= */

.gt-hero {
    position: relative;

    width: 100%;
    height: 510px;

    overflow: hidden;

    background:
    #020817;

    isolation: isolate;
}


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

.gt-hero-background {
    position: absolute;

    inset: 0;

    z-index: -5;

    background:

    radial-gradient(
        circle at 78% 50%,
        rgba(244,183,40,.16),
        transparent 27%
    ),

    radial-gradient(
        circle at 90% 25%,
        rgba(244,183,40,.08),
        transparent 25%
    ),

    linear-gradient(
        90deg,
        #020817 0%,
        #020817 40%,
        #061022 100%
    );
}


/* =========================================================
   GOLD GLOW
========================================================= */

.gt-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;
}

.gt-glow-one {

    width: 500px;
    height: 500px;

    right: 5%;
    top: 20%;

    background:
    radial-gradient(
        circle,
        rgba(244,183,40,.12),
        transparent 68%
    );

    filter:
    blur(20px);
}

.gt-glow-two {

    width: 300px;
    height: 300px;

    right: 30%;
    bottom: -150px;

    background:
    radial-gradient(
        circle,
        rgba(244,183,40,.08),
        transparent 70%
    );

    filter:
    blur(30px);
}


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

.gt-hero-container {

    position: relative;

    width: 100%;
    max-width: 1400px;

    height: 100%;

    margin: 0 auto;

    padding:
    0 40px;

    display: grid;

    grid-template-columns:
    43% 57%;

    align-items: center;
}


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

.gt-hero-content {

    position: relative;

    z-index: 20;

    width: 100%;

    max-width: 600px;
}


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

.gt-hero-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color:
    #f4b728;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.gt-hero-label span {

    display: block;

    width: 25px;
    height: 3px;

    background:
    #f4b728;
}


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

.gt-hero-title {

    margin: 0;

    color:
    #ffffff;

    font-size:
    clamp(48px, 4.3vw, 52px);

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2.5px;
}

.gt-hero-title strong {

    display: block;

    margin-top: 6px;

    font-weight: 800;

    background:
    linear-gradient(
        135deg,
        #ffe8a3 0%,
        #f4b728 48%,
        #d48f06 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.gt-hero-description {

    max-width: 500px;

    margin:
    23px 0 28px;

    color:
    #a5b0c1;

    font-size: 16px;

    line-height: 1.75;
}


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

.gt-hero-actions {

    display: flex;

    align-items: center;

    gap: 12px;
}

.gt-hero-btn {

    min-height: 46px;

    padding:
    0 21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 700;

    transition:
    all .25s ease;
}


/* GOLD */

.gt-btn-gold {

    color:
    #111;

    background:
    linear-gradient(
        135deg,
        #ffe69b,
        #f4b728,
        #d79408
    );

    border:
    1px solid #f4b728;

    box-shadow:
    0 8px 25px
    rgba(244,183,40,.15);
}

.gt-btn-gold:hover {

    transform:
    translateY(-2px);

    box-shadow:
    0 12px 35px
    rgba(244,183,40,.28);
}


/* OUTLINE */

.gt-btn-outline {

    color:
    #f4b728;

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

    border:
    1px solid
    rgba(244,183,40,.55);
}

.gt-btn-outline:hover {

    color:
    #111;

    background:
    #f4b728;

    border-color:
    #f4b728;

    transform:
    translateY(-2px);
}


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

.gt-hero-stats {

    display: flex;

    align-items: center;

    margin-top: 37px;

    padding-top: 19px;

    max-width: 530px;

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

.gt-stat {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
    0 20px;

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

.gt-stat:first-child {

    padding-left: 0;
}

.gt-stat:last-child {

    border-right: 0;
}

.gt-stat-icon {

    width: 50px;
    height: 50px;

    display: flex;

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

    border:
    1px solid
    rgba(244,183,40,.5);

    border-radius: 50%;

    color:
    #f4b728;
}

.gt-stat-icon .material-symbols-outlined {

    font-size: 26px;
}

.gt-stat strong {

    display: block;

    color:
    #ffffff;

    font-size: 24px;

    line-height: 1.1;
}

.gt-stat span {

    display: block;

    margin-top: 3px;

    color:
    #788599;

    font-size: 14px;
}


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

.gt-course-slider {

    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;

    overflow: visible;

    z-index: 10;
}


/* =========================================================
   TRACK
========================================================= */

.gt-course-track {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
}


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

.gt-course-card {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 270px;
    height: 370px;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border:
    1px solid
    rgba(244,183,40,.28);

    border-radius: 15px;

    background:
    linear-gradient(
        145deg,
        #0a1b35,
        #030c1e
    );

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

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

    opacity: 0;

    transition:
    transform .65s cubic-bezier(.22,1,.36,1),
    opacity .65s ease,
    filter .65s ease;

    will-change:
    transform,
    opacity;

    z-index: 1;
}


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

.gt-course-image {

    position: relative;

    width: 100%;
    height: 190px;

    overflow: hidden;
}

.gt-course-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
    transform .6s ease;
}

.gt-course-card:hover
.gt-course-image img {

    transform:
    scale(1.04);
}


/* =========================================================
   IMAGE DARK OVERLAY
========================================================= */

.gt-course-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        180deg,
        transparent 45%,
        rgba(2,8,23,.8) 100%
    );
}


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

.gt-course-tag {

    position: absolute;

    left: 14px;
    bottom: 12px;

    z-index: 3;

    color:
    #f4b728;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


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

.gt-course-body {

    padding:
    18px;
}

.gt-course-body h3 {

    margin:
    0 0 8px;

    color:
    #ffffff;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;
}

.gt-course-body p {

    margin: 0;

    color:
    #8793a6;

    font-size: 16px;

    line-height: 1.55;
}


/* =========================================================
   BESTSELLER
========================================================= */

.gt-bestseller {

    display: inline-block;

    margin-bottom: 7px;

    padding:
    3px 6px;

    border-radius: 3px;

    background:
    rgba(244,183,40,.12);

    color:
    #f4b728;

    font-size: 12px;

    font-weight: 700;
}


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

.gt-course-meta {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 16px;

    color:
    #77859a;

    font-size: 16px;
}

.gt-course-meta span {

    display: inline-flex;

    align-items: center;

    gap: 3px;
}

.gt-course-meta
.material-symbols-outlined {

    color:
    #f4b728;

    font-size: 13px;
}


/* =========================================================
   SLIDER POSITIONS
========================================================= */

/*
   The JavaScript adds these classes automatically.
*/


.gt-course-card.gt-active {

    width: 315px;
    height: 400px;

    transform:
    translate(
        calc(-50% + 20px),
        -50%
    )
    scale(1);

    opacity: 1;

    z-index: 30;

    filter:
    brightness(1);

    border-color:
    rgba(244,183,40,.65);

    box-shadow:
    0 30px 70px
    rgba(0,0,0,.7),

    0 0 45px
    rgba(244,183,40,.10);
}


.gt-course-card.gt-active
.gt-course-image {

    height:
    220px;
}


/* LEFT */

.gt-course-card.gt-left {

    transform:
    translate(
        calc(-50% - 205px),
        -50%
    )
    scale(.78);

    opacity:
    .55;

    z-index:
    20;

    filter:
    brightness(.58);
}


/* RIGHT */

.gt-course-card.gt-right {

    transform:
    translate(
        calc(-50% + 260px),
        -50%
    )
    scale(.78);

    opacity:
    .72;

    z-index:
    20;

    filter:
    brightness(.65);
}


/* FAR LEFT */

.gt-course-card.gt-far-left {

    transform:
    translate(
        calc(-50% - 360px),
        -50%
    )
    scale(.64);

    opacity:
    .16;

    z-index:
    10;

    filter:
    brightness(.35);
}


/* FAR RIGHT */

.gt-course-card.gt-far-right {

    transform:
    translate(
        calc(-50% + 420px),
        -50%
    )
    scale(.64);

    opacity:
    .22;

    z-index:
    10;

    filter:
    brightness(.38);
}


/* HIDDEN */

.gt-course-card.gt-hidden {

    transform:
    translate(
        -50%,
        -50%
    )
    scale(.5);

    opacity:
    0;

    pointer-events:
    none;

    z-index:
    0;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.gt-slider-arrow {

    position: absolute;

    top: 50%;

    width: 42px;
    height: 42px;

    margin: 0;

    display: flex;

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

    border:
    1px solid
    rgba(244,183,40,.6);

    border-radius: 50%;

    background:
    rgba(2,8,23,.88);

    color:
    #f4b728;

    transform:
    translateY(-50%);

    z-index:
    100;

    transition:
    all .25s ease;
}

.gt-slider-prev {

    left:
    0;
}

.gt-slider-next {

    right:
    0;
}

.gt-slider-arrow:hover {

    background:
    #f4b728;

    color:
    #111111;

    box-shadow:
    0 0 25px
    rgba(244,183,40,.3);
}

.gt-slider-arrow
.material-symbols-outlined {

    font-size: 22px;
}


/* =========================================================
   DOTS
========================================================= */

.gt-slider-dots {

    position: absolute;

    left: 50%;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 7px;

    transform:
    translateX(-50%);

    z-index:
    100;
}

.gt-slider-dot {

    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;

    border-radius: 50%;

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

    transition:
    all .3s ease;
}

.gt-slider-dot.active {

    width: 24px;

    border-radius: 5px;

    background:
    #f4b728;

    box-shadow:
    0 0 10px
    rgba(244,183,40,.35);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1350px) {

    .gt-hero-container {

        padding:
        0 30px;

        grid-template-columns:
        44% 56%;
    }

    .gt-hero-title {

        font-size:
        55px;
    }

    .gt-course-card.gt-active {

        transform:
        translate(
            calc(-50% + 10px),
            -50%
        )
        scale(.90);
    }

    .gt-course-card.gt-left {

        transform:
        translate(
            calc(-50% - 170px),
            -50%
        )
        scale(.68);
    }

    .gt-course-card.gt-right {

        transform:
        translate(
            calc(-50% + 215px),
            -50%
        )
        scale(.68);
    }

    .gt-course-card.gt-far-left {

        transform:
        translate(
            calc(-50% - 285px),
            -50%
        )
        scale(.55);
    }

    .gt-course-card.gt-far-right {

        transform:
        translate(
            calc(-50% + 340px),
            -50%
        )
        scale(.55);
    }
}


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

@media (max-width: 1050px) {

    .gt-hero {

        height:
        auto;

        min-height:
        900px;
    }

    .gt-hero-container {

        height:
        auto;

        min-height:
        900px;

        padding:
        55px 25px;

        display:
        flex;

        flex-direction:
        column;

        align-items:
        center;
    }

    .gt-hero-content {

        max-width:
        700px;

        text-align:
        center;
    }

    .gt-hero-label {

        justify-content:
        center;
    }

    .gt-hero-description {

        margin-left:
        auto;

        margin-right:
        auto;
    }

    .gt-hero-actions {

        justify-content:
        center;
    }

    .gt-hero-stats {

        margin-left:
        auto;

        margin-right:
        auto;

        justify-content:
        center;
    }

    .gt-course-slider {

        width:
        100%;

        height:
        500px;

        margin-top:
        30px;
    }
}


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

@media (max-width: 650px) {

    .gt-hero {

        min-height:
        900px;
    }

    .gt-hero-container {

        min-height:
        900px;

        padding:
        40px 18px;
    }

    .gt-hero-title {

        font-size:
        42px;

        letter-spacing:
        -1.5px;
    }

    .gt-hero-description {

        font-size:
        13px;
    }

    .gt-hero-actions {

        flex-direction:
        column;

        width:
        100%;
    }

    .gt-hero-btn {

        width: auto;
    }

    .gt-hero-stats {

        width:
        100%;

        justify-content:
        space-between;
    }

    .gt-stat {

        padding:
        0 7px;

        gap:
        5px;
    }

    .gt-stat strong {

        font-size:
        12px;
    }

    .gt-stat span {

        font-size:
        8px;
    }

    .gt-course-slider {

        height:
        430px;

        margin-top:
        20px;
    }

    .gt-course-card.gt-active {

        width:
        250px;

        height:
        375px;

        transform:
        translate(
            -50%,
            -50%
        )
        scale(.88);
    }

    .gt-course-card.gt-left {

        transform:
        translate(
            calc(-50% - 140px),
            -50%
        )
        scale(.55);

        opacity:
        .30;
    }

    .gt-course-card.gt-right {

        transform:
        translate(
            calc(-50% + 140px),
            -50%
        )
        scale(.55);

        opacity:
        .40;
    }

    .gt-course-card.gt-far-left,
    .gt-course-card.gt-far-right {

        opacity:
        0;
    }

    .gt-slider-prev {

        left:
        0;
    }

    .gt-slider-next {

        right:
        0;
    }
}


/* =========================================================
   CONTINUE LEARNING
   ========================================================= */

   .gt-continue-learning {
    position: relative;
    width: 100%;
    padding: 18px 3.35% 32px;
    box-sizing: border-box;
    background: #020817;
}


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

   .gt-cl-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.gt-cl-title-wrap {
    display: flex;
    align-items: center;
}

.gt-cl-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 21px;
    line-height: 28px;
    font-weight: 600;

    letter-spacing: -0.2px;
}

.gt-cl-view-all {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    color: #efb936;

    font-size: 15px;
    line-height: 18px;
    font-weight: 500;

    text-decoration: none;

    transition: color .2s ease;
}

.gt-cl-view-all:hover {
    color: #ffd76a;
}

.gt-cl-view-all .material-symbols-outlined {
    font-size: 17px;
    line-height: 1;
}


/* =========================================================
   SLIDER
   ========================================================= */

   .gt-cl-slider {
     position: relative;

     width: 100%;
     height: 300px;

     overflow: hidden;

     box-sizing: border-box;
 }


/* =========================================================
   TRACK
   ========================================================= */

   .gt-cl-track {
       display: flex;
       flex-wrap: nowrap;

       gap: 14px;

       width: max-content;
       max-width: none;

       height: 300px;

       overflow: visible;

       margin: 0;
       padding: 0;

       box-sizing: border-box;

       transform: translate3d(0, 0, 0);

       transition:
       transform 0.65s cubic-bezier(
        0.22,
        0.61,
        0.36,
        1
    );

       will-change: transform;
   }

   .gt-cl-track::-webkit-scrollbar {
    display: none;
}


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

   .gt-cl-card {
    position: relative;

    flex: 0 0 calc((100vw - 70px) / 6);

    width: calc((100vw - 70px) / 6);
    min-width: calc((100vw - 70px) / 6);

    height: 300px;

    overflow: hidden;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(78, 108, 151, .40);

    border-radius: 8px;

    background:
    linear-gradient(
        180deg,
        #07172d 0%,
        #030c1b 100%
    );

    box-sizing: border-box;
}

.gt-cl-card:hover {
    transform: translateY(-3px);

    border-color: rgba(239, 185, 54, .65);

    box-shadow:
    0 12px 30px rgba(0, 0, 0, .35);
}


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

   .gt-cl-image {
    position: relative;

    width: 100%;
    height: 174px;

    overflow: hidden;

    background: #061326;

    box-sizing: border-box;
}

.gt-cl-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform .35s ease;
}

.gt-cl-card:hover .gt-cl-image img {
    transform: scale(1.035);
}


/* =========================================================
   CONTENT
   ========================================================= */

   .gt-cl-content {
    position: relative;

    width: 100%;
    height: 112px;

    padding: 10px 12px 9px;

    box-sizing: border-box;
}


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

   .gt-cl-content h3 {
    margin: 0 0 3px;

    color: #ffffff;

    font-size: 16px;
    line-height: 17px;

    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


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

   .gt-cl-content p {
    margin: 12px 0;

    color: #a5b1c2;

    font-size: 14px;
    line-height: 14px;

    font-weight: 400;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   PROGRESS ROW
   ========================================================= */

   .gt-cl-progress-row {
    display: flex;
    align-items: center;

    width: 100%;

    gap: 8px;

    margin-bottom: 10px;
}


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

   .gt-cl-progress {
    flex: 1;

    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 10px;

    background: #1b2a3e;
}


/* =========================================================
   PROGRESS DEFAULT — GOLD
   ========================================================= */

   .gt-cl-progress-fill {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #efb936;

    box-shadow:
    0 0 7px rgba(239, 185, 54, .20);
}


/* =========================================================
   PURPLE
   ========================================================= */

   .gt-progress-purple {
    background: #a43cff;

    box-shadow:
    0 0 7px rgba(164, 60, 255, .25);
}


/* =========================================================
   BLUE
   ========================================================= */

   .gt-progress-blue {
    background: #259fe9;

    box-shadow:
    0 0 7px rgba(37, 159, 233, .25);
}


/* =========================================================
   PINK
   ========================================================= */

   .gt-progress-pink {
    background: #e83b91;

    box-shadow:
    0 0 7px rgba(232, 59, 145, .25);
}


/* =========================================================
   GREEN
   ========================================================= */

   .gt-progress-green {
    background: #38c96a;

    box-shadow:
    0 0 7px rgba(56, 201, 106, .25);
}


/* =========================================================
   PERCENTAGE
   ========================================================= */

   .gt-cl-percent {
    flex: 0 0 auto;

    color: #dce4ee;

    font-size: 10px;
    line-height: 14px;

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   BOTTOM ROW
   ========================================================= */

   .gt-cl-bottom {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 31px;

    box-sizing: border-box;
}


/* =========================================================
   LESSON COUNT
   ========================================================= */

   .gt-cl-lessons {
    color: #9ba8ba;

    font-size: 12px;
    line-height: 14px;

    font-weight: 400;
}


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

   .gt-cl-play {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    margin: 0;
    padding: 0;

    border: 1px solid #efb936;

    border-radius: 50%;

    background: #061426;

    color: #efb936;

    cursor: pointer;

    box-sizing: border-box;

    transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.gt-cl-play:hover {
    background: #efb936;

    color: #061426;

    transform: scale(1.08);

    box-shadow:
    0 0 14px rgba(239, 185, 54, .30);
}

.gt-cl-play .material-symbols-outlined {
    font-size: 18px;

    line-height: 1;
}


.gt-cl-nav {
    position: absolute;

    top: 50%;

    z-index: 50;

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

    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(239, 185, 54, .70);

    border-radius: 50%;

    background: #031021;

    color: #efb936;

    cursor: pointer;

    transform: translateY(-50%);

    box-sizing: border-box;

    transition:
    background .2s ease,
    color .2s ease,
    opacity .25s ease,
    transform .2s ease;
}


.gt-cl-nav:hover:not(:disabled) {
    background: #efb936;

    color: #031021;

    transform: translateY(-50%) scale(1.05);
}


.gt-cl-nav:disabled {
    opacity: .25;

    cursor: default;

    pointer-events: none;
}


.gt-cl-nav .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}


/* LEFT */

.gt-cl-prev {
    left: 8px;
}


/* RIGHT */

.gt-cl-next {
    right: 8px;
}



/* =========================================================
   LARGE DESKTOP
   ========================================================= */

   @media (min-width: 1500px) {

    .gt-continue-learning {
        padding-left: 4.15%;
        padding-right: 4.15%;
    }

    .popular-categories {
        padding-left: 4.15%;
        padding-right: 4.15%;
    }

    .gt-cl-card {
        height: 310px;
    }

    .gt-cl-image {
        height: 178px;
    }

    .gt-cl-content {
        height: 114px;
    }

    .gt-cl-slider {
        height: 310px;
    }

    .gt-cl-track {
        height: 310px;
    }

    .gt-cl-card {
        height: 310px;
    }

}


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

   @media (max-width: 1200px) {

    .gt-cl-card {
        flex: 0 0 220px;

        width: 220px;
        min-width: 220px;
    }

}


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

   @media (max-width: 768px) {

    .gt-continue-learning {
        padding:
        16px
        20px
        28px;
    }

    .gt-cl-header h2 {
        font-size: 18px;
    }

    .gt-cl-image {
        height: 160px;
    }

    .gt-cl-content {
        height: 110px;
    }

    .gt-cl-slider {
        height: 280px;
    }

    .gt-cl-track {
        height: 280px;
    }

    .gt-cl-card {
        flex: 0 0 220px;

        width: 220px;
        min-width: 220px;

        height: 270px;
    }

    .gt-cl-prev {
        left: 6px;
    }

    .gt-cl-next {
        right: 6px;
    }

}

/* =========================================================
   POPULAR COURSES
   ========================================================= */

   .gt-popular-courses {
    position: relative;

    width: 100%;

    padding: 14px 4.2% 90px;

    background:
    radial-gradient(
        circle at 88% 30%,
        rgba(212, 175, 55, 0.06),
        transparent 28%
    ),
    radial-gradient(
        circle at 8% 75%,
        rgba(0, 102, 255, 0.05),
        transparent 30%
    ),
    #020916;

    box-sizing: border-box;

    overflow: hidden;
}


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

   .gt-popular-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    width: 100%;

    margin: 0 auto 42px;

    gap: 30px;
}


/* LEFT HEADING */

.gt-popular-heading {
    max-width: 720px;
}


/* KICKER */

.gt-section-kicker {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;

    color: #f5bd21;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.gt-section-kicker::before {
    content: "";

    display: inline-block;

    width: 42px;

    height: 2px;

    background: #f5bd21;

    border-radius: 10px;
}


/* HEADING */

.gt-popular-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 62px);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;
}


.gt-popular-heading h2 span {
    color: #f5bd21;
}


/* DESCRIPTION */

.gt-popular-heading p {
    margin: 18px 0 0;

    max-width: 620px;

    color: #9caabd;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   VIEW ALL BUTTON
   ========================================================= */

   .gt-popular-view-all {
    display: inline-flex;

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

    gap: 14px;

    flex-shrink: 0;

    min-width: 190px;

    height: 56px;

    padding: 0 22px;

    border: 1px solid rgba(245, 189, 33, .75);

    border-radius: 9px;

    background: rgba(245, 189, 33, .025);

    color: #f5bd21;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}


.gt-popular-view-all:hover {
    background: #f5bd21;

    color: #07111f;

    border-color: #f5bd21;

    box-shadow:
    0 0 25px rgba(245, 189, 33, .22);

    transform: translateY(-2px);
}


.gt-popular-view-all .material-symbols-outlined {
    font-size: 22px;

    transition:
    transform .25s ease;
}


.gt-popular-view-all:hover
.material-symbols-outlined {
    transform: translateX(4px);
}


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

   .gt-popular-grid {
    display: grid;

    grid-template-columns:
    repeat(5, minmax(0, 1fr));

    gap: 20px;

    width: 100%;

    margin: 0 auto;
}


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

   .gt-popular-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid
    rgba(77, 106, 145, .45);

    border-radius: 14px;

    background:
    linear-gradient(
        145deg,
        rgba(7, 25, 49, .96),
        rgba(3, 12, 26, .98)
    );

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

    box-sizing: border-box;

    transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.gt-popular-card:hover {
    transform: translateY(-6px);

    border-color:
    rgba(245, 189, 33, .65);

    box-shadow:
    0 18px 50px rgba(0, 0, 0, .35),
    0 0 25px rgba(245, 189, 33, .06);
}


/* =========================================================
   IMAGE
   ========================================================= */

   .gt-popular-image {
    position: relative;

    width: 100%;

    height: 250px;

    overflow: hidden;

    background: #061326;

    border-bottom: 1px solid
    rgba(75, 105, 145, .35);
}


.gt-popular-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
    linear-gradient(
        180deg,
        transparent 55%,
        rgba(2, 9, 22, .65) 100%
    );
}


.gt-popular-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
    transform .45s ease;
}


.gt-popular-card:hover
.gt-popular-image img {
    transform: scale(1.04);
}


/* =========================================================
   RATING
   ========================================================= */

   .gt-popular-rating {
    position: absolute;

    top: 14px;

    right: 14px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-width: 58px;

    height: 34px;

    padding: 0 10px;

    border: 1px solid
    rgba(120, 145, 180, .45);

    border-radius: 8px;

    background:
    rgba(4, 15, 30, .88);

    backdrop-filter: blur(8px);

    color: #f5bd21;

    font-size: 13px;

    font-weight: 600;

    box-sizing: border-box;
}


.gt-popular-rating
.material-symbols-outlined {
    font-size: 17px;

    font-variation-settings:
    'FILL' 1;
}


/* =========================================================
   CONTENT
   ========================================================= */

   .gt-popular-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    min-height: 225px;

    padding: 20px;

    box-sizing: border-box;
}


/* =========================================================
   BADGE
   ========================================================= */

   .gt-popular-badge {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    height: 23px;

    margin-bottom: 10px;

    padding: 0 8px;

    border-radius: 3px;

    background: #eab51c;

    color: #101722;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .5px;
}


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

   .gt-popular-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 650;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

   .gt-popular-content p {
    margin: 10px 0 20px;

    min-height: 42px;

    color: #9aa9bd;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   PROGRESS ROW
   ========================================================= */

   .gt-popular-progress-row {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin-top: auto;

    margin-bottom: 19px;
}


.gt-popular-progress {
    flex: 1;

    height: 6px;

    overflow: hidden;

    border-radius: 10px;

    background: #17273b;
}


.gt-popular-progress-fill {
    display: block;

    height: 100%;

    border-radius: inherit;

    transition:
    width .5s ease;
}


/* PROGRESS COLORS */

.gt-popular-yellow {
    background: #f5bd21;
}

.gt-popular-purple {
    background: #a746ed;
}

.gt-popular-blue {
    background: #20a9e8;
}

.gt-popular-pink {
    background: #ed3c91;
}

.gt-popular-green {
    background: #39c86b;
}


.gt-popular-percent {
    flex-shrink: 0;

    min-width: 32px;

    color: #e5ebf3;

    font-size: 12px;

    font-weight: 600;

    text-align: right;
}


/* =========================================================
   META
   ========================================================= */

   .gt-popular-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-top: 15px;

    border-top: 1px solid
    rgba(72, 100, 137, .30);

    color: #aab6c6;

    font-size: 12px;
}


.gt-popular-meta > span:first-child {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}


.gt-popular-meta
.material-symbols-outlined {
    font-size: 18px;

    color: #aab6c6;
}


/* =========================================================
   LEVEL COLORS
   ========================================================= */

   .gt-level-beginner {
    color: #39d56c;
}

.gt-level-intermediate {
    color: #24b9f1;
}

.gt-level-all {
    color: #a96be8;
}


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

   @media (max-width: 1100px) {

    .gt-popular-courses {
        padding:
        70px 3% 75px;
    }


    .gt-popular-grid {
        grid-template-columns:
        repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    .gt-popular-image {
        height: 230px;
    }

}


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

   @media (max-width: 700px) {

    .gt-popular-courses {
        padding:
        55px 18px 65px;
    }


    .gt-popular-header {
        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 30px;

        gap: 25px;
    }


    .gt-popular-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .gt-popular-heading p {
        font-size: 14px;
    }


    .gt-popular-view-all {
        width: 100%;
    }


    .gt-popular-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .gt-popular-image {
        height: 240px;
    }


    .gt-popular-content {
        min-height: 205px;

        padding: 18px;
    }


    .gt-popular-content h3 {
        font-size: 19px;
    }

}


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

   @media (max-width: 420px) {

    .gt-popular-heading h2 {
        font-size: 32px;
    }


    .gt-popular-image {
        height: 210px;
    }


    .gt-popular-content {
        padding: 16px;
    }

}

/* =========================================================
   GURU TATWA - RECENTLY PLAYED MINI PLAYER
   ========================================================= */

   .gt-mini-player {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 88px;

    padding: 10px 28px;

    background:
    linear-gradient(
        90deg,
        rgba(4, 14, 28, .98),
        rgba(2, 9, 20, .97)
    );

    border-top: 1px solid
    rgba(245, 189, 33, .18);

    box-shadow:
    0 -10px 35px
    rgba(0, 0, 0, .45);

    backdrop-filter: blur(18px);

    box-sizing: border-box;
}


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

   .gt-mini-course {
    display: flex;

    align-items: center;

    /*width: 330px;

    min-width: 330px;*/

    gap: 13px;
}


.gt-mini-thumbnail {
    flex-shrink: 0;

    width: 86px;
    height: 66px;

    overflow: hidden;

    border: 1px solid
    rgba(245, 189, 33, .45);

    border-radius: 6px;

    background: #061326;
}


.gt-mini-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.gt-mini-course-info {
    min-width: 0;
}


.gt-mini-course-info h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.gt-mini-course-info p {
    margin: 0 0 4px;

    color: #aebaca;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.gt-mini-course-info span {
    color: #7f8da1;

    font-size: 11px;
}


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

   .gt-mini-icon-btn {
    display: flex;

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

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: #d3dbe6;

    cursor: pointer;

    transition:
    color .2s ease,
    transform .2s ease;
}


.gt-mini-icon-btn:hover {
    color: #f5bd21;

    transform: scale(1.08);
}


.gt-mini-icon-btn
.material-symbols-outlined {
    font-size: 22px;
}


/* =========================================================
   FAVORITE
   ========================================================= */

   .gt-mini-favorite {
    margin-left: 20px;
}


/* =========================================================
   CONTROLS
   ========================================================= */

   .gt-mini-controls {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-left: 22px;
}


.gt-mini-control {
    display: flex;

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

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #d5deea;

    cursor: pointer;
}


.gt-mini-control:hover {
    color: #f5bd21;
}


.gt-mini-control
.material-symbols-outlined {
    font-size: 24px;
}


/* =========================================================
   MAIN PLAY BUTTON
   ========================================================= */

   .gt-mini-play {
    display: flex;

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

    width: 52px;
    height: 52px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #f5bd21;

    color: #07111f;

    cursor: pointer;

    box-shadow:
    0 0 20px
    rgba(245, 189, 33, .18);

    transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.gt-mini-play:hover {
    transform: scale(1.07);

    box-shadow:
    0 0 28px
    rgba(245, 189, 33, .30);
}


.gt-mini-play
.material-symbols-outlined {
    font-size: 29px;

    font-variation-settings:
    'FILL' 1;
}


/* =========================================================
   TIME
   ========================================================= */

   .gt-mini-time {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-left: 24px;

    min-width: 85px;

    color: #b8c3d2;

    font-size: 12px;

    white-space: nowrap;
}


/* =========================================================
   PROGRESS
   ========================================================= */

   .gt-mini-progress-wrapper {
    flex: 1;

    min-width: 150px;

    margin: 0 20px;
}


.gt-mini-progress {
    display: block;

    width: 100%;

    height: 4px;

    margin: 0;

    appearance: none;

    -webkit-appearance: none;

    background: #26364a;

    border-radius: 20px;

    cursor: pointer;
}


/* WEBKIT */

.gt-mini-progress::-webkit-slider-thumb {
    appearance: none;

    -webkit-appearance: none;

    width: 12px;
    height: 12px;

    border: 0;

    border-radius: 50%;

    background: #f5bd21;

    box-shadow:
    0 0 8px
    rgba(245, 189, 33, .35);

    cursor: pointer;
}


.gt-mini-progress::-webkit-slider-runnable-track {
    height: 4px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #f5bd21 35%,
        #26364a 35%
    );
}


/* FIREFOX */

.gt-mini-progress::-moz-range-thumb {
    width: 12px;
    height: 12px;

    border: 0;

    border-radius: 50%;

    background: #f5bd21;

    cursor: pointer;
}


.gt-mini-progress::-moz-range-progress {
    height: 4px;

    border-radius: 20px;

    background: #f5bd21;
}


.gt-mini-progress::-moz-range-track {
    height: 4px;

    border-radius: 20px;

    background: #26364a;
}


/* =========================================================
   VOLUME
   ========================================================= */

   .gt-mini-volume {
    margin-left: 5px;
}


.gt-mini-volume-slider {
    width: 90px;

    margin-right: 18px;
}


.gt-mini-volume-slider input {
    width: 100%;

    height: 4px;

    appearance: none;

    -webkit-appearance: none;

    background: #26364a;

    border-radius: 10px;

    cursor: pointer;
}


.gt-mini-volume-slider input::-webkit-slider-thumb {
    appearance: none;

    -webkit-appearance: none;

    width: 11px;
    height: 11px;

    border: 0;

    border-radius: 50%;

    background: #f5bd21;
}


/* =========================================================
   SPEED
   ========================================================= */

   .gt-mini-speed {
    display: flex;

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

    width: 48px;
    height: 34px;

    margin: 0 8px;

    padding: 0;

    border: 1px solid
    rgba(245, 189, 33, .45);

    border-radius: 6px;

    background: transparent;

    color: #e5ebf2;

    font-size: 12px;

    cursor: pointer;

    transition:
    background .2s ease,
    color .2s ease;
}


.gt-mini-speed:hover {
    background: #f5bd21;

    color: #07111f;
}


/* =========================================================
   FULLSCREEN
   ========================================================= */

   #gtMiniFullscreen {
    margin-left: 3px;
}


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

   @media (max-width: 1100px) {

    .gt-mini-course {
        width: 270px;

        min-width: 270px;
    }


    .gt-mini-thumbnail {
        width: 72px;

        height: 56px;
    }


    .gt-mini-volume-slider {
        width: 65px;
    }

}


@media (max-width: 850px) {

    .gt-mini-course {
        width: 230px;

        min-width: 230px;
    }


    .gt-mini-course-info p {
        display: none;
    }


    .gt-mini-volume-slider,
    .gt-mini-volume {
        display: none;
    }


    .gt-mini-progress-wrapper {
        margin: 0 10px;
    }

}


@media (max-width: 650px) {

    .gt-mini-player {
        min-height: 70px;

        padding: 8px 12px;
    }


    .gt-mini-course {
        width: auto;

        min-width: 0;

        flex: 1;
    }


    .gt-mini-thumbnail {
        width: 55px;

        height: 48px;
    }


    .gt-mini-course-info h3 {
        font-size: 12px;
    }


    .gt-mini-course-info span {
        font-size: 9px;
    }


    .gt-mini-favorite {
        display: none;
    }


    .gt-mini-controls {
        margin-left: 8px;

        gap: 2px;
    }


    .gt-mini-control {
        width: 32px;

        height: 36px;
    }


    .gt-mini-control:first-child {
        display: none;
    }


    .gt-mini-play {
        width: 42px;

        height: 42px;
    }


    .gt-mini-play
    .material-symbols-outlined {
        font-size: 23px;
    }


    .gt-mini-time,
    .gt-mini-progress-wrapper,
    .gt-mini-speed,
    #gtMiniFullscreen {
        display: none;
    }


    .gt-mini-player
    > .gt-mini-icon-btn:last-child {
        display: flex;
    }

}

/* =========================================================
   GURU TATWA - SIMPLE FOOTER
   ========================================================= */

   .gt-footer {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 70px 5% 28px;

    background: #020a17;

    color: #ffffff;

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

    box-sizing: border-box;

    overflow: hidden;

    bottom: 0px;
}


/* =========================================================
   FOOTER BRAND / LOGO
   ========================================================= */

   .gt-footer-brand {
    display: flex;

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

    width: 100%;

    margin-bottom: 55px;
}


.gt-footer-logo {
    display: inline-flex;

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

    text-decoration: none;
}


.gt-footer-logo img {
    display: block;

    width: 235px;

    max-width: 100%;

    height: auto;

    object-fit: contain;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

   .gt-footer-categories {
    width: 100%;

    padding: 35px 0;

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

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

    text-align: center;
}


.gt-footer-categories h3 {
    margin: 0 0 28px;

    color: #f5bd21;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   CATEGORY LINKS
   ========================================================= */

   .gt-footer-category-list {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0;

    width: 100%;
}


.gt-footer-category-list a {
    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 0 22px;

    color: #e4e9f0;

    font-size: 15px;

    line-height: 1.6;

    font-weight: 400;

    text-decoration: none;

    transition:
    color .25s ease;
}


.gt-footer-category-list a:hover {
    color: #f5bd21;
}


.gt-footer-category-list span {
    color: #f5bd21;

    font-size: 16px;

    opacity: .8;
}


/* =========================================================
   SUPPORT / POLICY LINKS
   ========================================================= */

   .gt-footer-links {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0;

    width: 100%;

    padding: 32px 0;

    border-bottom: 1px solid
    rgba(255, 255, 255, 0.08);
}


.gt-footer-links a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 22px;

    color: #d7dee8;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 400;

    text-decoration: none;

    transition:
    color .25s ease;
}


.gt-footer-links a:hover {
    color: #f5bd21;
}


.gt-footer-links
.material-symbols-outlined {
    color: #f5bd21;

    font-size: 20px;

    line-height: 1;
}


.gt-footer-divider {
    color: rgba(245, 189, 33, .65);

    font-size: 18px;

    user-select: none;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

   .gt-footer-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding-top: 28px;
}


.gt-footer-bottom p {
    margin: 0;

    color: #8d9aaa;

    font-size: 13px;

    line-height: 1.6;

    text-align: center;
}


/* =========================================================
   GOLD LINE EFFECT
   ========================================================= */

   .gt-footer-categories::before {
    content: "";

    display: block;

    width: 55px;

    height: 2px;

    margin: -36px auto 32px;

    background: #f5bd21;

    border-radius: 10px;

    box-shadow:
    0 0 12px rgba(245, 189, 33, .25);
}


/* =========================================================
   DESKTOP LARGE
   ========================================================= */

   @media (min-width: 1400px) {

    .gt-footer {
        padding-left: 7%;

        padding-right: 7%;
    }


    .gt-footer-logo img {
        width: 250px;
    }


    .gt-footer-category-list a {
        font-size: 16px;

        padding-left: 25px;

        padding-right: 25px;
    }

}


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

   @media (max-width: 1000px) {

    .gt-footer {
        padding:
        60px 4% 25px;
    }


    .gt-footer-brand {
        margin-bottom: 45px;
    }


    .gt-footer-category-list a {
        padding:
        7px 16px;
    }


    .gt-footer-category-list span {
        display: none;
    }


    .gt-footer-links a {
        padding:
        8px 15px;
    }


    .gt-footer-divider {
        display: none;
    }

}


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

   @media (max-width: 600px) {

    .gt-footer {
        padding:
        50px 20px 22px;
    }


    .gt-footer-brand {
        margin-bottom: 38px;
    }


    .gt-footer-logo img {
        width: 190px;
    }


    .gt-footer-categories {
        padding: 30px 0;
    }


    .gt-footer-categories h3 {
        margin-bottom: 20px;

        font-size: 16px;
    }


    .gt-footer-category-list {
        display: grid;

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

        gap: 14px 8px;
    }


    .gt-footer-category-list a {
        justify-content: center;

        padding: 5px;

        font-size: 13px;

        text-align: center;
    }


    .gt-footer-links {
        display: grid;

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

        gap: 18px 8px;

        padding: 28px 0;
    }


    .gt-footer-links a {
        padding: 0;

        font-size: 12px;
    }


    .gt-footer-links
    .material-symbols-outlined {
        font-size: 18px;
    }


    .gt-footer-bottom {
        padding-top: 22px;
    }


    .gt-footer-bottom p {
        font-size: 11px;
    }

}


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

   @media (max-width: 380px) {

    .gt-footer {
        padding-left: 15px;

        padding-right: 15px;
    }


    .gt-footer-logo img {
        width: 170px;
    }


    .gt-footer-category-list {
        grid-template-columns: 1fr;
    }


    .gt-footer-links {
        grid-template-columns: 1fr;
    }

}

.gt-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding-top: 28px;
}

.gt-footer-bottom p,
.gt-footer-developed {
    margin: 0;
    color: #8d9aaa;
    font-size: 13px;
    line-height: 1.6;
}

.gt-footer-developed a {
    color: #f5bd21;
    text-decoration: none;
    font-weight: 600;
    transition: color .25s ease;
}

.gt-footer-developed a:hover {
    color: #ffffff;
}

@media (max-width: 600px) {

    .gt-footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 8px;
    }

    .gt-footer-bottom p,
    .gt-footer-developed {
        font-size: 11px;
    }
}

/* =========================================================
   GURU TATWA RESPONSIVE HEADER
   THIS MUST BE AT THE VERY END OF CSS
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

   @media screen and (min-width: 1101px) {

    .gt-header {
        display: block !important;
    }

    .gt-mobile-header {
        display: none !important;
    }

    .gt-mobile-search-panel,
    .gt-mobile-menu,
    .gt-mobile-menu-overlay {
        display: none !important;
    }

}


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

   @media screen and (max-width: 1100px) {


    /* ---------------------------------------------
       SEARCH PANEL
       --------------------------------------------- */

       .gt-mobile-search-panel {

        position: fixed !important;

        top: 68px !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: auto !important;

        z-index: 9997 !important;

        display: block !important;

        padding: 10px 15px !important;

        margin: 0 !important;

        background: #020916 !important;

        border-bottom:
        1px solid rgba(245, 189, 33, .18) !important;

        box-sizing: border-box !important;

        opacity: 0 !important;

        visibility: hidden !important;

        transform: translateY(-20px) !important;

        transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease !important;
    }


    .gt-mobile-search-panel.active {

        opacity: 1 !important;

        visibility: visible !important;

        transform: translateY(0) !important;
    }


    .gt-mobile-search-form {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        height: 48px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        border:
        1px solid rgba(245, 189, 33, .30) !important;

        border-radius: 8px !important;

        background: #071426 !important;

        box-sizing: border-box !important;
    }


    .gt-mobile-search-form input {

        flex: 1 !important;

        width: auto !important;

        min-width: 0 !important;

        height: 100% !important;

        margin: 0 !important;

        padding: 0 10px !important;

        border: 0 !important;

        outline: 0 !important;

        background: transparent !important;

        color: #ffffff !important;

        font-size: 13px !important;
    }


    .gt-mobile-search-form button {

        flex-shrink: 0 !important;

        height: 100% !important;

        padding: 0 15px !important;

        border: 0 !important;

        background: #f5bd21 !important;

        color: #07111f !important;

        cursor: pointer !important;
    }


    /* ---------------------------------------------
       MENU OVERLAY
       --------------------------------------------- */

       .gt-mobile-menu-overlay {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        display: block !important;

        z-index: 99998 !important;

        background:
        rgba(0, 0, 0, .65) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;
    }


    .gt-mobile-menu-overlay.active {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* ---------------------------------------------
       SIDE MENU
       --------------------------------------------- */

       aside.gt-mobile-menu {

        position: fixed !important;

        top: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        width: min(380px, 88vw) !important;

        height: 100vh !important;

        display: block !important;

        z-index: 99999 !important;

        padding: 20px !important;

        margin: 0 !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

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

        border-left:
        1px solid rgba(245, 189, 33, .20) !important;

        box-sizing: border-box !important;

        transform: translateX(100%) !important;

        visibility: hidden !important;

        transition:
        transform .35s ease,
        visibility .35s ease !important;
    }


    aside.gt-mobile-menu.active {

        transform: translateX(0) !important;

        visibility: visible !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

   @media screen and (max-width: 380px) {

    header.gt-mobile-header {

        height: 64px !important;

        min-height: 64px !important;

        max-height: 64px !important;

        padding: 0 10px !important;
    }


    header.gt-mobile-header
    .gt-mobile-logo img {

        width: 230px !important;

        max-width: 230px !important;
    }


    header.gt-mobile-header
    .gt-mobile-action {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;

        max-width: 38px !important;

        min-height: 38px !important;

        max-height: 38px !important;
    }


    .gt-mobile-search-panel {

        top: 64px !important;
    }

}

/* =========================================================
   GURU TATWA - REGISTER PAGE
   Registration section only
========================================================= */

.gt-register-page {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #020916;
    color: #ffffff;
    overflow: hidden;
}


/* =========================================================
   REGISTER SECTION
========================================================= */

.gt-register-section {
    position: relative;

    width: 100%;
    min-height: 760px;

    padding: 70px 40px 80px;

    box-sizing: border-box;

    background-color: #020916;

    background-image:
    linear-gradient(
        90deg,
        rgba(2, 9, 22, 0.15),
        rgba(2, 9, 22, 0.35)
    ),
    url("../images/register-bg.png");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;
}


/* subtle dark overlay */

.gt-register-section::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
    radial-gradient(
        circle at 50% 35%,
        rgba(8, 45, 100, 0.10),
        transparent 45%
    );

    pointer-events: none;
}


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

.gt-register-container {
    position: relative;

    z-index: 2;

    width: min(1180px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
    minmax(0, 0.85fr)
    minmax(480px, 1.15fr);

    gap: 0;

    min-height: 650px;

    border: 1px solid
    rgba(212, 175, 55, 0.42);

    border-radius: 16px;

    overflow: hidden;

    background:
    rgba(2, 10, 24, 0.58);

    box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.45),

    inset 0 1px 0
    rgba(255, 255, 255, 0.035);
}


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

.gt-register-intro {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px 50px;

    min-width: 0;

    border-right: 1px solid
    rgba(212, 175, 55, 0.20);

    background:
    linear-gradient(
        135deg,
        rgba(3, 14, 31, 0.82),
        rgba(2, 8, 20, 0.55)
    );

    overflow: hidden;
}


/* =========================================================
   KICKER
========================================================= */

.gt-register-kicker {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-bottom: 12px;

    color: #f5bd21;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.gt-register-kicker::after {
    content: "";

    width: 35px;

    height: 2px;

    margin-left: 12px;

    background:
    linear-gradient(
        90deg,
        #f5bd21,
        transparent
    );
}


/* =========================================================
   INTRO TITLE
========================================================= */

.gt-register-intro h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 56px);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -1.5px;
}


.gt-register-intro h1 span {
    color: #f5bd21;

    background:
    linear-gradient(
        135deg,
        #fff1a8,
        #f5bd21 45%,
        #c98d12
    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.gt-register-intro-text {
    width: min(420px, 100%);

    margin: 0 0 34px;

    color: #aebbd0;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   FEATURES
========================================================= */

.gt-register-feature {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 21px;

    z-index: 3;
}


.gt-register-feature-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    border: 1px solid
    rgba(245, 189, 33, 0.55);

    border-radius: 50%;

    color: #f5bd21;

    background:
    rgba(245, 189, 33, 0.035);

    box-shadow:
    0 0 20px
    rgba(245, 189, 33, 0.05);
}


.gt-register-feature-icon
.material-symbols-rounded {
    font-size: 22px;
}


.gt-register-feature-content {
    min-width: 0;
}


.gt-register-feature-content h3 {
    margin: 2px 0 4px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.3;
}


.gt-register-feature-content p {
    margin: 0;

    color: #7f90aa;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   DECORATIVE PLAY EMBLEM
========================================================= */

.gt-register-decoration {
    position: absolute;

    left: 50%;

    bottom: -110px;

    width: 310px;

    height: 310px;

    transform: translateX(-50%);

    pointer-events: none;

    z-index: 1;
}


.gt-register-play-ring {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 250px;

    height: 250px;

    margin: 0 auto;

    border-radius: 50%;

    border: 3px solid
    rgba(245, 189, 33, 0.9);

    background:
    radial-gradient(
        circle at 35% 25%,
        #fff2a8 0%,
        #f5bd21 22%,
        #9c6507 58%,
        #302000 100%
    );

    box-shadow:
    0 0 20px
    rgba(245, 189, 33, 0.55),

    0 0 70px
    rgba(245, 189, 33, 0.30),

    inset 0 0 25px
    rgba(255, 255, 255, 0.30);
}


.gt-register-play-ring::before {
    content: "";

    position: absolute;

    inset: 28px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        #061326,
        #020916
    );

    border: 2px solid
    rgba(245, 189, 33, 0.65);
}


.gt-register-play-ring
.material-symbols-rounded {
    position: relative;

    z-index: 2;

    color: #f5bd21;

    font-size: 82px;

    text-shadow:
    0 0 20px
    rgba(245, 189, 33, 0.55);
}


/* =========================================================
   REGISTER CARD
========================================================= */

.gt-register-card {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 45px 55px;

    min-width: 0;

    background:
    linear-gradient(
        145deg,
        rgba(10, 24, 43, 0.88),
        rgba(3, 13, 29, 0.94)
    );

    box-sizing: border-box;
}


/* =========================================================
   CARD ICON
========================================================= */

.gt-register-card-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    margin: 0 auto 15px;

    border: 1px solid
    rgba(245, 189, 33, 0.65);

    border-radius: 50%;

    color: #f5bd21;

    background:
    rgba(245, 189, 33, 0.035);

    box-shadow:
    0 0 25px
    rgba(245, 189, 33, 0.08);
}


.gt-register-card-icon
.material-symbols-rounded {
    font-size: 26px;
}


/* =========================================================
   CARD HEADING
========================================================= */

.gt-register-card-heading {
    text-align: center;

    margin-bottom: 27px;
}


.gt-register-card-heading h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: clamp(28px, 3vw, 38px);

    line-height: 1.15;

    font-weight: 700;
}


.gt-register-card-heading h2 span {
    color: #f5bd21;

    background:
    linear-gradient(
        135deg,
        #fff2b0,
        #f5bd21,
        #c88d16
    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.gt-register-card-heading p {
    margin: 0;

    color: #8e9db2;

    font-size: 13px;

    line-height: 1.6;
}


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

.gt-register-form {
    width: 100%;

    max-width: 500px;

    margin: 0 auto;
}


.gt-form-group {
    margin-bottom: 18px;
}


.gt-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #e8edf5;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   NORMAL INPUT
========================================================= */

.gt-input-wrapper {
    display: flex;

    align-items: center;

    width: 100%;

    height: 52px;

    border: 1px solid
    rgba(142, 157, 178, 0.32);

    border-radius: 8px;

    background:
    rgba(2, 10, 24, 0.60);

    box-sizing: border-box;

    transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


.gt-input-wrapper:focus-within {
    border-color: #f5bd21;

    background:
    rgba(245, 189, 33, 0.025);

    box-shadow:
    0 0 0 3px
    rgba(245, 189, 33, 0.08);
}


.gt-input-wrapper
.material-symbols-rounded {
    flex-shrink: 0;

    margin-left: 16px;

    color: #74859c;

    font-size: 20px;

    transition: color .25s ease;
}


.gt-input-wrapper:focus-within
.material-symbols-rounded {
    color: #f5bd21;
}


.gt-input-wrapper input {
    width: 100%;

    height: 100%;

    min-width: 0;

    padding: 0 15px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    box-sizing: border-box;
}


.gt-input-wrapper input::placeholder {
    color: #66768d;
}


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

.gt-mobile-input-wrapper {
    display: flex;

    align-items: stretch;

    width: 100%;

    height: 52px;

    overflow: hidden;

    border: 1px solid
    rgba(142, 157, 178, 0.32);

    border-radius: 8px;

    background:
    rgba(2, 10, 24, 0.60);

    box-sizing: border-box;

    transition:
    border-color .25s ease,
    box-shadow .25s ease;
}


.gt-mobile-input-wrapper:focus-within {
    border-color: #f5bd21;

    box-shadow:
    0 0 0 3px
    rgba(245, 189, 33, 0.08);
}


.gt-country-code {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    min-width: 105px;

    padding: 0 12px;

    border-right: 1px solid
    rgba(142, 157, 178, 0.25);

    color: #ffffff;

    font-size: 14px;

    box-sizing: border-box;
}


.gt-india-flag {
    font-size: 18px;

    line-height: 1;
}


.gt-country-code
.material-symbols-rounded {
    margin-left: auto;

    color: #f5bd21;

    font-size: 17px;
}


.gt-mobile-input-wrapper input {
    flex: 1;

    min-width: 0;

    width: 100%;

    padding: 0 15px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;
}


.gt-mobile-input-wrapper input::placeholder {
    color: #66768d;
}


/* =========================================================
   OTP INFORMATION
========================================================= */

.gt-register-otp-info {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    width: 100%;

    margin: 5px 0 18px;

    padding: 14px 15px;

    border: 1px solid
    rgba(245, 189, 33, 0.28);

    border-radius: 8px;

    background:
    rgba(245, 189, 33, 0.035);

    box-sizing: border-box;
}


.gt-register-otp-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    color: #f5bd21;

    background:
    rgba(245, 189, 33, 0.08);
}


.gt-register-otp-icon
.material-symbols-rounded {
    font-size: 19px;
}


.gt-register-otp-info strong {
    display: block;

    margin-bottom: 3px;

    color: #f2f5f9;

    font-size: 12px;

    font-weight: 600;
}


.gt-register-otp-info p {
    margin: 0;

    color: #7789a2;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   TERMS
========================================================= */

.gt-register-terms {
    margin: 0 0 18px;
}


.gt-register-terms label {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    cursor: pointer;
}


.gt-register-terms input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.gt-custom-checkbox {
    position: relative;

    flex-shrink: 0;

    width: 17px;

    height: 17px;

    margin-top: 1px;

    border: 1px solid
    rgba(142, 157, 178, 0.45);

    border-radius: 4px;

    background: #071426;

    box-sizing: border-box;

    transition:
    background .2s ease,
    border-color .2s ease;
}


.gt-register-terms input:checked
+ .gt-custom-checkbox {
    border-color: #f5bd21;

    background: #f5bd21;
}


.gt-register-terms input:checked
+ .gt-custom-checkbox::after {
    content: "";

    position: absolute;

    left: 5px;

    top: 2px;

    width: 4px;

    height: 8px;

    border:
    solid #07111f;

    border-width:
    0 2px 2px 0;

    transform: rotate(45deg);
}


.gt-terms-text {
    color: #75869d;

    font-size: 11px;

    line-height: 1.5;
}


.gt-terms-text a {
    color: #f5bd21;

    text-decoration: none;
}


.gt-terms-text a:hover {
    text-decoration: underline;
}


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

.gt-register-submit {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 100%;

    height: 54px;

    padding: 0 20px;

    border: 0;

    border-radius: 8px;

    background:
    linear-gradient(
        135deg,
        #ffe17a 0%,
        #f5bd21 48%,
        #d99a12 100%
    );

    color: #07111f;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
    0 8px 25px
    rgba(245, 189, 33, 0.16);

    transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}


.gt-register-submit
.material-symbols-rounded {
    font-size: 21px;
}


.gt-register-submit:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
    0 12px 30px
    rgba(245, 189, 33, 0.25);
}


.gt-register-submit:active {
    transform: translateY(0);
}


/* =========================================================
   LOGIN LINK
========================================================= */

.gt-register-login {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin-top: 19px;

    color: #7f90a8;

    font-size: 12px;
}


.gt-register-login a {
    color: #f5bd21;

    font-weight: 600;

    text-decoration: none;
}


.gt-register-login a:hover {
    text-decoration: underline;
}


/* =========================================================
   SECURITY
========================================================= */

.gt-register-security {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 22px;

    color: #718198;

    font-size: 11px;
}


.gt-register-security
.material-symbols-rounded {
    color: #f5bd21;

    font-size: 17px;
}


/* =========================================================
   ERROR
========================================================= */

.gt-form-error {
    display: block;

    min-height: 0;

    margin-top: 5px;

    color: #ff6b6b;

    font-size: 11px;
}


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

@media screen and (max-width: 1000px) {

    .gt-register-section {
        min-height: auto;

        padding: 45px 25px 60px;

        background-position: center center;
    }


    .gt-register-container {
        grid-template-columns: 1fr;

        max-width: 680px;
    }


    .gt-register-intro {
        min-height: 430px;

        padding: 45px 40px;

        border-right: 0;

        border-bottom:
        1px solid rgba(212, 175, 55, 0.20);
    }


    .gt-register-card {
        padding: 45px 40px;
    }


    .gt-register-decoration {
        bottom: -180px;
    }

}


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

@media screen and (max-width: 600px) {

    .gt-register-section {
        padding: 7px 14px 40px;

        background-position: center center;

        background-size: auto 100%;

        min-height: auto;
    }


    .gt-register-container {
        width: 100%;

        border-radius: 12px;

        grid-template-columns: 1fr;
    }


    /* Hide decorative left content on small phones */

    .gt-register-intro {
        min-height: auto;

        padding: 35px 24px 40px;
    }


    .gt-register-intro h1 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .gt-register-intro-text {
        font-size: 13px;

        line-height: 1.65;

        margin-bottom: 25px;
    }


    .gt-register-feature {
        margin-bottom: 17px;
    }


    .gt-register-feature-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .gt-register-feature-icon
    .material-symbols-rounded {
        font-size: 19px;
    }


    .gt-register-feature-content h3 {
        font-size: 13px;
    }


    .gt-register-feature-content p {
        font-size: 11px;
    }


    .gt-register-decoration {
        display: none;
    }


    /* Form */

    .gt-register-card {
        padding: 35px 20px 30px;
    }


    .gt-register-card-icon {
        width: 48px;
        height: 48px;
    }


    .gt-register-card-heading {
        margin-bottom: 23px;
    }


    .gt-register-card-heading h2 {
        font-size: 28px;
    }


    .gt-register-card-heading p {
        font-size: 12px;
    }


    .gt-form-group {
        margin-bottom: 16px;
    }


    .gt-input-wrapper,
    .gt-mobile-input-wrapper {
        height: 50px;
    }


    .gt-country-code {
        min-width: 92px;

        padding: 0 9px;

        font-size: 13px;
    }


    .gt-mobile-input-wrapper input,
    .gt-input-wrapper input {
        font-size: 13px;
    }


    .gt-register-otp-info {
        padding: 12px;
    }


    .gt-register-submit {
        height: 52px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media screen and (max-width: 380px) {

    .gt-register-section {
        padding-left: 10px;

        padding-right: 10px;
    }


    .gt-register-intro {
        padding:
        30px 18px 35px;
    }


    .gt-register-card {
        padding:
        30px 16px;
    }


    .gt-register-intro h1 {
        font-size: 34px;
    }


    .gt-register-card-heading h2 {
        font-size: 25px;
    }


    .gt-country-code {
        min-width: 86px;

        padding: 0 7px;

        gap: 5px;
    }

}


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

@media screen
and (max-width: 900px)
and (orientation: landscape) {

    .gt-register-section {
        padding-top: 30px;

        padding-bottom: 40px;
    }


    .gt-register-container {
        grid-template-columns:
        1fr 1fr;

        max-width: 900px;
    }


    .gt-register-intro {
        border-right:
        1px solid rgba(212, 175, 55, 0.20);

        border-bottom: 0;

        min-height: 600px;
    }

}

@media screen and (max-width: 768px) {
    .gt-footer {
        display: none !important;
    }
}

/* =========================================================
   MOBILE / TABLET
   SHOW ONLY REGISTRATION FORM
========================================================= */

@media screen and (max-width: 1000px) {

    /* Hide left welcome section */
    .gt-register-intro {
        display: none !important;
    }

    /* Make registration container single column */
    .gt-register-container {
        display: block;

        width: 100%;
        max-width: 650px;

        margin: 0 auto;

        min-height: auto;
    }

    /* Form card becomes the complete page content */
    .gt-register-card {
        width: 100%;

        min-height: auto;

        padding: 18px 12px;

        border: 0;

        background:
        linear-gradient(
            145deg,
            rgba(10, 24, 43, 0.96),
            rgba(3, 13, 29, 0.98)
        );
    }

}

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

.gt-input-error {
    border-color: #ff5c5c !important;

    box-shadow:
    0 0 0 3px rgba(255, 92, 92, 0.07) !important;
}


.gt-form-error {
    display: block;

    min-height: 0;

    margin-top: 5px;

    color: #ff6b6b;

    font-size: 11px;

    line-height: 1.4;
}


.gt-register-terms-error-active
.gt-custom-checkbox {
    border-color: #ff5c5c;
}


/* =========================================================
   AJAX MESSAGE
========================================================= */

.gt-register-message {
    display: none;

    width: 100%;

    margin: 0 0 15px;

    padding: 11px 13px;

    border-radius: 7px;

    font-size: 12px;

    line-height: 1.5;

    box-sizing: border-box;
}


.gt-register-message.success {
    display: block;

    color: #9ee7b0;

    border: 1px solid
    rgba(54, 211, 116, 0.3);

    background:
    rgba(54, 211, 116, 0.06);
}


.gt-register-message.error {
    display: block;

    color: #ff8585;

    border: 1px solid
    rgba(255, 92, 92, 0.3);

    background:
    rgba(255, 92, 92, 0.06);
}


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

.gt-register-submit:disabled {
    cursor: not-allowed;

    opacity: 0.65;

    transform: none;

    box-shadow: none;
}

/* =========================================================
   GURU TATWA - OTP VERIFICATION PAGE
========================================================= */

.gt-otp-page {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #020916;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   OTP SECTION
========================================================= */

.gt-otp-section {
    position: relative;

    width: 100%;

    min-height: 720px;

    padding: 70px 20px 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background:
    radial-gradient(
        circle at 50% 35%,
        rgba(245, 189, 33, 0.055),
        transparent 32%
    ),
    radial-gradient(
        circle at 20% 80%,
        rgba(14, 54, 100, 0.18),
        transparent 35%
    ),
    #020916;
}


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

.gt-otp-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -280px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    border: 1px solid
    rgba(245, 189, 33, 0.08);

    box-shadow:
    0 0 100px
    rgba(245, 189, 33, 0.04);

    pointer-events: none;
}


.gt-otp-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -250px;
    bottom: -220px;

    border-radius: 50%;

    background:
    rgba(245, 189, 33, 0.025);

    filter: blur(5px);

    pointer-events: none;
}


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

.gt-otp-container {
    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   OTP CARD
========================================================= */

.gt-otp-card {
    position: relative;

    width: 100%;

    max-width: 480px;

    padding: 45px 48px;

    border: 1px solid
    rgba(212, 175, 55, 0.38);

    border-radius: 16px;

    background:
    linear-gradient(
        145deg,
        rgba(9, 26, 47, 0.94),
        rgba(2, 10, 24, 0.97)
    );

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

    inset 0 1px 0
    rgba(255, 255, 255, 0.035);

    box-sizing: border-box;

    text-align: center;
}


/* =========================================================
   OTP ICON
========================================================= */

.gt-otp-icon {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    border: 1px solid
    rgba(245, 189, 33, 0.65);

    border-radius: 50%;

    color: #f5bd21;

    background:
    radial-gradient(
        circle,
        rgba(245, 189, 33, 0.13),
        rgba(245, 189, 33, 0.025)
    );

    box-shadow:
    0 0 30px
    rgba(245, 189, 33, 0.09);
}


.gt-otp-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid
    rgba(245, 189, 33, 0.10);

    border-radius: 50%;
}


.gt-otp-icon
.material-symbols-rounded {
    font-size: 30px;
}


/* =========================================================
   KICKER
========================================================= */

.gt-otp-kicker {
    display: block;

    margin-bottom: 9px;

    color: #f5bd21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.gt-otp-heading h1 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.5px;
}


.gt-otp-heading h1 span {
    color: #f5bd21;

    background:
    linear-gradient(
        135deg,
        #fff1a8,
        #f5bd21 48%,
        #c98d12
    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.gt-otp-heading p {
    max-width: 350px;

    margin: 0 auto;

    color: #8291a7;

    font-size: 13px;

    line-height: 1.65;
}


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

.gt-otp-mobile-info {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    width: fit-content;

    max-width: 100%;

    margin: 24px auto 28px;

    padding: 10px 13px;

    border: 1px solid
    rgba(245, 189, 33, 0.18);

    border-radius: 7px;

    background:
    rgba(245, 189, 33, 0.035);

    color: #9aa9bd;

    font-size: 12px;

    box-sizing: border-box;
}


.gt-otp-mobile-info
.material-symbols-rounded {
    color: #f5bd21;

    font-size: 17px;
}


.gt-otp-mobile-info strong {
    color: #ffffff;

    font-weight: 600;
}


.gt-change-mobile {
    margin-left: 6px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #f5bd21;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;
}


.gt-change-mobile:hover {
    text-decoration: underline;
}


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

.gt-otp-form {
    width: 100%;

    max-width: 390px;

    margin: 0 auto;
}


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

.gt-otp-inputs {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    width: 100%;

    margin: 0 auto;
}


.gt-otp-input {
    width: 62px;

    height: 66px;

    padding: 0;

    border: 1px solid
    rgba(142, 157, 178, 0.35);

    border-radius: 10px;

    outline: none;

    background:
    rgba(2, 10, 24, 0.72);

    color: #ffffff;

    font-family: inherit;

    font-size: 25px;

    font-weight: 700;

    text-align: center;

    caret-color: #f5bd21;

    box-sizing: border-box;

    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    transform .2s ease;
}


.gt-otp-input:hover {
    border-color:
    rgba(245, 189, 33, 0.45);
}


.gt-otp-input:focus {
    border-color: #f5bd21;

    background:
    rgba(245, 189, 33, 0.035);

    box-shadow:
    0 0 0 3px
    rgba(245, 189, 33, 0.08),

    0 0 20px
    rgba(245, 189, 33, 0.08);

    transform: translateY(-2px);
}


/* =========================================================
   OTP ERROR
========================================================= */

.gt-otp-error {
    display: block;

    min-height: 17px;

    margin-top: 9px;

    color: #ff6b6b;

    font-size: 11px;

    line-height: 1.4;
}


.gt-otp-input.gt-otp-error-input {
    border-color: #ff5c5c !important;

    box-shadow:
    0 0 0 3px
    rgba(255, 92, 92, 0.07) !important;
}


/* =========================================================
   TIMER
========================================================= */

.gt-otp-timer-wrapper {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin: 8px 0 23px;

    color: #718198;

    font-size: 11px;
}


.gt-otp-timer-wrapper
.material-symbols-rounded {
    color: #f5bd21;

    font-size: 17px;
}


#gt-otp-timer {
    min-width: 38px;

    color: #f5bd21;

    font-size: 12px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


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

.gt-otp-submit {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    height: 53px;

    padding: 0 20px;

    border: 0;

    border-radius: 8px;

    background:
    linear-gradient(
        135deg,
        #ffe17a 0%,
        #f5bd21 48%,
        #d99a12 100%
    );

    color: #07111f;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
    0 8px 25px
    rgba(245, 189, 33, 0.15);

    transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}


.gt-otp-submit
.material-symbols-rounded {
    font-size: 20px;
}


.gt-otp-submit:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
    0 12px 30px
    rgba(245, 189, 33, 0.25);
}


.gt-otp-submit:active {
    transform: translateY(0);
}


.gt-otp-submit:disabled {
    opacity: .6;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   RESEND
========================================================= */

.gt-otp-resend {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin-top: 20px;

    color: #73839a;

    font-size: 12px;
}


.gt-otp-resend button {
    padding: 0;

    border: 0;

    background: transparent;

    color: #f5bd21;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;
}


.gt-otp-resend button:hover:not(:disabled) {
    text-decoration: underline;
}


.gt-otp-resend button:disabled {
    color: #526176;

    cursor: not-allowed;
}


/* =========================================================
   AJAX MESSAGE
========================================================= */

.gt-otp-message {
    display: none;

    width: 100%;

    margin-top: 16px;

    padding: 10px 12px;

    border-radius: 7px;

    font-size: 11px;

    line-height: 1.5;

    box-sizing: border-box;
}


.gt-otp-message.success {
    display: block;

    color: #9ee7b0;

    border: 1px solid
    rgba(54, 211, 116, 0.30);

    background:
    rgba(54, 211, 116, 0.06);
}


.gt-otp-message.error {
    display: block;

    color: #ff8585;

    border: 1px solid
    rgba(255, 92, 92, 0.30);

    background:
    rgba(255, 92, 92, 0.06);
}


/* =========================================================
   SECURITY
========================================================= */

.gt-otp-security {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 24px;

    color: #687990;

    font-size: 10px;

    line-height: 1.4;
}


.gt-otp-security
.material-symbols-rounded {
    color: #f5bd21;

    font-size: 16px;
}


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

@media screen and (max-width: 768px) {

    .gt-otp-section {
        min-height: calc(100vh - 68px);

        padding:
        35px 20px 50px;
    }


    .gt-otp-card {
        max-width: 520px;

        padding: 40px 35px;
    }

}


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

@media screen and (max-width: 600px) {

    .gt-otp-section {
        min-height: calc(100vh - 68px);

        padding:
        20px 12px 30px;

        align-items: flex-start;
    }


    .gt-otp-card {
        width: 100%;

        max-width: 100%;

        padding:
        32px 18px 28px;

        border-radius: 12px;
    }


    .gt-otp-icon {
        width: 56px;

        height: 56px;

        margin-bottom: 17px;
    }


    .gt-otp-icon
    .material-symbols-rounded {
        font-size: 27px;
    }


    .gt-otp-kicker {
        font-size: 9px;

        letter-spacing: 1.7px;
    }


    .gt-otp-heading h1 {
        font-size: 27px;

        margin-bottom: 9px;
    }


    .gt-otp-heading p {
        font-size: 12px;

        line-height: 1.6;
    }


    .gt-otp-mobile-info {
        margin-top: 20px;

        margin-bottom: 25px;

        font-size: 11px;
    }


    .gt-otp-form {
        max-width: 100%;
    }


    .gt-otp-inputs {
        gap: 10px;
    }


    .gt-otp-input {
        width: 58px;

        height: 60px;

        font-size: 23px;

        border-radius: 8px;
    }


    .gt-otp-submit {
        height: 51px;
    }

}


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

@media screen and (max-width: 380px) {

    .gt-otp-section {
        padding:
        15px 9px 25px;
    }


    .gt-otp-card {
        padding:
        27px 14px 25px;
    }


    .gt-otp-heading h1 {
        font-size: 25px;
    }


    .gt-otp-mobile-info {
        padding: 9px 10px;

        font-size: 10px;
    }


    .gt-otp-inputs {
        gap: 7px;
    }


    .gt-otp-input {
        width: 54px;

        height: 56px;

        font-size: 22px;
    }


    .gt-otp-resend {
        font-size: 11px;
    }


    .gt-otp-resend button {
        font-size: 11px;
    }

}

/* =========================================================
   VERIFICATION EXPIRED SECTION
========================================================= */

.gt-verification-error-page {
    width: 100%;
    background: #020817;
}


.gt-verification-error {
    position: relative;

    width: 100%;
    min-height: 650px;

    padding: 60px 20px;

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

    box-sizing: border-box;

    overflow: hidden;

    background:
    radial-gradient(
        circle at 50% 35%,
        rgba(245, 189, 33, 0.06),
        transparent 35%
    ),
    #020817;
}


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

.gt-verification-error-card {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 460px;

    padding: 45px 35px;

    box-sizing: border-box;

    text-align: center;

    background:
    linear-gradient(
        145deg,
        rgba(9, 26, 47, 0.96),
        rgba(2, 10, 24, 0.98)
    );

    border: 1px solid
    rgba(212, 175, 55, 0.38);

    border-radius: 16px;

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

    inset 0 1px 0
    rgba(255, 255, 255, 0.04);
}


/* =========================================================
   ICON
========================================================= */

.gt-verification-error-icon {
    position: relative;

    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

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

    border: 1px solid
    rgba(245, 189, 33, 0.65);

    border-radius: 50%;

    color: #f5bd21;

    background:
    radial-gradient(
        circle,
        rgba(245, 189, 33, 0.12),
        rgba(245, 189, 33, 0.025)
    );

    box-shadow:
    0 0 30px
    rgba(245, 189, 33, 0.08);
}


/* Outer ring */

.gt-verification-error-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid
    rgba(245, 189, 33, 0.08);

    border-radius: 50%;
}


.gt-verification-error-icon
.material-symbols-rounded {
    font-size: 34px;
}


/* =========================================================
   CONTENT
========================================================= */

.gt-verification-error-content {
    width: 100%;
}


/* =========================================================
   KICKER
========================================================= */

.gt-verification-error-kicker {
    display: block;

    margin-bottom: 10px;

    color: #f5bd21;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.gt-verification-error-content h1 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.4px;
}


.gt-verification-error-content h1 span {
    color: #f5bd21;

    background:
    linear-gradient(
        135deg,
        #fff1a8,
        #f5bd21 50%,
        #d99a12
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.gt-verification-error-content p {
    max-width: 370px;

    margin: 0 auto 28px;

    color: #8d9caf;

    font-size: 13px;

    line-height: 1.7;
}


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

.gt-verification-error-btn {
    display: inline-flex;

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

    gap: 8px;

    min-width: 175px;
    height: 48px;

    padding: 0 22px;

    box-sizing: border-box;

    border: 0;
    border-radius: 8px;

    background:
    linear-gradient(
        135deg,
        #ffe17a 0%,
        #f5bd21 50%,
        #d99a12 100%
    );

    color: #07111f;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
    0 8px 25px
    rgba(245, 189, 33, 0.12);

    transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}


.gt-verification-error-btn
.material-symbols-rounded {
    font-size: 19px;
}


.gt-verification-error-btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
    0 12px 30px
    rgba(245, 189, 33, 0.22);
}


.gt-verification-error-btn:active {
    transform: translateY(0);
}


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

@media screen and (max-width: 768px) {

    .gt-verification-error {
        min-height: calc(100vh - 70px);

        padding: 45px 20px;
    }


    .gt-verification-error-card {
        max-width: 440px;

        padding: 40px 30px;
    }

}


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

@media screen and (max-width: 600px) {

    .gt-verification-error {
        min-height: calc(100vh - 65px);

        padding: 30px 15px;
    }


    .gt-verification-error-card {
        width: 100%;

        max-width: 100%;

        padding: 35px 22px;

        border-radius: 13px;
    }


    .gt-verification-error-icon {
        width: 60px;
        height: 60px;

        margin-bottom: 21px;
    }


    .gt-verification-error-icon
    .material-symbols-rounded {
        font-size: 30px;
    }


    .gt-verification-error-kicker {
        font-size: 9px;

        letter-spacing: 1.7px;
    }


    .gt-verification-error-content h1 {
        font-size: 25px;

        margin-bottom: 12px;
    }


    .gt-verification-error-content p {
        max-width: 330px;

        font-size: 12px;

        line-height: 1.65;

        margin-bottom: 25px;
    }


    .gt-verification-error-btn {
        width: 100%;

        height: 48px;
    }

}


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

@media screen and (max-width: 380px) {

    .gt-verification-error {
        padding: 25px 10px;
    }


    .gt-verification-error-card {
        padding: 30px 18px;
    }


    .gt-verification-error-icon {
        width: 56px;
        height: 56px;
    }


    .gt-verification-error-content h1 {
        font-size: 23px;
    }


    .gt-verification-error-content p {
        font-size: 11px;
    }

}

/* =========================================================
   GURU TATWA
   LOGIN PAGE
========================================================= */


/* =========================================================
   LOGIN PAGE
========================================================= */

.gt-login-page {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #020817;
    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   LOGIN SECTION
========================================================= */

.gt-login-section {
    position: relative;

    width: 100%;
    min-height: 680px;

    padding: 65px 20px 75px;

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

    box-sizing: border-box;

    background:
    radial-gradient(
        circle at 50% 35%,
        rgba(245, 189, 33, 0.055),
        transparent 34%
    ),
    radial-gradient(
        circle at 15% 85%,
        rgba(14, 54, 100, 0.18),
        transparent 35%
    ),
    #020817;
}


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

.gt-login-section::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    top: -330px;
    left: 50%;

    transform: translateX(-50%);

    border: 1px solid
    rgba(245, 189, 33, 0.065);

    border-radius: 50%;

    box-shadow:
    0 0 100px
    rgba(245, 189, 33, 0.025);

    pointer-events: none;
}


.gt-login-section::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -250px;
    bottom: -250px;

    border-radius: 50%;

    background:
    rgba(245, 189, 33, 0.025);

    filter: blur(5px);

    pointer-events: none;
}


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

.gt-login-container {
    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.gt-login-card {
    position: relative;

    width: 100%;
    max-width: 450px;

    padding: 44px 45px;

    box-sizing: border-box;

    text-align: center;

    background:
    linear-gradient(
        145deg,
        rgba(9, 26, 47, 0.97),
        rgba(2, 10, 24, 0.99)
    );

    border: 1px solid
    rgba(212, 175, 55, 0.38);

    border-radius: 16px;

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

    inset 0 1px 0
    rgba(255, 255, 255, 0.035);
}


/* =========================================================
   LOGIN ICON
========================================================= */

.gt-login-icon {
    position: relative;

    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

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

    border: 1px solid
    rgba(245, 189, 33, 0.65);

    border-radius: 50%;

    color: #f5bd21;

    background:
    radial-gradient(
        circle,
        rgba(245, 189, 33, 0.13),
        rgba(245, 189, 33, 0.025)
    );

    box-shadow:
    0 0 30px
    rgba(245, 189, 33, 0.09);
}


.gt-login-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid
    rgba(245, 189, 33, 0.09);

    border-radius: 50%;
}


.gt-login-icon
.material-symbols-rounded {
    font-size: 30px;
}


/* =========================================================
   LOGIN HEADING
========================================================= */

.gt-login-kicker {
    display: block;

    margin-bottom: 9px;

    color: #f5bd21;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.gt-login-heading h1 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.5px;
}


.gt-login-heading h1 span {
    background:
    linear-gradient(
        135deg,
        #fff1a8,
        #f5bd21 48%,
        #c98d12
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.gt-login-heading p {
    max-width: 340px;

    margin: 0 auto;

    color: #8291a7;

    font-size: 13px;

    line-height: 1.65;
}


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

.gt-login-form {
    width: 100%;

    margin: 30px auto 0;

    text-align: left;
}


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

.gt-login-form-group {
    width: 100%;
}


.gt-login-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #d6deea;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.gt-login-input-wrapper {
    display: flex;

    align-items: center;

    width: 100%;
    height: 54px;

    box-sizing: border-box;

    padding: 0 14px;

    border: 1px solid
    rgba(142, 157, 178, 0.35);

    border-radius: 8px;

    background:
    rgba(2, 10, 24, 0.72);

    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.gt-login-input-wrapper:hover {
    border-color:
    rgba(245, 189, 33, 0.40);
}


.gt-login-input-wrapper:focus-within {
    border-color: #f5bd21;

    background:
    rgba(245, 189, 33, 0.025);

    box-shadow:
    0 0 0 3px
    rgba(245, 189, 33, 0.07);
}


.gt-login-input-wrapper
.material-symbols-rounded {
    flex-shrink: 0;

    margin-right: 9px;

    color: #f5bd21;

    font-size: 19px;
}


/* =========================================================
   COUNTRY CODE
========================================================= */

.gt-login-country-code {
    flex-shrink: 0;

    padding-right: 11px;

    margin-right: 10px;

    border-right: 1px solid
    rgba(142, 157, 178, 0.20);

    color: #9aa8bb;

    font-size: 13px;

    font-weight: 500;
}


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

.gt-login-input-wrapper input {
    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;
}


.gt-login-input-wrapper input::placeholder {
    color: #58677c;
}


.gt-login-input-wrapper input::-webkit-search-cancel-button,
.gt-login-input-wrapper input::-webkit-inner-spin-button,
.gt-login-input-wrapper input::-webkit-outer-spin-button {
    appearance: none;
}


/* =========================================================
   ERROR
========================================================= */

.gt-login-error {
    display: block;

    min-height: 17px;

    margin-top: 7px;

    color: #ff6b6b;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   GENERAL MESSAGE
========================================================= */

.gt-login-message {
    display: none;

    width: 100%;

    margin-top: 12px;

    padding: 10px 12px;

    box-sizing: border-box;

    border-radius: 7px;

    font-size: 11px;

    line-height: 1.5;
}


.gt-login-message.success {
    display: block;

    color: #9ee7b0;

    border: 1px solid
    rgba(54, 211, 116, 0.30);

    background:
    rgba(54, 211, 116, 0.06);
}


.gt-login-message.error {
    display: block;

    color: #ff8585;

    border: 1px solid
    rgba(255, 92, 92, 0.30);

    background:
    rgba(255, 92, 92, 0.06);
}


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

.gt-login-submit {
    display: flex;

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

    gap: 10px;

    width: 100%;
    height: 53px;

    margin-top: 8px;

    padding: 0 20px;

    border: 0;
    border-radius: 8px;

    outline: none;

    background:
    linear-gradient(
        135deg,
        #ffe17a 0%,
        #f5bd21 48%,
        #d99a12 100%
    );

    color: #07111f;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
    0 8px 25px
    rgba(245, 189, 33, 0.15);

    transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}


.gt-login-submit
.material-symbols-rounded {
    font-size: 20px;
}


.gt-login-submit:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
    0 12px 30px
    rgba(245, 189, 33, 0.25);
}


.gt-login-submit:active {
    transform: translateY(0);
}


.gt-login-submit:disabled {
    opacity: .65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   REGISTER LINK
========================================================= */

.gt-login-register {
    display: flex;

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

    gap: 5px;

    margin-top: 22px;

    color: #718198;

    font-size: 12px;

    text-align: center;
}


.gt-login-register a {
    color: #f5bd21;

    text-decoration: none;

    font-weight: 600;

    transition: color .2s ease;
}


.gt-login-register a:hover {
    color: #ffe17a;

    text-decoration: underline;
}


/* =========================================================
   SECURITY
========================================================= */

.gt-login-security {
    display: flex;

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

    gap: 7px;

    margin-top: 24px;

    color: #687990;

    font-size: 10px;

    line-height: 1.4;

    text-align: center;
}


.gt-login-security
.material-symbols-rounded {
    color: #f5bd21;

    font-size: 16px;
}


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

@media screen and (max-width: 768px) {

    .gt-login-section {
        min-height: calc(100vh - 70px);

        padding: 45px 20px 55px;
    }


    .gt-login-card {
        max-width: 460px;

        padding: 40px 35px;
    }

}


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

@media screen and (max-width: 600px) {

    .gt-login-section {
        min-height: calc(100vh - 65px);

        padding: 30px 14px 40px;

        align-items: flex-start;
    }


    .gt-login-card {
        width: 100%;

        max-width: 100%;

        padding: 32px 20px 28px;

        border-radius: 13px;
    }


    .gt-login-icon {
        width: 57px;
        height: 57px;

        margin-bottom: 17px;
    }


    .gt-login-icon
    .material-symbols-rounded {
        font-size: 27px;
    }


    .gt-login-kicker {
        font-size: 9px;

        letter-spacing: 1.7px;
    }


    .gt-login-heading h1 {
        font-size: 27px;

        margin-bottom: 9px;
    }


    .gt-login-heading p {
        font-size: 12px;

        line-height: 1.6;
    }


    .gt-login-form {
        margin-top: 25px;
    }


    .gt-login-input-wrapper {
        height: 53px;
    }


    .gt-login-submit {
        height: 51px;
    }


    .gt-login-register {
        flex-wrap: wrap;

        font-size: 11px;
    }

}


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

@media screen and (max-width: 380px) {

    .gt-login-section {
        padding:
        22px 10px 30px;
    }


    .gt-login-card {
        padding:
        28px 15px 25px;
    }


    .gt-login-heading h1 {
        font-size: 25px;
    }


    .gt-login-heading p {
        font-size: 11px;
    }


    .gt-login-input-wrapper {
        height: 51px;

        padding: 0 12px;
    }


    .gt-login-input-wrapper input {
        font-size: 13px;
    }


    .gt-login-submit {
        height: 49px;

        font-size: 13px;
    }


    .gt-login-security {
        font-size: 9px;
    }

}

/* =========================================================
   PROFILE WRAPPER
========================================================= */

.gt-profile-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}


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

.gt-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 42px;
    padding: 3px 9px 3px 4px;

    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 24px;

    background: rgba(8, 26, 43, 0.85);

    color: #ffffff;

    font-family: inherit;
    cursor: pointer;

    transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.gt-profile-btn:hover,
.gt-profile-btn.active {
    background: rgba(212, 175, 55, 0.07);

    border-color: rgba(245, 189, 33, 0.65);

    box-shadow:
    0 0 18px rgba(245, 189, 33, 0.08);
}


/* =========================================================
   PROFILE AVATAR
========================================================= */

.gt-profile-avatar {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background:
    linear-gradient(
        135deg,
        #ffe17a 0%,
        #f5bd21 50%,
        #c98d12 100%
    );

    color: #07111f;

    font-size: 13px;
    font-weight: 800;

    border: 1px solid rgba(255, 230, 130, 0.7);

    box-shadow:
    0 0 14px rgba(245, 189, 33, 0.12);
}


/* =========================================================
   PROFILE NAME
========================================================= */

.gt-profile-name {
    max-width: 110px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #e8edf5;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   PROFILE ARROW
========================================================= */

.gt-profile-arrow {
    color: #8997aa;

    font-size: 18px;

    transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.gt-profile-btn:hover .gt-profile-arrow,
.gt-profile-btn.active .gt-profile-arrow {
    color: #f5bd21;
}

.gt-profile-btn.active .gt-profile-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.gt-profile-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    z-index: 9999;

    width: 250px;

    padding: 9px;

    box-sizing: border-box;

    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;

    background:
    linear-gradient(
        145deg,
        #0a1d33 0%,
        #030b17 100%
    );

    box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(245, 189, 33, 0.04);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.gt-profile-dropdown.active {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   DROPDOWN USER HEADER
========================================================= */

.gt-profile-dropdown-user {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 8px 8px 12px;
}


.gt-profile-dropdown-user > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.gt-profile-dropdown-user strong {
    display: block;

    max-width: 165px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #ffffff;

    font-size: 13px;

    font-weight: 650;
}


.gt-profile-dropdown-user small {
    color: #77879b;

    font-size: 10px;
}


/* =========================================================
   LARGE AVATAR
========================================================= */

.gt-profile-avatar-large {
    width: 44px;
    height: 44px;

    font-size: 16px;
}


/* =========================================================
   DIVIDER
========================================================= */

.gt-profile-dropdown-divider {
    width: 100%;
    height: 1px;

    margin: 4px 0;

    background:
    rgba(255, 255, 255, 0.07);
}


/* =========================================================
   DROPDOWN LINKS
========================================================= */

.gt-profile-dropdown a {
    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;

    min-height: 40px;

    padding: 9px 10px;

    box-sizing: border-box;

    border-radius: 7px;

    color: #aeb9c8;

    text-decoration: none;

    font-size: 12px;

    font-weight: 500;

    transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.gt-profile-dropdown a .material-symbols-rounded {
    width: 20px;

    flex-shrink: 0;

    color: #dca51a;

    font-size: 19px;

    text-align: center;
}


.gt-profile-dropdown a:hover {
    background:
    rgba(245, 189, 33, 0.07);

    color: #ffffff;

    transform: translateX(2px);
}


.gt-profile-dropdown a:hover
.material-symbols-rounded {
    color: #f5bd21;
}


/* =========================================================
   LOGOUT
========================================================= */

.gt-profile-dropdown a.gt-profile-logout {
    color: #ff8585;
}


.gt-profile-dropdown a.gt-profile-logout
.material-symbols-rounded {
    color: #ff6666;
}


.gt-profile-dropdown a.gt-profile-logout:hover {
    background:
    rgba(255, 80, 80, 0.06);

    color: #ff9d9d;
}


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

@media (max-width: 1024px) {

    .gt-profile-name {
        display: none;
    }

    .gt-profile-btn {
        width: 42px;

        padding: 3px;

        justify-content: center;
    }

    .gt-profile-arrow {
        display: none;
    }

}


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

@media (max-width: 768px) {

    .gt-profile-wrapper {
        position: relative;
    }

    .gt-profile-btn {
        width: 40px;
        height: 40px;
    }

    .gt-profile-avatar {
        width: 32px;
        height: 32px;

        font-size: 12px;
    }

    .gt-profile-dropdown {
        top: calc(100% + 8px);

        right: 0;

        width: 235px;
    }

}


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

@media (max-width: 380px) {

    .gt-profile-dropdown {
        right: -5px;

        width: 225px;
    }

}

/* =========================================================
   GURU TATWA - PROFILE PAGE
========================================================= */

.gt-profile-page {
    width: 100%;
    min-height: calc(100vh - 80px);

    padding: 42px 0 130px;

    background:
    radial-gradient(
        circle at 15% 20%,
        rgba(15, 54, 94, 0.16),
        transparent 32%
    ),
    radial-gradient(
        circle at 85% 55%,
        rgba(212, 175, 55, 0.035),
        transparent 30%
    ),
    #020a17;

    color: #ffffff;

    box-sizing: border-box;
}


.gt-profile-container {
    width: 1320px;

    margin: 0 auto;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.gt-profile-page-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 24px;
}


.gt-profile-eyebrow {
    display: inline-block;

    margin-bottom: 7px;

    color: #f5bd21;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}


.gt-profile-page-heading h1 {
    margin: 0;

    color: #ffffff;

    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
}


.gt-profile-page-heading p {
    margin: 8px 0 0;

    color: #8190a5;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   DATE BOX
========================================================= */

.gt-profile-date {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 245px;

    padding: 12px 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 11px;

    background:
    rgba(8, 23, 42, 0.65);
}


.gt-profile-date > .material-symbols-rounded {
    color: #f5bd21;

    font-size: 42px;
}


.gt-profile-date div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.gt-profile-date strong {
    color: #e9edf4;

    font-size: 14px;

    font-weight: 600;
}


.gt-profile-date span {
    color: #78879b;

    font-size: 12px;
}


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

.gt-profile-card,
.gt-profile-section-block,
.gt-profile-content-card {
    border: 1px solid rgba(115, 143, 176, 0.16);

    background:
    linear-gradient(
        145deg,
        rgba(10, 29, 51, 0.78),
        rgba(3, 12, 25, 0.92)
    );

    box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   MAIN PROFILE CARD
========================================================= */

.gt-profile-card {
    position: relative;

    display: grid;

    grid-template-columns:
    minmax(350px, 1fr)
    minmax(280px, 0.85fr)
    auto;

    align-items: center;

    gap: 28px;

    min-height: 155px;

    padding: 24px 28px;

    border-radius: 16px;

    overflow: hidden;
}


.gt-profile-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -50px;

    height: 120px;

    background:
    radial-gradient(
        ellipse,
        rgba(245, 189, 33, 0.055),
        transparent 68%
    );

    pointer-events: none;
}


/* =========================================================
   PROFILE USER
========================================================= */

.gt-profile-user-section {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;

    gap: 20px;

    min-width: 0;
}


.gt-profile-large-avatar {
    width: 112px;
    height: 112px;

    flex: 0 0 112px;

    display: flex;

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

    border-radius: 50%;

    background:
    linear-gradient(
        145deg,
        #ffe27c 0%,
        #f5bd21 48%,
        #bd8110 100%
    );

    border: 2px solid rgba(255, 224, 117, 0.7);

    color: #07111e;

    font-size: 42px;
    font-weight: 800;

    box-shadow:
    0 0 30px rgba(245, 189, 33, 0.12);
}


.gt-profile-user-details {
    min-width: 0;
}


.gt-profile-name-row {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.gt-profile-name-row h2 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    line-height: 1.2;

    font-weight: 700;
}


.gt-profile-role {
    display: inline-flex;

    align-items: center;

    height: 24px;

    padding: 0 9px;

    border: 1px solid rgba(245, 189, 33, 0.5);

    border-radius: 20px;

    color: #f5bd21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.gt-profile-contact {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px 20px;

    margin-top: 13px;
}


.gt-profile-contact > span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #9caabd;

    font-size: 14px;
}


.gt-profile-contact
.material-symbols-rounded {
    color: #c99518;

    font-size: 16px;
}


.gt-profile-active {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 11px;

    color: #39d98a;

    font-size: 14px;

    font-weight: 600;
}


.gt-profile-active span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #39d98a;

    box-shadow:
    0 0 9px rgba(57, 217, 138, 0.6);
}


/* =========================================================
   PROFILE QUOTE
========================================================= */

.gt-profile-quote {
    position: relative;
    z-index: 1;

    min-height: 85px;

    padding: 6px 30px;

    border-left: 1px solid rgba(245, 189, 33, 0.18);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.gt-profile-quote > .material-symbols-rounded {
    color: #f5bd21;

    font-size: 27px;

    line-height: 1;

    margin-bottom: -2px;
}


.gt-profile-quote p {
    max-width: 410px;

    margin: 0;

    color: #c4cdda;

    font-size: 13px;

    line-height: 1.55;

    font-style: italic;
}


.gt-profile-quote small {
    margin-top: 7px;

    color: #f5bd21;

    font-size: 10px;

    font-weight: 600;
}


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

.gt-profile-edit-btn {
    position: relative;
    z-index: 2;

    display: inline-flex;

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

    gap: 7px;

    min-width: 125px;

    height: 40px;

    padding: 0 14px;

    border: 1px solid #b98a18;

    border-radius: 7px;

    color: #f5bd21;

    background: rgba(245, 189, 33, 0.025);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.gt-profile-edit-btn:hover {
    background: rgba(245, 189, 33, 0.09);

    border-color: #f5bd21;

    transform: translateY(-1px);
}


.gt-profile-edit-btn
.material-symbols-rounded {
    font-size: 17px;
}


/* =========================================================
   SECTION BLOCK
========================================================= */

.gt-profile-section-block {
    margin-top: 18px;

    padding: 18px;

    border-radius: 14px;
}


.gt-profile-section-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;
}


.gt-profile-section-heading h3,
.gt-profile-card-heading h3 {
    margin: 0;

    color: #f0f3f8;

    font-size: 16px;

    font-weight: 650;
}


/* =========================================================
   STAT CARDS
========================================================= */

.gt-profile-stats {
    display: grid;

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

    gap: 12px;
}


.gt-profile-stat-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 100px;

    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    overflow: hidden;
}


.gt-profile-stat-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;
}


.gt-stat-blue {
    background:
    linear-gradient(
        135deg,
        rgba(9, 58, 104, 0.42),
        rgba(5, 22, 43, 0.5)
    );
}


.gt-stat-blue::after {
    background: #2787e8;
}


.gt-stat-green {
    background:
    linear-gradient(
        135deg,
        rgba(10, 77, 60, 0.38),
        rgba(5, 28, 28, 0.5)
    );
}


.gt-stat-green::after {
    background: #2ed48a;
}


.gt-stat-purple {
    background:
    linear-gradient(
        135deg,
        rgba(59, 31, 105, 0.35),
        rgba(20, 15, 48, 0.5)
    );
}


.gt-stat-purple::after {
    background: #a45cff;
}


.gt-stat-orange {
    background:
    linear-gradient(
        135deg,
        rgba(91, 48, 12, 0.38),
        rgba(39, 20, 8, 0.5)
    );
}


.gt-stat-orange::after {
    background: #ff941c;
}


.gt-profile-stat-icon {
    width: 70px;
    height: 70px;

    flex: 0 0 70px;

    display: flex;

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

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);
}


.gt-stat-blue .gt-profile-stat-icon {
    color: #51a9ff;
}


.gt-stat-green .gt-profile-stat-icon {
    color: #42dd96;
}


.gt-stat-orange .gt-profile-stat-icon {
    color: #ffab37;
}


.gt-profile-stat-icon
.material-symbols-rounded {
    font-size: 40px;
}


.gt-profile-stat-content {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.gt-profile-stat-content strong {
    color: #ffffff;

    font-size: 24px;

    line-height: 1.1;

    font-weight: 700;
}


.gt-stat-purple
.gt-profile-stat-content strong {
    font-size: 14px;
}


.gt-profile-stat-content > span {
    margin-top: 4px;

    color: #b2bdcc;

    font-size: 16px;

    font-weight: 600;
}


.gt-profile-stat-content small {
    margin-top: 5px;

    color: #6f7f94;

    font-size: 14px;
}


/* =========================================================
   CIRCULAR PROGRESS
========================================================= */

.gt-profile-progress-circle {
    width: 57px;
    height: 57px;

    flex: 0 0 57px;

    display: flex;

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

    border-radius: 50%;

    background:
    conic-gradient(
        #a45cff 68%,
        rgba(255,255,255,.08) 68%
    );

    position: relative;
}


.gt-profile-progress-circle::after {
    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 50%;

    background: #0a182c;
}


.gt-profile-progress-circle span {
    position: relative;

    z-index: 1;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;
}


.gt-mini-progress {
    width: 100%;

    max-width: 130px;

    height: 4px;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(255,255,255,.08);
}


.gt-mini-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: #a45cff;
}


/* =========================================================
   LOWER GRID
========================================================= */

.gt-profile-lower-grid {
    display: grid;

    grid-template-columns:
    minmax(0, 1.45fr)
    minmax(350px, 1fr);

    gap: 18px;

    margin-top: 18px;
}


/* =========================================================
   CONTENT CARDS
========================================================= */

.gt-profile-content-card {
    min-width: 0;

    padding: 18px;

    border-radius: 14px;
}


.gt-profile-card-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;
}


.gt-profile-card-heading p {
    margin: 4px 0 0;

    color: #718198;

    font-size: 14px;
}


.gt-profile-card-heading > a {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    color: #f5bd21;

    text-decoration: none;

    white-space: nowrap;

    font-size: 14px;

    font-weight: 600;
}


.gt-profile-card-heading > a:hover {
    color: #ffe07a;
}


.gt-profile-card-heading
.material-symbols-rounded {
    font-size: 16px;
}


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

.gt-profile-course-row {
    display: grid;

    grid-template-columns:45px minmax(142px, 1fr) minmax(107px, 2fr) auto;

    align-items: center;

    gap: 12px;

    min-height: 63px;

    padding: 9px;

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


.gt-profile-course-row:first-of-type {
    border-top: 0;
}


.gt-course-icon {
    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 8px;

    font-weight: 800;
}


.gt-python-icon {
    background: #101e2e;

    border: 1px solid #d9a817;

    color: #f5bd21;

    font-size: 12px;
}


.gt-js-icon {
    background: #eac02d;

    color: #101010;

    font-size: 12px;
}


.gt-react-icon {
    background: #102c45;

    color: #43d9ff;

    font-size: 22px;
}


.gt-course-details {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.gt-course-details strong {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #e8edf4;

    font-size: 14px;

    font-weight: 600;
}


.gt-course-details span {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #697b91;

    font-size: 12px;
}


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

.gt-course-progress {
    display: flex;

    align-items: center;

    gap: 8px;
}


.gt-course-progress-bar {
    width: 100%;

    height: 4px;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(255,255,255,.08);
}


.gt-course-progress-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: #f5bd21;
}


.gt-course-progress small {
    min-width: 105px;

    font-size: 12px;

    color: #fff;
  background: rgba(104, 210, 56, 0.54);
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}


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

.gt-course-continue {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    height: 31px;

    padding: 0 9px;

    border: 1px solid rgba(245,189,33,.5);

    border-radius: 6px;

    color: #f5bd21;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

    transition:
    background .2s ease,
    border-color .2s ease;
}


.gt-course-continue:hover {
    background: rgba(245,189,33,.08);

    border-color: #f5bd21;
}


.gt-course-continue
.material-symbols-rounded {
    font-size: 14px;
}


/* =========================================================
   ACCOUNT GRID
========================================================= */

.gt-profile-account-grid {
    display: grid;

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

    gap: 9px;
}


.gt-profile-account-item {
    display: grid;

    grid-template-columns: 37px minmax(0,1fr) 18px;

    align-items: center;

    gap: 9px;

    min-height: 65px;

    padding: 10px;

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

    border-radius: 9px;

    background: rgba(8, 23, 42, .55);

    color: inherit;

    text-decoration: none;

    transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}


.gt-profile-account-item:hover {
    border-color: rgba(245,189,33,.24);

    background: rgba(245,189,33,.035);

    transform: translateY(-1px);
}


.gt-account-icon {
    width: 37px;
    height: 37px;

    display: flex;

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

    border-radius: 9px;
}


.gt-account-icon
.material-symbols-rounded {
    font-size: 19px;
}


.gt-account-blue {
    color: #68aefb;
    background: rgba(57,137,230,.12);
}


.gt-account-gold {
    color: #f5bd21;
    background: rgba(245,189,33,.11);
}


.gt-account-green {
    color: #48d993;
    background: rgba(56,210,140,.11);
}


.gt-account-red {
    color: #ff737e;
    background: rgba(255,90,100,.11);
}


.gt-account-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.gt-account-info strong {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #dfe5ee;

    font-size: 14px;

    font-weight: 600;
}


.gt-account-info small {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #687a91;

    font-size: 12px;
}


.gt-account-arrow {
    color: #64748a;

    font-size: 18px;

    transition:
    color .2s ease,
    transform .2s ease;
}


.gt-profile-account-item:hover
.gt-account-arrow {
    color: #f5bd21;

    transform: translateX(2px);
}


.gt-account-logout:hover {
    border-color: rgba(255,90,100,.2);
}


.gt-account-logout:hover
.gt-account-arrow {
    color: #ff737e;
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1250px) {

    .gt-profile-container {
        width: min(
            1180px,
            calc(100% - 48px)
        );
    }


    .gt-profile-card {
        grid-template-columns:
        minmax(300px, 1fr)
        minmax(250px, .8fr)
        auto;

        gap: 18px;

        padding: 20px;
    }


    .gt-profile-large-avatar {
        width: 92px;
        height: 92px;

        flex-basis: 92px;

        font-size: 34px;
    }


    .gt-profile-quote {
        padding-left: 20px;
    }


    .gt-profile-course-row {
        grid-template-columns:
        43px
        minmax(130px, 1fr)
        minmax(90px, .7fr)
        auto;
    }

}


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

@media (max-width: 1024px) {

    .gt-profile-page {
        padding-top: 30px;
    }


    .gt-profile-container {
        width: calc(100% - 36px);
    }


    .gt-profile-card {
        grid-template-columns:
        1fr auto;

        gap: 20px;
    }


    .gt-profile-quote {
        display: none;
    }


    .gt-profile-stats {
        grid-template-columns:
        repeat(2, 1fr);
    }


    .gt-profile-lower-grid {
        grid-template-columns: 1fr;
    }


    .gt-profile-content-card {
        width: 100%;

        box-sizing: border-box;
    }

}


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

@media (max-width: 768px) {

    .gt-profile-page {
        min-height: calc(100vh - 60px);

        padding: 25px 0 100px;
    }


    .gt-profile-container {
        width: calc(100% - 24px);
    }


    .gt-profile-page-heading {
        display: block;

        margin-bottom: 18px;
    }


    .gt-profile-page-heading h1 {
        font-size: 24px;
    }


    .gt-profile-page-heading p {
        font-size: 11px;
    }


    .gt-profile-date {
        display: none;
    }


    .gt-profile-card {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

        padding: 18px;

        border-radius: 12px;
    }


    .gt-profile-user-section {
        gap: 13px;
    }


    .gt-profile-large-avatar {
        width: 68px;
        height: 68px;

        flex-basis: 68px;

        font-size: 25px;
    }


    .gt-profile-name-row h2 {
        font-size: 17px;
    }


    .gt-profile-role {
        height: 20px;

        padding: 0 7px;

        font-size: 8px;
    }


    .gt-profile-contact {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

        margin-top: 8px;
    }


    .gt-profile-contact > span {
        font-size: 9px;
    }


    .gt-profile-active {
        margin-top: 7px;

        font-size: 9px;
    }


    .gt-profile-edit-btn {
        width: 100%;

        box-sizing: border-box;
    }


    .gt-profile-section-block {
        padding: 13px;

        border-radius: 11px;
    }


    .gt-profile-stats {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    .gt-profile-stat-card {
        min-height: 88px;

        padding: 11px;

        gap: 9px;
    }


    .gt-profile-stat-icon {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }


    .gt-profile-stat-icon
    .material-symbols-rounded {
        font-size: 20px;
    }


    .gt-profile-stat-content strong {
        font-size: 17px;
    }


    .gt-profile-stat-content > span {
        font-size: 8px;
    }


    .gt-profile-stat-content small {
        font-size: 7px;
    }


    .gt-profile-progress-circle {
        width: 45px;
        height: 45px;

        flex-basis: 45px;
    }


    .gt-profile-progress-circle span {
        font-size: 10px;
    }


    .gt-profile-lower-grid {
        gap: 12px;

        margin-top: 12px;
    }


    .gt-profile-content-card {
        padding: 13px;

        border-radius: 11px;
    }


    .gt-profile-card-heading h3 {
        font-size: 13px;
    }


    .gt-profile-card-heading p {
        font-size: 8px;
    }


    .gt-profile-card-heading > a {
        font-size: 8px;
    }


    .gt-profile-course-row {
        grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

        gap: 9px;

        padding: 9px 3px;
    }


    .gt-course-icon {
        width: 38px;
        height: 38px;
    }


    .gt-course-progress {
        grid-column: 2 / 3;

        margin-top: -3px;
    }


    .gt-course-continue {
        grid-column: 3 / 4;

        grid-row: 1 / 3;

        height: 29px;

        padding: 0 7px;

        font-size: 8px;
    }


    .gt-profile-account-grid {
        grid-template-columns: 1fr;
    }


    .gt-profile-account-item {
        min-height: 58px;
    }


    .gt-profile-quote {
        display: none;
    }

}


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

@media (max-width: 420px) {

    .gt-profile-stats {
        grid-template-columns: 1fr;
    }


    .gt-profile-stat-card {
        min-height: 74px;
    }


    .gt-profile-user-section {
        align-items: flex-start;
    }


    .gt-profile-large-avatar {
        width: 58px;
        height: 58px;

        flex-basis: 58px;

        font-size: 22px;
    }


    .gt-profile-name-row {
        gap: 6px;
    }


    .gt-profile-name-row h2 {
        font-size: 15px;
    }


    .gt-profile-course-row {
        grid-template-columns:
        38px
        minmax(0, 1fr);

        gap: 8px;
    }


    .gt-course-progress {
        grid-column: 2;

        width: 100%;
    }


    .gt-course-continue {
        grid-column: 1 / -1;
        grid-row: auto;

        width: 100%;

        box-sizing: border-box;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .gt-profile-edit-btn,
    .gt-profile-account-item,
    .gt-account-arrow,
    .gt-course-continue {
        transition: none;
    }

}

/* =========================================================
   GURU TATWA - EDIT PROFILE PAGE
   Larger / cleaner typography
========================================================= */

.gt-edit-profile-page {
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 45px 0 140px;
    box-sizing: border-box;

    background:
    radial-gradient(
        circle at 10% 10%,
        rgba(18, 55, 92, 0.20),
        transparent 32%
    ),
    radial-gradient(
        circle at 90% 65%,
        rgba(212, 175, 55, 0.045),
        transparent 30%
    ),
    #020a17;

    color: #fff;
}


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

.gt-edit-profile-container {
    width: min(1180px, calc(100% - 70px));
    margin: 0 auto;
}


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

.gt-edit-profile-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 28px;
}


.gt-edit-profile-heading h1 {
    margin: 0;

    color: #fff;

    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}


.gt-edit-profile-heading p {
    margin: 9px 0 0;

    max-width: 700px;

    color: #9aa8ba;

    font-size: 14px;
    line-height: 1.6;
}


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

.gt-edit-profile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 43px;
    padding: 0 17px;

    flex-shrink: 0;

    border: 1px solid rgba(245, 189, 33, 0.28);
    border-radius: 8px;

    background: rgba(8, 23, 42, 0.75);

    color: #c1cad6;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: all .2s ease;
}


.gt-edit-profile-back:hover {
    color: #f5bd21;

    border-color: rgba(245, 189, 33, 0.65);

    background: rgba(245, 189, 33, 0.06);

    transform: translateX(-2px);
}


.gt-edit-profile-back .material-symbols-rounded {
    font-size: 19px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.gt-edit-profile-card {
    position: relative;

    display: grid;

    grid-template-columns: 350px minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid rgba(115, 143, 176, 0.18);
    border-radius: 18px;

    background:
    linear-gradient(
        145deg,
        rgba(10, 29, 51, 0.90),
        rgba(3, 12, 25, 0.96)
    );

    box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25);
}


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

.gt-edit-profile-sidebar {
    position: relative;

    padding: 38px 30px;

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

    background:
    linear-gradient(
        180deg,
        rgba(7, 22, 40, 0.85),
        rgba(3, 13, 27, 0.95)
    );
}


.gt-edit-profile-sidebar::before {
    content: "";

    position: absolute;

    top: -100px;
    left: -100px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(245, 189, 33, 0.055),
        transparent 68%
    );

    pointer-events: none;
}


/* =========================================================
   AVATAR
========================================================= */

.gt-edit-avatar-section {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.gt-edit-avatar {
    position: relative;

    width: 120px;
    height: 120px;

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

    border-radius: 50%;

    background:
    linear-gradient(
        145deg,
        #ffe27c 0%,
        #f5bd21 48%,
        #b77a0d 100%
    );

    border: 3px solid rgba(255, 226, 124, 0.65);

    color: #07111e;

    font-size: 45px;
    font-weight: 800;

    box-shadow:
    0 0 0 7px rgba(245, 189, 33, 0.035),
    0 15px 40px rgba(0, 0, 0, 0.25);
}


.gt-edit-avatar-camera {
    position: absolute;

    right: 2px;
    bottom: 3px;

    width: 36px;
    height: 36px;

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

    border: 3px solid #071426;
    border-radius: 50%;

    background: #f5bd21;

    color: #07111e;

    cursor: pointer;

    transition: transform .2s ease;
}


.gt-edit-avatar-camera:hover {
    transform: scale(1.08);
}


.gt-edit-avatar-camera .material-symbols-rounded {
    font-size: 18px;
}


.gt-change-photo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 17px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #f5bd21;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}


.gt-change-photo-btn:hover {
    color: #ffe27c;
}


.gt-change-photo-btn .material-symbols-rounded {
    font-size: 18px;
}


/* =========================================================
   SIDEBAR DIVIDER
========================================================= */

.gt-edit-sidebar-divider {
    width: 100%;
    height: 1px;

    margin: 32px 0;

    background: rgba(255, 255, 255, 0.07);
}


/* =========================================================
   ACCOUNT INFORMATION
========================================================= */

.gt-edit-account-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;
}


.gt-edit-account-heading-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border: 1px solid rgba(245, 189, 33, 0.15);
    border-radius: 10px;

    background: rgba(245, 189, 33, 0.07);

    color: #f5bd21;
}


.gt-edit-account-heading-icon .material-symbols-rounded {
    font-size: 21px;
}


.gt-edit-account-heading h3 {
    margin: 0;

    color: #eef2f7;

    font-size: 16px;
    font-weight: 650;
}


.gt-edit-account-heading p {
    margin: 4px 0 0;

    color: #718198;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   VERIFICATION ITEMS
========================================================= */

.gt-edit-verification-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.gt-edit-verification-item:last-child {
    border-bottom: 0;
}


.gt-edit-verification-icon {
    width: 36px;
    height: 36px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: rgba(57, 217, 138, 0.08);

    color: #40d992;
}


.gt-edit-verification-icon .material-symbols-rounded {
    font-size: 19px;
}


.gt-edit-verification-item > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.gt-edit-verification-item strong {
    color: #dbe3ec;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 600;
}


.gt-edit-verification-item span {
    color: #718198;

    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   CHANGE MOBILE BOX
========================================================= */

.gt-edit-mobile-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 28px;
    padding: 15px;

    border: 1px solid rgba(245, 189, 33, 0.12);
    border-radius: 11px;

    background: rgba(245, 189, 33, 0.035);
}


.gt-edit-mobile-box-icon {
    width: 32px;
    height: 32px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background: rgba(245, 189, 33, 0.08);

    color: #f5bd21;
}


.gt-edit-mobile-box-icon .material-symbols-rounded {
    font-size: 17px;
}


.gt-edit-mobile-box strong {
    display: block;

    color: #dce3eb;

    font-size: 12px;
    line-height: 1.5;
}


.gt-edit-mobile-box p {
    margin: 5px 0 10px;

    color: #78879a;

    font-size: 10px;
    line-height: 1.6;
}


.gt-edit-mobile-box a {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #f5bd21;

    text-decoration: none;

    font-size: 10px;
    font-weight: 600;
}


.gt-edit-mobile-box a:hover {
    color: #ffe27c;
}


.gt-edit-mobile-box a .material-symbols-rounded {
    font-size: 15px;
}


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

.gt-edit-profile-content {
    padding: 38px 40px;
}


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

.gt-edit-form-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}


.gt-edit-form-heading-icon {
    width: 45px;
    height: 45px;

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

    flex-shrink: 0;

    border: 1px solid rgba(245, 189, 33, 0.18);
    border-radius: 11px;

    background: rgba(245, 189, 33, 0.07);

    color: #f5bd21;
}


.gt-edit-form-heading-icon .material-symbols-rounded {
    font-size: 22px;
}


.gt-edit-form-heading h2 {
    margin: 0;

    color: #f2f5f8;

    font-size: 20px;
    font-weight: 650;
}


.gt-edit-form-heading p {
    margin: 5px 0 0;

    color: #7c8ba0;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   DIVIDER
========================================================= */

.gt-edit-content-divider {
    width: 100%;
    height: 1px;

    margin: 27px 0;

    background: rgba(255, 255, 255, 0.065);
}


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

.gt-edit-form-grid {
    display: grid;

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

    gap: 18px;
}


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

.gt-edit-form-group {
    margin-bottom: 21px;
}


.gt-edit-form-group > label,
.gt-edit-label-row label {
    display: block;

    margin-bottom: 8px;

    color: #d0d7e1;

    font-size: 13px;
    font-weight: 600;
}


.gt-edit-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.gt-edit-label-row label span {
    color: #69798e;

    font-size: 11px;
    font-weight: 400;
}


.gt-edit-character-count {
    color: #69798e;

    font-size: 10px;
}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.gt-edit-input-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 52px;

    box-sizing: border-box;

    border: 1px solid rgba(115, 143, 176, 0.20);
    border-radius: 9px;

    background: rgba(3, 13, 27, 0.72);

    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.gt-edit-input-wrapper:focus-within {
    border-color: rgba(245, 189, 33, 0.62);

    background: rgba(4, 16, 31, 0.92);

    box-shadow:
    0 0 0 3px rgba(245, 189, 33, 0.055);
}


.gt-edit-input-wrapper > .material-symbols-rounded {
    width: 50px;

    flex: 0 0 50px;

    color: #718198;

    font-size: 21px;

    text-align: center;
}


.gt-edit-input-wrapper:focus-within
> .material-symbols-rounded {
    color: #f5bd21;
}


/* =========================================================
   INPUT
========================================================= */

.gt-edit-input-wrapper input {
    width: 100%;
    min-width: 0;

    height: 50px;

    padding: 0 13px 0 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #edf1f6;

    font-family: inherit;

    font-size: 14px;
}


.gt-edit-input-wrapper input::placeholder {
    color: #53647a;
}


.gt-edit-input-wrapper input:-webkit-autofill,
.gt-edit-input-wrapper input:-webkit-autofill:hover,
.gt-edit-input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: #edf1f6;

    -webkit-box-shadow:
    0 0 0 1000px #061426 inset;

    transition:
    background-color 5000s ease-in-out 0s;
}


/* =========================================================
   READ ONLY
========================================================= */

.gt-edit-readonly-input {
    background: rgba(8, 23, 42, 0.45);
}


.gt-edit-readonly-input input {
    color: #8997a9;

    cursor: not-allowed;
}


/* =========================================================
   VERIFIED BADGE
========================================================= */

.gt-edit-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    flex-shrink: 0;

    margin-right: 13px;

    color: #40d992;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}


.gt-edit-verified-badge .material-symbols-rounded {
    width: auto;

    font-size: 16px;
}


/* =========================================================
   FIELD NOTE
========================================================= */

.gt-edit-field-note {
    display: block;

    margin-top: 7px;

    color: #697a90;

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   TEXTAREA
========================================================= */

.gt-edit-textarea-wrapper {
    width: 100%;
}


.gt-edit-textarea-wrapper textarea {
    display: block;

    width: 100%;
    min-height: 125px;

    box-sizing: border-box;

    padding: 14px;

    resize: vertical;

    border: 1px solid rgba(115, 143, 176, 0.20);
    border-radius: 9px;

    outline: none;

    background: rgba(3, 13, 27, 0.72);

    color: #edf1f6;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.6;

    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.gt-edit-textarea-wrapper textarea::placeholder {
    color: #53647a;
}


.gt-edit-textarea-wrapper textarea:focus {
    border-color: rgba(245, 189, 33, 0.62);

    background: rgba(4, 16, 31, 0.92);

    box-shadow:
    0 0 0 3px rgba(245, 189, 33, 0.055);
}


/* =========================================================
   ERROR
========================================================= */

.gt-edit-form-error {
    display: block;

    min-height: 0;

    margin-top: 6px;

    color: #ff737e;

    font-size: 11px;
}


.gt-edit-form-group.has-error
.gt-edit-input-wrapper {
    border-color: rgba(255, 83, 98, 0.65);
}


.gt-edit-form-group.has-success
.gt-edit-input-wrapper {
    border-color: rgba(57, 217, 138, 0.45);
}


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

.gt-edit-form-message {
    margin-top: 15px;

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 12px;

    line-height: 1.5;
}


.gt-edit-form-message.success {
    border: 1px solid rgba(57, 217, 138, 0.20);

    background: rgba(57, 217, 138, 0.05);

    color: #4cdd9b;
}


.gt-edit-form-message.error {
    border: 1px solid rgba(255, 83, 98, 0.20);

    background: rgba(255, 83, 98, 0.05);

    color: #ff8089;
}


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

.gt-edit-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 27px;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.065);
}


/* =========================================================
   CANCEL
========================================================= */

.gt-edit-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 45px;

    padding: 0 22px;

    border: 1px solid rgba(115, 143, 176, 0.22);
    border-radius: 8px;

    background: transparent;

    color: #9aa7b8;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: all .2s ease;
}


.gt-edit-cancel-btn:hover {
    border-color: rgba(115, 143, 176, 0.4);

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

    color: #e1e6ed;
}


/* =========================================================
   SAVE
========================================================= */

.gt-edit-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 155px;
    height: 45px;

    padding: 0 22px;

    border: 1px solid #c89618;
    border-radius: 8px;

    background:
    linear-gradient(
        135deg,
        #f5bd21,
        #d69e16
    );

    color: #07111e;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
    0 7px 22px rgba(245, 189, 33, 0.10);

    transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease;
}


.gt-edit-save-btn:hover {
    transform: translateY(-1px);

    filter: brightness(1.05);

    box-shadow:
    0 10px 28px rgba(245, 189, 33, 0.16);
}


.gt-edit-save-btn:active {
    transform: translateY(0);
}


.gt-edit-save-btn .material-symbols-rounded {
    font-size: 19px;
}


/* =========================================================
   LOADING
========================================================= */

.gt-edit-save-btn.loading {
    pointer-events: none;

    opacity: .7;
}


.gt-edit-save-btn.loading .gt-edit-save-text::after {
    content: "...";
}


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

.gt-edit-security-footer {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 14px;
    padding: 14px 17px;

    border: 1px solid rgba(115, 143, 176, 0.10);
    border-radius: 9px;

    background: rgba(7, 20, 37, 0.50);
}


.gt-edit-security-footer > .material-symbols-rounded {
    flex-shrink: 0;

    color: #f5bd21;

    font-size: 21px;
}


.gt-edit-security-footer div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.gt-edit-security-footer strong {
    color: #b9c4d1;

    font-size: 11px;
    font-weight: 600;
}


.gt-edit-security-footer span {
    color: #66778d;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .gt-edit-profile-container {
        width: calc(100% - 45px);
    }

    .gt-edit-profile-card {
        grid-template-columns: 310px minmax(0, 1fr);
    }

    .gt-edit-profile-sidebar {
        padding: 32px 24px;
    }

    .gt-edit-profile-content {
        padding: 32px;
    }

}


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

@media (max-width: 850px) {

    .gt-edit-profile-page {
        padding-top: 32px;
    }

    .gt-edit-profile-container {
        width: calc(100% - 30px);
    }

    .gt-edit-profile-heading {
        align-items: flex-start;
    }

    .gt-edit-profile-heading h1 {
        font-size: 29px;
    }

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

    .gt-edit-profile-sidebar {
        border-right: 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .gt-edit-profile-content {
        padding: 30px;
    }

    .gt-edit-profile-sidebar {
        padding: 30px;
    }

}


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

@media (max-width: 600px) {

    .gt-edit-profile-page {
        min-height: calc(100vh - 60px);

        padding: 25px 0 110px;
    }

    .gt-edit-profile-container {
        width: calc(100% - 20px);
    }


    /* PAGE HEADER */

    .gt-edit-profile-heading {
        display: block;

        margin-bottom: 18px;
    }

    .gt-edit-profile-heading h1 {
        font-size: 27px;
    }

    .gt-edit-profile-heading p {
        margin-top: 7px;

        font-size: 14px;
    }

    .gt-edit-profile-back {
        margin-top: 13px;

        width: fit-content;
    }


    /* CARD */

    .gt-edit-profile-card {
        border-radius: 13px;
    }


    /* SIDEBAR */

    .gt-edit-profile-sidebar {
        padding: 25px 18px;
    }


    .gt-edit-avatar {
        width: 95px;
        height: 95px;

        font-size: 36px;
    }


    .gt-edit-avatar-camera {
        width: 32px;
        height: 32px;
    }


    .gt-edit-profile-sidebar .gt-edit-sidebar-divider {
        margin: 25px 0;
    }


    .gt-edit-account-heading h3 {
        font-size: 15px;
    }


    .gt-edit-account-heading p {
        font-size: 11px;
    }


    .gt-edit-verification-item strong {
        font-size: 12px;
    }


    .gt-edit-verification-item span {
        font-size: 10px;
    }


    .gt-edit-mobile-box strong {
        font-size: 12px;
    }


    .gt-edit-mobile-box p {
        font-size: 11px;
    }


    /* FORM */

    .gt-edit-profile-content {
        padding: 25px 18px;
    }


    .gt-edit-form-heading h2 {
        font-size: 19px;
    }


    .gt-edit-form-heading p {
        font-size: 11px;
    }


    .gt-edit-content-divider {
        margin: 22px 0;
    }


    .gt-edit-form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .gt-edit-form-group > label,
    .gt-edit-label-row label {
        font-size: 14px;
    }


    .gt-edit-input-wrapper {
        min-height: 52px;
    }


    .gt-edit-input-wrapper input {
        height: 50px;

        font-size: 14px;
    }


    .gt-edit-input-wrapper > .material-symbols-rounded {
        width: 46px;

        flex-basis: 46px;
    }


    .gt-edit-field-note {
        font-size: 11px;
    }


    .gt-edit-textarea-wrapper textarea {
        min-height: 120px;

        font-size: 14px;
    }


    .gt-edit-form-actions {
        display: grid;

        grid-template-columns: 1fr 1.35fr;

        gap: 8px;
    }


    .gt-edit-cancel-btn,
    .gt-edit-save-btn {
        width: 100%;

        min-width: 0;

        box-sizing: border-box;

        height: 46px;

        font-size: 13px;
    }


    .gt-edit-security-footer {
        align-items: flex-start;
    }


    .gt-edit-security-footer strong {
        font-size: 11px;
    }


    .gt-edit-security-footer span {
        font-size: 10px;
    }

}


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

@media (max-width: 400px) {

    .gt-edit-profile-container {
        width: calc(100% - 14px);
    }


    .gt-edit-profile-heading h1 {
        font-size: 24px;
    }


    .gt-edit-profile-heading p {
        font-size: 13px;
    }


    .gt-edit-profile-sidebar {
        padding: 22px 15px;
    }


    .gt-edit-profile-content {
        padding: 22px 15px;
    }


    .gt-edit-avatar {
        width: 85px;
        height: 85px;

        font-size: 32px;
    }


    .gt-edit-form-heading h2 {
        font-size: 17px;
    }


    .gt-edit-input-wrapper input {
        font-size: 13px;
    }


    .gt-edit-verified-badge {
        margin-right: 8px;

        font-size: 9px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .gt-edit-profile-back,
    .gt-edit-avatar-camera,
    .gt-change-photo-btn,
    .gt-edit-input-wrapper,
    .gt-edit-textarea-wrapper textarea,
    .gt-edit-cancel-btn,
    .gt-edit-save-btn {
        transition: none;
    }

}

/* =========================================================
   EMAIL NOT VERIFIED
========================================================= */

.gt-edit-email-unverified {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    flex-shrink: 0;

    margin-right: 13px;

    color: #f0a52b;

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;
}

.gt-edit-email-unverified .material-symbols-rounded {
    width: auto;

    font-size: 16px;
}


/* =========================================================
   VERIFY EMAIL ACTION
========================================================= */

.gt-edit-email-action {
    margin-top: 9px;
}

.gt-verify-email-btn {
    display: inline-flex;

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

    gap: 6px;

    height: 36px;

    padding: 0 13px;

    border: 1px solid rgba(245, 189, 33, 0.38);

    border-radius: 7px;

    background: rgba(245, 189, 33, 0.055);

    color: #f5bd21;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.gt-verify-email-btn:hover {
    background: rgba(245, 189, 33, 0.10);

    border-color: rgba(245, 189, 33, 0.7);

    transform: translateY(-1px);
}

.gt-verify-email-btn .material-symbols-rounded {
    font-size: 17px;
}


/* =========================================================
   LEFT STATUS - EMAIL UNVERIFIED
========================================================= */

.gt-email-not-verified {
    border-bottom-color: rgba(255, 255, 255, 0.055);
}

.gt-email-not-verified .gt-edit-verification-icon {
    background: rgba(240, 165, 43, 0.08);

    color: #f0a52b;
}

.gt-email-not-verified strong {
    color: #dce3eb;
}

.gt-email-loading-icon {
    animation: gtEmailSpin 1s linear infinite;
}

@keyframes gtEmailSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* =========================================================
   GURU TATWA - EDIT PROFILE
========================================================= */

.gt-edit-profile-page {
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 45px 0 140px;
    box-sizing: border-box;

    background:
    radial-gradient(
        circle at 10% 10%,
        rgba(18, 55, 92, .20),
        transparent 32%
    ),
    radial-gradient(
        circle at 90% 65%,
        rgba(212, 175, 55, .045),
        transparent 30%
    ),
    #020a17;

    color: #fff;
}

.gt-edit-profile-container {
    width: 1320px;
    margin: 0 auto;
}


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

.gt-edit-profile-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.gt-edit-profile-heading h1 {
    margin: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}

.gt-edit-profile-heading p {
    margin: 9px 0 0;
    max-width: 700px;
    color: #9aa8ba;
    font-size: 14px;
    line-height: 1.6;
}


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

.gt-edit-profile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 43px;
    padding: 0 17px;

    flex-shrink: 0;

    border: 1px solid rgba(245, 189, 33, .28);
    border-radius: 8px;

    background: rgba(8, 23, 42, .75);

    color: #c1cad6;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: all .2s ease;
}

.gt-edit-profile-back:hover {
    color: #f5bd21;
    border-color: rgba(245, 189, 33, .65);
    background: rgba(245, 189, 33, .06);
    transform: translateX(-2px);
}

.gt-edit-profile-back .material-symbols-rounded {
    font-size: 19px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.gt-edit-profile-card {
    position: relative;

    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid rgba(115, 143, 176, .18);
    border-radius: 18px;

    background:
    linear-gradient(
        145deg,
        rgba(10, 29, 51, .90),
        rgba(3, 12, 25, .96)
    );

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


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

.gt-edit-profile-sidebar {
    position: relative;

    padding: 38px 30px;

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

    background:
    linear-gradient(
        180deg,
        rgba(7, 22, 40, .85),
        rgba(3, 13, 27, .95)
    );
}

.gt-edit-profile-sidebar::before {
    content: "";

    position: absolute;

    top: -100px;
    left: -100px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(245, 189, 33, .055),
        transparent 68%
    );

    pointer-events: none;
}


/* =========================================================
   AVATAR
========================================================= */

.gt-edit-avatar-section {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.gt-edit-avatar {
    position: relative;

    width: 120px;
    height: 120px;

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

    border-radius: 50%;

    background:
    linear-gradient(
        145deg,
        #ffe27c 0%,
        #f5bd21 48%,
        #b77a0d 100%
    );

    border: 3px solid rgba(255, 226, 124, .65);

    color: #07111e;

    font-size: 45px;
    font-weight: 800;

    box-shadow:
    0 0 0 7px rgba(245, 189, 33, .035),
    0 15px 40px rgba(0, 0, 0, .25);
}

.gt-edit-avatar-camera {
    position: absolute;

    right: 2px;
    bottom: 3px;

    width: 36px;
    height: 36px;

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

    border: 3px solid #071426;
    border-radius: 50%;

    background: #f5bd21;
    color: #07111e;

    cursor: pointer;

    transition: transform .2s ease;
}

.gt-edit-avatar-camera:hover {
    transform: scale(1.08);
}

.gt-edit-avatar-camera .material-symbols-rounded {
    font-size: 18px;
}

.gt-change-photo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 17px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #f5bd21;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.gt-change-photo-btn:hover {
    color: #ffe27c;
}

.gt-change-photo-btn .material-symbols-rounded {
    font-size: 18px;
}


/* =========================================================
   SIDEBAR DIVIDER
========================================================= */

.gt-edit-sidebar-divider {
    width: 100%;
    height: 1px;

    margin: 32px 0;

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


/* =========================================================
   ACCOUNT INFORMATION
========================================================= */

.gt-edit-account-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;
}

.gt-edit-account-heading-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border: 1px solid rgba(245, 189, 33, .15);
    border-radius: 10px;

    background: rgba(245, 189, 33, .07);

    color: #f5bd21;
}

.gt-edit-account-heading-icon .material-symbols-rounded {
    font-size: 21px;
}

.gt-edit-account-heading h3 {
    margin: 0;

    color: #eef2f7;

    font-size: 16px;
    font-weight: 650;
}

.gt-edit-account-heading p {
    margin: 4px 0 0;

    color: #718198;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   VERIFICATION ITEMS
========================================================= */

.gt-edit-verification-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 0;

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

.gt-edit-verification-item:last-child {
    border-bottom: 0;
}

.gt-edit-verification-icon {
    width: 36px;
    height: 36px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: rgba(57, 217, 138, .08);

    color: #40d992;
}

.gt-edit-verification-icon .material-symbols-rounded {
    font-size: 19px;
}

.gt-edit-verification-item > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gt-edit-verification-item strong {
    color: #dbe3ec;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 600;
}

.gt-edit-verification-item span {
    color: #718198;

    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   EMAIL NOT VERIFIED
========================================================= */

.gt-email-not-verified .gt-edit-verification-icon {
    background: rgba(240, 165, 43, .09);
    color: #f0a52b;
}


/* =========================================================
   CHANGE MOBILE BOX
========================================================= */

.gt-edit-mobile-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 28px;
    padding: 15px;

    border: 1px solid rgba(245, 189, 33, .12);
    border-radius: 11px;

    background: rgba(245, 189, 33, .035);
}

.gt-edit-mobile-box-icon {
    width: 32px;
    height: 32px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background: rgba(245, 189, 33, .08);

    color: #f5bd21;
}

.gt-edit-mobile-box-icon .material-symbols-rounded {
    font-size: 17px;
}

.gt-edit-mobile-box strong {
    display: block;

    color: #dce3eb;

    font-size: 12px;
    line-height: 1.5;
}

.gt-edit-mobile-box p {
    margin: 5px 0 10px;

    color: #78879a;

    font-size: 10px;
    line-height: 1.6;
}

.gt-edit-mobile-box a {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #f5bd21;

    text-decoration: none;

    font-size: 10px;
    font-weight: 600;
}

.gt-edit-mobile-box a:hover {
    color: #ffe27c;
}

.gt-edit-mobile-box a .material-symbols-rounded {
    font-size: 15px;
}


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

.gt-edit-profile-content {
    padding: 38px 40px;
}


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

.gt-edit-form-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.gt-edit-form-heading-icon {
    width: 45px;
    height: 45px;

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

    flex-shrink: 0;

    border: 1px solid rgba(245, 189, 33, .18);
    border-radius: 11px;

    background: rgba(245, 189, 33, .07);

    color: #f5bd21;
}

.gt-edit-form-heading-icon .material-symbols-rounded {
    font-size: 22px;
}

.gt-edit-form-heading h2 {
    margin: 0;

    color: #f2f5f8;

    font-size: 20px;
    font-weight: 650;
}

.gt-edit-form-heading p {
    margin: 5px 0 0;

    color: #7c8ba0;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   DIVIDER
========================================================= */

.gt-edit-content-divider {
    width: 100%;
    height: 1px;

    margin: 27px 0;

    background: rgba(255, 255, 255, .065);
}


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

.gt-edit-form-grid {
    display: grid;

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

    gap: 18px;
}


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

.gt-edit-form-group {
    margin-bottom: 21px;
}

.gt-edit-form-group > label,
.gt-edit-label-row label {
    display: block;

    margin-bottom: 8px;

    color: #d0d7e1;

    font-size: 14px;
    font-weight: 600;
}

.gt-edit-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.gt-edit-label-row label span {
    color: #69798e;

    font-size: 11px;
    font-weight: 400;
}

.gt-edit-character-count {
    color: #69798e;

    font-size: 11px;
}


/* =========================================================
   INPUT
========================================================= */

.gt-edit-input-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 52px;

    box-sizing: border-box;

    border: 1px solid rgba(115, 143, 176, .20);
    border-radius: 9px;

    background: rgba(3, 13, 27, .72);

    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.gt-edit-input-wrapper:focus-within {
    border-color: rgba(245, 189, 33, .62);

    background: rgba(4, 16, 31, .92);

    box-shadow:
    0 0 0 3px rgba(245, 189, 33, .055);
}

.gt-edit-input-wrapper > .material-symbols-rounded {
    width: 50px;

    flex: 0 0 50px;

    color: #718198;

    font-size: 21px;

    text-align: center;
}

.gt-edit-input-wrapper:focus-within
> .material-symbols-rounded {
    color: #f5bd21;
}

.gt-edit-input-wrapper input {
    width: 100%;
    min-width: 0;

    height: 50px;

    padding: 0 13px 0 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #edf1f6;

    font-family: inherit;

    font-size: 14px;
}

.gt-edit-input-wrapper input::placeholder {
    color: #53647a;
}


/* =========================================================
   READONLY
========================================================= */

.gt-edit-readonly-input {
    background: rgba(8, 23, 42, .45);
}

.gt-edit-readonly-input input {
    color: #8997a9;

    cursor: not-allowed;
}


/* =========================================================
   VERIFIED
========================================================= */

.gt-edit-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    flex-shrink: 0;

    margin-right: 13px;

    color: #40d992;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}

.gt-edit-verified-badge .material-symbols-rounded {
    width: auto;

    font-size: 16px;
}


/* =========================================================
   NOT VERIFIED
========================================================= */

.gt-edit-email-unverified {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    flex-shrink: 0;

    margin-right: 13px;

    color: #f0a52b;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}

.gt-edit-email-unverified .material-symbols-rounded {
    width: auto;

    font-size: 16px;
}


/* =========================================================
   FIELD NOTE
========================================================= */

.gt-edit-field-note {
    display: block;

    margin-top: 7px;

    color: #697a90;

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   VERIFY EMAIL BUTTON
========================================================= */

.gt-edit-email-action {
    margin-top: 10px;
}

.gt-verify-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 38px;

    padding: 0 14px;

    border: 1px solid rgba(245, 189, 33, .38);
    border-radius: 7px;

    background: rgba(245, 189, 33, .055);

    color: #f5bd21;

    font-family: inherit;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition: all .2s ease;
}

.gt-verify-email-btn:hover {
    background: rgba(245, 189, 33, .11);

    border-color: rgba(245, 189, 33, .7);

    transform: translateY(-1px);
}

.gt-verify-email-btn:disabled {
    cursor: not-allowed;

    opacity: .65;

    transform: none;
}

.gt-verify-email-btn .material-symbols-rounded {
    font-size: 17px;
}


/* =========================================================
   TEXTAREA
========================================================= */

.gt-edit-textarea-wrapper textarea {
    display: block;

    width: 100%;
    min-height: 125px;

    box-sizing: border-box;

    padding: 14px;

    resize: vertical;

    border: 1px solid rgba(115, 143, 176, .20);
    border-radius: 9px;

    outline: none;

    background: rgba(3, 13, 27, .72);

    color: #edf1f6;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.6;

    transition: all .2s ease;
}

.gt-edit-textarea-wrapper textarea::placeholder {
    color: #53647a;
}

.gt-edit-textarea-wrapper textarea:focus {
    border-color: rgba(245, 189, 33, .62);

    background: rgba(4, 16, 31, .92);

    box-shadow:
    0 0 0 3px rgba(245, 189, 33, .055);
}


/* =========================================================
   ERROR
========================================================= */

.gt-edit-form-error {
    display: block;

    min-height: 0;

    margin-top: 6px;

    color: #ff737e;

    font-size: 11px;
}

.gt-edit-form-group.has-error
.gt-edit-input-wrapper {
    border-color: rgba(255, 83, 98, .65);
}


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

.gt-edit-form-message {
    margin-top: 15px;

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 12px;

    line-height: 1.5;
}

.gt-edit-form-message.success {
    border: 1px solid rgba(57, 217, 138, .20);

    background: rgba(57, 217, 138, .05);

    color: #4cdd9b;
}

.gt-edit-form-message.error {
    border: 1px solid rgba(255, 83, 98, .20);

    background: rgba(255, 83, 98, .05);

    color: #ff8089;
}


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

.gt-edit-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 27px;
    padding-top: 22px;

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


/* =========================================================
   CANCEL
========================================================= */

.gt-edit-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 45px;

    padding: 0 22px;

    border: 1px solid rgba(115, 143, 176, .22);
    border-radius: 8px;

    background: transparent;

    color: #9aa7b8;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: all .2s ease;
}

.gt-edit-cancel-btn:hover {
    border-color: rgba(115, 143, 176, .4);

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

    color: #e1e6ed;
}


/* =========================================================
   SAVE
========================================================= */

.gt-edit-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 155px;
    height: 45px;

    padding: 0 22px;

    border: 1px solid #c89618;
    border-radius: 8px;

    background:
    linear-gradient(
        135deg,
        #f5bd21,
        #d69e16
    );

    color: #07111e;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
    0 7px 22px rgba(245, 189, 33, .10);

    transition: all .2s ease;
}

.gt-edit-save-btn:hover {
    transform: translateY(-1px);

    filter: brightness(1.05);

    box-shadow:
    0 10px 28px rgba(245, 189, 33, .16);
}

.gt-edit-save-btn:disabled {
    opacity: .65;

    cursor: not-allowed;

    transform: none;
}


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

.gt-edit-security-footer {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 14px;
    padding: 14px 17px;

    border: 1px solid rgba(115, 143, 176, .10);
    border-radius: 9px;

    background: rgba(7, 20, 37, .50);
}

.gt-edit-security-footer > .material-symbols-rounded {
    flex-shrink: 0;

    color: #f5bd21;

    font-size: 21px;
}

.gt-edit-security-footer div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gt-edit-security-footer strong {
    color: #b9c4d1;

    font-size: 11px;
    font-weight: 600;
}

.gt-edit-security-footer span {
    color: #66778d;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   LOADING
========================================================= */

.gt-verify-email-btn.loading {
    pointer-events: none;

    opacity: .65;
}

.gt-email-loading-icon {
    animation: gtEmailSpin 1s linear infinite;
}

@keyframes gtEmailSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

@media (max-width: 850px) {

    .gt-edit-profile-container {
        width: calc(100% - 30px);
    }

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

    .gt-edit-profile-sidebar {
        border-right: 0;

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

    .gt-edit-profile-content {
        padding: 30px;
    }

}


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

@media (max-width: 600px) {

    .gt-edit-profile-page {
        min-height: calc(100vh - 60px);

        padding: 25px 0 110px;
    }

    .gt-edit-profile-container {
        width: calc(100% - 20px);
    }


    /* HEADER */

    .gt-edit-profile-heading {
        display: block;

        margin-bottom: 18px;
    }

    .gt-edit-profile-heading h1 {
        font-size: 27px;
    }

    .gt-edit-profile-heading p {
        font-size: 14px;
    }

    .gt-edit-profile-back {
        margin-top: 13px;
    }


    /* SIDEBAR */

    .gt-edit-profile-sidebar {
        padding: 25px 18px;
    }

    .gt-edit-avatar {
        width: 95px;
        height: 95px;

        font-size: 36px;
    }


    /* CONTENT */

    .gt-edit-profile-content {
        padding: 25px 18px;
    }

    .gt-edit-form-heading h2 {
        font-size: 19px;
    }

    .gt-edit-form-heading p {
        font-size: 11px;
    }


    /* FORM */

    .gt-edit-form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .gt-edit-form-group > label,
    .gt-edit-label-row label {
        font-size: 14px;
    }

    .gt-edit-input-wrapper {
        min-height: 52px;
    }

    .gt-edit-input-wrapper input {
        height: 50px;

        font-size: 14px;
    }

    .gt-edit-textarea-wrapper textarea {
        font-size: 14px;
    }


    /* ACTIONS */

    .gt-edit-form-actions {
        display: grid;

        grid-template-columns: 1fr 1.35fr;

        gap: 8px;
    }

    .gt-edit-cancel-btn,
    .gt-edit-save-btn {
        width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }

}


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

@media (max-width: 400px) {

    .gt-edit-profile-container {
        width: calc(100% - 14px);
    }

    .gt-edit-profile-heading h1 {
        font-size: 24px;
    }

    .gt-edit-profile-heading p {
        font-size: 13px;
    }

    .gt-edit-profile-sidebar,
    .gt-edit-profile-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .gt-edit-input-wrapper input {
        font-size: 13px;
    }

    .gt-edit-verified-badge,
    .gt-edit-email-unverified {
        margin-right: 8px;

        font-size: 9px;
    }

}

/* =========================================================
   CHANGE MOBILE PAGE
========================================================= */

.gt-change-mobile-page {

    min-height: calc(100vh - 80px);

    padding: 55px 20px 100px;

    box-sizing: border-box;

    background:

    radial-gradient(
        circle at 10% 15%,
        rgba(245, 189, 33, 0.045),
        transparent 30%
    ),

    radial-gradient(
        circle at 90% 80%,
        rgba(20, 65, 105, 0.16),
        transparent 35%
    ),

    #020817;

}


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

.gt-change-mobile-container {

    width: min(1100px, 100%);

    margin: 0 auto;

}


/* =========================================================
   PAGE HEADING
========================================================= */

.gt-change-mobile-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

}


.gt-change-mobile-heading h1 {

    margin: 0;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.3;

    font-weight: 700;

}


.gt-change-mobile-heading p {

    margin: 9px 0 0;

    color: #8292a7;

    font-size: 14px;

    line-height: 1.6;

}


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

.gt-change-mobile-back {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 42px;

    padding: 0 15px;

    box-sizing: border-box;

    border: 1px solid #25374e;

    border-radius: 8px;

    background: rgba(8, 23, 40, .7);

    color: #b8c3d0;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;

}


.gt-change-mobile-back:hover {

    color: #f5bd21;

    border-color: rgba(245, 189, 33, .4);

    background: rgba(245, 189, 33, .04);

}


.gt-change-mobile-back
.material-symbols-rounded {

    font-size: 18px;

}


/* =========================================================
   MAIN CARD
========================================================= */

.gt-change-mobile-card {

    display: grid;

    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);

    overflow: hidden;

    border: 1px solid rgba(112, 139, 169, .18);

    border-radius: 16px;

    background:

    linear-gradient(
        135deg,
        rgba(8, 27, 47, .97),
        rgba(3, 13, 27, .99)
    );

    box-shadow:

    0 25px 70px rgba(0, 0, 0, .28);

}


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

.gt-change-mobile-info {

    padding: 42px;

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

    background:

    radial-gradient(
        circle at 20% 15%,
        rgba(245, 189, 33, .035),
        transparent 40%
    );

}


.gt-change-mobile-icon {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 14px;

    color: #f5bd21;

    background: rgba(245, 189, 33, .07);

    border: 1px solid rgba(245, 189, 33, .22);

}


.gt-change-mobile-icon
.material-symbols-rounded {

    font-size: 31px;

}


.gt-change-mobile-info h2 {

    margin: 0;

    color: #ffffff;

    font-size: 23px;

    line-height: 1.35;

    font-weight: 700;

}


.gt-change-mobile-info > p {

    margin: 12px 0 28px;

    color: #8494a8;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   CURRENT MOBILE BOX
========================================================= */

.gt-current-mobile-box {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px;

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

    border-radius: 10px;

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

}


.gt-current-mobile-icon {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: #f5bd21;

    background: rgba(245, 189, 33, .08);

}


.gt-current-mobile-icon
.material-symbols-rounded {

    font-size: 21px;

}


.gt-current-mobile-box > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.gt-current-mobile-box span {

    color: #66798f;

    font-size: 11px;

}


.gt-current-mobile-box strong {

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .3px;

}


/* =========================================================
   SECURITY BOX
========================================================= */

.gt-change-mobile-security {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 28px;

    padding-top: 24px;

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

}


.gt-change-mobile-security >
.material-symbols-rounded {

    margin-top: 2px;

    color: #f5bd21;

    font-size: 19px;

    flex-shrink: 0;

}


.gt-change-mobile-security strong {

    display: block;

    margin-bottom: 5px;

    color: #c5cfda;

    font-size: 13px;

    font-weight: 600;

}


.gt-change-mobile-security p {

    margin: 0;

    color: #60738a;

    font-size: 12px;

    line-height: 1.65;

}


/* =========================================================
   RIGHT FORM SECTION
========================================================= */

.gt-change-mobile-form-section {

    padding: 42px;

}


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

.gt-change-mobile-form-heading {

    display: flex;

    align-items: center;

    gap: 13px;

}


.gt-change-mobile-form-icon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    color: #f5bd21;

    background: rgba(245, 189, 33, .07);

    border: 1px solid rgba(245, 189, 33, .18);

}


.gt-change-mobile-form-icon
.material-symbols-rounded {

    font-size: 22px;

}


.gt-change-mobile-form-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size: 19px;

    font-weight: 700;

}


.gt-change-mobile-form-heading p {

    margin: 4px 0 0;

    color: #718399;

    font-size: 12px;

    line-height: 1.5;

}


/* =========================================================
   DIVIDER
========================================================= */

.gt-change-mobile-divider {

    height: 1px;

    margin: 27px 0 30px;

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

}


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

.gt-change-mobile-form {

    width: 100%;

}


.gt-change-mobile-form-group {

    display: flex;

    flex-direction: column;

}


.gt-change-mobile-form-group label {

    margin-bottom: 9px;

    color: #c4ced9;

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.gt-change-mobile-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    height: 53px;

    border: 1px solid #263950;

    border-radius: 9px;

    background: #071525;

    transition:
    border-color .2s ease,
    box-shadow .2s ease;

}


.gt-change-mobile-input-wrapper >
.material-symbols-rounded {

    margin-left: 15px;

    color: #667a91;

    font-size: 20px;

    flex-shrink: 0;

}


.gt-mobile-country-code {

    margin-left: 11px;

    padding-right: 12px;

    border-right: 1px solid #273a51;

    color: #9eacbb;

    font-size: 14px;

    font-weight: 600;

}


.gt-change-mobile-input-wrapper input {

    width: 100%;

    height: 100%;

    min-width: 0;

    padding: 0 15px;

    box-sizing: border-box;

    border: 0;

    outline: 0;

    background: transparent;

    color: #ffffff;

    font-size: 15px;

    font-family: inherit;

}


.gt-change-mobile-input-wrapper input::placeholder {

    color: #4f6379;

}


.gt-change-mobile-input-wrapper:focus-within {

    border-color: rgba(245, 189, 33, .55);

    box-shadow:

    0 0 0 3px rgba(245, 189, 33, .055);

}


.gt-change-mobile-form-group > small {

    margin-top: 8px;

    color: #5d7087;

    font-size: 11px;

    line-height: 1.5;

}


/* =========================================================
   ERROR
========================================================= */

.gt-change-mobile-error {

    display: none;

    margin-top: 8px;

    padding: 9px 11px;

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

    border-radius: 7px;

    background: rgba(255, 75, 75, .055);

    color: #ff9999;

    font-size: 12px;

    line-height: 1.5;

}


.gt-change-mobile-error.show {

    display: block;

}


/* =========================================================
   MESSAGE
========================================================= */

.gt-change-mobile-message {

    display: none;

    margin-top: 18px;

    padding: 11px 13px;

    border-radius: 8px;

    font-size: 12px;

    line-height: 1.6;

}


.gt-change-mobile-message.show {

    display: block;

}


.gt-change-mobile-message.success {

    border: 1px solid rgba(55, 215, 137, .16);

    background: rgba(55, 215, 137, .055);

    color: #7ce1ad;

}


.gt-change-mobile-message.error {

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

    background: rgba(255, 75, 75, .055);

    color: #ff9999;

}


/* =========================================================
   SEND OTP BUTTON
========================================================= */

.gt-send-mobile-otp {

    width: 100%;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 24px;

    border: 0;

    border-radius: 9px;

    background:

    linear-gradient(
        135deg,
        #f5bd21,
        #d89f14
    );

    color: #07111e;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;

}


.gt-send-mobile-otp:hover {

    transform: translateY(-1px);

    box-shadow:

    0 10px 25px rgba(245, 189, 33, .12);

}


.gt-send-mobile-otp:active {

    transform: translateY(0);

}


.gt-send-mobile-otp:disabled {

    opacity: .55;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


.gt-send-mobile-otp
.material-symbols-rounded {

    font-size: 19px;

}


/* =========================================================
   LOADING
========================================================= */

.gt-mobile-spinner {

    width: 17px;

    height: 17px;

    border: 2px solid rgba(7, 17, 30, .25);

    border-top-color: #07111e;

    border-radius: 50%;

    animation:
    gtMobileSpinner .7s linear infinite;

}


@keyframes gtMobileSpinner {

    to {

        transform: rotate(360deg);

    }

}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.gt-change-mobile-note {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 25px;

    padding: 14px;

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

    border-radius: 8px;

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

    color: #596c83;

    font-size: 11px;

    line-height: 1.65;

}


.gt-change-mobile-note
.material-symbols-rounded {

    color: #6f8299;

    font-size: 17px;

    flex-shrink: 0;

}


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

.gt-change-mobile-page
+ .gt-player {

    margin-top: 0;

}


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

@media (max-width: 900px) {

    .gt-change-mobile-card {

        grid-template-columns: 1fr;

    }


    .gt-change-mobile-info {

        border-right: 0;

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

    }

}


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

@media (max-width: 600px) {

    .gt-change-mobile-page {

        min-height: calc(100vh - 65px);

        padding: 30px 14px 80px;

    }


    .gt-change-mobile-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        margin-bottom: 22px;

    }


    .gt-change-mobile-heading h1 {

        font-size: 25px;

    }


    .gt-change-mobile-heading p {

        font-size: 14px;

    }


    .gt-change-mobile-back {

        min-height: 40px;

    }


    .gt-change-mobile-info {

        padding: 27px 22px;

    }


    .gt-change-mobile-form-section {

        padding: 27px 22px;

    }


    .gt-change-mobile-info h2 {

        font-size: 21px;

    }


    .gt-change-mobile-info > p {

        font-size: 14px;

    }


    .gt-change-mobile-form-heading h2 {

        font-size: 18px;

    }


    .gt-change-mobile-card {

        border-radius: 13px;

    }

}


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

@media (max-width: 400px) {

    .gt-change-mobile-page {

        padding-left: 10px;

        padding-right: 10px;

    }


    .gt-change-mobile-info,
    .gt-change-mobile-form-section {

        padding: 24px 17px;

    }


    .gt-change-mobile-heading h1 {

        font-size: 23px;

    }


    .gt-current-mobile-box {

        padding: 13px;

    }


    .gt-change-mobile-input-wrapper {

        height: 50px;

    }

}

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

        .gt-mobile-verification-page {

            min-height: calc(100vh - 80px);

            display: flex;

            align-items: flex-start;

            justify-content: center;

            padding: 55px 20px 100px;

            box-sizing: border-box;

            background:

            radial-gradient(
                circle at 15% 15%,
                rgba(245,189,33,.045),
                transparent 30%
            ),

            radial-gradient(
                circle at 85% 80%,
                rgba(18,62,105,.16),
                transparent 35%
            ),

            #020817;

        }


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

        .gt-mobile-verification-container {

            width: min(540px, 100%);

            margin: 0 auto;

        }


        /* =====================================================
           BACK
        ====================================================== */

        .gt-mobile-verification-back {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            margin-bottom: 25px;

            color: #7d8fa5;

            text-decoration: none;

            font-size: 13px;

            transition: .2s ease;

        }


        .gt-mobile-verification-back:hover {

            color: #f5bd21;

        }


        .gt-mobile-verification-back
        .material-symbols-rounded {

            font-size: 18px;

        }


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

        .gt-mobile-verification-card {

            padding: 42px 38px;

            box-sizing: border-box;

            border: 1px solid rgba(112,139,169,.18);

            border-radius: 17px;

            background:

            linear-gradient(
                145deg,
                rgba(8,27,47,.97),
                rgba(3,13,27,.99)
            );

            box-shadow:

            0 25px 70px rgba(0,0,0,.30);

        }


        /* =====================================================
           ICON
        ====================================================== */

        .gt-mobile-verification-icon {

            width: 70px;

            height: 70px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 23px;

            border-radius: 50%;

            color: #f5bd21;

            background: rgba(245,189,33,.07);

            border: 1px solid rgba(245,189,33,.24);

        }


        .gt-mobile-verification-icon
        .material-symbols-rounded {

            font-size: 34px;

        }


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

        .gt-mobile-verification-heading {

            text-align: center;

        }


        .gt-mobile-verification-heading h1 {

            margin: 0;

            color: #ffffff;

            font-size: 27px;

            line-height: 1.35;

            font-weight: 700;

        }


        .gt-mobile-verification-heading p {

            max-width: 430px;

            margin: 11px auto 0;

            color: #8191a6;

            font-size: 14px;

            line-height: 1.7;

        }


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

        .gt-mobile-verification-number {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            margin-top: 18px;

            color: #d5dde6;

            font-size: 14px;

        }


        .gt-mobile-verification-number
        .material-symbols-rounded {

            color: #f5bd21;

            font-size: 18px;

        }


        .gt-mobile-verification-number strong {

            color: #ffffff;

            font-weight: 600;

        }


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

        .gt-mobile-otp-form {

            margin-top: 32px;

        }


        .gt-mobile-otp-label {

            display: block;

            margin-bottom: 12px;

            color: #c1ccd8;

            text-align: center;

            font-size: 13px;

            font-weight: 600;

        }


        /* =====================================================
           OTP BOXES
        ====================================================== */

        .gt-mobile-otp-boxes {

            display: flex;

            justify-content: center;

            gap: 12px;

        }


        .gt-mobile-otp-input {

            width: 58px;

            height: 62px;

            padding: 0;

            box-sizing: border-box;

            border: 1px solid #293d55;

            border-radius: 10px;

            outline: none;

            background: #071525;

            color: #ffffff;

            text-align: center;

            font-family: inherit;

            font-size: 24px;

            font-weight: 700;

            transition:

            border-color .2s ease,

            box-shadow .2s ease,

            background .2s ease;

        }


        .gt-mobile-otp-input:focus {

            border-color: rgba(245,189,33,.65);

            background: #091a2d;

            box-shadow:

            0 0 0 3px rgba(245,189,33,.055);

        }


        .gt-mobile-otp-input.filled {

            border-color: rgba(245,189,33,.35);

        }


        /* =====================================================
           TIMER
        ====================================================== */

        .gt-mobile-otp-timer {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 6px;

            margin-top: 20px;

            color: #718399;

            font-size: 12px;

        }


        .gt-mobile-otp-timer
        .material-symbols-rounded {

            font-size: 17px;

        }


        .gt-mobile-otp-timer strong {

            color: #f5bd21;

            font-weight: 700;

        }


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

        .gt-mobile-verify-btn {

            width: 100%;

            height: 52px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            margin-top: 25px;

            border: 0;

            border-radius: 9px;

            background:

            linear-gradient(
                135deg,
                #f5bd21,
                #d89f14
            );

            color: #07111e;

            font-family: inherit;

            font-size: 14px;

            font-weight: 700;

            cursor: pointer;

            transition: .2s ease;

        }


        .gt-mobile-verify-btn:hover {

            transform: translateY(-1px);

            box-shadow:

            0 10px 25px rgba(245,189,33,.12);

        }


        .gt-mobile-verify-btn:disabled {

            opacity: .55;

            cursor: not-allowed;

            transform: none;

            box-shadow: none;

        }


        /* =====================================================
           RESEND
        ====================================================== */

        .gt-mobile-resend {

            margin-top: 21px;

            text-align: center;

            color: #61748b;

            font-size: 12px;

        }


        .gt-mobile-resend button {

            padding: 0;

            border: 0;

            background: transparent;

            color: #f5bd21;

            font: inherit;

            font-weight: 600;

            cursor: pointer;

        }


        .gt-mobile-resend button:disabled {

            color: #4e6076;

            cursor: not-allowed;

        }


        /* =====================================================
           MESSAGE
        ====================================================== */

        .gt-mobile-verify-message {

            display: none;

            margin-top: 17px;

            padding: 11px 13px;

            border-radius: 8px;

            text-align: center;

            font-size: 12px;

            line-height: 1.6;

        }


        .gt-mobile-verify-message.show {

            display: block;

        }


        .gt-mobile-verify-message.error {

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

            background: rgba(255,75,75,.055);

            color: #ff9999;

        }


        .gt-mobile-verify-message.success {

            border: 1px solid rgba(55,215,137,.16);

            background: rgba(55,215,137,.055);

            color: #7ce1ad;

        }


        /* =====================================================
           LOADING SPINNER
        ====================================================== */

        .gt-mobile-verify-spinner {

            width: 17px;

            height: 17px;

            border: 2px solid rgba(7,17,30,.25);

            border-top-color: #07111e;

            border-radius: 50%;

            animation:
            gtMobileVerifySpin .7s linear infinite;

        }


        @keyframes gtMobileVerifySpin {

            to {

                transform: rotate(360deg);

            }

        }


        /* =====================================================
           SECURITY NOTE
        ====================================================== */

        .gt-mobile-verification-security {

            display: flex;

            align-items: flex-start;

            gap: 8px;

            margin-top: 27px;

            padding-top: 20px;

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

            color: #566980;

            font-size: 11px;

            line-height: 1.6;

        }


        .gt-mobile-verification-security
        .material-symbols-rounded {

            color: #71849b;

            font-size: 17px;

            flex-shrink: 0;

        }


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

        @media (max-width: 600px) {

            .gt-mobile-verification-page {

                padding: 30px 14px 80px;

            }


            .gt-mobile-verification-card {

                padding: 32px 20px;

                border-radius: 14px;

            }


            .gt-mobile-verification-heading h1 {

                font-size: 24px;

            }


            .gt-mobile-verification-heading p {

                font-size: 14px;

            }


            .gt-mobile-otp-boxes {

                gap: 8px;

            }


            .gt-mobile-otp-input {

                width: 52px;

                height: 57px;

                font-size: 22px;

            }

        }


        @media (max-width: 380px) {

            .gt-mobile-otp-boxes {

                gap: 6px;

            }


            .gt-mobile-otp-input {

                width: 48px;

                height: 54px;

                font-size: 20px;

            }

        }

        /* =====================================================
           SECURITY PAGE
        ====================================================== */

        .gt-security-page {

            min-height: calc(100vh - 80px);

            padding: 55px 20px 100px;

            box-sizing: border-box;

            background:

            radial-gradient(
                circle at 10% 15%,
                rgba(245,189,33,.045),
                transparent 30%
            ),

            radial-gradient(
                circle at 90% 80%,
                rgba(18,62,105,.16),
                transparent 35%
            ),

            #020817;

        }


        .gt-security-container {

            width: min(1000px, 100%);

            margin: 0 auto;

        }


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

        .gt-security-heading {

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

            gap: 25px;

            margin-bottom: 30px;

        }


        .gt-security-heading h1 {

            margin: 0;

            color: #ffffff;

            font-size: 30px;

            font-weight: 700;

        }


        .gt-security-heading p {

            margin: 9px 0 0;

            color: #8191a6;

            font-size: 14px;

            line-height: 1.6;

        }


        .gt-security-back {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            min-height: 42px;

            padding: 0 15px;

            border: 1px solid #26384f;

            border-radius: 8px;

            color: #aab6c4;

            background: rgba(8,23,40,.7);

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;

            white-space: nowrap;

            transition: .2s ease;

        }


        .gt-security-back:hover {

            color: #f5bd21;

            border-color: rgba(245,189,33,.4);

        }


        .gt-security-back
        .material-symbols-rounded {

            font-size: 18px;

        }


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

        .gt-security-card {

            overflow: hidden;

            border: 1px solid rgba(112,139,169,.18);

            border-radius: 16px;

            background:

            linear-gradient(
                145deg,
                rgba(8,27,47,.97),
                rgba(3,13,27,.99)
            );

            box-shadow:

            0 25px 70px rgba(0,0,0,.28);

        }


        /* =====================================================
           SECURITY ITEM
        ====================================================== */

        .gt-security-item {

            display: flex;

            align-items: center;

            gap: 18px;

            padding: 25px 28px;

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

        }


        .gt-security-item:last-child {

            border-bottom: 0;

        }


        .gt-security-item-icon {

            width: 48px;

            height: 48px;

            flex: 0 0 48px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 11px;

            color: #f5bd21;

            background: rgba(245,189,33,.07);

            border: 1px solid rgba(245,189,33,.18);

        }


        .gt-security-item-icon
        .material-symbols-rounded {

            font-size: 23px;

        }


        .gt-security-item-content {

            flex: 1;

            min-width: 0;

        }


        .gt-security-item-content h3 {

            margin: 0;

            color: #ffffff;

            font-size: 16px;

            font-weight: 600;

        }


        .gt-security-item-content p {

            margin: 5px 0 0;

            color: #718399;

            font-size: 13px;

            line-height: 1.6;

        }


        /* =====================================================
           STATUS
        ====================================================== */

        .gt-security-status {

            display: inline-flex;

            align-items: center;

            gap: 5px;

            margin-top: 9px;

            color: #7de0ae;

            font-size: 11px;

            font-weight: 600;

        }


        .gt-security-status
        .material-symbols-rounded {

            font-size: 16px;

        }


        .gt-security-status.unverified {

            color: #e8a95a;

        }


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

        .gt-security-action {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 6px;

            min-height: 40px;

            padding: 0 15px;

            flex-shrink: 0;

            border: 1px solid #2b3e55;

            border-radius: 8px;

            color: #c5ced8;

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

            text-decoration: none;

            font-size: 12px;

            font-weight: 600;

            transition: .2s ease;

        }


        .gt-security-action:hover {

            color: #f5bd21;

            border-color: rgba(245,189,33,.4);

            background: rgba(245,189,33,.04);

        }


        .gt-security-action
        .material-symbols-rounded {

            font-size: 17px;

        }


        /* =====================================================
           DANGER ACTION
        ====================================================== */

        .gt-security-action.danger {

            color: #e78c8c;

            border-color: rgba(231,140,140,.15);

        }


        .gt-security-action.danger:hover {

            color: #ff9e9e;

            border-color: rgba(255,100,100,.3);

            background: rgba(255,70,70,.04);

        }


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

        .gt-security-note {

            display: flex;

            align-items: flex-start;

            gap: 10px;

            margin-top: 20px;

            padding: 16px;

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

            border-radius: 9px;

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

            color: #596c83;

            font-size: 11px;

            line-height: 1.65;

        }


        .gt-security-note
        .material-symbols-rounded {

            color: #71849b;

            font-size: 18px;

            flex-shrink: 0;

        }


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

        @media (max-width: 700px) {

            .gt-security-page {

                padding: 30px 14px 80px;

            }


            .gt-security-heading {

                align-items: flex-start;

                flex-direction: column;

                gap: 18px;

            }


            .gt-security-heading h1 {

                font-size: 25px;

            }


            .gt-security-item {

                align-items: flex-start;

                padding: 21px 18px;

            }


            .gt-security-item-content h3 {

                font-size: 15px;

            }


            .gt-security-item-content p {

                font-size: 13px;

            }


            .gt-security-action {

                min-height: 38px;

                padding: 0 11px;

            }


            .gt-security-action span:last-child {

                display: none;

            }

        }


        @media (max-width: 500px) {

            .gt-security-item {

                flex-wrap: wrap;

            }


            .gt-security-item-content {

                width: calc(100% - 66px);

            }


            .gt-security-action {

                width: 100%;

                margin-left: 66px;

            }


            .gt-security-action span:last-child {

                display: inline;

            }

        }

        /* =====================================================
           PRIVACY POLICY PAGE
        ====================================================== */

        .gt-privacy-page {

            min-height: calc(100vh - 80px);

            padding: 55px 20px 100px;

            box-sizing: border-box;

            background:

            radial-gradient(
                circle at 10% 10%,
                rgba(245,189,33,.045),
                transparent 30%
            ),

            radial-gradient(
                circle at 90% 80%,
                rgba(18,62,105,.16),
                transparent 35%
            ),

            #020817;

        }


        .gt-privacy-container {

            width: 1320px;

            margin: 0 auto;

        }


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

        .gt-privacy-header {

            margin-bottom: 35px;

        }


        .gt-privacy-header-icon {

            width: 58px;

            height: 58px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 20px;

            border-radius: 13px;

            color: #f5bd21;

            background: rgba(245,189,33,.07);

            border: 1px solid rgba(245,189,33,.20);

        }


        .gt-privacy-header-icon
        .material-symbols-rounded {

            font-size: 29px;

        }


        .gt-privacy-header h1 {

            margin: 0;

            color: #ffffff;

            font-size: 32px;

            line-height: 1.3;

            font-weight: 700;

        }


        .gt-privacy-header p {

            max-width: 720px;

            margin: 10px 0 0;

            color: #8191a6;

            font-size: 14px;

            line-height: 1.7;

        }


        .gt-privacy-updated {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            margin-top: 15px;

            color: #64778e;

            font-size: 12px;

        }


        .gt-privacy-updated
        .material-symbols-rounded {

            font-size: 16px;

        }


        /* =====================================================
           CONTENT CARD
        ====================================================== */

        .gt-privacy-card {

            overflow: hidden;

            border: 1px solid rgba(112,139,169,.18);

            border-radius: 16px;

            background:

            linear-gradient(
                145deg,
                rgba(8,27,47,.97),
                rgba(3,13,27,.99)
            );

            box-shadow:

            0 25px 70px rgba(0,0,0,.28);

        }


        /* =====================================================
           CONTENT
        ====================================================== */

        .gt-privacy-content {

            padding: 42px;

        }


        .gt-privacy-section {

            padding-bottom: 32px;

            margin-bottom: 32px;

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

        }


        .gt-privacy-section:last-child {

            padding-bottom: 0;

            margin-bottom: 0;

            border-bottom: 0;

        }


        .gt-privacy-section h2 {

            display: flex;

            align-items: center;

            gap: 10px;

            margin: 0 0 14px;

            color: #ffffff;

            font-size: 20px;

            line-height: 1.4;

            font-weight: 700;

        }


        .gt-privacy-section h2::before {

            content: "";

            width: 4px;

            height: 21px;

            flex: 0 0 4px;

            border-radius: 10px;

            background: #f5bd21;

        }


        .gt-privacy-section h3 {

            margin: 22px 0 9px;

            color: #d5dde6;

            font-size: 15px;

            line-height: 1.5;

            font-weight: 600;

        }


        .gt-privacy-section p {

            margin: 0 0 13px;

            color: #8797aa;

            font-size: 14px;

            line-height: 1.8;

        }


        .gt-privacy-section p:last-child {

            margin-bottom: 0;

        }


        .gt-privacy-section ul {

            margin: 12px 0 0;

            padding-left: 22px;

        }


        .gt-privacy-section li {

            margin-bottom: 9px;

            color: #8797aa;

            font-size: 14px;

            line-height: 1.75;

        }


        .gt-privacy-section li::marker {

            color: #f5bd21;

        }


        /* =====================================================
           HIGHLIGHT BOX
        ====================================================== */

        .gt-privacy-highlight {

            margin: 18px 0;

            padding: 17px 18px;

            border: 1px solid rgba(245,189,33,.13);

            border-radius: 9px;

            background: rgba(245,189,33,.035);

        }


        .gt-privacy-highlight p {

            color: #aeb9c6;

        }


        .gt-privacy-highlight strong {

            color: #f5bd21;

        }


        /* =====================================================
           TABLE
        ====================================================== */

        .gt-privacy-table-wrapper {

            width: 100%;

            margin-top: 17px;

            overflow-x: auto;

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

            border-radius: 9px;

        }


        .gt-privacy-table {

            width: 100%;

            min-width: 600px;

            border-collapse: collapse;

        }


        .gt-privacy-table th {

            padding: 13px 15px;

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

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

            color: #c8d2dd;

            text-align: left;

            font-size: 12px;

            font-weight: 600;

        }


        .gt-privacy-table td {

            padding: 13px 15px;

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

            color: #8191a6;

            font-size: 12px;

            line-height: 1.6;

        }


        .gt-privacy-table tr:last-child td {

            border-bottom: 0;

        }


        /* =====================================================
           CONTACT BOX
        ====================================================== */

        .gt-privacy-contact {

            display: flex;

            align-items: flex-start;

            gap: 13px;

            padding: 20px;

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

            border-radius: 10px;

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

        }


        .gt-privacy-contact-icon {

            width: 42px;

            height: 42px;

            flex: 0 0 42px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 9px;

            color: #f5bd21;

            background: rgba(245,189,33,.07);

        }


        .gt-privacy-contact-icon
        .material-symbols-rounded {

            font-size: 20px;

        }


        .gt-privacy-contact h3 {

            margin: 0 0 6px;

            color: #ffffff;

            font-size: 14px;

        }


        .gt-privacy-contact p {

            margin: 0;

            color: #7d8da2;

            font-size: 13px;

            line-height: 1.7;

        }


        .gt-privacy-contact a {

            color: #f5bd21;

            text-decoration: none;

        }


        .gt-privacy-contact a:hover {

            text-decoration: underline;

        }


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

        .gt-privacy-footer-action {

            display: flex;

            justify-content: center;

            margin-top: 30px;

        }


        .gt-privacy-back-btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 7px;

            min-height: 43px;

            padding: 0 18px;

            border: 1px solid #293d54;

            border-radius: 8px;

            background: rgba(8,23,40,.7);

            color: #aeb9c6;

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;

            transition: .2s ease;

        }


        .gt-privacy-back-btn:hover {

            color: #f5bd21;

            border-color: rgba(245,189,33,.4);

        }


        .gt-privacy-back-btn
        .material-symbols-rounded {

            font-size: 18px;

        }


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

        @media (max-width: 700px) {

            .gt-privacy-page {

                padding: 30px 14px 80px;

            }


            .gt-privacy-header h1 {

                font-size: 26px;

            }


            .gt-privacy-header p {

                font-size: 14px;

            }


            .gt-privacy-content {

                padding: 27px 20px;

            }


            .gt-privacy-section {

                padding-bottom: 26px;

                margin-bottom: 26px;

            }


            .gt-privacy-section h2 {

                font-size: 18px;

            }


            .gt-privacy-section p,
            .gt-privacy-section li {

                font-size: 14px;

            }


            .gt-privacy-card {

                border-radius: 13px;

            }

        }

        /* =========================================================
   GURU TATWA - COURSES PAGE
   CLEAN GRID VERSION
========================================================= */


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

.gt-courses-page {

    width: 100%;
    min-height: calc(100vh - 80px);

    padding: 28px 24px 125px;

    box-sizing: border-box;

    background:
    radial-gradient(
        circle at 85% 10%,
        rgba(245, 189, 33, 0.04),
        transparent 30%
    ),
    radial-gradient(
        circle at 10% 65%,
        rgba(18, 66, 110, 0.10),
        transparent 35%
    ),
    #020817;

}


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

.gt-courses-container {

    width: 100%;
    max-width: 1320px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;

}


/* =========================================================
   FILTER BAR
========================================================= */

.gt-course-filter {

    display: grid;

    grid-template-columns:minmax(280px, 1fr) 270px 255px 100px;

    gap: 9px;

    width: 100%;

    padding: 9px;
    margin: 0 0 18px;

    box-sizing: border-box;

    border: 1px solid rgba(92, 124, 157, .18);

    border-radius: 11px;

    background: rgba(5, 18, 32, .85);

}


/* =========================================================
   SEARCH
========================================================= */

.gt-course-search {

    display: flex;
    align-items: center;

    gap: 9px;

    width: 100%;
    height: 44px;

    padding: 0 13px;

    box-sizing: border-box;

    border: 1px solid #263b52;

    border-radius: 7px;

    background: #041120;

}


.gt-course-search:focus-within {

    border-color: rgba(245, 189, 33, .55);

}


.gt-course-search .material-symbols-rounded {

    color: #71859b;

    font-size: 19px;

}


.gt-course-search input {

    width: 100%;
    height: 42px;

    padding: 0;
    margin: 0;

    border: 0;
    outline: 0;

    color: #dce4ec;

    background: transparent;

    font-family: inherit;

    font-size: 13px;

}


.gt-course-search input::placeholder {

    color: #687b90;

}


/* =========================================================
   SELECT
========================================================= */

.gt-course-select {

    display: flex;
    align-items: center;

    gap: 8px;

    width: 100%;
    height: 44px;

    padding: 0 11px;

    box-sizing: border-box;

    border: 1px solid #263b52;

    border-radius: 7px;

    background: #041120;

}


.gt-course-select .material-symbols-rounded {

    color: #71869c;

    font-size: 18px;

}


.gt-course-select select {

    width: 100%;
    height: 42px;

    padding: 0;

    border: 0;
    outline: 0;

    color: #ccd6df;

    background: transparent;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

}


.gt-course-select select option {

    color: #dce4ec;

    background: #071525;

}


/* =========================================================
   RESET
========================================================= */

.gt-course-reset {

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

    gap: 5px;

    width: 100%;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(245, 189, 33, .30);

    border-radius: 7px;

    color: #f5bd21;

    background: rgba(245, 189, 33, .025);

    font-family: inherit;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

}


.gt-course-reset:hover {

    border-color: rgba(245, 189, 33, .60);

    background: rgba(245, 189, 33, .07);

}


.gt-course-reset .material-symbols-rounded {

    font-size: 16px;

}


/* =========================================================
   RESULTS
========================================================= */

.gt-course-results-bar {

    display: flex;
    align-items: center;

    width: 100%;

    margin: 0 0 14px;

    padding: 0;

    color: #71849a;

    font-size: 12px;

}


.gt-course-results-bar strong {

    margin-right: 4px;

    color: #f5bd21;

    font-size: 13px;

}


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

.gt-courses-grid {

    display: grid !important;

    grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

    gap: 17px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box;

    align-items: start !important;

    justify-content: stretch !important;

}


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

.gt-courses-grid .gt-course-card {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    min-height: 300px;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px solid rgba(91, 123, 157, .18);

    border-radius: 10px;

    background:
    linear-gradient(
        145deg,
        #071a2d,
        #03101f
    );

    cursor: pointer;

    opacity: 1 !important;

    visibility: visible !important;

}


/* =========================================================
   VERY IMPORTANT
   REMOVE ALL OLD CARD MOVEMENT
========================================================= */

.gt-courses-grid .gt-course-card,
.gt-courses-grid .gt-course-card:hover,
.gt-courses-grid .gt-course-card:focus,
.gt-courses-grid .gt-course-card:active {

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;

    transform: none !important;

    translate: none !important;

    scale: 1 !important;

    rotate: none !important;

    animation: none !important;

}


/* =========================================================
   CARD HOVER
========================================================= */

.gt-courses-grid .gt-course-card:hover {

    border-color: rgba(245, 189, 33, .35);

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

}


/* =========================================================
   IMAGE
========================================================= */

.gt-course-image {

    position: relative;

    display: block;

    width: 100%;

    height: auto;

    min-height: 155px;

    overflow: hidden;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background: #061525;

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gt-course-image::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
    linear-gradient(
        to bottom,
        transparent 45%,
        rgba(2, 8, 23, .45)
    );

}


/* =========================================================
   IMAGE
========================================================= */

.gt-course-image img {

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   DO NOT ZOOM IMAGE
========================================================= */

.gt-course-card:hover .gt-course-image img {

    transform: none !important;

}


/* =========================================================
   POPULAR BADGE
========================================================= */

.gt-course-badge {

    position: absolute;

    z-index: 5;

    top: 10px;
    left: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 23px;

    padding: 0 8px;

    border-radius: 5px;

    color: #07111c;

    background: #f5bd21;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

}


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

.gt-course-body {

    display: block;

    width: 100%;

    padding: 15px;

    margin: 0;

    box-sizing: border-box;

}


/* =========================================================
   CATEGORY
========================================================= */

.gt-course-category {

    display: inline-block;

    margin: 0 0 6px;

    color: #f5bd21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .65px;

    text-transform: uppercase;

}


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

.gt-course-body h2 {

    display: -webkit-box;

    overflow: hidden;

    margin: 0 0 7px;

    color: #f4f7fa;

    font-size: 17px;

    line-height: 1.35;

    font-weight: 650;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.gt-course-body p {

    display: -webkit-box;

    overflow: hidden;

    min-height: 40px;

    margin: 0;

    color: #8193a7;

    font-size: 12px;

    line-height: 1.6;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}


/* =========================================================
   META
========================================================= */

.gt-course-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 7px;

    width: 100%;

    margin-top: 13px;

    padding-top: 12px;

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

}


.gt-course-meta > span {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #9ba9b8;

    font-size: 14px;

    white-space: nowrap;

}


.gt-course-meta .material-symbols-rounded {

    color: #dcae1f;

    font-size: 24px;

}


/* =========================================================
   NO RESULTS
========================================================= */

.gt-course-no-results {

    display: none;

    width: 100%;

    padding: 70px 20px;

    text-align: center;

}


.gt-course-no-results .material-symbols-rounded {

    color: #52667d;

    font-size: 44px;

}


.gt-course-no-results h3 {

    margin: 12px 0 5px;

    color: #f2f5f8;

    font-size: 18px;

}


.gt-course-no-results p {

    margin: 0;

    color: #6e8196;

    font-size: 13px;

}


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

@media (max-width: 1150px) {

    .gt-courses-grid {

        grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    }

}


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

@media (max-width: 900px) {

    .gt-courses-page {

        padding-left: 18px;
        padding-right: 18px;

    }


    .gt-course-filter {

        grid-template-columns:
        1fr 1fr;

    }


    .gt-course-search {

        grid-column: 1 / -1;

    }


    .gt-courses-grid {

        grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    }

}


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

@media (max-width: 600px) {

    .gt-courses-page {

        padding:
        20px
        12px
        110px;

    }


    .gt-course-filter {

        grid-template-columns: 1fr;

        gap: 8px;

        padding: 8px;

    }


    .gt-course-search {

        grid-column: auto;

    }


    .gt-courses-grid {

        grid-template-columns:
        1fr !important;

        gap: 14px !important;

    }


    .gt-course-image {

        height: 190px;

        min-height: 190px;

    }


    .gt-course-body {

        padding: 17px;

    }


    .gt-course-body h2 {

        font-size: 18px;

    }


    .gt-course-body p {

        font-size: 13px;

    }


    .gt-course-meta > span {

        font-size: 11px;

    }

}


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

@media (max-width: 380px) {

    .gt-courses-page {

        padding-left: 10px;
        padding-right: 10px;

    }


    .gt-course-meta > span {

        font-size: 9px;

    }

}

/* =========================================================
   SEARCHABLE CATEGORY DROPDOWN
========================================================= */

.gt-searchable-select {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px;

    height: 44px;

    padding: 0 11px;

    box-sizing: border-box;

}


/* Main icon */

.gt-searchable-select
.gt-select-main-icon {

    flex: 0 0 auto;

    color: #71869c;

    font-size: 18px;

}


/* =========================================================
   TRIGGER
========================================================= */

.gt-searchable-select-trigger {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    width: 100%;

    height: 42px;

    padding: 0;

    margin: 0;

    border: 0;

    outline: 0;

    color: #ccd6df;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

    font-size: 12px;

    text-align: left;

}


.gt-select-arrow {

    flex: 0 0 auto;

    color: #71869c;

    font-size: 18px;

    transition:
    transform .2s ease;

}


.gt-searchable-select.open
.gt-select-arrow {

    transform: rotate(180deg);

}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.gt-searchable-select-menu {

    position: absolute;

    z-index: 9999;

    top: calc(100% + 7px);

    left: 0;

    width: 100%;

    min-width: 220px;

    padding: 8px;

    box-sizing: border-box;

    border: 1px solid rgba(90, 121, 153, .30);

    border-radius: 9px;

    background:
    linear-gradient(
        145deg,
        #081b2e,
        #03101f
    );

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

    opacity: 0;

    visibility: hidden;

    transform:
    translateY(-5px);

    pointer-events: none;

    transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;

}


.gt-searchable-select.open
.gt-searchable-select-menu {

    opacity: 1;

    visibility: visible;

    transform:
    translateY(0);

    pointer-events: auto;

}


/* =========================================================
   SEARCH INPUT
========================================================= */

.gt-select-search {

    display: flex;

    align-items: center;

    gap: 7px;

    width: 100%;

    height: 38px;

    padding: 0 10px;

    margin-bottom: 7px;

    box-sizing: border-box;

    border: 1px solid #263b52;

    border-radius: 6px;

    background: #041120;

}


.gt-select-search:focus-within {

    border-color:
    rgba(245, 189, 33, .55);

    box-shadow:
    0 0 0 2px rgba(245, 189, 33, .045);

}


.gt-select-search
.material-symbols-rounded {

    flex: 0 0 auto;

    color: #71869c;

    font-size: 17px;

}


.gt-select-search input {

    width: 100%;

    height: 34px;

    padding: 0;

    margin: 0;

    border: 0;

    outline: 0;

    color: #dce4ec;

    background: transparent;

    font-family: inherit;

    font-size: 11px;

}


.gt-select-search input::placeholder {

    color: #65788d;

}


/* =========================================================
   OPTIONS
========================================================= */

.gt-select-options {

    display: flex;

    flex-direction: column;

    gap: 2px;

    max-height: 210px;

    overflow-y: auto;

}


/* scrollbar */

.gt-select-options::-webkit-scrollbar {

    width: 5px;

}


.gt-select-options::-webkit-scrollbar-track {

    background: transparent;

}


.gt-select-options::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background: #263b52;

}


/* =========================================================
   OPTION
========================================================= */

.gt-select-option {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 35px;

    padding: 0 10px;

    border: 0;

    border-radius: 5px;

    color: #b9c5d0;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    text-align: left;

    transition:
    background .15s ease,
    color .15s ease;

}


.gt-select-option:hover {

    color: #ffffff;

    background:
    rgba(245, 189, 33, .08);

}


.gt-select-option.active {

    color: #f5bd21;

    background:
    rgba(245, 189, 33, .06);

}


.gt-select-option.active::after {

    content: "check";

    margin-left: auto;

    font-family:
    "Material Symbols Rounded";

    font-size: 16px;

}


/* =========================================================
   NO RESULTS
========================================================= */

.gt-select-no-results {

    display: none;

    padding: 15px 8px;

    color: #667b91;

    font-size: 11px;

    text-align: center;

}


.gt-select-no-results.show {

    display: block;

}


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

@media (max-width: 600px) {

    .gt-searchable-select-menu {

        position: absolute;

        left: 0;

        right: 0;

        width: 100%;

    }

}

/* =========================================================
   COURSE VIDEO PAGE
   COMPLETE CSS
========================================================= */


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

.gt-course-video-page {

    width: 100%;

    min-height: calc(100vh - 80px);

    padding:
    24px
    20px
    40px;

    background:
    #020817;

    color: #ffffff;

    box-sizing: border-box;



}


.gt-course-video-container {

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.gt-course-breadcrumb {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 18px;

    color: #718096;

    font-size: 12px;

}


.gt-course-breadcrumb a {

    color: #aab7c4;

    text-decoration: none;

}


.gt-course-breadcrumb a:hover {

    color: #f5bd21;

}


.gt-course-breadcrumb strong {

    color: #f5bd21;

    font-weight: 600;

}


.gt-course-breadcrumb
.material-symbols-rounded {

    font-size: 17px;

    color: #526273;

}


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

.gt-course-video-layout {

    display: grid;

    grid-template-columns: 420px minmax(400px, 1fr) 450px;

    gap: 18px;

    align-items: start;

}


/* =========================================================
   LEFT INFORMATION PANEL
========================================================= */

.gt-course-info-panel {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


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

.gt-course-overview-card {

    overflow: hidden;

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

    border-radius: 12px;

    background:
    #071522;

}


.gt-course-overview-image {

    width: 100%;

    height: 145px;

    overflow: hidden;

}


.gt-course-overview-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.gt-course-overview-content {

    padding: 14px;

}


.gt-course-overview-content h1 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}


.gt-course-overview-rating {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}


.gt-course-level {

    padding:
    4px
    7px;

    border-radius: 5px;

    color: #f5bd21;

    background:
    rgba(245,189,33,.08);

    font-size: 9px;

    font-weight: 600;

}


.gt-course-rating {

    display: flex;

    align-items: center;

    gap: 2px;

    color: #f5bd21;

    font-size: 10px;

    font-weight: 600;

}


.gt-course-rating
.material-symbols-rounded {

    font-size: 14px;

}


.gt-course-students {

    color: #718597;

    font-size: 9px;

}


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

.gt-course-stats-card {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1px;

    overflow: hidden;

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

    border-radius: 12px;

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

}


.gt-course-stat {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 70px;

    padding: 10px;

    background:
    #071522;

}


.gt-course-stat
.material-symbols-rounded {

    color: #f5bd21;

    font-size: 20px;

}


.gt-course-stat > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.gt-course-stat small {

    color: #718597;

    font-size: 8px;

}


.gt-course-stat strong {

    color: #dce4eb;

    font-size: 10px;

    font-weight: 600;

}


/* =========================================================
   QUOTE CARD
========================================================= */

.gt-course-quote-card {

    position: relative;

    padding: 17px;

    overflow: hidden;

    border:
    1px solid
    rgba(245,189,33,.12);

    border-radius: 12px;

    background:
    linear-gradient(
        135deg,
        rgba(245,189,33,.07),
        rgba(7,21,34,.95)
    );

}


.gt-course-quote-icon {

    display: block;

    margin-bottom: 3px;

    color: #f5bd21;

    font-family: Georgia, serif;

    font-size: 34px;

    line-height: .7;

}


.gt-course-quote-card p {

    margin: 8px 0 12px;

    color: #9aaab9;

    font-size: 10px;

    line-height: 1.7;

}


.gt-course-quote-author {

    color: #f5bd21;

    font-size: 8px;

    font-weight: 600;

}


/* =========================================================
   HELP CARD
========================================================= */

.gt-course-help-card {

    display: flex;

    gap: 10px;

    padding: 14px;

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

    border-radius: 12px;

    background:
    #071522;

}


.gt-course-help-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 34px;

    width: 34px;

    height: 34px;

    border-radius: 8px;

    color: #f5bd21;

    background:
    rgba(245,189,33,.08);

}


.gt-course-help-icon
.material-symbols-rounded {

    font-size: 19px;

}


.gt-course-help-content {

    min-width: 0;

}


.gt-course-help-content h3 {

    margin: 0 0 4px;

    color: #ffffff;

    font-size: 11px;

}


.gt-course-help-content p {

    margin: 0 0 8px;

    color: #718597;

    font-size: 8px;

    line-height: 1.5;

}


.gt-course-help-btn {

    color: #f5bd21;

    font-size: 9px;

    font-weight: 600;

    text-decoration: none;

}


/* =========================================================
   VIDEO SECTION
========================================================= */

.gt-course-reel-section {

    min-width: 0;

}


.gt-course-reel-wrapper {

    position: relative;

    width: 100%;

}


.gt-course-reel-player {

    position: relative;

    width: auto;

    aspect-ratio: 9 / 16;

    max-height: 780px;

    overflow: hidden;

    margin: 0 auto;

    border-radius: 14px;

    background: #000;

    box-shadow:
    0 20px 60px
    rgba(0,0,0,.45);

}


/* =========================================================
   VIDEO
========================================================= */

.gt-course-video {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    background: #000;

}


/* =========================================================
   HIDE NATIVE CONTROLS
========================================================= */

.gt-course-video::-webkit-media-controls {

    display: none !important;

}


.gt-course-video::-webkit-media-controls-enclosure {

    display: none !important;

}


.gt-course-video::-webkit-media-controls-panel {

    display: none !important;

}


/* =========================================================
   TOP TITLE
========================================================= */

.gt-course-reel-header {

    position: absolute;

    top: 18px;

    left: 18px;

    right: 18px;

    z-index: 100;

    pointer-events: none;

}


.gt-course-reel-header h2 {

    margin: 3px 0 0;

    color: #ffffff;

    font-size: 18px;

}


.gt-course-episode-number {

    color: #f5bd21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   EPISODE BADGE
========================================================= */

.gt-reel-episode-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    z-index: 200;

    padding:
    5px
    8px;

    border-radius: 5px;

    color: #f5bd21;

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

    backdrop-filter: blur(7px);

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   THREE DOTS
========================================================= */

.gt-reel-more-btn {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 300;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    color: #ffffff;

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

    backdrop-filter: blur(8px);

    cursor: pointer;

}


/* =========================================================
   CENTER PLAY / PAUSE
========================================================= */

.gt-reel-center-control {

    position: absolute;

    inset: 0;

    z-index: 250;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

}


#gt-reel-play-pause {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

    padding: 0;

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

    border-radius: 50%;

    color: #ffffff;

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

    backdrop-filter: blur(8px);

    cursor: pointer;

    pointer-events: auto;

    transition:
    transform .2s ease,
    background .2s ease;

}


#gt-reel-play-pause:hover {

    transform: scale(1.08);

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

}


#gt-reel-play-pause
.material-symbols-rounded {

    font-size: 40px;

}


/* =========================================================
   VIDEO BOTTOM INFORMATION
========================================================= */

.gt-reel-video-info {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 180;

    padding:
    90px
    60px
    25px
    18px;

    pointer-events: none;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.92),
        rgba(0,0,0,.55) 45%,
        transparent
    );

}


.gt-reel-episode {

    display: block;

    margin-bottom: 4px;

    color: #f5bd21;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

}


.gt-reel-video-title {

    margin: 0;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;

    text-shadow:
    0 2px 8px
    rgba(0,0,0,.9);

}


/* =========================================================
   REEL ACTION BUTTONS
   DESKTOP
========================================================= */

.gt-reel-actions {

    position: absolute;

    right: 14px;

    bottom: 100px;

    z-index: 400;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.gt-reel-action {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 48px;

    min-height: 52px;

    padding: 5px;

    border: 0;

    border-radius: 9px;

    color: #ffffff;

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

    backdrop-filter: blur(8px);

    cursor: pointer;

}


.gt-reel-action
.material-symbols-rounded {

    color: #f5bd21;

    font-size: 26px;

}


.gt-reel-action small {

    margin-top: 3px;

    color: #ffffff;

    font-size: 8px;

    font-weight: 600;

}


.gt-reel-action:hover {

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

}


.gt-reel-action.saved
.material-symbols-rounded {

    color: #f5bd21;

}


/* =========================================================
   DESKTOP EPISODE NAVIGATION
========================================================= */

.gt-course-episode-navigation {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 12px;

}


.gt-episode-nav-btn,
.gt-current-episode-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 38px;

    padding:
    0
    13px;

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

    border-radius: 7px;

    color: #aab7c4;

    background:
    #071522;

    font-family: inherit;

    font-size: 10px;

    cursor: pointer;

}


.gt-current-episode-btn {

    color: #f5bd21;

    border-color:
    rgba(245,189,33,.2);

}


/* =========================================================
   RIGHT EPISODES PANEL
========================================================= */

.gt-course-episodes-panel {

    display: flex;

    flex-direction: column;

    gap: 14px;

    min-width: 0;

}


.gt-episodes-card {

    overflow: hidden;

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

    border-radius: 12px;

    background:
    #071522;

}


.gt-episodes-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding:
    14px;

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

}


.gt-episodes-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 15px;

}


.gt-episodes-header h2 small {

    color: #718597;

    font-size: 9px;

    font-weight: 500;

}


.gt-episodes-sort {

    display: flex;

    align-items: center;

    gap: 2px;

    padding: 5px 7px;

    border: 0;

    border-radius: 5px;

    color: #718597;

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

    font-family: inherit;

    font-size: 9px;

    cursor: pointer;

}


.gt-episodes-sort
.material-symbols-rounded {

    font-size: 14px;

}


/* =========================================================
   EPISODE LIST
========================================================= */

.gt-episode-list {

    display: flex;

    flex-direction: column;

    max-height: 510px;

    overflow-y: auto;

}


.gt-episode-list::-webkit-scrollbar {

    width: 4px;

}


.gt-episode-list::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background:
    rgba(245,189,33,.3);

}


.gt-episode-item {

    display: flex;

    align-items: center;

    gap: 9px;

    width: 100%;

    min-height: 76px;

    padding:
    8px 10px;

    border: 0;

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

    color: #ffffff;

    background:
    transparent;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

}


.gt-episode-item:hover {

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

}


.gt-episode-item.active {

    background:
    rgba(245,189,33,.06);

}


.gt-episode-item.locked {

    opacity: .45;

}


.gt-episode-thumb {

    position: relative;

    flex: 0 0 62px;

    width: 62px;

    height: 46px;

    overflow: hidden;

    border-radius: 5px;

    background: #020817;

}


.gt-episode-thumb img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.gt-episode-play {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

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

}


.gt-episode-play
.material-symbols-rounded {

    color: #ffffff;

    font-size: 20px;

}


.gt-episode-info {

    display: flex;

    align-items: center;

    gap: 8px;

    flex: 1;

    min-width: 0;

}


.gt-episode-number {

    color: #f5bd21;

    font-size: 9px;

    font-weight: 700;

}


.gt-episode-info > div {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}


.gt-episode-info strong {

    overflow: hidden;

    color: #dce4eb;

    font-size: 10px;

    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.gt-episode-info small {

    color: #718597;

    font-size: 8px;

}


.gt-episode-status {

    display: flex;

    align-items: center;

    justify-content: center;

}


.gt-episode-status
.material-symbols-rounded {

    color: #f5bd21;

    font-size: 19px;

}


/* =========================================================
   VIEW ALL
========================================================= */

.gt-view-all-episodes {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    width: 100%;

    min-height: 42px;

    border: 0;

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

    color: #f5bd21;

    background:
    transparent;

    font-family: inherit;

    font-size: 9px;

    cursor: pointer;

}


.gt-view-all-episodes
.material-symbols-rounded {

    font-size: 15px;

}


/* =========================================================
   DESKTOP LESSON DETAILS
========================================================= */

.gt-lesson-details-card {

    padding: 16px;

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

    border-radius: 12px;

    background:
    #071522;

}


.gt-lesson-details-header h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 14px;

}


.gt-lesson-description {

    margin: 0 0 15px;

    color: #8495a5;

    font-size: 10px;

    line-height: 1.7;

}


.gt-lesson-details-grid {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.gt-lesson-detail {

    display: flex;

    align-items: flex-start;

    gap: 8px;

}


.gt-lesson-detail >
.material-symbols-rounded {

    color: #f5bd21;

    font-size: 18px;

}


.gt-lesson-detail > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.gt-lesson-detail small {

    color: #718597;

    font-size: 8px;

}


.gt-lesson-detail strong {

    color: #dce4eb;

    font-size: 9px;

    font-weight: 600;

}


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

.gt-mobile-course-sheet-overlay {

    display: none;

}


.gt-mobile-course-sheet {

    display: none;

}


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

@media (max-width: 1100px) {

    .gt-course-video-layout {

        grid-template-columns:
        220px
        minmax(350px, 1fr)
        300px;

        gap: 12px;

    }

}


@media (max-width: 850px) {

    .gt-course-video-layout {

        grid-template-columns:
        1fr;

    }


    .gt-course-info-panel,
    .gt-course-episodes-panel {

        display: none;

    }

}


/* =========================================================
   MOBILE REEL - FINAL
========================================================= */

@media (max-width: 650px) {


    html,
    body {

        width: 100%;

        min-width: 100%;

        height: 100%;

        margin: 0;

        padding: 0;

    }


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

    .gt-course-video-page {

        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;

        height: 100dvh !important;

        min-height: 100dvh !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        background: #000 !important;

        z-index: 1000;

    }


    .gt-course-video-container {

        position: relative !important;

        width: 100% !important;

        height: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

    }


    /* =====================================================
       HIDE DESKTOP
    ====================================================== */

    .gt-course-breadcrumb,
    .gt-course-info-panel,
    .gt-course-episodes-panel {

        display: none !important;

    }


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

    .gt-course-video-layout {

        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 100% !important;

        height: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

    }


    /* =====================================================
       REEL
    ====================================================== */

    .gt-course-reel-section {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        background: #000 !important;

    }


    .gt-course-reel-wrapper {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

    }


    /* =====================================================
       VIDEO PLAYER
    ====================================================== */

    .gt-course-reel-player {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        min-width: 100% !important;

        min-height: 100% !important;

        max-width: none !important;

        max-height: none !important;

        aspect-ratio: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        overflow: hidden !important;

        background: #000 !important;

        box-shadow: none !important;

    }


    /* =====================================================
       VIDEO
    ====================================================== */

    .gt-course-video {

        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        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;

        object-fit: cover !important;

        object-position: center center !important;

        background: #000 !important;

    }


    /* =====================================================
       REMOVE TOP TITLE
    ====================================================== */

    .gt-course-reel-header {

        display: none !important;

    }


    /* =====================================================
       EPISODE BADGE
    ====================================================== */

    .gt-reel-episode-badge {

        top:
        calc(
            12px +
            env(safe-area-inset-top)
        ) !important;

        left: 12px !important;

        padding: 5px 8px !important;

        z-index: 300 !important;

        font-size: 8px !important;

    }


    /* =====================================================
       REMOVE THREE DOTS
    ====================================================== */

    .gt-reel-more-btn {

        display: none !important;

    }


    /* =====================================================
       SAVE / EPISODES / SHARE
       LEFT SIDE
    ====================================================== */

    .gt-reel-actions {

        position: absolute !important;
        bottom: 2% !important;
        right: 10px !important;
        left: auto !important;
        top: auto !important;
        z-index: 500 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;

    }


    /* ALL THREE BUTTONS */

    .gt-reel-actions
    .gt-reel-action {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        width: 48px !important;

        min-width: 48px !important;

        height: 50px !important;

        min-height: 50px !important;

        padding: 5px !important;

        margin: 0 !important;

        border: 0 !important;

        border-radius: 9px !important;

        color: #ffffff !important;

        background:
        rgba(0,0,0,.48) !important;

        backdrop-filter: blur(8px);

        -webkit-backdrop-filter: blur(8px);

        box-shadow:
        0 4px 14px
        rgba(0,0,0,.2);

        cursor: pointer;

    }


    /* ACTION ICON */

    .gt-reel-actions
    .gt-reel-action
    .material-symbols-rounded {

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #f5bd21 !important;

        font-size: 25px !important;

        line-height: 1 !important;

    }


    /* ACTION TEXT */

    .gt-reel-actions
    .gt-reel-action small {

        display: block !important;

        margin:
        3px
        0
        0 !important;

        padding: 0 !important;

        color: #ffffff !important;

        font-size: 8px !important;

        line-height: 1 !important;

        font-weight: 600 !important;

    }


    /* HOVER */

    .gt-reel-actions
    .gt-reel-action:hover {

        background:
        rgba(0,0,0,.7) !important;

        transform: scale(1.04);

    }


    /* =====================================================
       CENTER PLAY / PAUSE
    ====================================================== */

    .gt-reel-center-control {

        position: absolute !important;

        inset: 0 !important;

        z-index: 250 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        pointer-events: none !important;

    }


    #gt-reel-play-pause {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 62px !important;

        height: 62px !important;

        min-width: 62px !important;

        min-height: 62px !important;

        padding: 0 !important;

        border:
        1px solid
        rgba(255,255,255,.35) !important;

        border-radius: 50% !important;

        color: #ffffff !important;

        background:
        rgba(0,0,0,.48) !important;

        backdrop-filter: blur(8px);

        -webkit-backdrop-filter: blur(8px);

        cursor: pointer;

        pointer-events: auto !important;

    }


    #gt-reel-play-pause
    .material-symbols-rounded {

        font-size: 36px !important;

        line-height: 1 !important;

    }


    /* =====================================================
       BOTTOM VIDEO TITLE
    ====================================================== */

    .gt-reel-video-info {

        position: absolute !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        z-index: 180 !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding:
        90px
        55px
        calc(
            24px +
            env(safe-area-inset-bottom)
        )
        16px !important;

        pointer-events: none !important;

        background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.58) 45%,
            transparent
        ) !important;

    }


    .gt-reel-episode {

        display: block !important;

        margin:
        0
        0
        4px !important;

        color: #f5bd21 !important;

        font-size: 8px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;

        letter-spacing: 1px !important;

    }


    .gt-reel-video-title {

        margin: 0 !important;

        padding: 0 !important;

        color: #ffffff !important;

        font-size: 18px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        text-shadow:
        0 2px 8px
        rgba(0,0,0,.9);

    }


    /* =====================================================
       REMOVE PREVIOUS / NEXT
    ====================================================== */

    .gt-course-episode-navigation {

        display: none !important;

    }


    .gt-episode-nav-btn,
    .gt-current-episode-btn {

        display: none !important;

    }


    /* =====================================================
       MOBILE SHEET OVERLAY
    ====================================================== */

    .gt-mobile-course-sheet-overlay {

        position: fixed !important;

        inset: 0 !important;

        display: block !important;

        z-index: 9000 !important;

        width: 100% !important;

        height: 100% !important;

        background:
        rgba(0,0,0,.68) !important;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
        opacity .25s ease,
        visibility .25s ease;

    }


    .gt-mobile-course-sheet-overlay.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


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

    .gt-mobile-course-sheet {

        position: fixed !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        z-index: 9001 !important;

        display: block !important;

        width: 100% !important;

        height: 75dvh !important;

        max-height: 650px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-top:
        1px solid
        rgba(245,189,33,.25) !important;

        border-radius:
        20px
        20px
        0
        0 !important;

        background:
        #071522 !important;

        box-shadow:
        0 -20px 60px
        rgba(0,0,0,.65) !important;

        transform:
        translateY(110%) !important;

        visibility: hidden;

        transition:
        transform .3s ease,
        visibility .3s ease;

    }


    .gt-mobile-course-sheet.active {

        transform:
        translateY(0) !important;

        visibility: visible;

    }


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

    .gt-mobile-sheet-header {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        min-height: 58px !important;

        padding:
        10px
        16px
        10px !important;

        box-sizing: border-box !important;

    }


    .gt-mobile-sheet-label {

        display: block !important;

        margin:
        0
        0
        3px !important;

        color: #f5bd21 !important;

        font-size: 8px !important;

        font-weight: 700 !important;

        letter-spacing: .8px !important;

    }


    .gt-mobile-sheet-header h3 {

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 18px !important;

        line-height: 1.2 !important;

    }


    .gt-mobile-sheet-close {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 36px !important;

        height: 36px !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 50% !important;

        color: #ffffff !important;

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

        cursor: pointer;

    }


    .gt-mobile-sheet-close
    .material-symbols-rounded {

        font-size: 20px !important;

    }


    /* =====================================================
       SHEET TABS
    ====================================================== */

    .gt-mobile-sheet-tabs {

        display: grid !important;

        grid-template-columns:
        1fr
        1fr !important;

        gap: 6px !important;

        padding:
        8px
        12px !important;

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

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

        box-sizing: border-box !important;

    }


    .gt-mobile-sheet-tab {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        height: 40px !important;

        padding: 0 !important;

        border:
        1px solid
        transparent !important;

        border-radius: 7px !important;

        color: #8192a2 !important;

        background:
        transparent !important;

        font-family: inherit !important;

        font-size: 11px !important;

        cursor: pointer;

    }


    .gt-mobile-sheet-tab.active {

        color: #f5bd21 !important;

        border-color:
        rgba(245,189,33,.25) !important;

        background:
        rgba(245,189,33,.06) !important;

    }


    .gt-mobile-sheet-tab
    .material-symbols-rounded {

        font-size: 18px !important;

    }


    /* =====================================================
       SHEET CONTENT
    ====================================================== */

    .gt-mobile-sheet-content {

        display: none !important;

        width: 100% !important;

        height:
        calc(
            100% - 135px
        ) !important;

        box-sizing: border-box !important;

        overflow-y: auto !important;

        padding:
        10px
        12px
        30px !important;

        -webkit-overflow-scrolling:
        touch;

    }


    .gt-mobile-sheet-content.active {

        display: block !important;

    }


    /* =====================================================
       MOBILE EPISODE LIST
    ====================================================== */

    .gt-mobile-episode-list {

        display: flex !important;

        flex-direction: column !important;

        gap: 5px !important;

    }


    .gt-mobile-episode {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 62px !important;

        box-sizing: border-box !important;

        padding: 9px !important;

        gap: 10px !important;

        border:
        1px solid
        transparent !important;

        border-radius: 8px !important;

        color: #ffffff !important;

        background:
        rgba(255,255,255,.025) !important;

        font-family: inherit !important;

        text-align: left !important;

        cursor: pointer;

    }


    .gt-mobile-episode.active {

        border-color:
        rgba(245,189,33,.4) !important;

        background:
        rgba(245,189,33,.07) !important;

    }


    .gt-mobile-episode.locked {

        opacity: .5;

    }


    .gt-mobile-episode-number {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex: 0 0 38px !important;

        width: 38px !important;

        height: 38px !important;

        border-radius: 7px !important;

        color: #f5bd21 !important;

        background:
        rgba(245,189,33,.08) !important;

        font-size: 11px !important;

        font-weight: 700 !important;

    }


    .gt-mobile-episode-text {

        display: flex !important;

        flex-direction: column !important;

        flex: 1 !important;

        min-width: 0 !important;

        gap: 4px !important;

    }


    .gt-mobile-episode-text strong {

        overflow: hidden !important;

        color: #e9eef3 !important;

        font-size: 12px !important;

        font-weight: 600 !important;

        line-height: 1.2 !important;

        text-overflow: ellipsis !important;

        white-space: nowrap !important;

    }


    .gt-mobile-episode-text small {

        color: #718597 !important;

        font-size: 9px !important;

    }


    .gt-mobile-episode >
    .material-symbols-rounded {

        flex: 0 0 auto;

        color: #f5bd21 !important;

        font-size: 21px !important;

    }


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

    .gt-mobile-lesson-details {

        padding:
        10px
        5px
        30px !important;

    }


    .gt-mobile-detail-episode {

        display: block !important;

        margin:
        0
        0
        6px !important;

        color: #f5bd21 !important;

        font-size: 9px !important;

        font-weight: 700 !important;

        letter-spacing: .7px !important;

    }


    .gt-mobile-lesson-details h3 {

        margin:
        0
        0
        15px !important;

        color: #ffffff !important;

        font-size: 21px !important;

        line-height: 1.25 !important;

    }


    .gt-mobile-lesson-details p {

        margin:
        0
        0
        14px !important;

        color: #9aaab9 !important;

        font-size: 13px !important;

        line-height: 1.7 !important;

    }


    .gt-mobile-detail-info {

        display: flex !important;

        align-items: center !important;

        gap: 20px !important;

        padding:
        15px
        0 !important;

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

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

    }


    .gt-mobile-detail-info > div {

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

        color: #aab8c4 !important;

        font-size: 10px !important;

    }


    .gt-mobile-detail-info
    .material-symbols-rounded {

        color: #f5bd21 !important;

        font-size: 18px !important;

    }


    .gt-mobile-learning-box {

        margin-top: 18px !important;

        padding: 15px !important;

        border:
        1px solid
        rgba(245,189,33,.14) !important;

        border-radius: 8px !important;

        background:
        rgba(245,189,33,.035) !important;

    }


    .gt-mobile-learning-box strong {

        color: #f5bd21 !important;

        font-size: 12px !important;

    }


    .gt-mobile-learning-box ul {

        margin:
        10px
        0
        0 !important;

        padding-left: 18px !important;

    }


    .gt-mobile-learning-box li {

        margin-bottom: 7px !important;

        color: #9aaab9 !important;

        font-size: 11px !important;

        line-height: 1.4 !important;

    }


    /* =====================================================
       BODY WHEN SHEET IS OPEN
    ====================================================== */

    body.gt-mobile-sheet-open {

        overflow: hidden !important;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .gt-reel-actions {

        right: 7px !important;

        gap: 9px !important;

    }


    .gt-reel-actions
    .gt-reel-action {

        width: 44px !important;

        min-width: 44px !important;

        height: 46px !important;

        min-height: 46px !important;

    }


    .gt-reel-actions
    .gt-reel-action
    .material-symbols-rounded {

        font-size: 22px !important;

    }


    .gt-reel-actions
    .gt-reel-action small {

        font-size: 7px !important;

    }


    #gt-reel-play-pause {

        width: 56px !important;

        height: 56px !important;

    }


    #gt-reel-play-pause
    .material-symbols-rounded {

        font-size: 32px !important;

    }


    .gt-reel-video-title {

        font-size: 16px !important;

    }

}

/* =====================================================
   POPULAR CATEGORIES
===================================================== */

.popular-categories {
    padding: 15px 0;
    background: #020817;
    padding: 18px 3.35% 32px;
}


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

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
}


.section-label {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    margin-bottom: 8px;

    color: #f5b900;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


.section-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;

    width: 22px;
    height: 2px;

    background: #f5b900;

    transform: translateY(-50%);
}


.section-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 32px;
    font-weight: 700;
}


.section-heading h2 span {
    color: #f5b900;
}


/* =====================================================
   VIEW ALL
===================================================== */

.view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #f5b900;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}


.view-all i {
    transition: 0.3s ease;
}


.view-all:hover {
    color: #ffffff;
}


.view-all:hover i {
    transform: translateX(5px);
}


/* =====================================================
   CATEGORY GRID
===================================================== */

.category-grid {
    display: grid;

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

    gap: 18px;
}


/* =====================================================
   CATEGORY CARD
===================================================== */

.category-card {
    position: relative;

    overflow: hidden;

    border: 1px solid rgba(255, 193, 7, 0.18);

    border-radius: 10px;

    background: #071426;

    text-decoration: none;

    transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


.category-card:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 193, 7, 0.65);

    box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.35);
}


/* =====================================================
   CATEGORY IMAGE
===================================================== */

.category-image {
    position: relative;

    width: 100%;
    height: 145px;

    overflow: hidden;
}


.category-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        to bottom,
        transparent 45%,
        rgba(2, 8, 23, 0.75) 100%
    );
}


.category-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
    transform 0.5s ease;
}


.category-card:hover
.category-image img {
    transform: scale(1.06);
}


/* =====================================================
   CATEGORY CONTENT
===================================================== */

.category-content {
    padding: 16px;
}


.category-content h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.3;
}


.category-content span {
    display: block;

    color: #f5b900;

    font-size: 12px;
    font-weight: 500;
}


/* =====================================================
   GOLD LINE
===================================================== */

.category-content h3::after {
    content: "";

    display: block;

    width: 25px;
    height: 2px;

    margin-top: 10px;

    background: #f5b900;
}


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

@media (max-width: 1200px) {

    .category-grid {
        grid-template-columns:
        repeat(3, 1fr);
    }

}


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

@media (max-width: 767px) {

    .popular-categories {
        padding: 50px 0;
    }


    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }


    .section-heading h2 {
        font-size: 27px;
    }


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

        gap: 12px;
    }


    .category-image {
        height: 120px;
    }


    .category-content {
        padding: 12px;
    }


    .category-content h3 {
        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

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


    .category-image {
        height: 160px;
    }

}

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

.gt-hero-slider {

    width: calc(100% - 40px);

    max-width: 1320px;

    margin: 18px auto 0;

    overflow: hidden;

    position: relative;

}


/* =========================================================
   TRACK
========================================================= */

.gt-hero-track {

    display: flex;

    gap: 16px;

    transition:
    transform 0.55s ease;

}


/* =========================================================
   SLIDE

   TWO SLIDES VISIBLE
========================================================= */

.gt-hero-slide {

    flex: 0 0 calc((100% - 16px) / 2);

    height: 278px;

    overflow: hidden;

    position: relative;

    border: 1px solid rgba(245, 185, 0, 0.28);

    border-radius: 17px;

    background:
    radial-gradient(
        circle at 85% 50%,
        rgba(245, 185, 0, 0.12),
        transparent 42%
    ),
    #071426;

}


/* =========================================================
   SLIDE CONTENT
========================================================= */

.gt-hero-slide-content {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 30px 32px;

}


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

.gt-hero-text {

    width: 56%;

    position: relative;

    z-index: 2;

}


.gt-hero-eyebrow {

    display: inline-block;

    margin-bottom: 9px;

    color: #f5b900;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.gt-hero-text h1 {

    margin: 0 0 11px;

    color: #ffffff;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 700;

}


.gt-hero-text h1 span {

    color: #f5b900;

    display: block;

}


.gt-hero-text p {

    max-width: 390px;

    margin: 0 0 18px;

    color: #aeb9c9;

    font-size: 12px;

    line-height: 1.55;

}


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

.gt-hero-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 38px;

    padding: 0 16px;

    border-radius: 6px;

    background: #f5b900;

    color: #020817;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: 0.25s ease;

}


.gt-hero-btn:hover {

    background: #ffca28;

    color: #020817;

}


.gt-hero-btn .material-symbols-rounded {

    font-size: 17px;

}


/* =========================================================
   IMAGE
========================================================= */

.gt-hero-image {

    width: 43%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}


.gt-hero-image::before {

    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

    border-radius: 50%;

    background: rgba(245, 185, 0, 0.08);

}


.gt-hero-image img {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 245px;

    max-height: 220px;

    object-fit: contain;

}


/* =========================================================
   DOTS
========================================================= */

.gt-hero-dots {

    display: flex;

    align-items: start;

    justify-content: start;

    gap: 7px;

    margin-top: 12px;

}


.gt-hero-dot {

    width: 17px;

    height: 5px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: #27364b;

    cursor: pointer;

    transition:
    width 0.3s ease,
    background 0.3s ease;

}


.gt-hero-dot.active {

    width: 20px;

    background: #f5b900;

}

.gt-hero-track {
    display: flex;
    gap: 16px;
    transition: transform 0.55s ease;
}

/* =========================================================
   HERO IMAGE AREA
========================================================= */

.gt-hero-image {

    width: 43%;
    height: 100%;

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

    position: relative;

}


/* =========================================================
   GLOW BEHIND IMAGE
========================================================= */

.gt-hero-image-glow {

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(0, 123, 255, 0.30) 0%,
        rgba(0, 123, 255, 0.12) 35%,
        transparent 70%
    );

    filter: blur(18px);

    animation: gtImageGlow 4s ease-in-out infinite;

}


/* =========================================================
   IMAGE FRAME
========================================================= */

.gt-hero-image-frame {

    width: 210px;
    height: 210px;

    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 16px;

    border: 1px solid rgba(245, 185, 0, 0.65);

    background: #020817;

    box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 15px 35px rgba(0,0,0,0.45),
    0 0 35px rgba(0,123,255,0.18);

}


/* =========================================================
   IMAGE
========================================================= */

.gt-hero-image-frame img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
    transform 0.7s ease,
    filter 0.7s ease;

}


/* =========================================================
   SLIGHT IMAGE ZOOM
========================================================= */

.gt-hero-slide:hover
.gt-hero-image-frame img {

    transform: scale(1.06);

    filter:
    brightness(1.08)
    saturate(1.08);

}


/* =========================================================
   FRAME SHINE
========================================================= */

.gt-hero-image-frame::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
    linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.07) 48%,
        transparent 65%
    );

    transform: translateX(-100%);

    animation:
    gtImageShine 5s ease-in-out infinite;

}


/* =========================================================
   GLOW ANIMATION
========================================================= */

@keyframes gtImageGlow {

    0%,
    100% {

        transform: scale(0.95);

        opacity: 0.65;

    }

    50% {

        transform: scale(1.08);

        opacity: 1;

    }

}


/* =========================================================
   SHINE ANIMATION
========================================================= */

@keyframes gtImageShine {

    0% {

        transform: translateX(-100%);

    }

    35%,
    100% {

        transform: translateX(100%);

    }

}


/* =========================================================
   QUICK LEARNING SECTION
========================================================= */

.gt-quick-section {

    width: 100%;

    padding: 22px 0 22px;

}


.gt-container {

    width: calc(100% - 40px);

    max-width: 1320px;

    margin: 0 auto;

}


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

.gt-quick-title {

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 600;

}


/* =========================================================
   GRID
========================================================= */

.gt-quick-grid {

    display: grid;

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

    gap: 10px;

}


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

.gt-quick-card {

    min-height: 72px;

    padding: 14px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    position: relative;

    text-decoration: none;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.10
    );

    border-radius: 10px;

    background:
    linear-gradient(
        135deg,
        rgba(13, 27, 48, 0.95),
        rgba(5, 16, 32, 0.95)
    );

    transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;

}


/* =========================================================
   ICON
========================================================= */

.gt-quick-icon {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #f5b900;

    font-size: 25px;

}


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

.gt-quick-text {

    color: #ffffff;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.35;

}


/* =========================================================
   ARROW
========================================================= */

.gt-quick-arrow {

    margin-left: auto;

    color: #f5b900;

    font-size: 18px;

    opacity: 0;

    transform: translateX(-5px);

    transition:
    opacity 0.25s ease,
    transform 0.25s ease;

}


/* =========================================================
   HOVER
========================================================= */

.gt-quick-card:hover {

    text-decoration: none;

    transform: translateY(-2px);

    border-color:
    rgba(245, 185, 0, 0.45);

    background:
    linear-gradient(
        135deg,
        rgba(17, 35, 59, 1),
        rgba(7, 20, 38, 1)
    );

}


.gt-quick-card:hover
.gt-quick-arrow {

    opacity: 1;

    transform: translateX(0);

}


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

@media (max-width: 1000px) {

    .gt-quick-grid {

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

    }

}


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

@media (max-width: 767px) {

    .gt-quick-section {

        padding: 18px 0 0;

    }


    .gt-container {

        width: calc(100% - 30px);

    }


    .gt-quick-grid {

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

    }


    .gt-quick-grid::-webkit-scrollbar {

        display: none;

    }


    .gt-quick-card {

        min-width: 190px;

        min-height: 65px;

    }


    .gt-quick-arrow {

        opacity: 1;

        transform: none;

    }

}

/* =========================================================
   NEW & POPULAR COURSES
========================================================= */

.gt-popular-section {

    padding: 0;

}


.gt-popular-header {

    display: flex;

    align-items: start;

    justify-content: space-between;

    margin-bottom: 14px;

}


.gt-popular-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 600;

}


.gt-popular-view-all {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #f5b900;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

}


.gt-popular-view-all
.material-symbols-rounded {

    font-size: 17px;

}


/* =========================================================
   THREE COLUMNS
========================================================= */

.gt-popular-grid {

    display: grid;

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

    gap: 14px;

}


.gt-popular-column {

    padding: 14px;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.09
    );

    border-radius: 10px;

    background:
    linear-gradient(
        145deg,
        rgba(11, 28, 49, 0.95),
        rgba(4, 17, 32, 0.95)
    );

}


/* =========================================================
   COLUMN TITLE
========================================================= */

.gt-popular-column-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 11px;

    color: #f5b900;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

}


.gt-popular-column-title
.material-symbols-rounded {

    font-size: 16px;

}


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

.gt-mini-course {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 78px;

    margin-bottom: 7px;

    padding: 7px;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.08
    );

    border-radius: 8px;

    background:
    rgba(
        7,
        24,
        43,
        0.65
    );

    text-decoration: none;

    transition:
    transform .2s ease,
    border-color .2s ease;

}


.gt-mini-course:last-child {

    margin-bottom: 0;

}


.gt-mini-course:hover {

    transform: translateY(-2px);

    border-color:
    rgba(
        245,
        185,
        0,
        0.35
    );

}


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

.gt-mini-course img {

    width: 70px;

    height: 64px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 6px;

}


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

.gt-mini-course-content {

    min-width: 0;

}


.gt-mini-course-category {

    display: block;

    margin-bottom: 7px;

    color: #8f9caf;

    font-size: 12px;

}


.gt-mini-course h3 {

    margin: 0 0 5px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.3;

}


.gt-mini-course-meta {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #8998ad;

    font-size: 12px;

}


.gt-mini-course-meta span:last-child {

    color: #f5b900;

}


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

@media (max-width: 1000px) {

    .gt-popular-grid {

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

    }

}


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

@media (max-width: 767px) {

    .gt-popular-section {

        padding: 18px 0 12px;

    }


    .gt-popular-grid {

        display: flex;

        overflow-x: auto;

        gap: 10px;

        scrollbar-width: none;

    }


    .gt-popular-grid::-webkit-scrollbar {

        display: none;

    }


    .gt-popular-column {

        min-width: 300px;

    }

}

@media (max-width: 767px) {

    .gt-hero-slider {
        width: 100%;
        height: 215px;

        /* LEFT + RIGHT GAP */
        padding-left: 10px;
        padding-right: 10px;

        box-sizing: border-box;
        overflow: hidden;
    }

    .gt-hero-track {
        width: 100%;
    }

    .gt-hero-slide {
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
        height: 195px;
    }

    .gt-hero-slide-content {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;

        box-sizing: border-box;

        display: block;
        position: relative;

        padding: 18px 15px;

        overflow: hidden;
    }

    .gt-hero-image {
        display: none !important;
    }

    .gt-hero-text {
        width: 100%;
        max-width: 100%;
        position: relative;
        z-index: 2;
    }

    .gt-hero-eyebrow {
        display: block;
        font-size: 8px;
        line-height: 1.2;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .gt-hero-text h1 {
        font-size: 22px;
        line-height: 1.1;
        margin: 0 0 9px;
    }

    .gt-hero-text p {
        font-size: 12px;
        line-height: 1.45;
        margin: 0 0 13px;
    }

    .gt-hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;

        padding: 8px 13px;
        font-size: 12px;
        line-height: 1;
    }

    .gt-hero-btn .material-symbols-rounded {
        font-size: 14px;
    }

    .gt-hero-dots {
        margin-top: 7px;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

}



/* =========================================================
   EXPLORE CATEGORIES
========================================================= */

.gt-explore-categories {

    padding: 22px 0 25px;

}


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

.gt-explore-categories .gt-section-title {

    margin-bottom: 12px;

    font-size: 16px;

    font-weight: 600;

    color: #ffffff;

}


/* =========================================================
   CATEGORY PILLS
========================================================= */

.gt-category-pills {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 9px;

}


/* =========================================================
   PILL
========================================================= */

.gt-category-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 34px;

    padding: 0 12px;

    border-radius: 20px;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.08
    );

    background:
        rgba(
            13,
            29,
            48,
            0.85
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


/* =========================================================
   ICON
========================================================= */

.gt-category-pill
.material-symbols-rounded {

    font-size: 15px;

    color: #f5b900;

}


/* =========================================================
   HOVER
========================================================= */

.gt-category-pill:hover {

    border-color:
        rgba(
            245,
            185,
            0,
            0.45
        );

    background:
        rgba(
            245,
            185,
            0,
            0.08
        );

    color: #f5b900;

    transform: translateY(-1px);

}


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

@media (max-width: 767px) {

    .gt-explore-categories {

        padding: 5px 0 20px;

    }


    .gt-explore-categories .gt-section-title {

        font-size: 13px;

        margin-bottom: 10px;

    }


    .gt-category-pills {

        flex-wrap: nowrap;

        overflow-x: auto;

        gap: 7px;

        padding-bottom: 4px;

        scrollbar-width: none;

    }


    .gt-category-pills::-webkit-scrollbar {

        display: none;

    }


    .gt-category-pill {

        flex: 0 0 auto;

        min-height: 32px;

        padding: 0 11px;

        font-size: 10px;

    }


    .gt-category-pill
    .material-symbols-rounded {

        font-size: 14px;

    }

}

@media (max-width: 767px) {

    .gt-explore-categories {
        padding: 5px 0 20px;
    }

    .gt-explore-categories .gt-section-title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    /* Allow categories to wrap into rows */
    .gt-category-pills {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
        width: 100%;
        overflow: visible;
    }

    /* Category pill */
    .gt-category-pill {
        flex: 0 0 auto;
        min-height: 30px;
        padding: 0 10px;
        border-radius: 18px;
        font-size: 12px;
        gap: 4px;
    }

    .gt-popular-header {
        margin-bottom: 10px;
    }

    .gt-popular-header h2 {
        font-size: 15px;
    }

    .gt-category-pill .material-symbols-rounded {
        font-size: 13px;
    }

}

/* =========================================================
   EXPLORE CATEGORIES
========================================================= */

.gt-explore-categories {

    width: 100%;

    padding: 22px 0 35px;

    background: transparent;

}


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

.gt-explore-categories .gt-container {

    width: calc(100% - 30px);

}


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

.gt-section-heading {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

}


.gt-section-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: -0.2px;

}


.gt-section-line {

    width: 22px;

    height: 3px;

    flex: 0 0 22px;

    background: #f5b900;

    border-radius: 10px;

}


/* =========================================================
   CATEGORY GRID
========================================================= */

.gt-category-grid {

    display: grid;

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

    gap: 12px;

}


/* =========================================================
   CATEGORY CARD
========================================================= */

.gt-category-card {

    position: relative;

    display: flex;

    align-items: center;

    min-width: 0;

    min-height: 82px;

    padding: 10px;

    overflow: hidden;

    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(13, 35, 60, 0.95),
            rgba(5, 18, 35, 0.98)
        );

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


/* =========================================================
   CARD GOLD GLOW
========================================================= */

.gt-category-card::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 90px;

    right: -35px;

    top: -30px;

    border-radius: 50%;

    background: rgba(245, 185, 0, 0.08);

    filter: blur(5px);

    pointer-events: none;

}


/* =========================================================
   CARD HOVER
========================================================= */

.gt-category-card:hover {

    transform: translateY(-3px);

    border-color: rgba(245, 185, 0, 0.45);

    background:
        linear-gradient(
            135deg,
            rgba(17, 43, 72, 0.98),
            rgba(6, 21, 40, 1)
        );

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(245, 185, 0, 0.06);

}


/* =========================================================
   CATEGORY IMAGE
========================================================= */

.gt-category-image {

    position: relative;

    width: 62px;

    height: 62px;

    flex: 0 0 62px;

    overflow: hidden;

    border-radius: 9px;

    border: 1px solid rgba(245, 185, 0, 0.20);

    background: #07172b;

}


/* =========================================================
   IMAGE
========================================================= */

.gt-category-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;

}


/* =========================================================
   IMAGE HOVER
========================================================= */

.gt-category-card:hover .gt-category-image img {

    transform: scale(1.08);

    filter: brightness(1.08);

}


/* =========================================================
   CATEGORY INFORMATION
========================================================= */

.gt-category-info {

    position: relative;

    z-index: 2;

    min-width: 0;

    padding-left: 11px;

}


.gt-category-info h3 {

    margin: 0 0 4px;

    color: #ffffff;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 600;

}


.gt-category-info p {

    margin: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 11px;

    line-height: 1.3;

}


/* =========================================================
   GOLD ACCENT ON HOVER
========================================================= */

.gt-category-card:hover .gt-category-info h3 {

    color: #f5b900;

}


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

@media (max-width: 1100px) {

    .gt-category-grid {

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

    }

}


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

@media (max-width: 850px) {

    .gt-category-grid {

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

        gap: 10px;

    }


    .gt-category-card {

        min-height: 76px;

    }


    .gt-category-image {

        width: 56px;

        height: 56px;

        flex-basis: 56px;

    }

}


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

@media (max-width: 767px) {

    .gt-explore-categories {

        padding: 6px 0 25px;

    }


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

    .gt-section-heading {

        gap: 8px;

        margin-bottom: 12px;

    }


    .gt-section-heading h2 {

        font-size: 14px;

    }


    .gt-section-line {

        width: 18px;

        height: 3px;

        flex-basis: 18px;

    }


    /* ---------------------------------------------
       GRID
    --------------------------------------------- */

    .gt-category-grid {

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

        gap: 8px;

    }


    /* ---------------------------------------------
       CARD
    --------------------------------------------- */

    .gt-category-card {

        min-height: 68px;

        padding: 8px;

        border-radius: 10px;

    }


    /* ---------------------------------------------
       IMAGE
    --------------------------------------------- */

    .gt-category-image {

        width: 48px;

        height: 48px;

        flex: 0 0 48px;

        border-radius: 7px;

    }


    /* ---------------------------------------------
       TEXT
    --------------------------------------------- */

    .gt-category-info {

        padding-left: 8px;

    }


    .gt-category-info h3 {

        margin-bottom: 3px;

        font-size: 10px;

        line-height: 1.2;

    }


    .gt-category-info p {

        font-size: 8px;

        line-height: 1.25;

    }


    /* Disable large desktop hover movement on touch */

    .gt-category-card:hover {

        transform: none;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .gt-category-grid {

        gap: 7px;

    }


    .gt-category-card {

        min-height: 64px;

        padding: 7px;

    }


    .gt-category-image {

        width: 44px;

        height: 44px;

        flex-basis: 44px;

    }


    .gt-category-info {

        padding-left: 7px;

    }


    .gt-category-info h3 {

        font-size: 9px;

    }


    .gt-category-info p {

        font-size: 7px;

    }

}

/* =========================================
   COURSE LEVEL - ICON GLOW BADGE
========================================= */

.gt-course-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 5px 11px 5px 6px;

    border-radius: 22px;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.2px;

    white-space: nowrap;

    transition: all 0.25s ease;
}


/* =========================================
   ICON
========================================= */

.gt-course-badge .badge-icon {
    width: 24px;
    height: 24px;

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

    border-radius: 50%;

    font-size: 15px;

    flex-shrink: 0;
}


/* =========================================
   BEGINNER - GREEN
========================================= */

.gt-course-badge.level-beginner {
    color: #fff;

    background: rgba(57, 230, 0, 0.59);

    border: 1px solid rgba(57, 230, 0, 0.55);

    box-shadow:
        0 0 8px rgba(57, 230, 0, 0.18);
}

.gt-course-badge.level-beginner .badge-icon {
    color: #fff;

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

    box-shadow:
        0 0 8px rgba(57, 230, 0, 0.45),
        inset 0 0 5px rgba(57, 230, 0, 0.15);
}


/* =========================================
   INTERMEDIATE - ORANGE
========================================= */

.gt-course-badge.level-intermediate {
    color: #ffffff;

    background: rgba(255, 174, 0, 0.86);

    border: 1px solid rgba(255, 174, 0, 0.55);

    box-shadow:
        0 0 8px rgba(255, 174, 0, 0.18);
}

.gt-course-badge.level-intermediate .badge-icon {
    color: #ffffff;

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

    box-shadow:
        0 0 8px rgba(255, 174, 0, 0.45),
        inset 0 0 5px rgba(255, 174, 0, 0.15);
}


/* =========================================
   ADVANCED - RED
========================================= */

.gt-course-badge.level-advanced {
    color: #fff;

    background: rgba(255, 23, 68, 0.65);

    border: 1px solid rgba(255, 23, 68, 0.55);

    box-shadow:
        0 0 8px rgba(255, 23, 68, 0.18);
}

.gt-course-badge.level-advanced .badge-icon {
    color: #fff;

    background: rgba(4, 4, 4, 0.16);

    box-shadow:
        0 0 8px rgba(255, 23, 68, 0.45),
        inset 0 0 5px rgba(255, 23, 68, 0.15);
}


/* =========================================
   HOVER
========================================= */

.gt-course-badge:hover {
    transform: translateY(-1px);
}

.gt-course-badge.level-beginner:hover {
    box-shadow:
        0 0 14px rgba(57, 230, 0, 0.35);
}

.gt-course-badge.level-intermediate:hover {
    box-shadow:
        0 0 14px rgba(255, 174, 0, 0.35);
}

.gt-course-badge.level-advanced:hover {
    box-shadow:
        0 0 14px rgba(255, 23, 68, 0.35);
}

/* =========================================================
   ALL EPISODES SIDE DRAWER
   DESKTOP ONLY
========================================================= */

/* Hidden by default */
.gt-side-episodes-overlay,
.gt-side-episodes-drawer {
    display: none;
}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 769px) {

    .gt-side-episodes-overlay {
        position: fixed;
        inset: 0;
        display: block;
        background: rgba(0,0,0,.55);
        opacity: 0;
        visibility: hidden;
        transition:
        opacity .25s ease,
        visibility .25s ease;
        z-index: 9998;
    }

    .gt-side-episodes-drawer {
        position: fixed;
        top: 0;
        right: 0;
        display: block;
        width: 390px;
        max-width: 90vw;
        height: 100vh;
        padding: 14px;
        background: #020b14;
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 9999;
        overflow: hidden;
    }

    .gt-side-episodes-drawer.gt-side-episodes-open {
        transform: translateX(0);
    }

    .gt-side-episodes-overlay.gt-side-episodes-visible {
        opacity: 1;
        visibility: visible;
    }

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

    .gt-side-episodes-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border:
        1px solid
        rgba(255,255,255,.07);
        border-radius: 12px;
        background: #071522;
    }

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

    .gt-side-episodes-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px;
        border-bottom:
        1px solid
        rgba(255,255,255,.06);
        flex-shrink: 0;
    }

    .gt-side-episodes-header h2 {
        margin: 0;
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
    }

    .gt-side-episodes-header h2 small {
        color: #718597;
        font-size: 9px;
        font-weight: 500;
    }

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

    .gt-side-episodes-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 5px;
        color: #fff;
        background:#f00;
        cursor: pointer;
    }

    .gt-side-episodes-close:hover {
        color: #fff;
        background:#f00;
    }

    .gt-side-episodes-close
    .material-symbols-rounded {
        font-size: 17px;
    }

    /* =====================================================
       EPISODE LIST
    ===================================================== */

    .gt-side-episodes-list {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
    }

    .gt-side-episodes-list::-webkit-scrollbar {
        width: 4px;
    }

    .gt-side-episodes-list::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background:
        rgba(245,189,33,.3);
    }

    /* =====================================================
       EPISODE ITEM
    ===================================================== */

    .gt-side-episodes-item {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-height: 76px;
        padding:
        8px 10px;
        border: 0;
        border-bottom:
        1px solid
        rgba(255,255,255,.04);
        color: #ffffff;
        background:
        transparent;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }

    .gt-side-episodes-item:hover {
        background:
        rgba(255,255,255,.025);
    }

    /* Active episode */

    .gt-side-episodes-item.active {
        background:
        rgba(245,189,33,.06);
    }

    /* Locked episode */

    .gt-side-episodes-item.locked {
        opacity: .45;
    }

    /* =====================================================
       THUMBNAIL
    ===================================================== */

    .gt-side-episodes-thumb {
        position: relative;
        flex: 0 0 62px;
        width: 62px;
        height: 46px;
        overflow: hidden;
        border-radius: 5px;
        background:
        #020817;
    }

    .gt-side-episodes-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* =====================================================
       PLAY OVERLAY
    ===================================================== */

    .gt-side-episodes-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
        rgba(0,0,0,.25);
    }

    .gt-side-episodes-play
    .material-symbols-rounded {
        color: #ffffff;
        font-size: 20px;
    }

    /* =====================================================
       EPISODE INFO
    ===================================================== */

    .gt-side-episodes-info {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    .gt-side-episodes-number {
        color: #f5bd21;
        font-size: 9px;
        font-weight: 700;
    }

    .gt-side-episodes-info > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .gt-side-episodes-info strong {
        overflow: hidden;
        color: #dce4eb;
        font-size: 10px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gt-side-episodes-info small {
        color: #718597;
        font-size: 8px;
    }

    /* =====================================================
       STATUS ICON
    ===================================================== */

    .gt-side-episodes-status {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gt-side-episodes-status
    .material-symbols-rounded {
        color: #f5bd21;
        font-size: 19px;
    }

    /* =====================================================
       EMPTY STATE
    ===================================================== */

    .gt-side-episodes-empty {
        padding: 40px 20px;
        color: #718597;
        font-size: 10px;
        text-align: center;
    }

}

/* =========================================================
   CENTER VIDEO CONTROLS
========================================================= */

.gt-reel-center-control {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

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

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    width: auto !important;

    height: auto !important;

    z-index: 50 !important;

}


/* =========================================================
   PLAY + MUTE BUTTONS
========================================================= */

.gt-reel-center-control > button {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    margin: 0 !important;

    flex: 0 0 auto !important;

}


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

.gt-reel-center-control
.gt-video-mute-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 62px !important;

    height: 62px !important;

    min-width: 62px !important;

    min-height: 62px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

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

    color: #fff !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    z-index: 51 !important;

}


/* =========================================================
   ICON
========================================================= */

.gt-reel-center-control
.gt-video-mute-btn
.material-symbols-rounded {

    font-size: 26px !important;

    line-height: 1 !important;

}


/* =========================================================
   HOVER
========================================================= */

.gt-reel-center-control
.gt-video-mute-btn:hover {

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

}

/* Hide Episodes button on desktop */
.gt-mobile-episodes-btn {
    display: none !important;
}


/* Show Episodes button on mobile */
@media (max-width: 767px) {

    .gt-mobile-episodes-btn {
        display: flex !important;
    }

}

/* =========================================================
   EPISODE WATCH BADGE
========================================================= */

.gt-episode-watch-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    padding: 5px 7px;

    border-radius: 6px;

}


/* COMPLETED */

.gt-episode-watch-badge.completed {

    background: rgba(34, 197, 94, 0.12);

    color: #22c55e;

}


/* REWATCH */

.gt-episode-watch-badge.rewatch {

    background: rgba(245, 189, 33, 0.12);

    color: #f5bd21;

}

.gt-no-episodes {
    width: 100%;
    min-height: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: #06111c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;

    box-sizing: border-box;
    padding: 40px;
}

.gt-no-episodes .material-symbols-rounded {
    font-size: 58px;
    color: #f5b900;
    margin-bottom: 18px;
}

.gt-no-episodes h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.gt-no-episodes p {
    margin: 0;
    color: #8d9aa8;
    font-size: 14px;
}

.gt-course-loading,
.gt-course-empty {
    width: 100%;
    min-height: 250px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    grid-column: 1 / -1;
}

.gt-course-loading .material-symbols-rounded,
.gt-course-empty .material-symbols-rounded {
    font-size: 42px;
    color: #f5b900;
    margin-bottom: 12px;
}

.gt-course-loading p,
.gt-course-empty p {
    color: #8d9aa8;
    font-size: 14px;
    margin: 5px 0 0;
}

.gt-course-empty h3 {
    color: #fff;
    margin: 0;
    font-size: 20px;
}

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

.gt-subscription-btn {

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: 8px;

    border: 1px solid rgba(251, 191, 0, 0.35);

    border-radius: 9px;

    background: rgba(251, 191, 0, 0.06);

    color: #fbbf00;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.gt-subscription-btn:hover {

    background: rgba(251, 191, 0, 0.12);

    border-color: #fbbf00;

    transform: translateY(-1px);

    box-shadow:
        0 5px 18px rgba(251, 191, 0, 0.12);
}


.gt-subscription-btn .material-symbols-rounded {

    font-size: 21px;

    font-variation-settings:
        'FILL' 1,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24;
}



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

.gt-mobile-subscription {

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(251, 191, 0, 0.35);

    border-radius: 9px;

    background: rgba(251, 191, 0, 0.06);

    color: #fbbf00;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.gt-mobile-subscription:hover {

    background: rgba(251, 191, 0, 0.12);

    border-color: #fbbf00;
}


.gt-mobile-subscription .material-symbols-rounded {

    font-size: 21px;

    font-variation-settings:
        'FILL' 1,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24;
}
/* =========================================================
   MY SUBSCRIPTION - PURPLE
========================================================= */

.gt-account-purple {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.18);
}

.gt-profile-account-item:hover .gt-account-purple {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.40);
    color: #c084fc;
}

/* =========================================================
   LOCKED EPISODE
========================================================= */

.gt-episode-item.locked {
    cursor: not-allowed;
    opacity: 0.72;
}

.gt-episode-item.locked:hover {
    transform: none;
}

.gt-episode-locked-icon {
    opacity: 0.95;
}

.gt-episode-lock-status {
    font-size: 18px !important;
}

.gt-mobile-episode.locked {
    cursor: not-allowed;
    opacity: 0.65;
}

.gt-mobile-episode.locked .gt-mobile-episode-lock {
    color: #94a3b8;
}
/* =========================================================
   SUBSCRIPTION POPUP
========================================================= */

.gt-subscription-popup-open {
    overflow: hidden;
}


.gt-subscription-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(2, 8, 23, .78);

    backdrop-filter: blur(7px);

}


.gt-subscription-modal {

    position: relative;

    width: 100%;

    max-width: 430px;

    padding: 32px;

    text-align: center;

    background: #071426;

    border: 1px solid rgba(251, 191, 0, .22);

    border-radius: 18px;

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

}


.gt-subscription-close {

    position: absolute;

    top: 14px;

    right: 14px;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 9px;

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

    color: #94a3b8;

    cursor: pointer;

}


.gt-subscription-close:hover {

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

    color: #fff;

}


.gt-subscription-close
.material-symbols-rounded {

    font-size: 20px;

}


/* ICON */

.gt-subscription-modal-icon {

    width: 64px;

    height: 64px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(251, 191, 0, .10);

    border: 1px solid rgba(251, 191, 0, .25);

    color: #fbbf00;

}


.gt-subscription-modal-icon
.material-symbols-rounded {

    font-size: 30px;

}


/* TITLE */

.gt-subscription-modal h3 {

    margin: 0 0 9px;

    color: #fff;

    font-size: 22px;

    font-weight: 700;

}


.gt-subscription-modal p {

    margin: 0 auto 20px;

    max-width: 340px;

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.6;

}


/* MESSAGE */

.gt-subscription-message {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 15px;

    margin-bottom: 22px;

    text-align: left;

    border-radius: 10px;

    background: rgba(251, 191, 0, .06);

    border: 1px solid rgba(251, 191, 0, .12);

    color: #cbd5e1;

    font-size: 13px;

    line-height: 1.45;

}


.gt-subscription-message
.material-symbols-rounded {

    flex: 0 0 auto;

    color: #fbbf00;

    font-size: 20px;

}


/* BUTTONS */

.gt-subscription-actions {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.gt-subscribe-now {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding: 0 18px;

    border-radius: 10px;

    background: #fbbf00;

    color: #020817;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .2s ease;

}


.gt-subscribe-now:hover {

    background: #ffd23f;

    transform: translateY(-1px);

}


.gt-subscribe-now
.material-symbols-rounded {

    font-size: 19px;

}


.gt-subscribe-cancel {

    min-height: 42px;

    border: 0;

    background: transparent;

    color: #94a3b8;

    cursor: pointer;

    font-size: 13px;

}


.gt-subscribe-cancel:hover {

    color: #fff;

}

.gt-subscription-popup-open {
    overflow: hidden;
}


.gt-subscription-overlay {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(2, 8, 23, .78);

    backdrop-filter: blur(8px);

}


.gt-subscription-modal {

    position: relative;

    width: 100%;

    max-width: 420px;

    padding: 32px;

    text-align: center;

    background: #071426;

    border: 1px solid rgba(251,191,0,.25);

    border-radius: 18px;

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

}


.gt-subscription-close {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 8px;

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

    color: #94a3b8;

    cursor: pointer;

}


.gt-subscription-modal-icon {

    width: 64px;

    height: 64px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(251,191,0,.10);

    border: 1px solid rgba(251,191,0,.25);

    color: #fbbf00;

}


.gt-subscription-modal-icon
.material-symbols-rounded {

    font-size: 30px;

}


.gt-subscription-modal h3 {

    margin: 0 0 8px;

    color: #fff;

    font-size: 22px;

}


.gt-subscription-modal p {

    margin: 0 0 20px;

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.6;

}


.gt-subscription-message {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 20px;

    text-align: left;

    border-radius: 10px;

    background: rgba(251,191,0,.06);

    border: 1px solid rgba(251,191,0,.12);

    color: #cbd5e1;

    font-size: 13px;

    line-height: 1.5;

}


.gt-subscription-message
.material-symbols-rounded {

    color: #fbbf00;

    font-size: 20px;

}


.gt-subscribe-now {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 46px;

    border-radius: 10px;

    background: #fbbf00;

    color: #020817;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

}


.gt-subscribe-cancel {

    margin-top: 10px;

    border: 0;

    background: transparent;

    color: #94a3b8;

    cursor: pointer;

    font-size: 13px;

}

/* =========================================================
   PROFILE EMPTY STATE
========================================================= */

.gt-profile-empty {
    min-height: 240px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px 25px;

    text-align: center;
}


/* =========================================================
   ICON
========================================================= */

.gt-profile-empty > .material-symbols-rounded {
    width: 56px;
    height: 56px;

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

    margin-bottom: 16px;

    border-radius: 15px;

    background: rgba(251, 191, 0, 0.07);
    border: 1px solid rgba(251, 191, 0, 0.16);

    color: #fbbf00;

    font-size: 27px;
}


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

.gt-profile-empty > strong {
    display: block;

    margin-bottom: 7px;

    color: #f8fafc;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.gt-profile-empty > span:not(.material-symbols-rounded) {
    display: block;

    max-width: 430px;

    margin-bottom: 18px;

    color: #94a3b8;

    font-size: 13px;
    line-height: 1.6;
}


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

.gt-profile-empty-btn {
    display: inline-flex;

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

    gap: 7px;

    min-height: 38px;

    padding: 0 16px;

    border-radius: 8px;

    background: #fbbf00;
    color: #020817;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.gt-profile-empty-btn:hover {
    background: #ffd23f;

    color: #020817;

    transform: translateY(-1px);

    box-shadow:
        0 7px 20px rgba(251, 191, 0, .16);
}


.gt-profile-empty-btn
.material-symbols-rounded {
    font-size: 18px;
}

/* =========================================================
   VIDEO PLAYER
========================================================= */

.gt-course-reel-player {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   CENTER PLAY / PAUSE
========================================================= */

.gt-reel-center-control {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 20;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


/*
 * Show controls when player has .gt-controls-visible
 */

.gt-course-reel-player.gt-controls-visible
.gt-reel-center-control {
    opacity: 1;
    visibility: visible;
}


.gt-reel-center-control button {
    width: 58px;
    height: 58px;

    border: 0;
    border-radius: 50%;

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

    color: #fff;

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

    cursor: pointer;

    backdrop-filter: blur(5px);
}


.gt-reel-center-control
.material-symbols-rounded {
    font-size: 34px;
}


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

.gt-video-mute-btn {
    position: absolute;

    right: 16px;
    bottom: 58px;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 50%;

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

    color: #fff;

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

    cursor: pointer;

    z-index: 25;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.gt-course-reel-player.gt-controls-visible
.gt-video-mute-btn {
    opacity: 1;
    visibility: visible;
}


.gt-video-mute-btn
.material-symbols-rounded {
    font-size: 22px;
}


/* =========================================================
   BOTTOM PLAYER CONTROLS
========================================================= */

.gt-video-controls {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 52px;

    padding: 0 14px;

    display: flex;
    align-items: center;

    gap: 8px;

    z-index: 20;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0)
    );

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.gt-course-reel-player.gt-controls-visible
.gt-video-controls {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   TIME
========================================================= */

.gt-video-time {
    color: #fff;

    font-size: 11px;

    min-width: 34px;

    text-align: center;

    user-select: none;
}


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

.gt-video-progress-container {
    flex: 1;

    height: 22px;

    display: flex;

    align-items: center;

    cursor: pointer;
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.gt-video-progress-bar {
    width: 100%;

    height: 4px;

    border-radius: 10px;

    overflow: hidden;

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

    transition: height 0.15s ease;
}


.gt-video-progress-container:hover
.gt-video-progress-bar {
    height: 6px;
}


/* =========================================================
   PROGRESS FILLED
========================================================= */

.gt-video-progress-filled {
    width: 0%;

    height: 100%;

    background: #ffffff;

    border-radius: 10px;

    transition: width 0.05s linear;
}

/* =========================================================
   VIDEO PLAYER
========================================================= */

.gt-course-reel-player {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   CENTER PLAY / PAUSE
========================================================= */

.gt-reel-center-control {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 20;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


/*
 * Controls visible
 */

.gt-course-reel-player.gt-controls-visible
.gt-reel-center-control {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.gt-reel-center-control button {

    width: 58px;
    height: 58px;

    border: 0;

    border-radius: 50%;

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

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    backdrop-filter: blur(5px);

}


.gt-reel-center-control
.material-symbols-rounded {

    font-size: 34px;

}


/* =========================================================
   VOLUME
========================================================= */

.gt-video-mute-btn {

    position: absolute;

    right: 16px;

    bottom: 60px;

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 50%;

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

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 25;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


.gt-course-reel-player.gt-controls-visible
.gt-video-mute-btn {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 999;

}


.gt-video-mute-btn
.material-symbols-rounded {

    font-size: 22px;

}


/* =========================================================
   BOTTOM PLAYER BAR
========================================================= */

.gt-video-controls {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 52px;

    padding:
        0 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    z-index: 22;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,0)
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


.gt-course-reel-player.gt-controls-visible
.gt-video-controls {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   TIME
========================================================= */

.gt-video-time {

    color: #fff;

    font-size: 11px;

    line-height: 1;

    min-width: 34px;

    text-align: center;

    user-select: none;

}


/* =========================================================
   PROGRESS
========================================================= */

.gt-video-progress-container {

    flex: 1;

    height: 22px;

    display: flex;

    align-items: center;

    cursor: pointer;

}


.gt-video-progress-bar {

    width: 100%;

    height: 4px;

    border-radius: 10px;

    overflow: hidden;

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

    transition:
        height .15s ease;

}


.gt-video-progress-container:hover
.gt-video-progress-bar {

    height: 6px;

}


.gt-video-progress-filled {

    width: 0%;

    height: 100%;

    background: #fff;

    border-radius: 10px;

}

.gt-video-mute-btn {

    position: absolute;

    left: 50%;

    top: calc(50% + 48px);

    transform: translateX(-50%);

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 50%;

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

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 25;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}

.gt-video-mute-btn
.material-symbols-rounded {

    font-size: 19px;

}
.gt-reel-center-control {

    position: absolute;

    left: 50%;

    top: 50%;

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

    z-index: 20;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}
.gt-reel-center-control button {

    width: 58px;
    height: 58px;

    border: 0;

    border-radius: 50%;

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

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* =========================================================
   SHARE TOAST
========================================================= */

#gt-share-toast {

    position: fixed;

    left: 50%;

    bottom: 30px;

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

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        12px 18px;

    background:
        rgba(20, 25, 32, 0.96);

    color: #ffffff;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 10px;

    font-size: 14px;

    font-weight: 500;

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

    opacity: 0;

    visibility: hidden;

    z-index: 999999;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}


#gt-share-toast.show {

    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0);

}


#gt-share-toast
.material-symbols-rounded {

    font-size: 20px;

    color: #4caf50;

}

/* =========================================================
   INSTAGRAM STYLE VIDEO PROGRESS BAR
========================================================= */

.gt-course-reel-player {
    position: relative;
}

/* Hide time numbers */
#gt-video-current-time,
#gt-video-duration {
    display: none !important;
}

/* Progress bar - Instagram/Reels style */
#gt-video-progress-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    margin: 0;
    padding: 0;

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

    border-radius: 0;

    cursor: pointer;

    z-index: 999;

    overflow: hidden;

    box-sizing: border-box;
}

/* Played portion */
#gt-video-progress-filled {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 0%;

    background: #ffffff;

    border-radius: 0;

    transition: width 0.08s linear;

    pointer-events: none;
}

/* Slightly thicker when controls are visible */
.gt-course-reel-player.gt-controls-visible
#gt-video-progress-container {
    height: 4px;
}

.screenshot-blocked {
    visibility: hidden !important;
}

/* =====================================================
   VIDEO WATERMARK
===================================================== */

.gt-course-reel-player {
    position: relative;
    overflow: hidden;
}

.gt-video-watermark {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) rotate(-25deg);

    z-index: 80;

    color: rgba(255, 255, 255, 0.22);

    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45);

    opacity: 0.75;

    transition:
        left 0.8s ease,
        top 0.8s ease,
        opacity 0.3s ease;

    max-width: 90%;
}

/* Mobile */
@media (max-width: 768px) {

    .gt-video-watermark {
        font-size: 13px;
        letter-spacing: 0.3px;
    }

}