/*==================================================
GREEN VALLEY HIGH SCHOOL
Main Stylesheet
==================================================*/

/*==============================
Google Font
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
Root Variables
==============================*/

:root{

    --primary:#d51212;
    --secondary:#F57C00;
    --dark:#222222;
    --text:#555555;
    --light:#F7F9FC;
    --white:#ffffff;
    --border:#e8e8e8;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --transition:.35s ease;

}

/*==============================
Reset
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.7;
    overflow-x:hidden;

}

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

a{
    text-decoration:none;
    transition:var(--transition);
}

ul{
    list-style:none;
    margin:0;
    padding:0;
}

section{

    position:relative;

}

/*==============================
Utilities
==============================*/

.py-80{

    padding:80px 0;

}

.py-100{

    padding:100px 0;

}

.bg-light{

    background:var(--light);

}

.section-subtitle{

    color:var(--primary);
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:10px;
    display:block;

}

.section-title{

    font-size:40px;
    font-weight:700;
    color:var(--dark);
    margin-bottom:20px;

}

.section-description{

    max-width:720px;
    margin:auto;
    color:#666;

}

/*==============================
Buttons
==============================*/

.btn{

    border-radius:50px;
    padding:13px 28px;
    font-weight:600;
    transition:.3s;

}

.btn-success{

    background:var(--primary);
    border:none;

}

.btn-success:hover{

    background:#25682a;
    transform:translateY(-2px);

}

.btn-outline-success{

    border:2px solid var(--primary);
    color:var(--primary);

}

.btn-outline-success:hover{

    background:var(--primary);
    color:#fff;

}

.admission-btn{

    background:var(--secondary);
    color:#fff;
    border-radius:50px;
    padding:12px 25px;
    margin-left:20px;
    font-weight:600;

}

.admission-btn:hover{

    background:#d96f00;
    color:#fff;

}

/*==============================
Top Header
==============================*/

.top-header{

    background:var(--primary);
    color:#fff;
    padding:10px 0;
    font-size:14px;

}

.top-contact{

    display:flex;
    gap:25px;
    flex-wrap:wrap;

}

.top-contact li{

    display:flex;
    align-items:center;
    gap:8px;

}

.top-social a{

    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    border:1px solid rgba(255,255,255,.3);
    margin-left:8px;

}

.top-social a:hover{

    background:#fff;
    color:var(--primary);

}

/*==============================
Navigation
==============================*/

.main-header{

    background:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
    position:sticky;
    top:0;
    z-index:999;

}

.navbar{

    padding:18px 0;

}

.navbar-brand{

    display:flex;
    align-items:center;

}

.logo{

    width:70px;
    margin-right:15px;

}

.school-name h4{

    margin:0;
    color:var(--primary);
    font-size:24px;
    font-weight:700;

}

.school-name p{

    margin:0;
    font-size:13px;
    color:#888;

}

.navbar-nav .nav-link{

    color:var(--dark);
    font-weight:500;
    margin:0 10px;
    position:relative;

}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{

    color:var(--primary);

}

.navbar-nav .nav-link::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.3s;

}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{

    width:100%;

}

/*==============================
Hero Section
==============================*/

