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

:root{
   --main-color:#7440ab;
   --main-dark:#4c2378;
   --accent-color:#f0a93a;
   --accent-soft:#fff0d8;
   --red:#e74c3c;
   --oragen:#f0a93a;
   --white:#fff;
   --black:#251b36;
   --light-color:#6f6780;
   --light-bg:#f6f1fb;
   --panel-bg:#fbf8ff;
   --border:.1rem solid rgba(102,67,142,.12);
   --box-shadow:0 1.2rem 3rem rgba(66, 33, 104, .08);
}
.professional-profile .box {
   padding: 15px;
   border: 1px solid #ddd;
   margin-bottom: 15px;
   border-radius: 5px;
   background: #f9f9f9;
}
.professional-profile .box h3 {
   font-size: 20px;
   color: #333;
   margin-bottom: 8px;
}
.professional-profile .box p {
   font-size: 16px;
   color: #555;
}

*{
   font-family: 'Nunito', sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   outline: none; border: none;
   text-decoration: none;
}

*::selection{
   background-color: var(--main-color);
   color: #fff;
}

*::-webkit-scrollbar{
   height: .5rem;
   width: 1rem;
}

*::-webkit-scrollbar-track{
   background-color: transparent;
}

*::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background:
      radial-gradient(circle at top right, rgba(240,169,58,.12), transparent 22%),
      radial-gradient(circle at top left, rgba(116,64,171,.09), transparent 18%),
      linear-gradient(180deg, #f8f4fc 0%, #f5f0fa 48%, #f7f2fb 100%);
   padding-left: 30rem;
   color: var(--black);
}

body.dark{
   --white:#222;
   --black:#fff;
   --light-color:#aaa;
   --light-bg:#333;
   --border:.1rem solid rgba(255,255,255,.2);
}

body.active{
   padding-left: 0;
}

section{
   padding:2rem;
   max-width: 1200px;
   margin: 0 auto;
}

