.secBanner {
    width: 100%;
    height: 665px;
    background-image: url('https://assets1.schoolcore.co/public/assets/images/landing-page/banner-schoolcore-v2r.jpeg?v1.000');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #000;
}

.secBanner .btn-banner {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #000;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 30px;
}

.secBanner .btn-banner:before {
    content: '';
    background: linear-gradient(45deg, #120B42,#CF0768,#7868E6,#ff0000, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(1px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 30px;
}

/*{{-- .secBanner .btn-banner.active {
    color: #020106;
} --}}*/

/*{{-- .secBanner .btn-banner:active:after {
    background: transparent;
} --}}*/

.section-problem {
    background-color: #f6f5fd;
    padding-top: 2rem;
    padding-bottom: 5rem;
}

.secBanner .btn-banner:before {
    opacity: 1;
}

.secBanner .btn-banner:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #020106;
    left: 0;
    top: 0;
    border-radius: 30px;  
}

.secBanner .h-title{
    opacity: 0;
}

.secBanner .h-title h1 {
        font-size: 2.1rem;
    }

.secBanner .h-title h4 {
        font-weight: 400;
    }
}

.fix1000px {height: 1000px;}

.problem-schoolcore-title{font-size: 2rem;}
.header-content-animated{margin-top: 3rem;opacity: 0;}
.custom-card {box-shadow: 0 0 10px 2px #E9E5FF;border: none;}
.number-problem {
    font-size: 4rem;
    opacity: .5;
    margin-bottom: -10px;
}
.sub-col-problem , .d-main-feature{opacity: 0;}

.tilte-solve-problem{
    font-size: 2rem;
    margin-top: 3rem;
    {{-- opacity: 0; --}}
}
.text-highlight-shcoolcore {color:#2000ff}
.row-section-main-feature{ margin-bottom:6rem }
.section-feature{background-color: #E9E5FF; position: relative;}

.circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.8;
}
.circle1 { width: 800px;height: 800px;top: 67px;left: -33rem;background: linear-gradient(145deg, #ffff, #7868E6, #433A80);}
.circle2 { width: 150px; height: 150px; top: 40px; right: 50px;background: linear-gradient(145deg,  #7868E6, #433A80);}
.circle3 { width: 80px; height: 80px; top: 211px; right: 13rem;background: linear-gradient(145deg, #7868E6, #433A80);}
.section-recommend .img-icon-recomment{ width:25% }
.section-recommend .custom-card{border-radius: 20px;}
.section-recommend .d-cta-register2{ background-color: #7868E6;border-radius: 15px;}
.section-recommend .img-cta img{width: 30%;border-radius: 10px;}
.section-faq {background-color: #F6F5FD}
.section-faq .img-icon-fag { border-radius:30px }
.section-faq .title-faq { font-weight:600 }
.section-faq .hr-custom {width: 55%;opacity: 1;background-color: white;border: 1.5px solid white; margin: 0}
.section-faq .accordion-item { background-color:transparent;color: var(--primary-color);border:none; }
.section-faq .accordion-button:not(.collapsed){color: var(--primary-color);background-color: transparent;box-shadow: none;}
.section-faq .accordion-body{padding-top: 0}
.section-faq .accordion-button {background-color: transparent;color: var(--primary-color);font-weight: 600}
.section-faq .accordion-button:focus { box-shadow:none; }
.section-faq .accordion-button::after {
    background-image: none !important;
    content: '+';
    font-size: 1.5rem;
    color: var(--primary-color);
    position: absolute;
    right: 1.5rem; /* Align to the right */
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease-in-out;
    width: auto; 
    height: auto;
}

.section-faq .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(45deg);
}
.section-faq .accordion-button {padding-right: 3rem}

.h-title .description { font-size: 1.3rem;font-weight: 300; }
.fade-in-section{opacity: 0}
.ai-description{font-size: 1.6rem;margin-top: 3rem;}
.section-feature .sub-col-feature .card-title {
    font-size: 1.3rem;
}

{{-- responsive --}}
@media (max-width: 991px){
    .section-feature .sub-col-feature .card-body {
        min-height: 160px;
    }
}

@media (max-width: 480px){
    .secBanner .h-title h1 {font-size: 1.3rem;}
    .h-title .description {font-size: 1rem;}
    .problem-schoolcore-title {font-size: 2.1rem;}
    .tilte-solve-problem {font-size: 2.1rem;margin-top: 1.5rem;}
    .row-section-main-feature {margin-bottom: 3rem;}
    .section-faq .accordion-button , .section-faq .accordion-body{padding-left: 0}
    .section-feature .circle1{ top:unset;bottom:0 }
    .ai-description{font-size: 1.4rem;margin-top: 1rem;}
    .section-recommend .img-cta img {width: 90%;}
}

@media (max-width: 390px){
    .problem-schoolcore-title {font-size: 1.8rem;}
}

@media (max-width: 375px) {
    .secBanner .h-title h1 {font-size: 1.2rem;}
    .tilte-solve-problem {font-size: 2rem}

}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}