.hero-section{

    padding:90px 0;
    background:linear-gradient(135deg,#F7FFF8,#ECF8EF);

}

.hero-subtitle{

    color:var(--secondary);
    font-weight:700;
    letter-spacing:2px;
    display:block;
    margin-bottom:12px;

}

.hero-section h1{

    font-size:56px;
    line-height:1.2;
    color:var(--dark);
    font-weight:700;
    margin-bottom:25px;

}

.hero-section h1 span{

    color:var(--primary);

}

.hero-section p{

    margin-bottom:35px;
    font-size:17px;

}

.hero-buttons{

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}

.hero-image{

    text-align:center;

}

.hero-image img{

    border-radius:20px;
    box-shadow:var(--shadow);

}

.hero-highlights{

    display:flex;
    margin-top:45px;
    gap:25px;
    flex-wrap:wrap;

}

.hero-highlights div{

    background:#fff;
    box-shadow:var(--shadow);
    padding:20px 30px;
    border-radius:15px;
    min-width:120px;
    text-align:center;

}

.hero-highlights h3{

    color:var(--primary);
    font-size:30px;
    margin-bottom:5px;

}

.hero-highlights p{

    margin:0;
    font-size:14px;

}

/*==============================
Welcome Section
==============================*/

.welcome-section{

    padding:100px 0;

}

.welcome-section img{

    border-radius:20px;
    box-shadow:var(--shadow);

}

.welcome-section h2{

    color:var(--dark);
    font-size:38px;
    font-weight:700;
    margin-bottom:25px;

}

.welcome-section p{

    margin-bottom:20px;

}

.welcome-list li{

    margin-bottom:14px;
    color:#444;
    font-weight:500;

}

.welcome-list i{

    color:var(--primary);
    margin-right:10px;
}
/*==================================================
WHY CHOOSE OUR SCHOOL
==================================================*/

.why-choose{

  padding:100px 0;
  background:#ffffff;

}

.feature-box{

  background:#ffffff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:35px 25px;
  text-align:center;
  transition:var(--transition);
  height:100%;
  box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.feature-box:hover{

  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,.10);
  border-color:var(--primary);

}

.feature-icon{

  width:80px;
  height:80px;
  margin:0 auto 25px;
  border-radius:50%;
  background:rgba(46,125,50,.10);
  display:flex;
  align-items:center;
  justify-content:center;

}

.feature-icon i{

  font-size:34px;
  color:var(--primary);

}

.feature-box h4{

  color:var(--dark);
  font-size:22px;
  font-weight:600;
  margin-bottom:15px;

}

.feature-box p{

  color:#666;
  margin:0;

}

/*==================================================
PRINCIPAL MESSAGE
==================================================*/

.principal-section{

  padding:100px 0;
  background:var(--light);

}

.principal-photo{

  text-align:center;

}

.principal-photo img{

  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);

}

.principal-section h2{

  font-size:38px;
  color:var(--dark);
  margin-bottom:25px;

}

.principal-section p{

  margin-bottom:18px;

}

.principal-section h5{

  color:var(--primary);
  font-weight:700;
  margin-bottom:5px;

}

.principal-section span{

  color:#888;

}

/*==================================================
VISION & MISSION
==================================================*/

.vision-mission{

  padding:100px 0;

}

.vision-card{

  background:#ffffff;
  padding:45px;
  border-radius:18px;
  box-shadow:var(--shadow);
  height:100%;
  transition:var(--transition);

}

.vision-card:hover{

  transform:translateY(-8px);

}

.vm-icon{

  width:80px;
  height:80px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  margin-bottom:25px;

}

.vision-card h3{

  color:var(--dark);
  margin-bottom:20px;

}

.vision-card p{

  margin:0;

}

/*==================================================
SCHOOL HIGHLIGHTS
==================================================*/

.highlights-section{

  padding:100px 0;
  background:#ffffff;

}

.highlight-card{

  background:#ffffff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:35px 20px;
  text-align:center;
  transition:var(--transition);
  height:100%;

}

.highlight-card:hover{

  background:var(--primary);
  color:#ffffff;
  transform:translateY(-8px);

}

.highlight-card:hover h4,
.highlight-card:hover i{

  color:#ffffff;

}

.highlight-card i{

  font-size:42px;
  color:var(--primary);
  margin-bottom:20px;

}

.highlight-card h4{

  color:var(--dark);
  font-size:20px;
  font-weight:600;
  margin:0;

}

/*==================================================
STATISTICS
==================================================*/

