@charset "utf-8";
@import url('./fonts/khoa-hoc-ielts-font.css');

:root {
    --font-family-SVN-Gilroy-Regular: 'Gilroy-Regular';
    --font-family-SVN-Gilroy-Bold: 'SVN-Gilroy-Bold';
    --font-family-SVN-Gilroy-SemiBold: 'SVN-Gilroy-SemiBold';
    --font-family-SVN-Gilroy-XBold: 'SVN-Gilroy-XBold';
    --font-family-SVN-Gilroy-Heavy: 'Gilroy-Heavy';
    --font-family-Gilroy-RegularItalic: 'Gilroy-RegularItalic';
    --text-red: #c12128;
    --text-black: #000;
    --text-yelow: #e3801f;
    --title-color: #dc7f1f;
}

h2.title {
    color: var(--title-color);
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 3rem;
    line-height: 1.3;
    font-weight: bold;
}

h2.title span {
    font-size: 2.25rem;
    color: #c32128;
}

p {
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    font-family: var(--font-family-SVN-Gilroy-Regular);
}

.banner img {
    aspect-ratio: unset;
}

.alias {
    width: 70%;
    margin: auto;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    font-family: var(--font-family-SVN-Gilroy-Regular);
}

.btn_appointment {
    background: #f39f1b;
    font-family: var(--font-family-SVN-Gilroy-Bold), sans-serif;
    font-size: 16px;
    color: var(--white);
    border-radius: 20px;
    display: block;
    padding: 0.5rem 1rem;
}

.regist-button {
    background: url('../../images/landing-pages/khoa-hoc-ielts-7-5-power-up-langgo/bg-regisbutton.webp') no-repeat center;
    color: #fff;
    font-size: 1.25rem;
}

.camket .content {
    border-radius: 20px;
    position: relative;
    width: 90%;
    margin: auto;
}

.camket .content::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 8px;
    width: 100%;
    height: 100%;
    /* Controls the height of the gradient */
    background: linear-gradient(to right,
            #d78021,
            /* Red at the bottom */
            #c71d24 100%,
            /* Orange-red in the middle */
            transparent
            /* Fades to transparent at the top */
        );
    border-radius: 20px;
    /* Matches the bottom rounded corners */
    z-index: -1;
}

.camket .content img {
    width: 4rem;
}

.problem {
    background: url('../../images/landing-pages/khoa-hoc-ielts-7-5-power-up-langgo/bg-1.webp') no-repeat center center;
    background-size: cover;
}

.problem .content-left img {
    transform: scaleX(-1);
}

.problem .content-left p {
    position: absolute;
    width: 85%;
    top: 40%;
    left: 53%;
    transform: translate(-50%, -50%);
}

.problem .content-right p {
    position: absolute;
    width: 85%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.power-up .content {
    border-radius: 0.75rem;
}

.power-up .content::before {
    position: absolute;
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    background: url('../../images/landing-pages/khoa-hoc-ielts-7-5-power-up-langgo/check-icon.webp') no-repeat center center;
    background-size: contain;
    top: 50%;
    left: -2rem;
    transform: translateY(-50%);
}

.student_feelings_start {
    border: 0.063rem solid #f1a527;
    border-radius: 0.938rem;
    position: relative;
    padding-bottom: 56.25%;
}

.student_feelings_start iframe {
    width: 95%;
    height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.curriculum {
    background: url('../../images/landing-pages/khoa-hoc-ielts-7-5-power-up-langgo/2-bg.webp') center center no-repeat;
    background-size: cover;
}

.curriculum .content {
    border-radius: 0.75rem;
}

.teaching_staff_top h2 {
    font-family: var(--font-family-SVN-Gilroy-XBold), sans-serif;
    color: var(--text-yelow);
    font-size: 2.813rem;
}

.teaching_staff_top h2 span {
    font-family: var(--font-family-SVN-Gilroy-Bold), sans-serif;
    color: var(--text-red);
    font-size: 1.875rem;
    padding: 0.938rem 0 1.563rem 0;
}

.teaching_staff_item {
    width: 100%;
}

.teaching_staff_content p {
    font-family: var(--font-family-SVN-Gilroy-Regular), sans-serif;
    color: var(--text-black);
    font-size: 18px;
    line-height: 1.25;
    text-align: justify;
}

.teacher-slide .item .teaching_staff_item .img-teacher .main-image {
    width: 65%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.teacher-slide .item .teaching_staff_item .teaching_staff_name {
    font-size: 20.241px;
    font-family: SVN-Gilroy-Bold, sans-serif;
    color: #c22128;
    font-weight: 700;
    line-height: 1.2;
}

.teacher-slide .item .teaching_staff_item .teaching_staff_certificate {
    font-size: 30px;
    font-family: SVN-Gilroy-XBold, sans-serif;
    color: #dc7f1f;
    font-weight: 700;
    line-height: 1.434;
}

.section-contact-sales-form .contact-form button>span {
    font-family: var(--font-family-SVN-Gilroy-Bold);
}

@media screen and (max-width:1024px) {
    h2.title {
        font-size: 2rem;
    }

    h2.title span {
        font-size: 1.5rem;
    }

    p {
        font-size: 18px;
    }

    .alias {
        width: 80%;
    }

    .problem .content p {
        font-size: 16px;
    }
}

@media screen and (max-width:991px) {
    .camket .content {
        width: 100%;
    }

    .problem .content p {
        font-size: 12px;
        line-height: 1.2;
    }
}

@media screen and (max-width:575px) {
    .problem .content p {
        font-size: 18px;
    }

    .alias {
        width: 100%;
    }

    h2.title {
        font-size: 1.75rem;
    }

    h2.title span {
        font-size: 1.25rem;
    }

    .section-contact-sales-form .contact-form .title-contact-sale-form {
        padding-top: 2rem;
    }
}