/* =========================================================
   SCHOLAR+ HOME
   PREMIUM MODERN DESIGN
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Open Sans",sans-serif;
  background:#020617;
  color:#fff;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
}

button,
input{
  font-family:inherit;
}


/* =========================================================
   VARIABLES
========================================================= */

:root{

  --bg:#020617;
  --bg-2:#03091b;
  --nav:#07122f;

  --surface:#07152f;
  --surface-2:#0a1937;

  --purple:#6c63ff;
  --purple-light:#938cff;
  --purple-soft:rgba(108,99,255,.12);

  --white:#fff;
  --text:#f8fafc;

  --muted:#9ba8bd;
  --muted-dark:#718098;

  --border:rgba(255,255,255,.08);

  --container:1280px;

}


/* =========================================================
   NAVBAR
   KEEPING THE SAME SCHOLAR+ THEME
========================================================= */

.navbar{

  position:sticky;

  top:0;

  z-index:1000;

  width:100%;

  min-height:82px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:14px 80px;

  background:rgba(7,18,47,.96);

  border-bottom:1px solid rgba(255,255,255,.055);

  backdrop-filter:blur(18px);

}


.brand{

  display:inline-flex;

  align-items:center;

  gap:12px;

  text-decoration:none;

  flex-shrink:0;

}


.brand-logo{

  width:48px;

  height:48px;

  object-fit:cover;

  border-radius:50%;

  background:#fff;

  border:2px solid rgba(255,255,255,.12);

  box-shadow:
    0 0 0 4px rgba(108,99,255,.06);

}


.brand-name{

  color:#fff;

  font-size:31px;

  line-height:1;

  font-weight:800;

  letter-spacing:-1.5px;

}


.brand-name span{

  color:var(--purple);

}


.nav-links{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:36px;

  list-style:none;

  margin:0 auto;

  padding:0 30px;

}


.nav-links a{

  position:relative;

  display:inline-flex;

  align-items:center;

  padding:12px 0;

  color:#f8fafc;

  text-decoration:none;

  font-size:15px;

  font-weight:500;

  transition:.25s ease;

}


.nav-links a:hover{

  color:var(--purple-light);

}


.nav-links a.active::after{

  content:"";

  position:absolute;

  left:0;

  right:0;

  bottom:2px;

  height:2px;

  background:var(--purple);

  box-shadow:
    0 0 12px rgba(108,99,255,.65);

}


.nav-right{

  display:flex;

  align-items:center;

  gap:12px;

  flex-shrink:0;

}


.login-btn,
.register-btn{

  height:52px;

  padding:0 23px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:13px;

  text-decoration:none;

  font-size:14px;

  font-weight:700;

  transition:.25s ease;

}


.login-btn{

  color:#fff;

  background:rgba(255,255,255,.025);

  border:1px solid rgba(255,255,255,.12);

}


.register-btn{

  background:var(--purple);

  color:#fff;

  border:1px solid var(--purple);

  box-shadow:
    0 10px 28px rgba(108,99,255,.18);

}


.login-btn:hover{

  border-color:rgba(108,99,255,.5);

  transform:translateY(-2px);

}


.register-btn:hover{

  transform:translateY(-2px);

  background:#7c73ff;

}


/* =========================================================
   COMMON
========================================================= */

.section-kicker{

  display:flex;

  align-items:center;

  gap:9px;

  color:var(--purple-light);

  font-size:10px;

  font-weight:800;

  letter-spacing:2px;

}


.section-kicker span{

  width:28px;

  height:1px;

  background:var(--purple);

}


.primary-btn,
.secondary-btn{

  height:54px;

  padding:0 23px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:13px;

  border-radius:13px;

  text-decoration:none;

  font-size:14px;

  font-weight:700;

  transition:.3s ease;

}


.primary-btn{

  background:var(--purple);

  border:1px solid var(--purple);

  color:#fff;

  box-shadow:
    0 14px 35px rgba(108,99,255,.22);

}


