/* ==========================================
   Muslim Education Trust - Premium CSS
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f5f7fb;
    color:#222;
    overflow-x:hidden;
}

/* Top Bar */

.top-bar{
    background:#0a1f44;
    color:#fff;
    font-size:14px;
    padding:8px 0;
}

.top-bar i{
    color:#ffc107;
    margin-right:6px;
}

/* Notice */

.notice-bar{
    background:#ffc107;
    color:#111;
    font-weight:600;
    padding:8px 0;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* Navbar */

.navbar{
    background:rgba(10,31,68,.95);
    backdrop-filter:blur(10px);
    transition:.3s;
}

.navbar-brand{
    font-size:30px;
    font-weight:700;
    color:#fff !important;
}

.nav-link{
    color:#fff !important;
    margin-left:12px;
    font-weight:500;
    transition:.3s;
    position:relative;
}

.nav-link:hover{
    color:#ffc107 !important;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:#ffc107;
    transition:.3s;
}

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

/* Hero */

.hero{
    height:92vh;
    background:url("../images/banner/banner1.jpg") center center/cover no-repeat;
    position:relative;
}

.overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero h5{
    color:#ffc107;
    letter-spacing:4px;
    font-size:24px;
}

.hero h1{
    color:#fff;
    font-size:70px;
    font-weight:800;
}

.hero h2{
    color:#ffc107;
    font-size:45px;
    margin-bottom:20px;
}

.hero p{
    color:#fff;
    font-size:22px;
    max-width:700px;
    margin:auto;
}

/* Buttons */

.btn-warning{
    padding:15px 35px;
    border-radius:50px;
    font-weight:600;
}

.btn-outline-light{
    padding:15px 35px;
    border-radius:50px;
}

/* Cards */

.card{
    border:none;
    border-radius:20px;
    transition:.4s;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.card i{
    color:#0a1f44;
    margin-bottom:15px;
}

/* Section */

section{
    padding:0px 0;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:40px;
    color:#0a1f44;
    font-weight:700;
}

.section-title p{
    color:#777;
}

/* Stats */

.stats{
    background:#0a1f44;
    color:#fff;
}

.stats h2{
    color:#ffc107;
    font-size:50px;
    font-weight:700;
}

/* Footer */

footer{
    background:#08152d;
    color:#ddd;
    padding:60px 0 25px;
}

footer h4{
    color:#fff;
}

footer a{
    color:#ccc;
    text-decoration:none;
}

footer a:hover{
    color:#ffc107;
}

/* WhatsApp Button */

.whatsapp{
    position:fixed;
    right:25px;
    bottom:25px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    text-decoration:none;
    box-shadow:0 8px 25px rgba(0,0,0,.3);
    z-index:999;
}

/* Back To Top */

#topBtn{
    position:fixed;
    left:25px;
    bottom:25px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#ffc107;
    color:#111;
    font-size:20px;
    display:none;
    cursor:pointer;
    z-index:999;
}

/* Responsive */

@media(max-width:991px){

.hero h1{
    font-size:48px;
}

.hero h2{
    font-size:30px;
}

.hero p{
    font-size:18px;
}

.navbar-brand{
    font-size:24px;
}

}

@media(max-width:576px){

.hero{
    height:75vh;
}

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

.hero h2{
    font-size:22px;
}

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

.btn{
    width:100%;
    margin-top:10px;
}

.top-bar{
    text-align:center;
    font-size:12px;
}

}
@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}
/* મુખ્ય બેનર સેક્શન */
.split-banner {
  display: flex;
  min-height: 85vh;
  width: 100%;
  background: #fdfdfd;
  position: relative;
  overflow: hidden;
}

/* ૧. લખાણ વાળો ભાગ (ડાબી બાજુ) */
.banner-text-side {
  flex: 1.1; /* વિડિયો કરતાં થોડી વધુ જગ્યા આપવા માટે */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  z-index: 2; /* ટેક્સ્ટ વિડિયોની ઉપર જ રહે */
}

.text-content {
  max-width: 520px;
  width: 100%;
}

.welcome-tag {
  color: #666;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.trust-title {
  color: #0d6efd; /* પ્રોફેશનલ બ્લુ કલર */
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 5px;
}

.city-title {
  color: #198754; /* ગ્રીન હાઇલાઇટ */
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.banner-p {
  color: #444;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* બટન્સ સ્ટાઇલ */
.banner-btn-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-explore {
  background-color: #ffc107;
  color: #000;
  padding: 12px 28px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.btn-admission {
  background-color: transparent;
  color: #000;
  border: 2px solid #000;
  padding: 10px 26px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.btn-explore:hover { background-color: #e0a800; }
.btn-admission:hover { background-color: #000; color: #fff; }


/* ૨. વિડિયો વાળો ભાગ (જમણી બાજુ આખો સેટ અને ડાબી બાજુ વળાંક/Curve) */
.banner-video-side {
  flex: 0.9;
  position: relative;
  background: #000;
  /* આ લાઇનથી ડાબી બાજુ મસ્ત મોર્ડન કર્વ (Curve Cut) પડશે */
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 1;
}

.bg-curve-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =======================================================
   મોબાઇલ અને ટેબ્લેટ રિસ્પોન્સિવ (Mobile Responsive)
   ======================================================= */
@media (max-width: 991px) {
  .split-banner {
    flex-direction: column; /* મોબાઇલમાં વિડિયો અને ટેક્સ્ટ ઉપર-નીચે થઈ જશે */
    min-height: auto;
  }

  /* મોબાઇલમાં વિડિયો ઉપર આવશે */
  .banner-video-side {
    order: 1; 
    height: 300px; /* મોબાઇલ પ્રમાણે વિડિયોની હાઇટ સેટ કરી */
    width: 100%;
    /* મોબાઇલમાં કર્વ નીચેની બાજુ સુંદર લાગશે */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
  }

  /* લખાણ નીચે આવશે */
  .banner-text-side {
    order: 2;
    padding: 40px 20px;
    text-align: center;
  }

  .text-content {
    max-width: 100%;
  }

  .trust-title {
    font-size: 32px;
  }

  .city-title {
    font-size: 24px;
  }

  .banner-btn-group {
    justify-content: center;
  }
}