.statistics-section{

  padding:80px 0;
  background:linear-gradient(135deg,#2E7D32,#1B5E20);
  color:#ffffff;

}

.stat-box{

  padding:25px;

}

.stat-box h2{

  font-size:52px;
  font-weight:700;
  margin-bottom:10px;
  color:#ffffff;

}

.stat-box p{

  margin:0;
  font-size:18px;
  opacity:.95;

}

/*==================================================
COMMON IMAGE EFFECTS
==================================================*/

img{

  transition:var(--transition);

}

img:hover{

  transform:scale(1.02);

}

/*==================================================
SECTION TITLE
==================================================*/

.section-title{

  position:relative;
  margin-bottom:20px;

}

.section-title::after{

  content:"";
  display:block;
  width:70px;
  height:4px;
  background:var(--secondary);
  margin:15px auto 0;
  border-radius:10px;

}

/*==================================================
ANIMATION HELPERS
==================================================*/

.fade-up{

  animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

  from{

      opacity:0;
      transform:translateY(30px);

  }

  to{

      opacity:1;
      transform:translateY(0);

  }

}

/*==================================================
CARD SHADOW HELPERS
==================================================*/

.shadow-soft{

  box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.rounded-xl{

  border-radius:20px;

}
/*==================================================
SCHOOL FACILITIES
==================================================*/

.facilities-section{

  padding:100px 0;
  background:var(--light);

}

.facility-card{

  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
  height:100%;

}

.facility-card:hover{

  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.facility-card img{

  width:100%;
  height:240px;
  object-fit:cover;

}

.facility-content{

  padding:25px;

}

.facility-content i{

  width:60px;
  height:60px;
  border-radius:50%;
  background:rgba(46,125,50,.12);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:20px;

}

.facility-content h4{

  font-size:24px;
  color:var(--dark);
  margin-bottom:12px;
  font-weight:600;

}

.facility-content p{

  margin:0;
  color:#666;

}

/*==================================================
LATEST NEWS
==================================================*/

.news-section{

  padding:100px 0;

}

.news-card{

  background:#ffffff;
  border-left:5px solid var(--primary);
  border-radius:15px;
  padding:30px;
  box-shadow:var(--shadow);
  transition:var(--transition);
  height:100%;

}

.news-card:hover{

  transform:translateY(-8px);

}

.news-date{

  display:inline-block;
  background:var(--secondary);
  color:#ffffff;
  padding:6px 14px;
  border-radius:25px;
  font-size:13px;
  margin-bottom:18px;
  font-weight:600;

}

.news-card h4{

  font-size:22px;
  margin-bottom:15px;
  color:var(--dark);

}

.news-card a{

  color:var(--primary);
  font-weight:600;

}

.news-card a:hover{

  color:var(--secondary);

}

/*==================================================
EVENTS
==================================================*/

.events-section{

  padding:100px 0;
  background:#f8f9fa;

}

.event-card{

  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
  height:100%;

}

.event-card:hover{

  transform:translateY(-10px);

}

.event-card img{

  width:100%;
  height:240px;
  object-fit:cover;

}

.event-content{

  padding:25px;

}

.event-content h4{

  color:var(--dark);
  margin-bottom:15px;
  font-size:24px;

}

.event-content p{

  margin:0;

}

/*==================================================
PHOTO GALLERY
==================================================*/

.gallery-section{

  padding:100px 0;

}

.gallery-img{

  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:15px;
  cursor:pointer;
  transition:.4s;

}

.gallery-img:hover{

  transform:scale(1.05);
  box-shadow:0 15px 35px rgba(0,0,0,.15);

}

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

.cta-section{

  background:linear-gradient(135deg,#2E7D32,#1B5E20);
  color:#ffffff;
  text-align:center;
  padding:90px 20px;

}

.cta-section h2{

  font-size:42px;
  margin-bottom:20px;
  font-weight:700;

}

.cta-section p{

  max-width:700px;
  margin:0 auto 35px;
  font-size:18px;

}

.cta-section .btn{

  background:#ffffff;
  color:var(--primary);
  border-radius:50px;
  padding:15px 35px;
  font-weight:600;
  transition:var(--transition);

}

.cta-section .btn:hover{

  background:var(--secondary);
  color:#ffffff;

}

/*==================================================
IMAGE OVERLAY EFFECT
==================================================*/

.image-overlay{

  position:relative;
  overflow:hidden;
  border-radius:18px;

}

.image-overlay img{

  transition:.5s;

}

.image-overlay:hover img{

  transform:scale(1.08);

}

.image-overlay::before{

  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  opacity:0;
  transition:.4s;

}

.image-overlay:hover::before{

  opacity:1;

}

/*==================================================
CARD BUTTON
==================================================*/

.card-btn{

  display:inline-block;
  margin-top:20px;
  color:var(--primary);
  font-weight:600;

}

.card-btn:hover{

  color:var(--secondary);

}

/*==================================================
SMALL BADGES
==================================================*/

.badge-custom{

  display:inline-block;
  background:rgba(46,125,50,.10);
  color:var(--primary);
  padding:6px 16px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;

}

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

.mb-60{

  margin-bottom:60px;

}

.mt-60{

  margin-top:60px;

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

.footer{

  background:#1f2937;
  color:#d1d5db;
  padding:80px 0 0;

}

.footer-logo{

  width:80px;
  margin-bottom:20px;

}

.footer h4,
.footer h5{

  color:#ffffff;
  margin-bottom:20px;
  font-weight:600;

}

.footer p{

  color:#d1d5db;
  line-height:1.8;

}

/* Footer Links */

.footer-links{

  padding:0;
  margin:0;

}

.footer-links li{

  margin-bottom:12px;

}

.footer-links a{

  color:#d1d5db;
  transition:.3s;

}

.footer-links a:hover{

  color:var(--secondary);
  padding-left:8px;

}

/* Contact */

.footer-contact{

  padding:0;
  margin:0;

}

.footer-contact li{

  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:18px;
  line-height:1.7;

}

.footer-contact i{

  color:var(--secondary);
  width:18px;
  margin-top:4px;

}

/* Social */

.footer-social{

  margin-top:25px;
  display:flex;
  gap:12px;

}

.footer-social a{

  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:#ffffff;
  transition:.3s;

}

.footer-social a:hover{

  background:var(--secondary);
  transform:translateY(-4px);

}

/* Google Map */

.footer-map{

  overflow:hidden;
  border-radius:12px;

}

.footer-map iframe{

  width:100%;
  border:0;

}

/* Bottom Footer */

.footer-bottom{

  margin-top:60px;
  border-top:1px solid rgba(255,255,255,.10);
  padding:20px 0;

}

.footer-bottom p{

  margin:0;
  font-size:14px;

}

.footer-bottom a{

  color:var(--secondary);

}

/*==================================================
PAGE BANNER
==================================================*/

.page-banner{

  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#ffffff;
  background-size:cover;
  background-position:center;

}

.page-banner::before{

  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);

}

.page-banner-content{

  position:relative;
  z-index:2;

}

.page-banner h1{

  font-size:48px;
  font-weight:700;
  margin-bottom:15px;

}

.page-banner p{

  font-size:18px;

}

/*==================================================
FORMS
==================================================*/

.form-control,
.form-select{

  border-radius:10px;
  padding:14px 16px;
  border:1px solid #dcdcdc;
  box-shadow:none;

}

.form-control:focus,
.form-select:focus{

  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(46,125,50,.15);

}

textarea.form-control{

  resize:none;

}

/*==================================================
TABLES
==================================================*/

.table{

  border-radius:10px;
  overflow:hidden;

}

.table thead{

  background:var(--primary);
  color:#ffffff;

}

.table th{

  font-weight:600;

}

/*==================================================
WHATSAPP BUTTON
==================================================*/

.whatsapp-btn{

  position:fixed;
  right:25px;
  bottom:90px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  z-index:999;
  transition:.3s;

}

.whatsapp-btn:hover{

  transform:scale(1.08);
  color:#ffffff;

}

/*==================================================
BACK TO TOP
==================================================*/

#scrollTopBtn{

  position:fixed;
  right:25px;
  bottom:20px;
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:var(--primary);
  color:#ffffff;
  cursor:pointer;
  display:none;
  z-index:999;
  transition:.3s;

}

#scrollTopBtn:hover{

  background:var(--secondary);

}

/*==================================================
BOOTSTRAP ACCORDION
==================================================*/

.accordion-button{

  font-weight:600;

}

.accordion-button:not(.collapsed){

  background:rgba(46,125,50,.08);
  color:var(--primary);

}

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

@media (max-width:991px){

.hero-section{

  padding:70px 0;

}

.hero-section h1{

  font-size:42px;

}

.section-title{

  font-size:32px;

}

.navbar-brand{

  width:75%;

}

.logo{

  width:60px;

}

.school-name h4{

  font-size:20px;

}

.hero-image{

  margin-top:40px;

}

.hero-highlights{

  justify-content:center;

}

.footer{

  text-align:center;

}

.footer-social{

  justify-content:center;

}

.footer-contact li{

  justify-content:center;

}

}

@media (max-width:768px){

.top-header{

  display:none;

}

.hero-section{

  text-align:center;

}

.hero-buttons{

  justify-content:center;

}

.hero-section h1{

  font-size:34px;

}

.section-title{

  font-size:28px;

}

.page-banner{

  min-height:220px;

}

.page-banner h1{

  font-size:34px;

}

.hero-highlights{

  justify-content:center;

}

.hero-highlights div{

  min-width:100px;

}

.stat-box{

  margin-bottom:30px;

}

}

@media (max-width:576px){

.btn{

  width:100%;

}

.admission-btn{

  margin:15px 0 0;

}

.hero-buttons{

  flex-direction:column;

}

.page-banner h1{

  font-size:28px;

}

}

/*==================================================
PRINT
==================================================*/

@media print{

.whatsapp-btn,
#scrollTopBtn,
.top-header,
.navbar,
.footer{

  display:none !important;

}

body{

  color:#000;

}

}

/*==================================================
END OF FILE
==================================================*/