.primary-btn:hover{

  transform:translateY(-3px);

  background:#7c73ff;

}


.secondary-btn{

  color:#fff;

  background:rgba(255,255,255,.025);

  border:1px solid rgba(255,255,255,.12);

}


.secondary-btn:hover{

  transform:translateY(-3px);

  border-color:rgba(108,99,255,.5);

  background:rgba(108,99,255,.07);

}


/* =========================================================
   FACULTY
========================================================= */

.faculty-mentor-section{

  position:relative;

  width:100%;

  padding:78px 0 66px;

  overflow:hidden;

  background:#03091b;

  border-bottom:1px solid rgba(255,255,255,.055);

}


.faculty-mentor-section::before{

  content:"";

  position:absolute;

  width:500px;

  height:500px;

  left:-300px;

  top:-80px;

  border-radius:50%;

  background:rgba(108,99,255,.10);

  filter:blur(110px);

  pointer-events:none;

}


.faculty-mentor-section::after{

  content:"";

  position:absolute;

  width:400px;

  height:400px;

  right:-250px;

  bottom:-200px;

  border-radius:50%;

  background:rgba(99,102,241,.08);

  filter:blur(100px);

  pointer-events:none;

}


.faculty-header{

  position:relative;

  z-index:2;

  width:min(
    var(--container),
    calc(100% - 120px)
  );

  margin:0 auto 42px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:40px;

}


.faculty-heading{

  max-width:720px;

}


.faculty-heading h2{

  margin-top:15px;

  color:#fff;

  font-size:clamp(36px,4.2vw,56px);

  line-height:1.03;

  letter-spacing:-2.8px;

}


.faculty-heading h2 span{

  color:var(--purple-light);

}


.faculty-heading p{

  max-width:620px;

  margin-top:17px;

  color:var(--muted);

  font-size:13px;

  line-height:1.8;

}


.faculty-controls{

  display:flex;

  gap:9px;

}


.faculty-arrow{

  width:47px;

  height:47px;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.10);

  background:rgba(255,255,255,.025);

  color:#fff;

  cursor:pointer;

  font-size:17px;

  transition:.25s ease;

}


.faculty-arrow:hover{

  background:var(--purple);

  border-color:var(--purple);

  transform:translateY(-2px);

}


.faculty-slider-wrapper{

  position:relative;

  z-index:2;

  width:100%;

  overflow:hidden;

}


.faculty-slider-wrapper::before,
.faculty-slider-wrapper::after{

  content:"";

  position:absolute;

  top:0;

  bottom:0;

  width:150px;

  z-index:5;

  pointer-events:none;

}


.faculty-slider-wrapper::before{

  left:0;

  background:
    linear-gradient(
      90deg,
      #03091b,
      transparent
    );

}


.faculty-slider-wrapper::after{

  right:0;

  background:
    linear-gradient(
      270deg,
      #03091b,
      transparent
    );

}


.faculty-slider{

  width:max-content;

  display:flex;

  align-items:stretch;

  gap:20px;

  padding:
    10px
    max(
      60px,
      calc(
        (100vw - var(--container)) / 2
      )
    );

  will-change:transform;

}


.faculty-card{

  position:relative;

  width:390px;

  min-height:265px;

  display:grid;

  grid-template-columns:145px 1fr;

  gap:22px;

  padding:20px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(10,25,57,.98),
      rgba(5,14,34,.98)
    );

  border:1px solid rgba(255,255,255,.085);

  transition:
    transform .35s ease,
    border-color .35s ease;

}


.faculty-card:hover{

  transform:translateY(-7px);

  border-color:
    rgba(108,99,255,.48);

}


.faculty-card::after{

  content:"";

  position:absolute;

  width:180px;

  height:180px;

  right:-80px;

  bottom:-100px;

  border-radius:50%;

  background:rgba(108,99,255,.12);

  filter:blur(45px);

}


