:root {
    --primary: #1950d1;
}

.btn {
    --bs-btn-border-radius: 50px;
    --bs-btn-padding-x: 2.4rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-weight: bold;
    --bs-btn-font-size: 1.1rem;
}

.btn-primary {
    --bs-btn-bg: #1950d1;
    --bs-btn-border-color: #1950d1;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-bg: #1950d1;
    --bs-btn-disabled-border-color: #1950d1;
}

.card {
    --bs-card-cap-bg: #EAF1FF;
    --bs-card-border-color: #EAF1FF;
}

body, html {
    font-family: "Open Sans", sans-serif;
}

header {border-bottom:1px solid rgba(0,0,0,.1);background-color:#fff;}
header .navbar-brand img {max-width:200px;}

.hero {text-align:center;margin:120px 0 0;background-image: linear-gradient(180deg, rgba(26, 94, 255, 0) 10%, rgba(26, 94, 255, 0.15) 30%, rgba(26, 94, 255, 0.2) 100%);}
.hero h1 {font-size:70px;font-weight:900;color:var(--primary);line-height:1.1;letter-spacing:-2px;margin-bottom:80px;}
.hero p {font-size:20px;text-transform:uppercase;font-weight:600;letter-spacing:4px;}
.hero .details {flex-wrap:wrap;display:flex;max-width:100%;width:1100px;margin:0 auto 70px;text-align:left;align-items:center;}
.hero .details .price {flex:1 0 320px;}
.hero .details .price strong {font-size:50px;font-weight:900;}
.hero .details .price s {font-size:22px;}
.hero .details .price .lowest-price {font-size:13px;}
.hero .details .duration {flex:0 0 160px;}
.hero .details .level {flex:0 0 220px;}
.hero .details .buy {flex:0 0 200px;text-align:right;}
.hero .details strong {font-size:23px;}

@media (max-width: 991.98px) {
    .hero {margin-top:90px;}
    .hero h1 {margin-bottom:40px;font-size:60px;}
    .hero .details .price {flex:1 0 50%;order:1;}
    .hero .details .buy {flex:1 0 50%;order:2;}
    .hero .details .duration {flex:0 0 170px;order:3;padding-top:30px}
    .hero .details .level {flex:0 0 200px;order:4;padding-top:30px}
}
@media (max-width: 575.98px) {
    .hero h1 {font-size:50px;}
    .hero .details .price,
    .hero .details .buy,
    .hero .details .duration,
    .hero .details .level {flex:0 0 100%;text-align:center;padding-top:30px;}
}
@media (max-width: 400px) {
    .hero h1 {font-size:40px;}
    .hero .details .price strong {font-size:42px;}
}

.player {display:block;max-width:100%;width:1100px;margin:0 auto 70px;position:relative;}
.player img {display:inline-block;max-width:100%;border-radius:10px;box-shadow:0 5px 10px rgba(0,0,0,.2);}
.player.ready-to-play:after {display:block;content:"";left:0;top:0;right:0;bottom:0;position:absolute;z-index:5;background-color:rgba(0,0,0,.4);opacity:0;transition:.12s all;border-radius:10px;}
.player .player-button {display:block;position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%, -50%);padding-left:5px;text-align:center;width:120px;height:120px;line-height:120px;font-size:50px;color:var(--primary);background-color:#fff;border-radius:50%;box-shadow:0 7px 13px rgba(0,0,0,.3);}
.player:hover {cursor:pointer;}
.player.ready-to-play:hover:after {opacity:1;}
.player iframe {border-radius:10px;z-index:10;}
.player .player-loader {position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);font-size:80px;}

@media (max-width: 991.98px) {
    .player .player-button {width:90px;height:90px;line-height:90px;font-size:40px;}
}
@media (max-width: 575.98px) {
    .player {margin-bottom:30px;}
}
@media (max-width: 400px) {
    .player {margin-bottom:20px;}
}

.key-features {padding-bottom:30px;background-image: linear-gradient(180deg, rgba(26, 94, 255, 0.2) 0%, rgba(26, 94, 255, 0.15) 50%, rgba(26, 94, 255, 0) 100%);}
.key-features .inner {max-width:100%;width:1130px;margin:0 auto 70px;}
.key-features h2 {line-height:1.1;letter-spacing:-1px;font-weight:bold;font-size:35px;margin-bottom:15px;}
.key-features ul {padding-left:3rem;width:260px;max-width:100%;margin:10px auto;}
.key-features ul,
.key-features ul li {list-style:none;}
.key-features ul li {position:relative;margin-bottom:8px;}
.key-features ul li:before {content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:bold;display:block;position:absolute;left:-25px;top:50%;transform:translateY(-50%);color:var(--primary)}

.toc {margin-bottom:25px;}
.toc .toc-headline {color:#000;font-size:20px;font-weight:bold;background-color:#EAF1FF;padding:8px 15px;margin-bottom:2px;border-radius:5px 5px 0 0;}
.toc .toc-item {padding:6px 15px;background-color:#f9fbff;margin-bottom:2px;}

.call-to-action-middle {padding:120px 0;background-image:linear-gradient(180deg, rgba(26, 94, 255, 0) 0%, rgba(26, 94, 255, 0.15) 50%, rgba(26, 94, 255, 0.2) 100%);}
.call-to-action-middle .inner {padding:35px 50px;border-radius:20px;background-color:#c5d8ff;color:var(--primary);border:2px solid var(--primary)}
.call-to-action-middle .inner span {font-size:30px;font-weight:900;}
.call-to-action-middle .inner .btn {padding:1rem 3.5rem;font-size:20px;}

@media (max-width: 991.98px) {
    .call-to-action-middle {padding:70px 0;}
}

.example-lesson {background-color:rgba(26, 94, 255, 0.2);}
.example-lesson h2 {font-size:40px;font-weight:900;}
.example-lesson h2 small {display:block;font-weight:normal;font-size:30px;margin-top:10px;}

footer {background-color:#1E1E2C;padding:80px 0;color: #fff;}
footer img {display:inline-block;max-width:100%;width:350px;}
footer p a {display:inline-block;color:#fff;text-decoration:none;padding:2px 15px;position:relative;}
footer p a:after {content:"";display:block;width:1px;height:14px;background-color:#fff;position:absolute;right:-3px;top:50%;transform:translateY(-50%);}
footer p a:last-child:after {display:none}
footer p a:hover {font-weight:bold;}

@media (max-width: 991.98px) {
    footer {padding:40px 0}
}