.btn,
.option-btn,
.delete-btn,
.inline-btn,
.inline-option-btn,
.inline-delete-btn{
   border-radius: 1.2rem;
   padding: 1.15rem 2.5rem;
   font-size: 1.65rem;
   color: #fff;
   margin-top: 1rem;
   text-transform: capitalize;
   cursor: pointer;
   text-align: center;
   font-weight: 700;
   letter-spacing: .01rem;
   box-shadow: 0 .9rem 2rem rgba(56, 28, 90, .14);
   transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.btn,
.option-btn,
.delete-btn{
   display: block;
   width: 100%;
}

.inline-btn,
.inline-option-btn,
.inline-delete-btn{
   display: inline-block;
}

.btn,
.inline-btn{
   background-color: var(--main-color);
}

.option-btn,
.inline-option-btn{
   background-color: var(--oragen);
}

.delete-btn,
.inline-delete-btn{
   background-color: var(--red);
}

.btn:hover,
.option-btn:hover,
.delete-btn:hover,
.inline-btn:hover,
.inline-option-btn:hover,
.inline-delete-btn:hover{
   background-color: var(--black);
   color: var(--white);
   transform: translateY(-.2rem);
   box-shadow: 0 1.3rem 2.6rem rgba(56, 28, 90, .18);
}

.flex-btn{
   display:flex;
   gap: 1rem;
}

.message{
   position: sticky;
   top:0;
   margin:0 auto;
   background-color: var(--light-bg);
   padding:2rem;
   display: flex;
   align-items: center;
   gap:1rem;
   justify-content: space-between;
}

.message.form{
   max-width: 1200px;
   margin: 0 auto;
   background-color: var(--white);
   top: 2rem;
   border-radius: .5rem;
}

.message span{
   font-size: 2rem;
   color:var(--black);
}

.message i{
   font-size: 2.5rem;
   color:var(--red);
   cursor: pointer;
   transition: .2s linear;
}

.message i:hover{
   transform: rotate(90deg);
}

.empty{
   background-color: var(--white);
   border-radius: 1.4rem;
   padding: 1.8rem;
   text-align: center;
   width: 100%;
   font-size: 2rem;
   color: var(--red);
   border: 1px solid rgba(231,76,60,.12);
   box-shadow: var(--box-shadow);
}

.heading{
   padding-bottom: 1.8rem;
   border-bottom: var(--border);
   font-size: 2.8rem;
   color: var(--black);
   text-transform: capitalize;
   margin-bottom: 3rem;
   letter-spacing: -.02rem;
}

.home-hero{
   padding-top: 1.6rem;
}

.hero-shell{
   display: grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(28rem, .9fr);
   gap: 1.6rem;
   align-items: stretch;
}

.hero-copy,
.hero-panel{
   position: relative;
   overflow: hidden;
   border-radius: 2.4rem;
   border: 1px solid rgba(116,64,171,.10);
   box-shadow: var(--box-shadow);
}

.hero-copy{
   padding: 2.6rem 2.6rem;
   background:
      radial-gradient(circle at top right, rgba(240,169,58,.20), transparent 26%),
      linear-gradient(145deg, rgba(116,64,171,.10), rgba(255,255,255,.98) 42%, rgba(252,246,255,1) 100%);
   animation: heroSoftRise .8s ease both;
}

.hero-copy::after{
   content:'';
   position:absolute;
   right:-4rem;
   top:-4rem;
   width:13rem;
   height:13rem;
   border-radius:50%;
   background:rgba(116,64,171,.08);
   animation: heroOrbFloat 7s ease-in-out infinite;
}

.hero-kicker,
.home-section-intro span{
   display:inline-flex;
   align-items:center;
   gap:.7rem;
   padding:.8rem 1.3rem;
   border-radius:999px;
   background:rgba(116,64,171,.10);
   color:var(--main-color);
   font-size:1.25rem;
   font-weight:800;
   text-transform:uppercase;
   letter-spacing:.08rem;
}

.hero-copy h1{
   font-size: clamp(3rem, 3.6vw, 4.4rem);
   line-height: 1.08;
   letter-spacing: -.04rem;
   color: var(--main-dark);
   margin: 1.3rem 0 1rem;
   max-width: 60rem;
}

.hero-copy p{
   font-size: 1.6rem;
   line-height: 1.75;
   color: #5f5870;
   max-width: 56rem;
}

.hero-actions{
   display:flex;
   flex-wrap:wrap;
   gap:.9rem;
   margin-top: 1.5rem;
}

.hero-pills{
   display:flex;
   flex-wrap:wrap;
   gap:.8rem;
   margin-top:1.6rem;
}

.hero-pills span{
   display:inline-flex;
   align-items:center;
   gap:.7rem;
   padding:.8rem 1.1rem;
   border-radius:1rem;
   background:rgba(255,255,255,.84);
   border:1px solid rgba(116,64,171,.08);
   color:#5c5071;
   font-size:1.25rem;
   font-weight:700;
   transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.hero-pills span:hover{
   transform: translateY(-.15rem);
   box-shadow: 0 .7rem 1.4rem rgba(66,33,104,.10);
   background: rgba(255,255,255,.96);
}

.hero-pills i{
   color: var(--main-color);
}

.hero-panel{
   padding: 1.8rem;
   background:
      radial-gradient(circle at top left, rgba(116,64,171,.10), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fcf8ff 100%);
   display:flex;
   flex-direction:column;
   gap:1rem;
   animation: heroSoftRise .95s ease both;
}

.hero-stats{
   display:grid;
   grid-template-columns: repeat(3, 1fr);
   gap:.8rem;
}

.stat-card{
   padding:1.2rem 1rem;
   border-radius:1.2rem;
   background:linear-gradient(180deg, rgba(244,235,252,.92), rgba(255,255,255,.96));
   border:1px solid rgba(116,64,171,.08);
   text-align:center;
   transition: transform .18s ease, box-shadow .18s ease;
}

.stat-card:hover{
   transform: translateY(-.2rem);
   box-shadow: 0 .9rem 1.8rem rgba(66,33,104,.10);
}

.stat-card strong{
   display:block;
   font-size:2.1rem;
   color:var(--main-dark);
   margin-bottom:.3rem;
}

.stat-card span{
   font-size:1.15rem;
   color:#6c6580;
   line-height:1.4;
}

.hero-glance{
   padding:1.6rem;
   border-radius:1.4rem;
   background:linear-gradient(135deg, rgba(76,35,120,.96), rgba(116,64,171,.96));
   color:#fff;
   min-height:100%;
   position: relative;
   overflow: hidden;
}

.hero-glance::after{
   content:'';
   position:absolute;
   right:-2.2rem;
   bottom:-2.6rem;
   width:8rem;
   height:8rem;
   border-radius:50%;
   background:rgba(255,255,255,.08);
   animation: heroOrbFloat 8s ease-in-out infinite;
}

.hero-glance h3{
   font-size:1.85rem;
   margin-bottom:1rem;
}

.hero-glance ul{
   list-style:none;
   display:grid;
   gap:1rem;
}

.hero-glance li{
   position:relative;
   padding-left:2rem;
   font-size:1.35rem;
   line-height:1.65;
   color:rgba(255,255,255,.92);
}

.hero-glance li::before{
   content:'';
   position:absolute;
   left:0;
   top:.7rem;
   width:.8rem;
   height:.8rem;
   border-radius:50%;
   background:var(--accent-color);
   box-shadow:0 0 0 .45rem rgba(255,255,255,.08);
}

.home-section-intro{
   margin-bottom: 2rem;
}

.home-section-intro .heading{
   margin: 1.3rem 0 1rem;
}

.home-section-intro p{
   font-size:1.65rem;
   line-height:1.8;
   color:#655d77;
   max-width:72rem;
}

@keyframes heroSoftRise{
   0%{ opacity: 0; transform: translateY(1.6rem); }
   100%{ opacity: 1; transform: translateY(0); }
}

@keyframes heroOrbFloat{
   0%,100%{ transform: translateY(0); }
   50%{ transform: translateY(-.8rem); }
}

.tutor-cta{
   position: relative;
   overflow: hidden;
   padding: 3.6rem 3.4rem;
   border-radius: 2.4rem;
   background:
      radial-gradient(circle at top right, rgba(255,214,102,.34), transparent 28%),
      radial-gradient(circle at bottom left, rgba(255,255,255,.14), transparent 22%),
      linear-gradient(135deg, #4c2378 0%, #7c44ad 50%, #f39c12 100%);
   border: 1px solid rgba(255,255,255,.16);
   box-shadow: 0 2rem 4.4rem rgba(92,44,145,.24);
   color: #fff;
   isolation: isolate;
   animation: tutorBannerIn .75s ease both;
}

.tutor-cta::before,
.tutor-cta::after{
   content: '';
   position: absolute;
   border-radius: 50%;
   background: rgba(255,255,255,.10);
   z-index: -1;
   animation: tutorFloat 6s ease-in-out infinite;
}

.tutor-cta::before{
   width: 22rem;
   height: 22rem;
   top: -7rem;
   right: -6rem;
}

.tutor-cta::after{
   width: 13rem;
   height: 13rem;
   bottom: -3rem;
   left: -2rem;
   animation-delay: 1.2s;
}

.tutor-cta__wrap::after{
   content: '';
   justify-self: end;
   width: 2rem;
   height: 2rem;
   border-radius: .6rem;
   background:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03)),
      rgba(255,255,255,.06);
   border: 1px solid rgba(255,255,255,.18);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
   transform: rotate(6deg);
   margin-right: 0;
   animation: tutorCardPulse 5.2s ease-in-out infinite;
}

.tutor-cta__wrap{
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) auto;
   gap: 2.4rem;
   align-items: center;
}