.faculty-card-top{

  position:absolute;

  top:13px;

  left:15px;

  right:15px;

  z-index:4;

  display:flex;

  justify-content:space-between;

  pointer-events:none;

}


.faculty-label{

  padding:5px 8px;

  background:rgba(2,6,23,.72);

  border:1px solid rgba(255,255,255,.08);

  color:#c4c9d8;

  font-size:7px;

  font-weight:800;

  letter-spacing:1.3px;

}


.faculty-number{

  color:rgba(255,255,255,.28);

  font-size:10px;

  font-weight:800;

}


.faculty-photo-wrap{

  position:relative;

  width:145px;

  height:225px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #111e3d,
      #071229
    );

}


.faculty-photo-wrap::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(2,6,23,.38)
    );

}


.faculty-photo{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:.5s ease;

}


.faculty-card:hover .faculty-photo{

  transform:scale(1.05);

}


.faculty-info{

  align-self:end;

  position:relative;

  z-index:2;

  padding-bottom:3px;

}


.faculty-role{

  color:var(--purple-light);

  font-size:8px;

  font-weight:800;

  letter-spacing:1.5px;

}


.faculty-info h3{

  margin-top:8px;

  color:#fff;

  font-size:21px;

  line-height:1.2;

}


.faculty-department{

  margin-top:8px;

  color:#c3c9d8;

  font-size:11px;

}


.faculty-institution{

  margin-top:4px;

  color:var(--muted-dark);

  font-size:9px;

  line-height:1.55;

}


.faculty-profile-link{

  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-top:21px;

  color:var(--purple-light);

  text-decoration:none;

  font-size:10px;

  font-weight:800;

  letter-spacing:.7px;

}


.faculty-profile-link span{

  transition:.25s ease;

}


.faculty-profile-link:hover span{

  transform:translate(4px,-3px);

}


.faculty-footer{

  position:relative;

  z-index:2;

  width:min(
    var(--container),
    calc(100% - 120px)
  );

  margin:27px auto 0;

  display:flex;

  justify-content:space-between;

  color:var(--muted-dark);

  font-size:8px;

  font-weight:800;

  letter-spacing:1.8px;

}


.faculty-scroll-indicator{

  display:flex;

  align-items:center;

  gap:9px;

}


.faculty-scroll-indicator i{

  width:6px;

  height:6px;

  border-radius:50%;

  background:var(--purple);

  box-shadow:
    0 0 12px var(--purple);

}


/* =========================================================
   HERO
========================================================= */

.hero-section{

  position:relative;

  min-height:700px;

  width:100%;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(450px,.95fr);

  align-items:center;

  gap:40px;

  padding:
    90px
    max(
      60px,
      calc(
        (100vw - var(--container)) / 2
      )
    )
    70px;

  overflow:hidden;

  background:#020617;

}


.hero-section::before{

  content:"";

  position:absolute;

  width:650px;

  height:650px;

  right:-170px;

  top:-150px;

  border-radius:50%;

  background:rgba(108,99,255,.09);

  filter:blur(100px);

}


.hero-grid-lines{

  position:absolute;

  inset:0;

  opacity:.17;

  background-image:

    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent 75%
    );

}


.hero-left{

  position:relative;

  z-index:3;

  max-width:690px;

}


.hero-badge{

  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:8px 12px;

  border:1px solid rgba(108,99,255,.28);

  background:rgba(108,99,255,.07);

  color:#bcb8ff;

  font-size:9px;

  font-weight:800;

  letter-spacing:1.7px;

}


.badge-dot{

  width:6px;

  height:6px;

  border-radius:50%;

  background:var(--purple);

  box-shadow:
    0 0 12px var(--purple);

}


.hero-left h1{

  margin-top:24px;

  font-size:clamp(
    55px,
    6.5vw,
    91px
  );

  line-height:.93;

  letter-spacing:-5px;

  font-weight:800;

}


