:root{
 --bg: #080b16;
  --bg-soft: #0d1224;
  --bg-elevated: #121833;
  --text-primary: #eef1fb;
  --text-muted: #9aa3c2;
  --blue: #4f7cff;
  --purple: #9b5cff;
  --pink: #d15cff;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  background: var(--bg-elevated);
  color: var(--purple);
  font-family: var(--font-display);
  overflow-x: hidden;
  line-height: 1.6;
}
a{ 
  text-decoration: none; 
  color: inherit; 
}
.header{ 
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 2rem 15%;
  justify-content: space-between;
  display: flex;
  align-items: center;
  backdrop-filter: blur(2px);
  background: linear-gradient(var(--main-color), transparent);
  z-index: 1000;
  transform: translateY(-3px);
}
.logo{
  font-size: 2rem;
  color: var(--text-color);
  font-weight: 800;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.logo:hover{
  transform: scale(1.1);
}
span{
  background:linear-gradient(var(--second-bg-color), 
  var(--bg-color));
  -webkit-background-clip: text;
  background-clip: text;
  color:rgb(162, 162, 162);
}
.navbar a{
  text-decoration: none;
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 25px;
  border: 2px solid var(--text-color);
  border-radius: 12px;
  background: rgb(38, 1, 67);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  transform: translateY(-3px);
  justify-content: space-between;
}
.navbar a:hover{
  background: var(--pink);
  color: var(--bg-elevated);
  transform: translateY(-3px);
  box-shadow: 0 0 20px var(--text-color);
}
section{
  padding: 10rem 15%;
  min-height: 100vh;
}
.home{
  background-size: cover;
  background-position: center;
  border-image: fill 0 linear-gradient(rgba(39, 38, 38, 0.37), #0b0b0b);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rem;
}
.home-content{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.home-content h1{
  font-size: 3rem;
  font-weight: 500;
  margin-top: 1.3rem;
  line-height: 1;
}
.home-content h3{
  margin-top: 1rem 0;
  font-size: 2.5rem;
}
.home-content p{
  font-size: 1.5rem;
  font-weight: 500;
  color: white;
  line-height: 1.8;
}
.home-img img{
  width: 32vw;
  border-radius: 30%;
  box-shadow: 0 0 25px var(--purple);
  transition: 0.4s ease-in-out;
}
.home-img img:hover{
  box-shadow: 0 0 25px var(--pink),
              0 0 50px var(--pink),
              0 0 100px var(--pink);
}
.about{
  background-size: cover;
  background-position: center;
  border-image: fill 0 linear-gradient(rgba(39, 38, 38, 0.37), #0b0b0b);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}
.header-about{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 6% ;
  backdrop-filter: blur(2px);
  background: linear-gradient(var(--bg-soft), transparent);
  z-index: 1000;
}
.navbar-1{
    display: flex;
    margin-top: 3px;
}
.navbar-1 a{
  text-decoration: none;
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 300;
  padding: 8px 15px;
  border: 2px solid var(--text-color);
  border-radius: 12px;
  background: var(--bg-soft);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.navbar-1 a:hover {
  background: var(--pink);
  color: var(--bg-color);
  transform: translateY(-3px);
  box-shadow: 0 0 20px var(--text-color);
}
.about-img img{
  width: 30vw;
  border-radius: 50%;
  box-shadow: 0 0 25px var(--purple);
  transition: 0.4s ease-in-out;
}
.about-img img:hover{
  box-shadow: 0 0 25px var(--pink),
              0 0 50px var(--pink),
              0 0 100px var(--pink);
}
.about-content h2{
  font-size: 3rem;
  text-align: left;
}
.about-content p{
  font-size: 1.3rem;
}
.about-content span{
  color: rgb(155, 154, 154);
}
::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-thumb{
  background: var(--main-color);
}
::-webkit-scrollbar-track{
  background: var(--second-bg-color);
}
.school-header{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 padding: 4px 6% ;
 backdrop-filter: blur(2px);
 background: linear-gradient(var(--main-color), transparent);
 z-index: 1000;
}
.navbar-2 {
   display: flex;
  margin-top: 3px;
}
.navbar-2 a{
 text-decoration: none;
 color: var(--text-color);
 font-size: 1.5rem;
 font-weight: 600;
 padding: 8px 15px;
 border: 2px solid var(--text-color);
 border-radius: 12px;
 background: var(--bg-soft);
 backdrop-filter: blur(10px);
 transition: all 0.3s ease; 
}
.navbar-2 a:hover{
  background: var(--pink);
  color: var(--bg-soft);
  transform: translateY(-3px);
  box-shadow: 0 0 20px var(--text-color);
}
.school-1{
  background: url(cm.jpg);
  background-size: cover;
  background-position: center;
  border-image: fill 0 linear-gradient(rgba(29, 29, 29, 0.801), #030303);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem; 
  flex-direction: column;
}
.school-1 h2{
  font-size: 3rem;
  font-weight: 400;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(73, 72, 72, 0.5);
}
.school-1 h4{
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  color: #E84A5F;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.mission-class{
  display: flex;
  justify-content: center;   
  align-items: center;       
  gap: 50px;                 
  margin-top: 4rem;
  width: 100%;
  flex-wrap: wrap;
}
.mission-box{
 width: 500px;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background: rgba(128, 128, 128, 0.358);
  backdrop-filter: blur(10px);
  border-radius: 35px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}
.mission-box:hover{
  transform: translateY(-10px);
  background: var(--bg-soft);
  box-shadow: 0 0 25px var(--purple);
  color: var(--text-primary);
}
.cm-mission{
  text-align: center;
}
.cm-mission h4{
  font-size: 2.1rem;
  margin-bottom: 25px;
  color:#E84A5F;
}
.cm-mission  p{
  font-size: 1.3rem;
  line-height: 2;
  color:#E84A5F;
}

.contact-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 6%;
  backdrop-filter: blur(2px);
  background: linear-gradient(var(--bg-soft), transparent);
  z-index: 1000;
}

.navbar-3{
  display: flex;
  margin-top: 3px;
}

.navbar-3 a{
  text-decoration: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 300;
  padding: 8px 15px;
  border: 2px solid var(--text-primary);
  border-radius: 12px;
  background: var(--bg-soft);
  backdrop-filter: blur(10px);
  transition: .3s ease;
}

.navbar-3 a:hover{
  background: var(--pink);
  color: var(--bg-elevated);
  transform: translateY(-3px);
  box-shadow: 0 0 20px var(--purple);
}

.contact{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  gap: 6rem;
}

.contact-content{
  max-width: 700px;
}

.contact-content h2{
  font-size: 3rem;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.contact-content p{
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.contact-info{
  margin-top: 30px;
}

.contact-info p{
  color: var(--text-primary);
  margin: 15px 0;
}

.contact-info i{
  color: var(--pink);
  margin-right: 10px;
}