@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

html, body{
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

.container {
    width: 1246px;
    max-width: 95%;
    margin: 0 auto;
}

.-z-1{
    z-index: -1;
}

.bg-gradient {
    background: linear-gradient(245.31deg, #00C2FF -5.97%, #7C32DA 139.97%);
}

.bg-up-gradient {
    background: linear-gradient(180deg, #00F2FF -86.33%, #7C32DA 115.62%);
}

.bg-top-btn-gradient {
   background: linear-gradient(180deg, #00F2FF -125%, #5432DA 91.28%);
}

.bg-opacity-gradient {
    background: linear-gradient(270deg, #3980EE 2.84%, rgba(61, 123, 236, 0) 96.06%);
}

.text-gradient {
    background: -webkit-linear-gradient(245.31deg, #00C2FF -5.97%, #7C32DA 139.97%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 

.text-up-gradient {
    background: -webkit-linear-gradient(270deg, #00F2FF -86.33%, #7C32DA 115.62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 

.rounded-4xl {
    border-radius: 2.5rem;
}

.text-11xl {
    font-size: 15rem;
    line-height: 0.8; 
}

.text-12xl {
    font-size: 16rem;
    line-height: 0.8; 
}

.rounded-4xl {
    border-radius: 2rem;
}

.violet {
    color: #615DE2;
}

.medium-violet {
    color: #5273E6;
}

.bright-violet {
    color: #7141DD;
}

.light-blue {
    color: #DEECFF;
}

.light-blue-500 {
    color: #37C1FD;
}

.light-blue-700 {
    color: #0369A1;
}

.bg-blue-color {
    background: #4BC9FF;
}

.bg-darkblue-color {
    background: #369EEE;
}

.bg-violet-color {
    background: #5273E6;
}

.bg-darkviolet-color {
    background: #7141DD;
}

.blue-300 {
    color: #93C5FD;
}

.gray-50 {
    color: #F2F2F5;
}

.gray-300 { 
    color: #D1D5DB;
}

.gray-400 {
    color: #4E4F6F;
}

.gray-500 {
    color: #6B7280;
}

.gray-600 {
    color: #4B5563;
}

.gray-700 {
    color: #374151;
}

.custom-shadow {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.23);
}

.slider-process .slick-arrow {
    position: absolute;
    bottom: -70px;
    top: inherit;
    cursor: pointer;
}

.slider-process .slick-slide {
    outline: none;
    margin-right: 50px;
}

.slider-process .arrow-prev {
    left: 0;
}

.slider-process .arrow-next {
    right: 0;
}

.pagination .active {
    background: -webkit-linear-gradient(245.31deg, #00C2FF -5.97%, #7C32DA 139.97%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.pagination .active::before {
    content: ' ';
    position: absolute;
    height: 2px;
    background: linear-gradient(245.31deg, #00C2FF -5.97%, #7C32DA 139.97%);
    top: -17px;
    left: -15px;
    right: -15px;
    margin: 0 auto;
}

.student-slider-nav {
    max-height: 800px;
}

.student-slider-nav::before {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    background: linear-gradient(245.31deg, #00C2FF -5.97%, #7C32DA 139.97%);
    bottom: 250px;
    top: 60px;
    bottom: 250px;
}

.student-slider-nav .slick-center img {
    margin-bottom: 300px;
}

.student-slider-nav .slick-slide {
    margin: 0 3rem;
}

.student-slider .slick-list {
    overflow: visible;
}

.student-slider {
    margin-top: -200px;
}

.student-slider-nav .slick-slide,
.student-slider .slick-slide{
    outline: none;
}

.student-slider .slick-slide svg {
    display: none;
}

.student-slider .slick-slide.slick-current svg {
    display: block;
}

.student-slider-nav .slick-center {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    transform: scale(1.25);    
}

.student-slider-nav .slick-track {
    padding: 100px 0 0 0;
}

.student-slider .slick-arrow {
    position: absolute;
    cursor: pointer;
}

.student-slider .arrow-prev {
    top: 45%;
    left: 5%;
    z-index: 100;
}

.student-slider .arrow-next {
    top: 45%;
    right: 5%;
    z-index: 100;
}

.choose-role .role-area {
    width: 100%;
    padding: 90% 0 0 0;
}

embed{
    max-width: 100%;
    pointer-events: none;
}

@keyframes rotate15 {
    0% { transform: rotate(15deg); }
    100% { transform: rotate(0); }
}

@keyframes slideTop {
    0%   {bottom: -1000px;}
    100% {bottom :0;}
} 


@keyframes slideLeft {
    0%   {left: -100%;}
    100% {left: 0;}
} 

@keyframes slideRight {
    0%   {right: -100%;}
    100% {right:  0;}
} 

@keyframes c-dashed-line-path {
	from {
		stroke-dashoffset: 1500;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes opacity-anim {
	from {
		opacity: 0
	}
	to {
		opacity: 1;
	}
}

@keyframes anchor-anim {
    from {
		bottom: 0;
	}
	to {
		bottom: -15px;
	}
}

@keyframes circle1 {
    0%   {left: 10%; top: 10%}
    50%  {left: -50%; top: -400px}
    100% {left:  25%; top: -100px;}
} 

@keyframes circle2 {
    0%   {right: 10%; top: 10%}
    50%  {right: -50%; top: -400px}
    100% {right:  10%; top: -80px}
} 

@keyframes circle3 {
    0%   {left: 10%; bottom: 10%}
    50%  {left: -50%; bottom: -400px}
    100% {left:  33%; bottom: -144px}
} 

@keyframes circle4 {
    0%   {right: 10%; bottom: 10%}
    50%  {right: -50%; bottom: -400px}
    100% {right: 33%; bottom: -64px}
} 


@keyframes world-animate1 {
    0% {top: -500px; left:-1000px}
    100%{top: -24px; left: 40px}
}

@keyframes world-animate2 {
    0% {bottom: -500px; right: -1000px;}
    100%{bottom: 20px; right: -28px}
}

.world-animate1 {
    top: -24px;
    left: 40px;
}

.world-animate2 {
    bottom: 20px;
    right: -28px;
}

.active .world-animate1 {
    animation: world-animate1 2s;
} 

.active .world-animate2 {
    animation: world-animate2 2s;
} 

.anchor {
    position: relative;
    animation: anchor-anim 2s infinite alternate;
}

.circle {
    z-index: -1;
}

.circle1{
    left: 25%;
}

.circle2{
    right: 10%;
}

.circle3{
    left:  33%; 
}

.circle4{
    right: 33%;
}

.active .circle1 {
    animation: circle1 ease-in-out 3s;
}

.active .circle2 {
    animation: circle2 ease-in-out 3s;
}

.active .circle3{
    animation: circle3 ease-in-out 3s;
}

.active .circle4{
    animation: circle4 ease-in-out 3s;
}

.active .why1 {
    position: relative;
    animation: slideRight 2s;
}

.active .why2 {
    position: relative;
    animation: slideRight 3s;
}

.active .why3 {
    position: relative;
    animation: slideRight 4s;
}

.active .topic1 {
    position: relative;
    animation: slideLeft 2s;
}

.active .topic2 {
    position: relative;
    animation: slideLeft 2s;
}

.active .topic3 {
    position: relative;
    animation: slideLeft 3s;
}

.active .topic4 {
    position: relative;
    animation: slideLeft 4s;
}

.active .topic5 {
    position: relative;
    animation: slideLeft 4s;
}

.active .topic6 {
    position: relative;
    animation: slideLeft 4s;
}

.active .topic7 {
    position: relative;
    animation: slideLeft 4s;
}

.active .topic8 {
    position: relative;
    animation: slideLeft 4s;
}

.active .ask1, .active .ask2{
    animation: opacity-anim 1s;
}

.active .ask3, .active .ask4, .active .believe-animate1{
    animation: opacity-anim 3s;
}

.active .ask5, .active .ask6, .active .believe-animate2{
    animation: opacity-anim 5s;
}

.active .ask7, .active .ask8, .active .believe-animate3{
    animation: opacity-anim 7s;
}

.active .core-animate1 {
    position: relative;
    animation: slideRight 1s;
}

.active .core-animate2 {
    position: relative;
    animation: slideRight 2s;
}

.active .core-animate3 {
    position: relative;
    animation: slideRight 3s;
}

.active .core-animate4 {
    position: relative;
    animation: slideRight 4s;
}

.active .core-animate5 {
    position: relative;
    animation: slideRight 5s;
}

.active .core-animate6 {
    position: relative;
    animation: slideRight 6s;
}

.r-15 {
    animation: rotate15 2s;
}

.customers-animate1.active > div{
    position: relative;
    animation: slideLeft 3s;
}

.customers-animate2.active > div{
    position: relative;
    animation: slideRight 3s;
}

.how-animate1.active .number-area{
    position: relative;
    animation: slideLeft 3s;
}

.how-animate2.active .number-area{
    position: relative;
    animation: slideRight 3s;
}

.how-animate3.active .number-area{
    position: relative;
    animation: slideLeft 3s;
}

.how-animate4.active .number-area{
    position: relative;
    animation: slideRight 3s;
}

.description-section .descr1.active,
.description-section .descr3.active{
    position: relative;
    animation: slideLeft 3s;
}

.description-section .descr2.active{
    position: relative;
    animation: slideRight 3s;
}

.c-dashed-line__path {
	fill: none;
	stroke: #93C5FD;
    opacity: 0.8;
	stroke-dasharray: 1500; /* this is the entire length of the line */
	stroke-dashoffset: 0; /* this is the entire length of the line */
	stroke-width: 1;
}

.active .c-dashed-line__path {
	animation: c-dashed-line-path 8s;
}

.c-dashed-line__dash {
	fill: none;
	stroke: #FFFFFF; /* this must match the background color */
	stroke-dasharray: 2 4; /* draws a 10px dash line with a 16px gap between */
	stroke-width: 2; /* make the dashed line slightly bigger than the one it's covering */
}

.active .decor1 path {
    animation-fill-mode: forwards;
}

.benefit-slider .slick-list {
    margin-left: 0;
    padding: 40px 0;
}

.benefit-slider .item {
    margin: 0 20px;
    outline: none;
}

.benefit-slider .slick-dots {
    position: relative;
    padding: 0 24px;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.benefit-slider .slick-dots::before {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: 30%;
    background: #DBEAFE;
}

.benefit-slider .slick-dots li {
    width: 70px;
}

.benefit-slider .slick-dots li button {
    height: 12px;
    border-radius: 16px;
    width: 100%;
}

.benefit-slider .slick-dots li.slick-active button {
    background: linear-gradient(180deg, #00F2FF -86.33%, #7C32DA 115.62%);
}

.benefit-slider .slick-dots li button::before {
    content: ' ';
}

@media screen and (max-width: 1500px){
    .student-slider-nav .slick-slide {
        margin: 0 2rem;
    }
}

@media screen and (max-width: 1300px){
    .student-slider-nav .slick-center img {
        margin-bottom: 200px;
    }
    .student-slider-nav::before {
        bottom: 150px;
    }
    .student-slider {
        margin-top: -100px;
    }
}

@media screen and (max-width: 1023px){
    .choose-role .role-area {
        padding: 0;
    }
}

@media screen and (max-width: 650px){
    .student-slider-nav .slick-slide {
        margin: 0 4rem;
    }
}

@media screen and (max-width: 500px){
    .student-slider-nav .slick-slide {
        margin: 0 2rem;
    }

    .student-slider-nav .slick-center img {
        margin-bottom: 200px;
    }

    .student-slider-nav::before {
        bottom: 180px;
        top: 80px
    }

    .student-slider .arrow-prev {
        top: 2%;
        left: 2%;
    }

    .student-slider .arrow-next {
        top: 2%;
        right: 2%;
    }

    .student-slider .slick-slide.slick-current svg {
        display: none;
    }
}


@media screen and (min-width: 768px){
    .slider-process .arrow-next {
        left: 100px;
        right: inherit;
    }

    .slider-process {
        margin-right: -200px;
    }

    .slider-process .slick-arrow {
        position: absolute;
        bottom: -100px;
    }
    .slider-process .slick-slide {
        margin-right: 100px;
    }
}

@media screen and (min-width: 450px){
    .rounded-sm-4xl {
        border-radius: 2rem;
    }
}