.hero-left h1 span{

  color:var(--purple-light);

  display:inline-block;

}


.hero-description{

  max-width:570px;

  margin-top:25px;

  color:var(--muted);

  font-size:14px;

  line-height:1.85;

}


.hero-buttons{

  display:flex;

  gap:12px;

  margin-top:31px;

}


.hero-primary span,
.hero-secondary span{

  font-size:18px;

}


.hero-stats{

  display:flex;

  align-items:center;

  gap:22px;

  margin-top:48px;

}


.hero-stat{

  display:flex;

  flex-direction:column;

  gap:4px;

}


.hero-stat strong{

  color:#fff;

  font-size:22px;

  line-height:1;

}


.hero-stat span{

  color:var(--muted-dark);

  font-size:9px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

}


.stat-divider{

  width:1px;

  height:30px;

  background:rgba(255,255,255,.10);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-right{

  position:relative;

  z-index:2;

  min-height:520px;

  display:grid;

  place-items:center;

}


.hero-orbit{

  position:relative;

  width:min(
    520px,
    42vw
  );

  aspect-ratio:1;

}


.orbit-ring{

  position:absolute;

  inset:50%;

  transform:
    translate(-50%,-50%);

  border:1px solid rgba(147,140,255,.20);

  border-radius:50%;

}


.ring-one{

  width:100%;

  height:100%;

  animation:
    spin 25s linear infinite;

}


.ring-two{

  width:76%;

  height:76%;

  border-color:
    rgba(108,99,255,.32);

  animation:
    spinReverse 18s linear infinite;

}


.ring-three{

  width:54%;

  height:54%;

  border-style:dashed;

  border-color:
    rgba(147,140,255,.22);

  animation:
    spin 13s linear infinite;

}


.hero-core{

  position:absolute;

  left:50%;

  top:50%;

  width:220px;

  aspect-ratio:1;

  transform:
    translate(-50%,-50%);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  background:
    radial-gradient(
      circle at 50% 35%,
      #182858,
      #07122c 62%,
      #03091a
    );

  border:1px solid rgba(147,140,255,.35);

  border-radius:50%;

  box-shadow:

    0 0 0 15px rgba(108,99,255,.035),

    0 0 80px rgba(108,99,255,.18),

    inset 0 0 40px rgba(108,99,255,.10);

}


.core-logo{

  width:48px;

  height:48px;

  border-radius:50%;

  overflow:hidden;

  border:2px solid rgba(255,255,255,.15);

  margin-bottom:12px;

}


.core-logo img{

  width:100%;

  height:100%;

  object-fit:cover;

}


.core-small{

  color:var(--purple-light);

  font-size:8px;

  font-weight:800;

  letter-spacing:2px;

}


.hero-core strong{

  margin-top:4px;

  color:#fff;

  font-size:27px;

  letter-spacing:-1px;

}


.hero-core strong span{

  color:var(--purple-light);

}


.core-caption{

  margin-top:5px;

  color:var(--muted-dark);

  font-size:7px;

  letter-spacing:2px;

  font-weight:800;

}


.floating-card{

  position:absolute;

  display:flex;

  align-items:center;

  gap:11px;

  padding:12px 14px;

  min-width:160px;

  background:rgba(7,18,47,.86);

  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(15px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.25);

  animation:
    floatCard 5s ease-in-out infinite;

}


.floating-icon{

  width:30px;

  height:30px;

  display:grid;

  place-items:center;

  background:rgba(108,99,255,.13);

  color:var(--purple-light);

  font-size:14px;

}


.floating-card small{

  display:block;

  color:var(--muted-dark);

  font-size:7px;

  font-weight:800;

  letter-spacing:1px;

}


.floating-card strong{

  display:block;

  margin-top:3px;

  color:#fff;

  font-size:11px;

}


.card-one{

  top:13%;

  right:-4%;

}


.card-two{

  bottom:14%;

  left:-6%;

  animation-delay:1.3s;

}


.card-three{

  top:54%;

  right:-12%;

  animation-delay:2.4s;

}


.hero-bottom-line{

  position:absolute;

  left:0;

  right:0;

  bottom:0;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:15px;

  padding:15px;

  border-top:1px solid rgba(255,255,255,.055);

  color:var(--muted-dark);

  font-size:8px;

  font-weight:800;

  letter-spacing:2px;

}


.hero-bottom-line i{

  width:4px;

  height:4px;

  border-radius:50%;

  background:var(--purple);

}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-section{

  position:relative;

  display:grid;

  grid-template-columns:
    .8fr
    1.2fr;

  gap:80px;

  width:min(
    var(--container),
    calc(100% - 120px)
  );

  margin:auto;

  padding:120px 0;

}


.experience-intro{

  position:sticky;

  top:120px;

  align-self:start;

}


.experience-intro h2{

  margin-top:17px;

  font-size:clamp(
    37px,
    4vw,
    57px
  );

  line-height:1.02;

  letter-spacing:-2.8px;

}


.experience-intro h2 span{

  color:var(--purple-light);

}


.experience-intro p{

  max-width:430px;

  margin-top:20px;

  color:var(--muted);

  font-size:13px;

  line-height:1.8;

}


.experience-list{

  border-top:1px solid var(--border);

}


.experience-item{

  display:grid;

  grid-template-columns:
    70px
    1fr
    45px;

  align-items:center;

  gap:20px;

  min-height:190px;

  border-bottom:1px solid var(--border);

  transition:.3s ease;

}


.experience-item:hover{

  padding-left:12px;

  border-color:
    rgba(108,99,255,.35);

}


.experience-number{

  color:var(--purple-light);

  font-size:11px;

  font-weight:800;

  letter-spacing:1px;

}


.experience-content span{

  color:var(--muted-dark);

  font-size:8px;

  font-weight:800;

  letter-spacing:1.7px;

}


.experience-content h3{

  margin-top:8px;

  color:#fff;

  font-size:25px;

  letter-spacing:-1px;

}


.experience-content p{

  max-width:500px;

  margin-top:8px;

  color:var(--muted);

  font-size:12px;

  line-height:1.7;

}


.experience-arrow{

  width:38px;

  height:38px;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.10);

  color:var(--muted);

  transition:.3s ease;

}


