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

body{
font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans", "Poppins";
background:
radial-gradient(circle at 10% 20%, #ff7aa230 0%, transparent 40%),
radial-gradient(circle at 90% 30%, #6a8dff40 0%, transparent 40%),
radial-gradient(circle at 50% 90%, #00d4ff30 0%, transparent 40%),
linear-gradient(135deg,#f7f9ff,#eef3ff);
/*min-height:100vh;
display:flex;
align-items:center;
justify-content:center;*/
}

.bodysec{ min-height:700px; display: block;}
.container{
position:relative;
width:1200px;
 margin: 0 auto;
}

/* PHONE */

/*.mobile{
position:absolute;
left:50%;
top:44%;
transform:translate(-50%,-50%);
background:url(../images/mobile.png) center no-repeat;
background-size:contain;
width:360px;
height:618px;
padding:10px 25px;
animation:floatPhone 4s ease-in-out infinite; 
} 
*/

.mobile{
position:absolute;
left:50%;
top:50%; 
transform:translate(-50%,0%);
background:url(../images/mobile.png) center no-repeat;
background-size:contain;
width:360px;
height:618px;
padding:10px 25px;
/*animation:floatPhone 4s ease-in-out infinite; */
} 

.mobile .mimg{
width:100%;
height:100%;
overflow:hidden;
position:relative;border-radius:15px; 
}

.mobile .mimg img{
width:100%;
position:absolute;
top:0;
left:0;
}



/* laptop */

.laptop{
position:absolute;
left:50%;
top:60%;
transform:translate(-50%,0%);
background:url(../images/laptop.png) center no-repeat;
background-size:contain;
width:590px;
height:355px;
padding:20px 70px;
/*animation:floatPhone 4s ease-in-out infinite; */
} 

.laptop .mimg{
width:100%;
height:100%;
overflow:hidden;
position:relative;border-radius:5px; 
}

.laptop .mimg img{
width:100%;
position:absolute;
top:0;
left:0;
}
.laptop{
display:none;
}


 
.laptopd.description{bottom: inherit; top:360px}
.screen-change{animation:screenAnim .45s ease;}

@keyframes screenAnim{
0%{opacity:0;transform:translateY(30px) scale(.9);}
100%{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes floatPhone{
0%{transform:translate(-50%,-50%) translateY(0);}
50%{transform:translate(-50%,-50%) translateY(-12px);}
100%{transform:translate(-50%,-50%) translateY(0);}
}

/* FEATURES */

.feature{
position:absolute;
font-size:16px;
cursor:pointer;
color:#333;
display:flex;
align-items:center;
gap:10px;
transition:.3s;
}

.feature span{
width:10px;
height:10px;
background:linear-gradient(45deg,#5a7bff,#00d4ff);
box-shadow:0 0 10px #5a7bff;
border-radius:50%;
}

.feature:hover{
color:#4c7dff;
transform:scale(1.1);
}

/* CONNECTING LINES */

.feature::after{
content:"";
position:absolute;
height:2px;
background:#dcdcdc;
top:50%;
}

.left::after{right:-120px;width:120px;}
.right::after{left:-120px;width:120px;}

/* LEFT FEATURES */
.studentsec{top:0px;left:60px;position: absolute; background:linear-gradient(45deg,#ff4d6d,#5a7bff,#00d4ff);
-webkit-background-clip:text;color:transparent; font-size: 24px; font-weight: bold;}
.login{top:40px;left:60px;}
.dashboard{top:90px;left:30px;}
.students{top:145px;left:10px;}
.feeslist{top:200px;left:20px;}



.teachersec{top:280px;left:20px; position: absolute; background:linear-gradient(45deg,#ff4d6d,#5a7bff,#00d4ff);
-webkit-background-clip:text;color:transparent; font-size: 24px; font-weight: bold;}
.teacherdash { top: 335px; left: -30px;}
.teacherpro{top:385px;left:10px;}
.mark{top:430px;left:60px;}

/* RIGHT FEATURES */

.adminsec{top:0px;right:60px; position: absolute; background:linear-gradient(45deg,#ff4d6d,#5a7bff,#00d4ff);
-webkit-background-clip:text;color:transparent; font-size: 24px; font-weight: bold;}
.admin{top:40px;right:60px;}
.fees{top:90px;right:30px;}
.academic{top:140px;right:10px;}
.template{top:200px;right:10px;}
.events{top:260px;right:30px;}
.notifications{top:320px;right:60px;}
.homework{top:400px;right:90px;}

.feature.active{
color:#4c7dff;
font-weight:600;
transform:scale(1.15);
}

/* colorful feature text */

.feature{
position:absolute;
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
transition:.3s;
font-weight:500;

background:linear-gradient(45deg,#ff4d6d,#5a7bff,#00d4ff);
-webkit-background-clip:text;
color:transparent;
}

/* glowing dot */

.feature span{
width:12px;
height:12px;
border-radius:50%;
background:linear-gradient(45deg,#ff4d6d,#5a7bff,#00d4ff);
box-shadow:0 0 10px #5a7bff,0 0 20px #00d4ff;
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(90,123,255,.7);}
70%{box-shadow:0 0 0 12px rgba(90,123,255,0);}
100%{box-shadow:0 0 0 0 rgba(90,123,255,0);}
}

/* hover */

.feature:hover{
transform:scale(1.15);
filter:brightness(1.2);
}

/* active feature */

.feature.active{
font-weight:700;
transform:scale(1.2);
}

/* colorful description card */

.description{
position:absolute;
top:580px;
left:50%;
transform:translateX(-50%);
text-align:center;
width:440px;
padding:10px 25px;

background:linear-gradient(135deg,#ffffffcc,#e9f1ffcc);
backdrop-filter:blur(10px);

border-radius:14px;
box-shadow:
0 10px 30px rgba(0,0,0,0.1),
0 0 20px rgba(90,123,255,0.2);
}

/* colorful title */

.description h2{
font-size:24px;
margin-bottom:8px;

background:linear-gradient(45deg,#ff4d6d,#5a7bff,#00d4ff);
-webkit-background-clip:text;
color:transparent;
}

/* description text */

.description p{
font-size:14px;
color:#555;
line-height:1.6;
}

/* colorful connecting lines */

.feature::after{
content:"";
position:absolute;
height:2px;
background:linear-gradient(90deg,#ff4d6d,#5a7bff,#00d4ff);
top:50%;
opacity:.7;
}

.left::after{
right:-120px;
width:120px;
}

.right::after{
left:-120px;
width:120px;
}

a{text-decoration: none;}
img{max-width: 100%}
.header{display: flex; align-items:center; justify-content: space-between; background: #fff; padding:0px 16px;}
.topmenu ul{list-style: none; margin: 0; padding: 0; display: flex;}
.topmenu ul li{padding: 5px;}
.topmenu ul li a{padding:10px; display:block; color: #000; font-size: 16px;}
.logo{width: 108px;}
.logo a{display: block;}
.topmenu ul li>a.cnumber {background: #009345; color: #fff ; border-radius: 5px; font-weight: 600; margin-right: 10px;}








@media (max-width:767px) {
.container, .description{max-width: 100%;}

.bodysec .container{display: flex; flex-wrap: wrap;}
.right.adminsec,  .left.studentsec{display: none;}
.mobile{top: 102%;}
.feature {position: static;  display: flex; z-index: 2; margin-left: 30px; margin-bottom: 6px; min-width: 145px; font-size: 12px;}
.page-title{font-size: 20px;}
.page-subtitle{font-size: 14px;}
.left::after, .right::after{display: none;} 
.description{top: 675px; max-width: 100%;}
.description p {font-size: 13px; line-height: 1.3;}
.laptop{top: 110%;}
.page-header{background: #cdeaff; padding: 15px 30px; margin-bottom: 10px;}
}