.tutor-cta__eyebrow{
   display: inline-flex;
   align-items: center;
   gap: .8rem;
   padding: .95rem 1.5rem;
   border-radius: 999px;
   background: rgba(255,255,255,.16);
   font-size: 1.45rem;
   font-weight: 700;
   letter-spacing: .1rem;
   text-transform: uppercase;
   margin-bottom: 1.8rem;
   backdrop-filter: blur(8px);
}

.tutor-cta h3{
   font-size: clamp(3.4rem, 4vw, 5rem);
   line-height: 1.08;
   margin-bottom: 1.3rem;
   color: #fff;
   text-shadow: 0 .6rem 1.8rem rgba(37, 14, 61, .22);
}

.tutor-cta p{
   max-width: 66rem;
   font-size: 1.85rem;
   line-height: 1.85;
   color: rgba(255,255,255,.9);
}

.tutor-cta__action{
   display: flex;
   justify-content: flex-end;
}

.tutor-cta__action .inline-btn{
   margin-top: 0;
   padding: 1.5rem 2.8rem;
   border-radius: 999px;
   background: #fff;
   color: #5f2f90;
   font-weight: 800;
   font-size: 1.7rem;
   box-shadow: 0 1rem 2rem rgba(38,15,61,.18);
   transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.tutor-cta__action .inline-btn:hover{
   transform: translateY(-3px) scale(1.03);
   background: #2c1b43;
   color: #fff;
   box-shadow: 0 1.6rem 2.8rem rgba(38,15,61,.26);
}

@keyframes tutorFloat{
   0%,100%{ transform: translate3d(0,0,0) scale(1); }
   50%{ transform: translate3d(0,1.2rem,0) scale(1.04); }
}

@keyframes tutorBannerIn{
   0%{ opacity: 0; transform: translateY(2rem) scale(.985); }
   100%{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tutorCardPulse{
   0%,100%{ transform: rotate(6deg) translateY(0); }
   50%{ transform: rotate(5deg) translateY(-.12rem); }
}

.header{
   background: rgba(255,255,255,.88);
   border-bottom: 1px solid rgba(102,67,142,.10);
   position: sticky;
   top: 0; left: 0; right: 0;
   z-index: 1000;
   backdrop-filter: blur(12px);
   box-shadow: 0 .8rem 2rem rgba(68, 34, 106, .05);
}

.header .flex{
   padding: 1.5rem 2rem;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.header .flex .logo{
   display:flex;
   align-items:center;
   justify-content:center;
   width:5.6rem;
   height:5.6rem;
   font-size:0 !important;
   color: var(--main-dark);
   font-weight: bolder;
   flex: 0 0 auto;
}

.header .flex .logo .brand-logo{
   width:100% !important;
   height:100% !important;
   object-fit:cover;
   border-radius:1rem;
   border:1px solid rgba(116,64,171,.14);
   box-shadow:0 .3rem .9rem rgba(66,33,104,.08);
   background:#fff;
   flex-shrink:0;
}

.header .flex .logo span{
   display:none;
}

@media (max-width: 768px){
   .header .flex .logo{
      width:4.6rem;
      height:4.6rem;
   }

   .header .flex .logo .brand-logo{
      width:100% !important;
      height:100% !important;
   }
}

.header .flex .search-form{
   width: 50rem;
   border-radius: 1.4rem;
   display: flex;
   align-items: center;
   gap: 2rem;
   padding: 1.35rem 1.8rem;
   background-color: rgba(246,241,251,.95);
   border: 1px solid rgba(116,64,171,.10);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.header .flex .search-form input{
   width: 100%;
   background:none;
   font-size: 2rem;
   color: var(--black);
}

.header .flex .search-form button{
   font-size: 2rem;
   color: var(--black);
   cursor: pointer;
   background: none;
}

.header .flex .search-form button:hover{
   color: var(--main-color);
}

.header .flex .icons div{
   font-size: 2rem;
   color: var(--black);
   border-radius: 1rem;
   height: 4.5rem;
   cursor: pointer;
   width: 4.5rem;
   line-height: 4.4rem;
   background-color: rgba(246,241,251,.96);
   text-align: center;
   margin-left: .5rem;
   border: 1px solid rgba(116,64,171,.08);
}

.header .flex .icons div:hover{
   background-color: var(--black);
   color:var(--white);
}

#search-btn{
   display: none;
}

.header .flex .profile{
   position: absolute;
   top: 120%; right: 2rem;
   background-color: var(--white);
   border-radius: 1.6rem;
   padding: 2rem;
   text-align: center;
   width: 30rem;
   transform: scale(0);
   transform-origin: top right;
   border: 1px solid rgba(116,64,171,.10);
   box-shadow: 0 1.6rem 3.2rem rgba(52,24,86,.12);
}

.header .flex .profile.active{
   transform: scale(1);
   transition: .2s linear;
}

.header .flex .profile img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.header .flex .profile h3{
   font-size: 2rem;
   color: var(--black);
}

.header .flex .profile span{
   color: var(--light-color);
   font-size: 1.6rem;
}

.side-bar{
   position: fixed;
   top: 0; left: 0;
   height: 100vh;
   width: 30rem;
   background-color: var(--white);
   border-right: var(--border);
   z-index: 1200;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   box-shadow: 0 0 30px rgba(44,62,80,.08);
}

.side-bar .close-side-bar{
   text-align: right;
   padding: 2rem;
   padding-bottom: 0;
   display: none;
}

.side-bar .close-side-bar i{
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.4rem;
   font-size: 2.5rem;
   color: #fff;
   cursor: pointer;
   background-color: var(--red);
   text-align: center;
   border-radius: .5rem;
}

.side-bar .close-side-bar i:hover{
   background-color: var(--black);
}

.side-bar .profile{
   padding:3rem 2rem;
   text-align: center;
   flex-shrink: 0;
   border-bottom: 1px solid rgba(124,68,173,.10);
   background: linear-gradient(180deg, rgba(124,68,173,.06), rgba(255,255,255,.96));
}

.side-bar .profile img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
   border: .4rem solid rgba(255,255,255,.95);
   box-shadow: 0 .8rem 1.6rem rgba(44,62,80,.10);
}

.side-bar .profile h3{
   font-size: 2rem;
   color: var(--black);
}

.side-bar .profile span{
   color: var(--light-color);
   font-size: 1.6rem;
}

.side-bar .navbar{
   flex: 1;
   min-height: 0;
   max-height: calc(100vh - 24rem);
   overflow-y: auto;
   overflow-x: hidden;
   padding: 1.2rem 1rem 2rem;
   -webkit-overflow-scrolling: touch;
}

.side-bar .navbar::-webkit-scrollbar{
   width: .7rem;
}

.side-bar .navbar::-webkit-scrollbar-thumb{
   background: linear-gradient(180deg, var(--main-color), var(--oragen));
   border-radius: 99rem;
}

.side-bar .navbar a{
   display:flex;
   align-items:center;
   gap: 1.4rem;
   padding: 1.45rem 1.4rem;
   margin: .55rem 0;
   font-size: 1.75rem;
   border-radius: 1.2rem;
   transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.side-bar .navbar a i{
   color: var(--main-color);
   margin-right: 0;
   transition: .2s linear;
   width: 2rem;
   text-align: center;
   font-size: 1.8rem;
}

.side-bar .navbar a span{
   color: var(--light-color);
   font-weight: 600;
}

.side-bar .navbar a:hover{
   background: linear-gradient(90deg, rgba(124,68,173,.10), rgba(243,156,18,.08));
   transform: translateX(.35rem);
   box-shadow: 0 .8rem 1.6rem rgba(44,62,80,.06);
}

.side-bar .navbar a.active{
   background: linear-gradient(90deg, rgba(124,68,173,.18), rgba(243,156,18,.12));
   border-right: .4rem solid var(--main-color);
   box-shadow: inset 0 0 0 .1rem rgba(124,68,173,.08);
}

.side-bar .navbar a:hover i{
   margin-right: 0;
}

.side-bar .navbar a.active span,
.side-bar .navbar a.active i{
   color: var(--black);
}

.access-note{
   font-size: 1.4rem;
   color: var(--light-color);
   line-height: 1.6;
   margin-top: .8rem;
}

.summary-lock{
   background: linear-gradient(135deg, rgba(124,68,173,.08), rgba(243,156,18,.08));
   border: 1px dashed rgba(124,68,173,.35);
   border-radius: 1rem;
   padding: 1.4rem;
   margin-top: 1.2rem;
}

.summary-lock strong{
   color: var(--main-color);
}

.access-upsell{
   margin-top: 1.4rem;
   padding: 2rem;
   border-radius: 1.2rem;
   background:
      radial-gradient(circle at top right, rgba(243,156,18,.22), transparent 28%),
      radial-gradient(circle at bottom left, rgba(124,68,173,.14), transparent 32%),
      linear-gradient(135deg, #ffffff, #fbf7ff);
   border: 1px solid rgba(124,68,173,.14);
   box-shadow: 0 1.2rem 2.8rem rgba(52, 24, 86, .10);
}

.access-upsell .upsell-top{
   display:flex;
   gap:1.2rem;
   align-items:flex-start;
}

.access-upsell .upsell-icon{
   width:4.6rem;
   height:4.6rem;
   border-radius:1.4rem;
   background:linear-gradient(135deg, var(--main-color), var(--oragen));
   color:#fff;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:1.8rem;
   flex-shrink:0;
}

.access-upsell h4{
   font-size:1.9rem;
   color:var(--black);
   margin-bottom:.4rem;
}

.access-upsell p{
   font-size:1.5rem;
   color:#5f6470;
   line-height:1.7;
}

.access-upsell .upsell-points{
   display:grid;
   grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
   gap:.8rem;
   margin:1.4rem 0 0;
}

.access-upsell .upsell-points span{
   background:rgba(255,255,255,.92);
   border:1px solid rgba(124,68,173,.10);
   color:#5f3a87;
   border-radius:1rem;
   padding:.9rem 1rem;
   font-size:1.28rem;
   font-weight:600;
}

.access-upsell .upsell-actions{
   display:flex;
   flex-wrap:wrap;
   gap:1rem;
   margin-top:1.4rem;
}

.access-upsell .upsell-kicker{
   display:inline-flex;
   align-items:center;
   gap:.6rem;
   background:rgba(124,68,173,.08);
   color:var(--main-color);
   border-radius:999px;
   padding:.55rem .95rem;
   font-size:1.2rem;
   font-weight:700;
   margin-bottom:1rem;
   text-transform:uppercase;
   letter-spacing:.04rem;
}

.side-bar.active{
   left: -31rem;
}

.promo-video .video-container{
   position: relative;
   overflow: hidden;
   border-radius: 2rem;
   padding: 1rem;
   background:
      radial-gradient(circle at top right, rgba(240,169,58,.18), transparent 28%),
      linear-gradient(135deg, rgba(116,64,171,.10), rgba(255,255,255,.98));
   border: 1px solid rgba(116,64,171,.10);
   box-shadow: var(--box-shadow);
}

.promo-video .video-container iframe{
   width: 100%;
   min-height: 46rem;
   border-radius: 1.4rem;
}

.quick-select .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27.5rem, 1fr));
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.quick-select .box-container .box{
   border-radius: 1.6rem;
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   padding: 2.2rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.quick-select .box-container .box:hover{
   transform: translateY(-.35rem);
   border-color: rgba(116,64,171,.18);
   box-shadow: 0 1.8rem 3.4rem rgba(66,33,104,.12);
}

.quick-select .box-container .box .title{
   font-size: 2.1rem;
   color: var(--black);
}

.quick-select .box-container .box p{
   line-height: 1.5;
   padding-top: 1.5rem;
   color: var(--light-color);
   font-size: 1.8rem;
}

.quick-select .box-container .box p span{
   color: var(--main-color);
}

.quick-select .box-container .tutor{
   text-align: center;
}

.quick-select .box-container .tutor p{
   position: relative;
   min-height: 9rem;
   padding-bottom: 1rem;
   color: transparent;
}

.quick-select .box-container .tutor p::before{
   content:'Open your own learning space, publish lessons, and guide learners with practical skills in programming, QA, AI, digital marketing, and more.';
   position:absolute;
   inset: 1.5rem 0 1rem;
   color: var(--light-color);
   line-height: 1.7;
}

.quick-select .box-container .box .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   padding-top: 2rem;
}

.quick-select .box-container .box .flex a{
   padding: 1rem 1.5rem;
   border-radius: 1rem;
   font-size: 1.6rem;
   background-color: rgba(246,241,251,.96);
   border: 1px solid rgba(116,64,171,.08);
}

.quick-select .box-container .box .flex a i{
   margin-right: 1rem;
   color: var(--black);
}

.quick-select .box-container .box .flex a span{
   color: var(--light-color);
}

.quick-select .box-container .box .flex a:hover{
   background-color: var(--black);
}

.quick-select .box-container .box .flex a:hover i{
   color: var(--white);
}

.quick-select .box-container .box .flex a:hover span{
   color: var(--white)  ;
}

.courses .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.courses .box-container .box{
   border-radius: 1.6rem;
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   padding: 2rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.courses .box-container .box:hover{
   transform: translateY(-.35rem);
   box-shadow: 0 1.8rem 3.4rem rgba(66,33,104,.12);
   border-color: rgba(116,64,171,.18);
}

.courses .box-container .box .tutor{
   margin-bottom: 2rem;
   display: flex;
   align-items: center;
   gap: 2rem;
}

.courses .box-container .box .tutor img{
   width: 5rem;
   height: 5rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.courses .box-container .box .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.courses .box-container .box .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.courses .box-container .box .thumb{
   width: 100%;
   border-radius: 1.2rem;
   height: 20rem;
   object-fit: cover;
   margin-bottom: .6rem;
}

.courses .box-container .box .title{
   font-size: 2rem;
   color: var(--black);
   margin-top: .5rem;
   padding: .5rem 0;
}

.courses .more-btn{
   margin-top: 2rem;
   text-align: center;
}

.about .row{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.about .row .image{
   flex: 1 1 40rem;
}

.about .row .image img{
   width: 100%;
   height: 50rem;
}

.about .row .content{
   flex: 1 1 40rem;
   text-align: center;
}

.about .row .content h3{
   font-size: 2.5rem;
   color: var(--black);
}

.about .row .content p{
   line-height: 2;
   font-size: 1.8rem;
   color: var(--light-color);
   padding: 1rem 0;
}

.about .box-container{
   margin-top: 3rem;
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.about .box-container .box{
   flex: 1 1 25rem;
   display: flex;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   align-items: center;
   gap: 2rem;
}

.about .box-container .box i{
   font-size: 3rem;
   color: var(--black);
}

.about .box-container .box h3{
   color: var(--main-color);
   font-size: 2.5rem;
   margin-bottom: .2rem;
}

.about .box-container .box span{
   font-size: 1.6rem;
   color: var(--light-color);
}

.reviews .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.reviews .box-container .box{
   border-radius: .5rem;
   padding: 2rem;
   background-color: var(--white);
   padding-top: 1.5rem;
}

.reviews .box-container .box p{
   line-height: 2;
   font-size: 1.7rem;
   color: var(--light-color);
}

.reviews .box-container .box .user{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-top: 1.5rem;
}

.reviews .box-container .box .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.reviews .box-container .box .user h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.reviews .box-container .box .user .stars i{
   color: var(--main-color);
   font-size: 1.5rem;
}

.playlist .row{
   display: flex;
   align-items: center;
   gap:2.5rem;
   flex-wrap: wrap;
   padding: 2rem;
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   border-radius: 1.8rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
}

.playlist .row .col{
   flex: 1 1 40rem;
}

.playlist .row .col .save-list button{
   font-size: 2rem;
   border-radius: 1.2rem;
   background-color: rgba(246,241,251,.96);
   padding: 1.2rem 2.5rem;
   cursor: pointer;
   margin-bottom: 2rem;
   border: 1px solid rgba(116,64,171,.08);
}

.playlist .row .col .save-list button i{
   color: var(--black);
   margin-right: 1rem;
}

.playlist .row .col .save-list button span{
   color: var(--light-color);
}

.playlist .row .col .save-list button:hover{
   background-color: var(--black);
}

.playlist .row .col .save-list button:hover i{
   color: var(--white);
}

.playlist .row .col .save-list button:hover span{
   color: var(--white);
}

.playlist .row .col .thumb{
   position: relative;
   height: 30rem;
}

.playlist .row .col .thumb span{
   position: absolute;
   top: 1rem; left: 1rem;
   border-radius: .5rem;
   padding: .5rem 1.5rem;
   font-size: 2rem;
   color: #fff;
   background-color: rgba(0,0,0,.3);
}

.playlist .row .col .thumb img{
   width: 100%;
   height: 100%;
   border-radius: 1.2rem;
   object-fit: cover;
}

.playlist .row .col .tutor{
   display: flex;
   align-items: center;
   gap: 1.7rem;
}

.playlist .row .col .tutor img{
   height: 7rem;
   width: 7rem;
   border-radius: 50%;
   object-fit: cover;
}

.playlist .row .col .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.playlist .row .col .tutor span{
   color: var(--main-color);
   font-size: 1.5rem;
}

.playlist .row .col .details{
   padding-top: 1.5rem;
}

.playlist .row .col .details h3{
   font-size: 2rem;
   color: var(--black);
}

.playlist .row .col .details p{
   padding: 1rem 0;
   line-height: 2;
   color: var(--light-color);
   font-size: 1.7rem;
}

.playlist .row .col .details .date{
   font-size: 1.7rem; 
   padding-top: .5rem;
}

.playlist .row .col .details .date i{
   color: var(--main-color);
   margin-right: 1rem;
}

.playlist .row .col .details .date span{
   color: var(--light-color);
}

.videos-container .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.videos-container .box-container .box{
   position: relative;
   border-radius: 1.6rem;
   padding: 2rem;
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.videos-container .box-container .box:hover{
   transform: translateY(-.35rem);
   box-shadow: 0 1.8rem 3.4rem rgba(66,33,104,.12);
   border-color: rgba(116,64,171,.18);
}

.videos-container .box-container .box img{
   height: 20rem;
   width: 100%;
   border-radius: 1.2rem;
   object-fit: cover;
}

.videos-container .box-container .box i{
   position: absolute;
   top: 2rem; left: 2rem; right: 2rem;
   height: 20rem;
   background-color: rgba(0,0,0,.3);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 4rem;
   color: #fff;
   border-radius: 1.2rem;
   display: none;
}

.videos-container .box-container .box:hover i{
   display: flex;
}

.videos-container .box-container .box h3{
   font-size: 2rem;
   color: var(--black);
   margin-top: 1rem;
}

.videos-container .box-container .box:hover h3{
   color: var(--main-color);
}

.watch-video .video-details{
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   padding: 2rem;
   border-radius: 1.8rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
}

.watch-video .video-details .video{
   width: 100%;
   border-radius: 1.4rem;
   background: #000;
   height: 50rem;
}

.watch-video .video-details .title{
   font-size: 2rem;
   color: var(--black);
   padding: 1.5rem 0;
}

.watch-video .video-details .info{
   display: flex;
   gap: 2rem;
   padding-bottom: 1.5rem;
   border-bottom: var(--border);
}

.watch-video .video-details .info p{
   font-size:1.6rem;
}

.watch-video .video-details .info p i{
   margin-right: 1rem;
   color: var(--main-color);
}

.watch-video .video-details .info p span{
   color: var(--light-color);
}

.watch-video .video-details .tutor{
   padding: 2rem 0;
   display: flex;
   align-items: center;
   gap: 2rem;
}

.watch-video .video-details .tutor img{
   height: 7rem;
   width: 7rem;
   border-radius: 50%;
   object-fit: cover;
}

.watch-video .video-details .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.watch-video .video-details .tutor span{
   color: var(--light-color);
   font-size: 1.5rem;
}

.watch-video .video-details .flex{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   justify-content: space-between;
}

.watch-video .video-details .flex a{
   margin-top: 0;
}

.watch-video .video-details .flex button{
   background-color: rgba(246,241,251,.96);
   cursor: pointer;
   padding: 1rem 2.5rem;
   font-size: 2rem;
   border-radius: 1.2rem;
   border: 1px solid rgba(116,64,171,.08);
}

.watch-video .video-details .flex button i{
   color: var(--black);
   margin-right: 1rem;
}

.watch-video .video-details .flex button span{
   color: var(--light-color);
}

.watch-video .video-details .flex button:hover{
   background-color: var(--black);
}

.watch-video .video-details .flex button:hover i{
   color: var(--white);
}

.watch-video .video-details .flex button:hover span{
   color: var(--white);
}

.watch-video .video-details .description{
   padding-top: 2rem;
}

.watch-video .video-details .description p{
   line-height: 1.5;
   font-size: 1.7rem;
   color: var(--light-color);
   white-space: pre-line;
}

.comments .add-comment{
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   border-radius: 1.6rem;
   margin-bottom: 3rem;
   padding: 2rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
}

.comments .add-comment textarea{
   border-radius: 1.2rem;
   padding: 1.4rem;
   width: 100%;
   height: 20rem;
   background-color: var(--light-bg);
   resize: none;
   font-size: 1.8rem;
   color: var(--black);
}

.comments .show-comments{
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   border-radius: 1.6rem;
   padding: 2rem;
   display: grid;
   gap: 2.5rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
}

.comments .show-comments .user{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-bottom: 2rem;
}

.comments .show-comments .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.comments .show-comments .user h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.comments .show-comments .user span{
   color: var(--light-color);
   font-size: 1.5rem;
}

.comments .show-comments .content{
   margin-bottom: 2rem;
}

.comments .show-comments .content p{
   font-size: 2rem;
   color: var(--black);
   padding: 0 1rem;
   display: inline-block;
}

.comments .show-comments .content span{
   font-size: 1.7rem;
   color: var(--light-color);
}

.comments .show-comments .content a{
   color: var(--main-color);
   font-size: 1.8rem;
}

.comments .show-comments .content a:hover{
   text-decoration: underline;
}

.comments .show-comments .text{
   border-radius: 1.2rem;
   background-color: var(--light-bg);
   padding: 1rem 1.5rem;
   color: var(--black);
   margin: .5rem 0;
   position: relative;
   z-index: 0;
   white-space: pre-line;
   font-size: 1.8rem;
}

.comments .show-comments .text::before{
   content: '';
   position: absolute;
   top: -1rem; left: 1.5rem;
   height: 1.2rem;
   width: 2rem;
   background-color: var(--light-bg);
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
}

.edit-comment form{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.edit-comment form .box{
   width: 100%;
   border-radius: .5rem;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--light-bg);
   resize: none;
   height: 20rem;
}

.edit-comment form .flex{
   display: flex;
   gap: 1.5rem;
   justify-content: space-between;
   margin-top: .5rem;
}

.teachers .search-tutor{
   margin-bottom: 3rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
   padding: 1.5rem 2rem;
   background-color: var(--white);
   border-radius: .5rem;
}

.teachers .search-tutor input{
   width: 100%;
   font-size: 1.8rem;
   color: var(--black);
   background: none;
}

.teachers .search-tutor button{
   font-size: 2rem;
   cursor: pointer;
   color: var(--black);
   background: none;
}

.teachers .search-tutor button:hover{
   color: var(--main-color);
}

.teachers .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.teachers .box-container .box{
   border-radius: .5rem;
   padding: 2rem;
   background-color: var(--white);
}

.teachers .box-container .box .tutor{
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.teachers .box-container .box .tutor img{
   height: 5rem;
   width: 5rem;
   object-fit: cover;
   border-radius: 50%;
}

.teachers .box-container .box .tutor h3{
   color: var(--black);
   font-size: 2rem;
   margin-bottom: .2rem;
}

.teachers .box-container .box .tutor span{
   color: var(--main-color);
   font-size: 1.5rem;
}

.teachers .box-container .box p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);
}

.teachers .box-container .box p span{
   color: var(--main-color);
}

.teachers .box-container .offer{
   text-align: center;
}

.teachers .box-container .offer h3{
   font-size: 2rem;
   color: var(--black);
}

.teachers .box-container .offer p{
   line-height: 2;
   padding-bottom: .5rem;
}

.tutor-profile .details{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   text-align: center;
}

.tutor-profile .details .tutor{
   margin-bottom: 2rem;
}

.tutor-profile .details .tutor img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.tutor-profile .details .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin: .5rem 0;
}

.tutor-profile .details .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.tutor-profile .details .flex{
   display: flex;
   gap: 1.5rem;
   align-items: center;
   flex-wrap: wrap;
}

.tutor-profile .details .flex p{
   flex: 1 1 25rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1rem 3rem;
   font-size: 2rem;
   color: var(--light-color);
}

.tutor-profile .details .flex p span{
   color: var(--main-color);
}

.contact .row{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.contact .row .image{
   flex: 1 1 50rem;
}

.contact .row .image img{
   height: 50rem;
   width: 100%;
}

.contact .row form{
   flex:1 1 30rem;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   text-align: center;
}

.contact .row form h3{
   font-size: 2.5rem;
   margin-bottom: 1rem;
   color: var(--black);
}

.contact .row form .box{
   width: 100%;
   margin: 1rem 0;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1.4rem;
   color: var(--black);
   font-size: 1.8rem;
}

.contact .row form textarea{
   height: 20rem;
   resize: none;
}

.contact .box-container{
   margin-top: 3rem;
   display: flex;
   align-items: flex-start;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.contact .box-container .box{
   flex: 1 1 30rem;
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
   text-align: center;
}

.contact .box-container .box i{
   font-size: 3rem;
   color: var(--main-color);
   margin-bottom: 1rem;
}

.contact .box-container .box h3{
   margin: 1.5rem 0;
   font-size: 2rem;
   color: var(--black);
}

.contact .box-container .box a{
   display: block;
   font-size: 1.7rem;
   color: var(--light-color);
   line-height: 1.5;
   margin-top: .5rem;
}

.contact .box-container .box a:hover{
   text-decoration: underline;
   color: var(--main-color);
}

.profile .details{
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   border-radius: 1.8rem;
   padding: 2rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
}

.profile .details .user{
   text-align: center;
   margin-bottom: 2rem;
}

.profile .details .user img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.profile .details .user h3{
   font-size: 2rem;
   margin: .5rem 0;
   color: var(--black);
}

.profile .details .user p{
   font-size: 1.7rem;
   color: var(--light-color);
}

.profile .details .box-container{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 1.5rem;
}

.profile .details .box-container .box{
   background-color: rgba(246,241,251,.96);
   border-radius: 1.4rem;
   padding: 2rem;
   flex: 1 1 30rem;
   border: 1px solid rgba(116,64,171,.08);
}

.profile .details .box-container .box .flex{
   display: flex;
   align-items: center;
   gap: 1.7rem;
   margin-bottom: 1rem;
}

.profile .details .box-container .box .flex i{
   height: 4.5rem;
   width: 4.5rem;
   border-radius: 1rem;
   background: linear-gradient(135deg, var(--main-color), var(--accent-color));
   line-height: 4.4rem;
   font-size: 2rem;
   color: var(--white);
   text-align: center;
}

.profile .details .box-container .box .flex h3{
   font-size: 2rem;
   color: var(--main-color);
   margin-bottom: .2rem;
}

.profile .details .box-container .box .flex span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.form-container{
   display: flex;
   align-items: center;
   justify-content: center;
   min-height:80vh;
}

.form-container form{
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   border-radius: 1.8rem;
   padding: 2rem;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
}

.form-container .login{
   width: 50rem;
}

.form-container .register{
   width: 80rem;
}

.form-container form h3{
   text-align: center;
   font-size: 2.5rem;
   margin-bottom: 1rem;
   color: var(--black);
   text-transform: capitalize;
}

.form-container form p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);
}

.form-container form p span{
   color: var(--red);
}

.form-container .link{
   padding-bottom: 1rem;
   text-align: center;
   font-size: 2rem;
}

.form-container .link a{
   color: var(--main-color);
}

.form-container .link a:hover{
   color: var(--black);
   text-decoration: underline;
}

.form-container form .box{
   width: 100%;
   border-radius: 1.2rem;
   margin: 1rem 0;
   font-size: 1.8rem;
   color: var(--black);
   padding: 1.4rem;
   background-color: var(--light-bg);
   border: 1px solid rgba(116,64,171,.08);
}

.form-container .flex{
   display: flex;
   gap: 2rem;
}

.form-container .flex .col{
   flex: 1 1 25rem;
}

.liked-videos .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
   text-overflow: hidden;
}

.liked-videos .box-container .box{
   background: linear-gradient(180deg, #ffffff, #fcf9ff);
   border-radius: 1.6rem;
   padding: 2rem;
   overflow-x: hidden;
   border: 1px solid rgba(116,64,171,.08);
   box-shadow: var(--box-shadow);
}

.liked-videos .box-container .box .tutor{
   margin-bottom:2rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.liked-videos .box-container .box .tutor img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.liked-videos .box-container .box .tutor h3{
   font-size: 1.8rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.liked-videos .box-container .box .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.liked-videos .box-container .box .thumb{
   width: 100%;
   height: 20rem;
   object-fit: cover;
   border-radius: 1.2rem;
   margin-bottom: 1rem;
}

.liked-videos .box-container .box .title{
   font-size: 2rem;
   color: var(--black);
   padding: .5rem 0;
   text-overflow: ellipsis;
   overflow-x: hidden;
}















.footer{
   position: sticky;
   bottom: 0; right: 0; left: 0;
   background: rgba(255,255,255,.9);
   border-top: 1px solid rgba(116,64,171,.10);
   padding:1.6rem 1.6rem 1.4rem;
   text-align: center;
   color: var(--black);
   font-size: 1.5rem;
   margin-top: 1.2rem;
   z-index: 1000;
   backdrop-filter: blur(10px);
}

.footer .footer-socials{
   display:flex;
   justify-content:center;
   flex-wrap:wrap;
   gap:.75rem;
   margin-bottom:.9rem;
}

.footer .footer-socials a{
   display:inline-flex;
   align-items:center;
   gap:.55rem;
   padding:.65rem 1rem;
   border-radius:999px;
   background:rgba(246,241,251,.96);
   border:1px solid rgba(116,64,171,.10);
   color:var(--main-dark);
   font-size:1.2rem;
   font-weight:700;
   transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.footer .footer-socials a:hover{
   transform:translateY(-.15rem);
   background:var(--main-color);
   color:var(--white);
   box-shadow:0 .6rem 1.2rem rgba(66,33,104,.12);
}

.footer .footer-socials a i{
   font-size:1.3rem;
}

.footer .footer-copy{
   line-height:1.55;
   font-size:1.35rem;
   color:#6c647d;
}

.footer span{
   color: var(--main-color);
}

@media (max-width: 768px){
   .footer{
      padding:1.4rem 1.2rem 1.2rem;
   }

   .footer .footer-socials{
      gap:.6rem;
   }

   .footer .footer-socials a{
      padding:.6rem .9rem;
      font-size:1.15rem;
   }

   .footer .footer-copy{
      font-size:1.25rem;
   }
}

/* media queries  */

@media (max-width:1200px){

   body{
      padding-left: 0;
   }

   .side-bar{
      transition: .2s linear;
      left: -30rem;
   }

   .side-bar.active{
      left: 0;
      box-shadow: 0 0 0 100vw rgba(0,0,0,.7);
   }

   .side-bar .close-side-bar{
      display: block;
   }

}

@media (max-width:991px){

   .hero-shell{
      grid-template-columns: 1fr;
   }

   .hero-stats{
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   
   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   .hero-copy,
   .hero-panel{
      border-radius: 2rem;
   }

   .hero-copy{
      padding: 2.6rem 2.2rem;
   }

   .hero-copy h1{
      font-size: 3.6rem;
   }

   .hero-copy p,
   .home-section-intro p{
      font-size: 1.55rem;
   }

   .hero-stats{
      grid-template-columns: 1fr;
   }

   .hero-glance{
      padding: 1.8rem;
   }

   .tutor-cta{
      padding: 2.5rem 2.2rem;
   }

   .tutor-cta__wrap{
      grid-template-columns: 1fr;
   }

   .tutor-cta__wrap::after{
      justify-self: start;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: .5rem;
      margin-top: .1rem;
      margin-right: 0;
   }

   .tutor-cta h3{
      font-size: 3rem;
   }

   .tutor-cta__action{
      justify-content: flex-start;
   }

   .tutor-cta p{
      font-size: 1.65rem;
   }

   .promo-video .video-container iframe{
      min-height: 28rem;
   }

   #search-btn{
      display: inline-block;
   }

   .header .flex .search-form{
      position: absolute;
      top:99%; left: 0; right: 0;
      width: auto;
      border-top: var(--border);     
      border-bottom: var(--border);
      background-color: var(--white);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      transition: .2s linear;
   }

   .header .flex .search-form.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }

   .form-container .flex{
      display: flex;
      gap: 0;
      flex-flow: column;
   }

   .watch-video .video-details .video{
      height: 30rem;
   }

}

@media (max-width:450px){
   
   html{
      font-size: 50%;
   }

   .heading{
      font-size: 2rem;
   }

   .hero-copy h1{
      font-size: 3rem;
   }

   .flex-btn{
      flex-flow: column;
      gap: 0;
   }

   .about .row .image img{
      height: auto;
   }

   .playlist .row .col .thumb{
      height: 20rem;
   }

   .contact .row .image img{
      height: auto;
   }

   .courses .box-container{
      grid-template-columns: 1fr;
   }

   .videos-container .box-container{
      grid-template-columns: 1fr;
   }

   .teachers .box-container{
      grid-template-columns: 1fr;
   }

   .watch-video .video-details .video{
      height: auto;
   }

}