.experience-item:hover .experience-arrow{

  color:#fff;

  background:var(--purple);

  border-color:var(--purple);

}


/* =========================================================
   COURSES
========================================================= */

.featured-section{

  width:min(
    var(--container),
    calc(100% - 120px)
  );

  margin:auto;

  padding:40px 0 120px;

}


.featured-header{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:30px;

  margin-bottom:42px;

}


.featured-header h2{

  margin-top:14px;

  font-size:clamp(
    40px,
    4vw,
    58px
  );

  line-height:1;

  letter-spacing:-3px;

}


.featured-header h2 span{

  color:var(--purple-light);

}


.view-all-link{

  display:flex;

  align-items:center;

  gap:9px;

  color:var(--purple-light);

  text-decoration:none;

  font-size:10px;

  font-weight:800;

  letter-spacing:1px;

}


.view-all-link span{

  font-size:17px;

}


.featured-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;

}


/* =========================================================
   DYNAMIC COURSE CARDS
========================================================= */

.course-card{

  position:relative;

  min-height:370px;

  display:flex;

  flex-direction:column;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #0a1937,
      #050d22
    );

  border:1px solid rgba(255,255,255,.08);

  transition:
    transform .35s ease,
    border-color .35s ease;

}



.course-card:hover{

  transform:translateY(-8px);

  border-color:
    rgba(108,99,255,.42);

}


.course-card img{

  width:100%;

  height:210px;

  object-fit:cover;

  opacity:.84;

  transition:.5s ease;

}


.course-card:hover img{

  transform:scale(1.04);

  opacity:1;

}


