.how-it-works .card-container{box-sizing:border-box;flex-direction:column;gap:20px;max-width:1200px;margin:0 auto;padding:0 15px;display:flex}.how-it-works .card{box-sizing:border-box;background-color:#fff;border:2px solid #ddd;border-radius:8px;flex-direction:column;gap:15px;width:100%;padding:20px;transition:transform .3s,box-shadow .3s,background-color .3s;display:flex;box-shadow:0 4px 6px #0000001a}.card.student-card{border-width:2px!important;border-color:var(--second-color-hero-end)!important}.card.teacher-card{border-width:2px!important;border-color:#03f!important}.how-it-works .card:hover{transform:translateY(-5px);box-shadow:0 12px 20px #0003}.how-it-works .card h2{color:#03f;margin-bottom:10px;font-size:1.5rem;transition:color .3s}.student-card:hover h2,.student-card:hover .step-title{color:var(--second-color-hero-end)!important}.teacher-card:hover h2,.teacher-card:hover .step-title{color:#03f!important}.stepper{flex-direction:column;gap:30px;padding-left:10px;display:flex;position:relative}.step{align-items:flex-start;gap:20px;display:flex;position:relative}.step-number,.step-number-second-hero{z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.125rem;display:flex;position:relative}.step-number{color:#fff;background-color:#03f;font-size:1.125rem!important}.step-number-second-hero{background-color:var(--second-color-hero-end);color:#fff;font-size:1.125rem!important}.step-content{flex:1}.step-title{margin-bottom:5px;font-weight:700;font-size:1.125rem!important}.step-description{color:#555;font-size:1rem!important}.how-it-works-title{text-wrap:nowrap}@media (width>=768px){.how-it-works .card-container{flex-direction:row;gap:40px}.how-it-works .card{flex:1;max-width:48%}.step-number,.step-number-second-hero{width:45px;height:45px;font-size:20px}.step-title{font-size:1.5rem}.step-description{font-size:1.1rem}}@media (width<=1200px){.step-number,.step-number-second-hero{width:35px;height:35px;font-size:16px}.step-title{font-size:1.1rem}.step-description{font-size:.9rem}}@media (width<=550px){.how-it-works-title{text-wrap:wrap!important}.gradient-border{margin:0!important}.how-it-works .card-container{padding:0 10px}.how-it-works .card{padding:15px}.step-number,.step-number-second-hero{width:30px;height:30px;font-size:14px}.step-title{font-size:1rem}.step-description{font-size:.85rem}.cta-section{height:auto;padding:20px 0}}@media screen and (width<=400px){.cta-section a{width:87%!important}}.gradient-border{padding-top:20px;position:relative}.gradient-border:before{content:"";z-index:1;background:linear-gradient(90deg,#fff,#f30c,#03fc,#fff);border-radius:10px;height:5px;animation:5s linear infinite border-animation;position:absolute;top:0;left:0;right:0;-webkit-mask-image:linear-gradient(90deg,#0000,#fff 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#fff 10% 90%,#0000)}@keyframes border-animation{0%{background-position:0}50%{background-position:100%}to{background-position:0}}.bg-second-hero{background:var(--second-color-hero)!important;background-color:var(--second-color-hero)!important;color:var(--second-color-text)!important}.bg-blue{background-color:#03f!important}button.bg-second-hero,a.bg-second-hero,button.bg-blue,a.bg-blue{transition:all .3s;position:relative;overflow:hidden}button.bg-second-hero:hover,a.bg-second-hero:hover{background-color:var(--second-color-hero-hover)!important;box-shadow:0 0 15px 5px #0003!important}button.bg-blue:hover,a.bg-blue:hover{background-color:#0000c8!important;box-shadow:0 0 15px 5px #0003!important}.cta-section{height:525px}.cta-section a{width:220px!important}.accordion-item{border-radius:8px;overflow:hidden;box-shadow:0 4px 10px #0000001a}@media (width<=768px){.accordion-button{font-size:.9rem}}
