/* Right side contact tab */
#contactTab{
  position: fixed;
  right: -30px;
  top: 50%;
  background: #ff5a5f;
  color: #fff;
  padding: 10px 20px;
  transform: rotate(-90deg);
  cursor: pointer;
  font-weight: bold;
  border-radius: 50px 5px 0 0;
  z-index: 9999; /* important */
}

/* popup box */
#contactPopup{
  position: fixed;
  right: -320px;
  top: 15%;
  width: 300px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  transition: 0.5s;
  border-radius: 8px;
  z-index: 9999; /* important */
}


/* open state */
#contactPopup.active{
  right: 10px;
}

#contactPopup input,
#contactPopup textarea{
  width: 100%;
  padding: 8px;
  margin: 8px 0;
}

#closeBtn{
  float:right;
  cursor:pointer;
  font-size:20px;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:10px;
margin:8px 0;
border:1px solid #666666;
border-radius:6px;
font-size:14px;
}

.contact-form textarea{
/*height:90px;*/
resize:none;
}

/* Button Design */
.send-btn{
width:100%;
padding:12px;
border:none;
background:linear-gradient(45deg,#ff5a5f,#ff9966);
color:white;
font-size:16px;
font-weight:bold;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.send-btn:hover{
background:linear-gradient(45deg,#ff9966,#ff5a5f);
transform:scale(1.05);
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}


/* ===== VPS HERO BANNER ===== */

.vps-hero{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* background */
.vps-hero-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url('assets/images/banner/1.jpeg') center center no-repeat;
    background-size:cover;
    animation:vpsHeroZoom 20s infinite alternate ease-in-out;
}

/* zoom animation */
@keyframes vpsHeroZoom{
    0%{ transform:scale(1); }
    100%{ transform:scale(1.30); }
}

/* overlay */
.vps-hero-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.35);
}

/* content */
.vps-hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding-top:120px;
    padding-left:20px;
    padding-right:20px;
}

/* box design */
.vps-hero-box{
    background: rgba(255,255,255,0.55); /* more transparent */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding:40px 35px;
    border-radius:12px;
    max-width:750px;
    margin:auto;
    box-shadow:0 10px 35px rgba(0,0,0,0.20);
    border:1px solid rgba(255,255,255,0.35);
}

/* title */
.vps-hero-box h1{
    color:#273c66;
    font-size:42px;
    font-weight:700;
    margin-bottom:15px;
}

/* text */
.vps-hero-box p{
    color:#444;
    font-size:18px;
    line-height:1.6;
}

/* button */
.vps-hero-btn{
margin-top:20px;
}