.course-content{

  position:relative;

  flex:1;

  display:flex;

  flex-direction:column;

  padding:21px;

}


.course-category{

  color:var(--purple-light);

  font-size:8px;

  font-weight:800;

  letter-spacing:1.5px;

  text-transform:uppercase;

}


.course-content h3{

  margin-top:9px;

  color:#fff;

  font-size:21px;

  line-height:1.2;

}


.course-content p{

  margin-top:9px;

  color:var(--muted);

  font-size:11px;

  line-height:1.65;

}


.course-footer{

  margin-top:auto;

  padding-top:18px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-top:1px solid rgba(255,255,255,.07);

}


.course-footer h4{

  color:#fff;

  font-size:18px;

}


.course-footer a{

  text-decoration:none;

}


.course-footer button{

  border:0;

  background:var(--purple);

  color:#fff;

  padding:9px 13px;

  cursor:pointer;

  font-size:9px;

  font-weight:800;

  letter-spacing:.5px;

  transition:.25s ease;

}


.course-footer button:hover{

  background:#7c73ff;

}


/* =========================================================
   CTA
========================================================= */

.cta-section{

  width:min(
    var(--container),
    calc(100% - 120px)
  );

  margin:auto;

  padding:0 0 120px;

}


.cta-card{

  position:relative;

  min-height:390px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  overflow:hidden;

  padding:65px;

  background:
    linear-gradient(
      120deg,
      #081633,
      #0a1632 55%,
      #121346
    );

  border:1px solid rgba(147,140,255,.20);

}


.cta-card::before{

  content:"";

  position:absolute;

  width:500px;

  height:500px;

  right:-150px;

  top:-180px;

  border-radius:50%;

  background:
    rgba(108,99,255,.15);

  filter:blur(60px);

}


.cta-background-number{

  position:absolute;

  right:23%;

  top:-70px;

  color:rgba(255,255,255,.025);

  font-size:430px;

  font-weight:800;

  line-height:1;

}


.cta-content{

  position:relative;

  z-index:2;

  max-width:650px;

}


.cta-content h2{

  margin-top:17px;

  font-size:clamp(
    48px,
    5vw,
    76px
  );

  line-height:.96;

  letter-spacing:-4px;

}


.cta-content h2 span{

  color:var(--purple-light);

}


.cta-content p{

  max-width:520px;

  margin-top:20px;

  color:var(--muted);

  font-size:13px;

  line-height:1.8;

}


.cta-button{

  margin-top:28px;

  display:inline-flex;

  align-items:center;

  gap:13px;

  height:53px;

  padding:0 21px;

  background:#fff;

  color:#050b20;

  text-decoration:none;

  font-size:11px;

  font-weight:800;

  transition:.3s ease;

}


.cta-button:hover{

  transform:translateY(-3px);

}


.cta-button span{

  font-size:17px;

}


.cta-side-text{

  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  color:rgba(255,255,255,.18);

  font-size:34px;

  font-weight:800;

  letter-spacing:-1px;

}


.cta-side-text span{

  margin-top:7px;

  color:var(--purple-light);

  font-size:7px;

  letter-spacing:2px;

}


/* =========================================================
   FOOTER
========================================================= */

.footer{

  background:#01040d;

  border-top:1px solid rgba(255,255,255,.06);

}


.footer-top{

  width:min(
    var(--container),
    calc(100% - 120px)
  );

  margin:auto;

  padding:70px 0;

  display:grid;

  grid-template-columns:
    2fr
    1fr
    1fr
    1fr;

  gap:60px;

}


.footer-brand-logo{

  display:flex;

  align-items:center;

  gap:10px;

  color:#fff;

  text-decoration:none;

}


.footer-brand-logo img{

  width:42px;

  height:42px;

  border-radius:50%;

  object-fit:cover;

}


.footer-brand-logo > span{

  font-size:25px;

  font-weight:800;

  letter-spacing:-1px;

}


