/* INDEX */
.index-news {
    margin-bottom: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon-lg {
    font-size: 30px;
}

.lg-flex {
    @media (min-width: 1200px) {
        display: flex;
    }
}

.idx-fcs {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


/* Nav bar ========================================================================================================== */
.nav-t {
    background: radial-gradient(200% 200% at 50% 0%, #020e1dcb 0, #2ed4ea0e 100%) !important;
    border-bottom: none !important;

    a {
        @media (min-width: 1200px) {
            color: white !important;
        }
        @media (max-width: 1200px) {
            color: rgb(31, 31, 31) !important;
        }
    }
}

button.navbar-toggle {
    top: 10px;
}

.navbar-header {
    height: 100%;

    a {
        height: 100%;
    }
}

.navbar-nav {
    margin: 7.5px -15px !important;
}

.con-nav {
    height: 70px;
    align-items: baseline;
}

.header-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: radial-gradient(33.07% 8478.43% at 50% 50%, #2ed3ea 0, rgba(105, 133, 247, 0) 100%);
}

.dropdown-menu a {
    color: black !important;
}


/* ABOUT, GPT ========================================================================================================== */
.section-pt-0 {
    padding-top: 0;
}

.transparent {
    background-color: transparent;

    h3 {
        color: white;
    }
}

.hp p:last-child {
    margin-bottom: 35px;
}

.mission {
    &::before {
        content: '';
        position: absolute;
        transform: translateY(6px);
        left: -10px;
        width: 3px;
        height: 130%;
        background: radial-gradient(100% 100% at 50% 0%, #2ed3ea 0, rgba(105, 133, 247, 0) 100%);
    }
}

#team {
    h3 {
        color: white;
    }
    h4, li {
        color: hsla(0, 0%, 100%, .8);
    }
    h5 {
        color: hsla(0, 0%, 100%, .7);
    }

    a {
        color: rgb(215, 219, 255);
    
        &:hover {
            color: rgb(70, 83, 201);
        }
    }

    p {
        color: white;
    }
}

.about-bg-bl {
    background: rgba(03, 05, 25, .9);
}
.bg-fff0 {
    background-color: #fff0;
}
.about-bg-bl2 {
    background: rgba(03, 05, 25, .95);
}

.about-gpt {
    width: 100%;
    text-align: left;
}
.about-gpt li {
    color: #444444 !important;
}

p.ffc {
    color: hsla(0, 0%, 100%, .8);
}

.gptimg {
    width: 100%;
}

.gpt2-img {
    overflow: hidden;

    @media (min-width: 1200px) {
        height: 300px;
    }
}

.gpt-sasa {
    display: flex;

    @media (min-width: 1200px) {
        flex-direction: row;

        div.gpt-sasa-img {
            width: 60%;
        }

        div.gpt-sasa-txt {
            width: 40%;
            display: flex;
            flex-direction: column;

            .sasa-txt {
                height: 33%;
                margin: 5px 10px 5px 10px;
                padding: 10px 15px 10px 15px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                border-radius: 10px;
                border: 1px solid #b3f6ff;

                &:nth-child(1) {
                    background-color: #2543A5;
                }
                &:nth-child(2) {
                    background-color: #188CD9;
                }
                &:nth-child(3) {
                    background-color: #3641D9;
                }
                
                h5 {
                    font-size: 16px;
                    color: #fff;
                    margin-bottom: 0;
                }
                h6 {
                    font-size: 12px;
                    color: #fff;
                    margin-bottom: 0;
                }
            }
        }
    }

    @media (max-width: 1200px) {
        flex-direction: column;

        div.gpt-sasa-img {
            width: 100%;
        }

        div.gpt-sasa-txt {
            display: flex;
            flex-direction: column;

            .sasa-txt {
                margin: 5px 5px 5px 5px;
                padding: 5px 5px 5px 5px;
                border-radius: 10px;
                border: 1px solid #b3f6ff;

                display: flex;
                flex-direction: column;
                justify-content: center;

                &:nth-child(1) {
                    width: 100%;
                    background-color: #2543A5;
                }
                &:nth-child(2) {
                    width: 100%;
                    background-color: #188CD9;
                }
                &:nth-child(3) {
                    width: 100%;
                    background-color: #3641D9;
                }
                
                h5 {
                    font-size: 16px;
                    color: #fff;
                    margin-bottom: 0;
                }
                h6 {
                    font-size: 12px;
                    color: #fff;
                    margin-bottom: 0;
                }
            }
        }
    }
}


/* SPINE ACADEMY ========================================================================================================== */
section.below {
    padding-top: 0;
}

.bg-blue-opacity2 {
    background: #dfe5f1;
}

.sacard {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 5px 0 5px;
    border: solid 1px #2ed3ea47;

    img {
        padding: 0;
        border-radius: 0;
    }

    div {
        width: 100%;
        /* border-radius: 25px; */
        background: rgb(23 25 50 / 47%);
    }

    @media (min-width: 1200px) {

        div {
            height: 100%;
            padding: 20px 20px 10px 20px;
        }
    }
    @media (max-width: 1200px) {

        div {
            height: 100%;
            padding: 10px 5px 10px 5px;
        }
    }
}


/* ABOUT MISS ========================================================================================================== */
.about-mis {
    @media (min-width: 1200px) {
        width: 100%;
        text-align: left;
        padding-left: 90px;
    }

    @media (max-width: 1200px) {
        text-align: left;
    }

    li {
        color: #444444 !important;
    }
}

.miss-pros {
    background-color: var(--primary-color);
    margin: 20px auto;
    padding: 20px;

    .miss-card {
        position: relative;
        width: 100%;

        &::before {
            content: '';
            position: absolute;
            width: 50%;
            border: solid #444444;
        }

        .miss-info {
            display: flex;
            flex-direction: column;
            background-color: transparent;
            color: #cccccc;
            border-radius: 10px;
            padding: 10px;
        }

        .miss-title {
            color: #333;
            position: relative;
            margin-bottom: 10px;

            &::before {
                content: '';
                position: absolute;
                top: 10px;
                width: 20px;
                height: 20px;
                background: white;
                border-radius: 999px;
                border: 3px solid #2ed3ea;
            }
        }
    }
}


.miss-card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0 !important;
}
.miss-card:last-child::before {
    border-bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.miss-card:nth-child(odd) {
    padding: 30px 0 30px 30px;

    &::before {
        left: 0px;
        top: -5px;
        bottom: -5px;
        border-width: 5px 0 5px 5px;
        border-radius: 50px 0 0 50px;
    }
}
.miss-card:nth-child(even) {
    padding: 30px 30px 30px 0;

    &::before {
        right: 0;
        top: 0;
        bottom: 0;
        border-width: 5px 5px 5px 0;
        border-radius: 0 50px 50px 0;
    }
}

.miss-card:nth-child(even) > .miss-info > .miss-title {
    text-align: right;
}
.miss-card:nth-child(even) > .miss-info > p {
    text-align: right;
}
.miss-card:nth-child(odd) > .miss-info > .miss-title::before {
    left: -47px;
}
.miss-card:nth-child(even) > .miss-info > .miss-title::before {
    right: -47px;
}

#beginners h4:first-letter {
    font-size: 35px;
}

.href-bg-bl {
    color: #3978ca;
    &:hover {
        color: #185fbb;
    }
}

.miss-enc {
    top: 80px;
    left: -80px;
    z-index: 10;
    position: absolute;
    transform: rotate(350deg);
    display: flex;
    flex-direction: column;
    align-items: center;

    h3 {
        color: chocolate !important;
    }
}

.scale-1 {
    transform: scaleX(-1);
}


/* SIMULATOR ========================================================================================================== */
.simul-ul li {
    color: #444444 !important;
}

.simul-org {
    h4 {
        color: orange;
    }

    p {
        color: orange !important;
    }
}

.simul2-upper {
    display: flex;

    @media (min-width: 1200px) {
        height: 272px;
        align-items: center;
        margin-bottom: 0 !important;
    }
}

.simul2-below {
    display: flex;
    flex-direction: row-reverse;

    @media (min-width: 1200px) {
        height: 272px;
        align-items: center;

        h5 {
            text-align: right;
        }
    }
}

/* 5D/XR ========================================================================================================== */
.lg-align-stretch {
    display: flex;
    flex-wrap: wrap;

    @media (min-width: 1200px) {
        align-items: stretch;

        div {
            width: 50%;
        }
    }
    @media (max-width: 1200px) {
        flex-direction: column;

        div {
            width: 100%;
        }
    }
}

.xrcard {
    div {
        width: 100%;
        border: solid 1px #2ed3ea47;
        border-radius: 25px;
        background: rgb(23 25 50 / 47%);
    }

    @media (min-width: 1200px) {
        padding: 10px 5px 0 5px;

        div {
            height: 100%;
            padding: 20px 40px 20px 40px;
        }
    }
    @media (max-width: 1200px) {
        padding: 10px 10px 10px 10px;

        div {
            height: 100%;
            padding: 10px 5px 10px 5px;
        }
    }
}



/* BUSINESS ========================================================================================================== */
.timeline {
    @media (min-width: 1200px) {
        padding-left: 150px;

        &:last-child {
            padding-bottom: 150px;
        }
    
        &::after {
            content: '';
            position: absolute;
            width: 5px;
            background: radial-gradient(100% 100% at 50% 0%, #3978ca 0, rgba(105, 133, 247, 0) 100%);
            top: 0;
            bottom: 0;
            left: 165px;
            z-index: -1;
        }
    }

    .item {
        padding-top: 25px;

        @media (min-width: 1200px) {
            padding-left: 20px;
            
            &::before {
                content: '';
                position: absolute;
                transform: translateY(48.5px);
                left: -7.1px;
                width: 20px;
                height: 20px;
                background-color: #3978ca;
                border: 3px solid white;
                border-radius: 50%;
                z-index: 1;
            }
        }

        .pre-item {
            color: white;
            font-weight: 500;
            position: absolute;
            width: 130px;
            transform: translateY(48.5px);
            left: -150px;
            font-size: 15px;
        }

        h4 {
            padding-top: 15px;
            margin-bottom: 15px;
            color: #444444;

            @media (min-width: 1200px) {
                font-size: 25px;
                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    left: -6px;
                    width: 60%;
                    height: 3px;
                    background: radial-gradient(100% 8478.43% at 0% 50%, white 0, rgba(105, 133, 247, 0) 100%)
                }
            }

            @media (max-width: 1200px) {
                font-size: 23px;
            }
        }
        
        h5 {
            padding-top: 0;
            margin-bottom: 0;

            @media (min-width: 1200px) {
                margin-bottom: 0;
                font-size: 23px;
            }
            @media (max-width: 1200px) {
                margin-bottom: 15px;
                font-size: 18px;
            }

            a {
                color: #777777;
                font-size: 15px;
                padding-top: 0;
                margin-bottom: 10px;

                &:hover {
                    color: #444444;
                }
            }
        }

        p {
            margin-bottom: 0;
            color: #444444;

            @media (min-width: 1200px) {
                padding-left: 10px;
                font-size: 20px;
            }
            @media (max-width: 1200px) {
                font-size: 16px;
            }
        }
    }
}

.about-business {
    text-align: left;

    @media (min-width: 1200px) {
        width: 100%;
    }
    @media (max-width: 1200px) {}

    li {
        color: #444444 !important;
    }
}

.flex-stretch-1200 {
    @media (min-width: 1200px) {
        display: flex;
        justify-content: stretch;
    }
}

/* ========================================================================================================== */
.w100 {
    width: 100% !important;
}

.h360 {
    height: 360px !important;
}
.h600 {
    height: 600px !important;
}

.mt0 {
    margin-top: 0 !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt40 {
    margin-top: 40px !important;
}

.sm-pt0 {
    @media (max-width: 1200px) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}
.mb0 {
    margin-bottom: 0 !important;
}
.mb3 {
    margin-bottom: 3px !important;
}
.mb12 {
    margin-bottom: 12px !important;
}
.mb35 {
    margin-bottom: 35px !important;
}

.pt0 {
    padding-top: 0 !important;
}

.pb30 {
    padding-bottom: 30px !important;
}
.pb0 {
    padding-bottom: 0 !important;
}

.j-center {
    display: flex;
    justify-content: center;
}

@media (min-width: 1200px) {
    .bl1 {
        border-left: solid 2px #aaaaaa;
    }
    .br1 {
        border-right: solid 2px #aaaaaa;
    }

    .pl60 {
        padding-left: 60px;
    }

    .pl195 {
        padding-left: 195px;
    }

    .foru1200 {
        display: none;
    }
}

@media (max-width: 1200px) {
    .for1200 {
        display: none;
    }
}

/* NEWS -------------------------------------------------------------------------------------- */


.img-news-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 4;
}

.img-news-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50, 50);
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
}


