/* ============================= */
/* ANGEL PUBLIC SCHOOL MASTER CSS */
/* ============================= */

:root{

/* ===== Main Colors (Logo Based) ===== */

--primary:#C62828;        /* Logo Red */
--primary-dark:#8E0000;   /* Dark Red */
--secondary:#F4C430;      /* Logo Yellow */
--secondary-light:#FFD95A;

/* ===== Neutral ===== */

--white:#FFFFFF;
--light-bg:#FFF7F7;
--text-dark:#2C2C2C;
--border:#E5E7EB;

/* ===== Extra ===== */

--green:#0B7A3D;

}
/* ===== Reset ===== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/* ===== Typography System ===== */

body{
font-family:'Open Sans', sans-serif;
font-size:16px;
line-height:1.7;
color:var(--text-dark);
}

h1,h2,h3,h4,h5,h6{
font-family:'Poppins', sans-serif;
font-weight:700;
letter-spacing:0.5px;
color:var(--primary);
}

h1{font-size:42px;}
h2{font-size:34px;}
h3{font-size:26px;}
h4{font-size:22px;}
h5{font-size:18px;}
h6{font-size:16px;}

.btn{
font-family:'Poppins', sans-serif;
font-weight:600;
letter-spacing:0.5px;
}

input,select,textarea{
font-family:'Open Sans', sans-serif;
}

p{
margin-bottom:15px;
font-size:16px;
}

a{
text-decoration:none;
color:var(--primary);
transition:0.3s ease;
}

a:hover{
color:var(--gold);
}

/* ===== Navbar ===== */
.navbar{
background:var(--white);

}

.navbar .nav-link{
color:var(--white);
font-weight:600;
margin:0 10px;
}

.navbar .nav-link:hover,
.navbar .active{
color:var(--gold);
}

/* ===== Buttons ===== */
.btn{
padding:10px 20px;
border-radius:5px;
font-weight:600;
transition:0.3s;
display:inline-block;
}

.btn-primary{
background:var(--gold);
color:var(--primary);
border:none;
}

.btn-primary:hover{
background:var(--gold-light);
}

.btn-secondary{
background:var(--primary);
color:var(--white);
border:2px solid var(--gold);
}

.btn-secondary:hover{
background:var(--primary-dark);
color:var(--gold);
}

/* ===== Section Styling ===== */
section{
padding:60px 0;
}

.section-light{
background:var(--white);
}

.section-dark{
background:var(--primary);
color:var(--white);
}

.section-dark h2{
color:var(--gold);
}

/* ===== Cards ===== */
.card{
background:var(--white);
border-radius:10px;
padding:20px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
border-bottom:4px solid var(--gold);
}

/* ===== Forms ===== */
input,
select,
textarea{
width:100%;
padding:10px;
border:1px solid var(--border);
border-radius:5px;
margin-bottom:15px;
font-size:15px;
}

input:focus,
select:focus,
textarea:focus{
outline:none;
border-color:var(--gold);
box-shadow:0 0 5px rgba(244,196,48,0.4);
}

/* ===== Tables ===== */
table{
width:100%;
border-collapse:collapse;
margin-bottom:20px;
background:var(--white);
}

table th{
background:var(--primary);
color:var(--white);
padding:10px;
}

table td{
padding:10px;
border:1px solid var(--border);
}

table tr:nth-child(even){
background:#FAFAFA;
}

/* ===== Notice Board ===== */
.notice{
background:var(--primary-dark);
color:var(--white);
padding:15px;
border-left:5px solid var(--gold);
}

/* ===== Footer ===== */
footer{
background:var(--primary-dark);
color:var(--white);
padding:50px 0;
}

footer h4{
color:var(--gold);
margin-bottom:20px;
}

footer a{
color:var(--white);
}

footer a:hover{
color:var(--gold-light);
}

/* ===== Utility Classes ===== */
.text-primary{color:var(--primary);}
.text-gold{color:var(--gold);}
.bg-primary{background:var(--primary);}
.bg-gold{background:var(--gold);}
.shadow-soft{box-shadow:0 5px 20px rgba(0,0,0,0.08);}





.topbar{
background:#C62828;
font-size:14px;
}