.footer-brand-logo > span span{

  color:var(--purple-light);

}


.footer-brand p{

  max-width:300px;

  margin-top:16px;

  color:var(--muted-dark);

  font-size:11px;

  line-height:1.8;

}


.footer-status{

  margin-top:20px;

  display:flex;

  align-items:center;

  gap:8px;

  color:var(--muted-dark);

  font-size:7px;

  font-weight:800;

  letter-spacing:1.5px;

}


.footer-status i{

  width:6px;

  height:6px;

  border-radius:50%;

  background:#43d17b;

  box-shadow:
    0 0 10px #43d17b;

}


.footer-links{

  display:flex;

  flex-direction:column;

  gap:11px;

}


.footer-links h3{

  margin-bottom:7px;

  color:#fff;

  font-size:10px;

  letter-spacing:1.5px;

  text-transform:uppercase;

}


.footer-links a{

  color:var(--muted-dark);

  text-decoration:none;

  font-size:11px;

  transition:.2s ease;

}


.footer-links a:hover{

  color:var(--purple-light);

  transform:translateX(3px);

}


.footer-note{

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:flex-end;

  text-align:right;

}


.footer-note span{

  color:var(--muted-dark);

  font-size:8px;

  font-weight:800;

  letter-spacing:2px;

}


.footer-note strong{

  margin-top:8px;

  color:#fff;

  font-size:27px;

  line-height:.95;

  letter-spacing:-1px;

}


.footer-bottom{

  width:min(
    var(--container),
    calc(100% - 120px)
  );

  margin:auto;

  padding:19px 0;

  display:flex;

  justify-content:space-between;

  border-top:1px solid rgba(255,255,255,.055);

  color:var(--muted-dark);

  font-size:9px;

}