.vps-hero-btn a{
    background:#ff3115;
    color:#fff;
    padding:14px 35px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.vps-hero-btn a:hover{
    background:#273c66;
}

/* mobile */
@media(max-width:768px){

.vps-hero-content{
padding-top:80px;
}

.vps-hero-box{
padding:25px;
}

.vps-hero-box h1{
font-size:26px;
}

.vps-hero-box p{
font-size:15px;
}

}


.social-sidebar{
position:fixed;
left:0;
top:50%;
transform:translateY(-50%);
z-index:9999;
}

.social-sidebar a{
display:block;
width:45px;
height:45px;
line-height:45px;
text-align:center;
color:white;
margin:6px 0;
font-size:18px;
transition:0.4s;
border-radius:0 25px 25px 0;
}

/* Colors */
.facebook{background:#1877f2;}
.twitter{background:#1da1f2;}
.instagram{background:#e4405f;}
.youtube{background:#ff0000;}
.whatsapp{background:#25d366;}

/* Hover effect */
.social-sidebar a:hover{
width:60px;
padding-left:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transform:scale(1.1);
}


/* Mobile main menu overlay */
/*.menu-area.menu-sticky {
    position: relative;
    z-index: 10000;         
}
*/

/* Hide social sidebar on mobile */
@media (max-width:768px){
  .social-sidebar{
    display:none;
  }
}



 .custom-cta{
background: linear-gradient(135deg,#1e3c72,#2a5298);
color:white;
}

.school-image img{
width:100%;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.custom-cta .title{
color:#fff;
font-size:28px;
font-weight:700;
}

.custom-cta .desc{
color:#e6e6e6;
font-size:15px;
line-height:1.7;
}

/* Button Design */
.apply-btn{
display:inline-block;
padding:10px 25px;
background:#ffb703;
color:#000;
font-weight:600;
border-radius:30px;
text-decoration:none;
transition:0.3s;
}

.apply-btn:hover{
background:#ffd166;
transform:translateY(-3px);
}


/* privacy Banner Section */
.about-banner{
    background: linear-gradient(135deg, #1e3c72, #2a5298); /* gradient background */
    color: #fff;
    padding: 20px 0; /* top & bottom padding */
    position: relative;
    text-align: center;
    overflow: hidden;
    border-radius: 0 0 50% 50% / 0 0 10% 10%; /* bottom curve effect */
}

/* Banner Title */
.about-banner .banner-title{
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 1px;
	color:#FFFFFF;
}

/* Banner Subtitle */
.about-banner .banner-subtitle{
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 30px;
}

/* Banner Button */
.about-banner .banner-btn{
    display: inline-block;
    padding: 12px 30px;
    background: #ffb703;
    color: #000;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.about-banner .banner-btn:hover{
    background: #ffd166;
    transform: translateY(-3px);
}



.marquee {
width: 100%;
height: 500px;
overflow: hidden;
}
.marquee:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}


.banner-info-area{
width:100%;
display:flex;
justify-content:space-between; /* Left & Right Box distance */
align-items:center;
gap:20px; /* gap between boxes */
margin-top:-90px;
position:relative;
}

.info-box{
width:380px;
height:260px;
padding:30px;
background:linear-gradient(180deg,#274a7a,#0c2a55);
color:#fff;
box-shadow:0 15px 30px rgba(0,0,0,0.3);
display:flex;
flex-direction:column;
justify-content:center;
}

/* Left & Right Shapes */
.left-box{
clip-path:polygon(0 0,100% 20%,100% 80%,0 100%);
border-top-right-radius:60px;
border-bottom-right-radius:60px;
}

.right-box{
clip-path:polygon(0 20%,100% 0,100% 100%,0 80%);
border-top-left-radius:60px;
border-bottom-left-radius:60px;
}

.info-box p{
font-size:14px;
line-height:22px;
}

.info-box a{
color:#ffcc00;
text-decoration:none;
font-weight:bold;
}

/* Marquee between boxes */
.middle-marquee{
flex:1;
overflow:hidden;
white-space:nowrap;
height:30px; /* height of marquee row */
display:flex;
align-items:center;
position:relative;
}

.middle-marquee p{
display:inline-block;
padding-left:100%; /* start off screen */
animation:marquee 25s linear infinite;
margin:0;
color:#000;
font-weight:bold;
}

@keyframes marquee{
0% {transform:translateX(0);}
100% {transform:translateX(-100%);}
}

/* Responsive */
@media(max-width:1024px){
.banner-info-area{
flex-direction:column;
gap:15px;
margin-top:0;
}
.middle-marquee{
width:100%;
padding:10px 0;
}
}

@media (max-width:768px){
.banner-info-area{
display:none;
}
}


#circles-container{
position:relative;
width:340px;
height:340px;
margin:auto;
}

/* Main Circle */
.main-circle-content{
position:absolute;
width:160px;
height:160px;
border-radius:50%;
overflow:hidden;
left:90px;
top:90px;
background:#fff;
border:2px solid #ccc;
box-shadow:0 6px 14px rgba(0,0,0,0.25);
}

.main-circle-content img{
width:100%;
height:100%;
border-radius:50%;
}

/* Mini circles */
.min-circle{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
overflow:hidden;
border:1px solid #ccc;
background:#f5f5f5;
box-shadow:0 3px 8px rgba(0,0,0,0.2);
transition:0.3s;
}

/* Hover Animation */
.min-circle:hover{
animation:pulse 0.6s;
}

@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}
}

.min-circle img{
width:100%;
height:100%;
object-fit:cover;
}

/* Circle positions */
.min-circle:nth-child(2){top:-10px; left:130px;}
.min-circle:nth-child(3){top:40px; left:260px;}
.min-circle:nth-child(4){top:160px; left:270px;}
.min-circle:nth-child(5){top:270px; left:170px;}
.min-circle:nth-child(6){top:270px; left:40px;}
.min-circle:nth-child(7){top:160px; left:-20px;}
.min-circle:nth-child(8){top:40px; left:10px;}


.about-box{
border:2px solid #e0e0e0;
padding:25px;
border-radius:10px;
background:#ffffff;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
margin-top:50px;
}

.about-box h3{
font-size:22px;
font-weight:600;
margin-bottom:10px;
color:#273c66;
}


.school-title {
font-size:36px;    
font-weight:bold;     /* bold */
text-transform:uppercase; 
color:#273c66;       
margin:20px 0;       

}


.school-section{
background:#b8c3cf;
padding:80px 0;
}

.school-card{
background:#fff;
padding:60px 20px;
box-shadow:0 0 15px rgba(0,0,0,0.08);
transition:0.3s;
margin-bottom:15px;
}

.school-card:hover{
background:#eaf4ff;   /* light blue */
transform:translateY(-8px);
}

.school-icon{
width:40px;
margin-bottom:10px;
}

.school-card hr{
width:120px;
margin:10px auto;
border:1px solid #0aa24f;
}

.school-card h3{
color:#0aa24f;
font-weight:600;
margin-bottom:10px;
}

.school-card p{
color:#0aa24f;
font-size:14px;
}