.topbar i{
color:#FFD95A;
margin-right:5px;
}

.topbar .highlight{
color:#FFD95A;
font-weight:600;
}

.topbar small{
letter-spacing:0.3px;
font-size:100%;
}





/* ===================================== */
/* ANGEL PUBLIC SCHOOL NAVBAR FINAL CSS  */
/* ===================================== */

/* Prevent Horizontal Scroll */

html,body{
overflow-x:hidden;
}

/* ================= NAVBAR ================= */

.navbar-main{
background:#ffffff;
border-bottom:3px solid #F4C430;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
position:relative;
z-index:1000;
transition:0.3s;
}

/* Logo Title */

.school-title{
color:#C62828;
font-weight:700;
letter-spacing:1px;
}

.school-tagline{
font-size:13px;
color:#777;
}

/* ================= NAV LINKS ================= */

.navbar-nav .nav-link{
display:inline-flex;
align-items:center;
color:#333;
margin:0 14px;
font-weight:600;
position:relative;
transition:0.3s;
}

/* Hover Color */

.navbar-nav .nav-link:hover{
color:#C62828;
}

/* Underline Hover Animation */

.navbar-nav .nav-link::after{
content:'';
position:absolute;
width:0%;
height:2px;
background:#fff;
left:0;
bottom:-8px;
transition:0.3s;
}

.navbar-nav .nav-link:hover::after{
width:100%;
}

/* Active Link */

.navbar-nav .active{
color:#C62828;
}

/* ================= DROPDOWN ARROW FIX ================= */

.navbar-nav .dropdown-toggle::after{
display:inline-block;
margin-left:6px;
vertical-align:middle;
border-top:.3em solid;
border-right:.3em solid transparent;
border-left:.3em solid transparent;
border-bottom:0;
position:relative;
top:1px;
}

/* ================= DROPDOWN MENU ================= */

.dropdown-menu{
margin-top:12px;
border-radius:8px;
border:none;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
border-top:3px solid #C62828;
padding:8px 0;

opacity:0;
transform:translateY(10px);
display:block;
visibility:hidden;
transition:0.3s ease;
}

/* Show Dropdown */

.nav-item.dropdown:hover .dropdown-menu{
opacity:1;
transform:translateY(0);
visibility:visible;
}

/* Dropdown Items */

.dropdown-item{
padding:10px 20px;
font-weight:500;
transition:0.3s;
}

/* Dropdown Hover */

.dropdown-item:hover{
background:#F4C430;
color:#000;
padding-left:26px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

/* ================= ADMISSION BUTTON ================= */

.admission-btn{
color:#C62828 !important;
font-weight:700;
}

/* Apply Online Highlight */

.highlight-apply{
background:#F4C430;
color:#000;
font-weight:600;
border-radius:4px;
}

.highlight-apply:hover{
background:#FFD95A;
}

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

@media (max-width:991px){

.navbar-nav{
background:#fff;
padding:10px;
}

.navbar-nav .nav-link{
margin:8px 0;
}

.dropdown-menu{
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
border-top:none;
}

.dropdown-item:hover{
padding-left:20px;
}

}




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

.hero-slider{
position:relative;
}

.hero-slide{
height:85vh;
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
}

/* overlay */

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(rgb(34 32 48 / 57%), rgba(0, 0, 0, 0.6));
}

/* content */

.hero-content{
position:relative;
z-index:2;
}

.hero-content h1{
font-size:60px;
font-weight:700;
margin-bottom:15px;
}

.hero-content p{
font-size:20px;
margin-bottom:25px;
}

/* buttons */

.hero-btn-primary{
background:#F4C430;
color:#000;
padding:12px 28px;
font-weight:600;
border-radius:5px;
}

.hero-btn-secondary{
background:#C62828;
color:#fff;
padding:12px 28px;
border-radius:5px;
}

/* arrows */

.carousel-control-prev-icon,
.carousel-control-next-icon{
background-color:rgba(0,0,0,0.4);
padding:25px;
border-radius:50%;
}

/* mobile */

@media (max-width:768px){

.hero-slide{
height:65vh;
}

.hero-content h1{
font-size:34px;
}

.hero-content p{
font-size:16px;
}

}