.footer-bottom span{

  color:var(--purple-light);

  font-size:8px;

  font-weight:800;

  letter-spacing:1.5px;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes spin{

  from{
    transform:
      translate(-50%,-50%)
      rotate(0deg);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }

}


@keyframes spinReverse{

  from{
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(0deg);
  }

}


@keyframes floatCard{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-9px);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .navbar{
    padding-left:35px;
    padding-right:35px;
  }

  .nav-links{
    gap:22px;
  }

  .hero-section{

    grid-template-columns:
      1fr
      1fr;

    padding-left:35px;
    padding-right:35px;

  }

  .hero-left h1{
    font-size:65px;
  }

  .hero-orbit{
    width:430px;
  }

  .experience-section{
    gap:45px;
  }

  .featured-grid{
    grid-template-columns:
      repeat(2,1fr);
  }



  .footer-top{
    grid-template-columns:
      2fr 1fr 1fr;
  }

  .footer-note{
    align-items:flex-start;
    text-align:left;
  }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:850px){

  .navbar{
    flex-wrap:wrap;
    gap:12px;
  }

  .nav-links{
    order:3;
    width:100%;
    padding:0;
  }

  .nav-right{
    margin-left:auto;
  }


  .faculty-header{

    width:
      calc(100% - 40px);

    align-items:flex-start;

    flex-direction:column;

  }

  .faculty-controls{
    display:none;
  }

  .faculty-footer{

    width:
      calc(100% - 40px);

  }


  .hero-section{

    grid-template-columns:1fr;

    min-height:auto;

    padding:
      80px
      30px
      75px;

    text-align:center;

  }

  .hero-left{
    margin:auto;
  }

  .hero-description{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-stats{
    justify-content:center;
  }

  .hero-right{
    min-height:480px;
  }

  .hero-orbit{
    width:440px;
  }


  .experience-section{

    grid-template-columns:1fr;

    width:
      calc(100% - 40px);

    padding:
      90px 0;

  }

  .experience-intro{
    position:relative;
    top:auto;
  }


  .featured-section,
  .cta-section{

    width:
      calc(100% - 40px);

  }


  .footer-top{

    width:
      calc(100% - 40px);

    grid-template-columns:
      repeat(2,1fr);

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

  .navbar{

    min-height:70px;

    padding:
      11px 17px;

  }


  .brand-logo{

    width:43px;
    height:43px;

  }


  .brand-name{

    font-size:27px;

  }


  .nav-links{

    gap:8px 18px;

    flex-wrap:wrap;

    justify-content:center;

  }


  .nav-links a{

    font-size:12px;

    padding:6px 0;

  }


  .nav-right{

    width:100%;

    justify-content:center;

  }


  .login-btn,
  .register-btn{

    height:44px;

    padding:0 16px;

  }


  .faculty-mentor-section{

    padding:
      58px 0 45px;

  }


  .faculty-heading h2{

    font-size:39px;

    letter-spacing:-2px;

  }


  .faculty-heading p{

    font-size:11px;

  }


  .faculty-slider{

    padding-left:20px;
    padding-right:20px;

  }


  .faculty-card{

    width:315px;

    min-height:235px;

    grid-template-columns:
      108px 1fr;

    gap:15px;

    padding:15px;

  }


  .faculty-photo-wrap{

    width:108px;
    height:203px;

  }


  .faculty-info h3{

    font-size:17px;

  }


  .faculty-institution{

    font-size:8px;

  }


  .hero-section{

    padding:
      70px 20px 70px;

  }


  .hero-left h1{

    font-size:
      clamp(
        47px,
        14vw,
        65px
      );

    letter-spacing:-3px;

  }


  .hero-description{

    font-size:12px;

  }


  .hero-buttons{

    flex-direction:column;

    align-items:stretch;

  }


  .primary-btn,
  .secondary-btn{

    width:100%;

  }


  .hero-stats{

    gap:12px;

  }


  .hero-stat strong{

    font-size:18px;

  }


  .hero-stat span{

    font-size:7px;

  }


  .hero-right{

    min-height:380px;

  }


  .hero-orbit{

    width:320px;

  }


  .hero-core{

    width:145px;

  }


  .hero-core strong{

    font-size:20px;

  }


  .core-logo{

    width:35px;
    height:35px;

  }


  .floating-card{

    min-width:125px;

    padding:9px;

  }


  .floating-card strong{

    font-size:9px;

  }


  .card-one{

    right:-3%;

  }


  .card-two{

    left:-5%;

  }


  .card-three{

    right:-8%;

  }


  .hero-bottom-line{

    gap:8px;

    font-size:6px;

  }


  .experience-section{

    width:
      calc(100% - 34px);

  }


  .experience-intro h2{

    font-size:39px;

  }


  .experience-item{

    grid-template-columns:
      35px 1fr 35px;

    gap:8px;

    min-height:170px;

  }


  .experience-content h3{

    font-size:19px;

  }


  .experience-content p{

    font-size:10px;

  }


  .featured-section{

    width:
      calc(100% - 34px);

    padding-bottom:80px;

  }


  .featured-header{

    align-items:flex-start;

    flex-direction:column;

  }


  .featured-header h2{

    font-size:40px;

  }


  .featured-grid{

    grid-template-columns:1fr;

  }


  .course-card,
  .course-card:nth-child(1){

    min-height:370px;

  }


  .course-card img,
  .course-card:nth-child(1) img{

    height:210px;

  }


  .cta-section{

    width:
      calc(100% - 34px);

    padding-bottom:80px;

  }


  .cta-card{

    min-height:430px;

    padding:35px 25px;

  }


  .cta-content h2{

    font-size:48px;

    letter-spacing:-3px;

  }


  .cta-side-text{

    display:none;

  }


  .footer-top{

    width:
      calc(100% - 34px);

    grid-template-columns:1fr;

    gap:40px;

  }


  .footer-bottom{

    width:
      calc(100% - 34px);

    flex-direction:column;

    gap:8px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    scroll-behavior:auto !important;

    transition-duration:.01ms !important;

  }

}