.h1,
h1 {
    @media (min-width: 1200px) {
        font-size: 40px;
    }
    @media (min-width: 768px) {
        font-size: 36px;
    }
    @media (max-width: 768px) {
        font-size: 32px;
    }
}
.h2,
h2 {
    @media (min-width: 1200px) {
        font-size: 34px;
    }
    @media (min-width: 768px) {
        font-size: 30px;
    }
    @media (max-width: 768px) {
        font-size: 26px;
    }
}
.h3,
h3 {
    @media (min-width: 1200px) {
        font-size: 28px;
    }
    @media (min-width: 768px) {
        font-size: 24px;
    }
    @media (max-width: 768px) {
        font-size: 20px;
    }
}
.h4,
h4 {
    @media (min-width: 1200px) {
        font-size: 22px;
    }
    @media (min-width: 768px) {
        font-size: 20px;
    }
    @media (max-width: 768px) {
        font-size: 18px;
    }
}
.h5,
h5 {
    @media (min-width: 1200px) {
        font-size: 18px;
    }
    @media (min-width: 768px) {
        font-size: 16px;
    }
    @media (max-width: 768px) {
        font-size: 14px;
    }
}
.h6,
h6 {
    @media (min-width: 1200px) {
        font-size: 16px;
    }
    @media (min-width: 768px) {
        font-size: 14px;
    }
    @media (max-width: 768px) {
        font-size: 12px;
    }
}

p {
    font-size: 16px;
}