/* ======================================================
   BlueWave Air - style.css
   - organized and commented for teaching
   - deep red wine color: #b22222
   ====================================================== */

/* ==========  :root / global variables ========== */
:root{
  --primary: #11877b; /* deep red wine */
  --primary-hover: #2d9b90;
  --text: #222;
  --muted: #666;
  --bg-milk: #fff7e0;
  --bg: #fff;
  --text-white: #fff;
  --max-width: 1180px;
  --container-padding: 16px;
  --radius: 6px;
  --font-head: arial, sans-serif;
  --font-body: "Poppins" , sans-serif;
}
*{
    box-sizing:border-box /* it help prevent content box from breaking to the next line by fitting extra styles of the box to become the total width given. ie if width is 200px and padding of 10px is given, instead of becoming 220px altoghether, it remains 200px */
}
html,body{
    margin:0;
    padding:0;
    color:var(--text);
    background:var(--bg);
    line-height:1.45 /* Line height is the space between the top text and the bottom text, if the text breaks to a new line(here the value in px is whatever the element font-size is times 1.45) */
}
.container{
    /* Here container will have width of 100% to be used of small device, but on wider device we dont want to strech the content to take 100% of the screen, so we tell the content to maintain just 1180px of the container size.*/
    width: 80%;
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 var(--container-padding)
}
img{
    max-width:100%;
    display:block;
    height:auto
}
a{
    color:var(--primary);
    text-decoration:none
}
h1,h2,h3,h4,h5{
    margin:0 0 12px 0;
    font-weight:700
}
p{
    margin:0 0 12px 0;
    color:var(--muted)
}
.section-block{
    padding: 96px 0 48px;
}
/* simple grid helpers */
.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr); /* fr means fractional unit, so you are telling it to divide the element into 3 column of equal size 1/3. same as :1fr 1fr 1fr. repeat() is a function to avoid repeatation */
    gap:24px
}
.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr); /* fr means fractional unit, so you are telling it to divide the element into 3 column of equal size 1/3. same as :1fr 1fr 1fr. repeat() is a function to avoid repeatation */
    gap:24px
}
@media(max-width: 768px){
 .container{
    width: 100%;
 }
}
@media (max-width:991px){
    .container{
        width: 90%;
    }
    .grid-2{
        grid-template-columns:1fr;
        gap:32px;
    }
    .grid-3{
        grid-template-columns:1fr;
    }
}

/* ========== NAVIGATION ========== */
/* NAV wrapper */
.navbar{
    background:#1b2222;
}
.nav-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
}

/* Brand */
.navbar-brand img{
    height:48px;
    display:block
}

/* Nav items */
.nav-items-left{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap: 20px;
    align-items:center
}
.nav-items{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap: 50px;
    align-items:center
}

.nav-item {
  position: relative;
  display: inline-block;
  padding: 0;
}

.nav-item a{
    display:block;
    padding:12px 0;
    color:var(--text-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
}

.nav-item.active a{
    text-decoration: underline;
    text-decoration-color: var(--text-white);
}

/* mobile nav toggle */
.nav-toggle{
    display:none;
    background:transparent;
    border:0;
    font-size:14px;
    padding:8px;
    color: var(--text-white);
    cursor:pointer
}
@media (max-width:880px){
  .nav-toggle{
    display:block
   }
  .nav-items{
    z-index:999;
    position:fixed;
    left:0;
    top:70px;
    background:#1b2222;
    width:100%;
    flex-direction:column;
    gap:10px;
    align-items:start;
    padding:30px 16px;
    transform:translateY(-110%);
    transition:transform .25s ease;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    height: 100%;
   }
   .nav-item {
    width: 100%;
   }
  .nav-items.open{
    transform:translateY(0);
   }
}

.prime_banner {
  position: relative;
  padding: 40px 0;
  background: url('../img/prime/schoolboy-studying.jpg') center/cover no-repeat;
}

/* Black transparent overlay */
.prime_banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.87); /* adjust transparency */
  z-index: 1;
}

.prime_banner_image {
  position: relative;
  z-index: 2; /* ensures image is above overlay */
  width: 70%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prime_banner_image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* .prime_banner {
  background: #f9f8f7;
  padding: 10px 0;
}

.prime_banner_image {
  width: 70%; 
  max-width: 1200px; 
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.prime_banner_image img {
  width: 100%;
  height: auto; 
  object-fit: cover; 
} */

@media (max-width: 768px) {
  .prime_banner_image {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .prime_banner {
    padding: 5px 0;
  }
}


.welcome{
    background-color: var(--primary);
    padding: 70px 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    color: var(--text-white);
}
.welcome h4{
    font-size: 25px;
    margin-bottom: 28px;
    font-weight: 700;
    font-family: var(--font-head);
}
.welcome h2{
    font-size: 30px;
    font-style: italic;
    margin-bottom: 50px;
    font-weight: 900;
    font-family: var(--font-head);
}
.welcome h5{
    font-size: 18px;
    font-style: italic;
    margin-bottom: 35px;
    font-weight: 800;
    font-family: var(--font-head);
}
.welcome-btn a{
    display: inline-block;
    background: var(--text-white);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: var(--radius);
    text-decoration: none;
    font-family: var(--font-body);
}
.mission-vision{
    background-color: var(--bg-milk);
    padding: 40px 0;
    width: 100%;
}
.mission-content{
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin:0 auto;
    gap:20px;
    
}
.mission-img{
    width: 100%;
    display: flex;
    justify-content: end;
}
.mission-content h3{
    font-size: 25px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-head);
    margin-bottom: 25px;
}
.mission-content h4{
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-body);
    margin-bottom: 20px;
}
@media(max-width: 991px){
    .mission-content{
    width: 80%;
    }
}
@media(max-width: 768px){
    .mission-content h3{
        font-size: 14px;
    }
    .mission-content{
    width: 100%;
    padding: 0 20px;
    }
}

@media(max-width: 576px){
    .mission-content{
    width: 100%;
    padding: 0 20px;
    grid-template-columns: 1fr;
    text-align: center;
    }
    .mission-img{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

.section-expectancy{
    padding: 25px 0;
    background-color: var(--primary);
}
.expectancy-content{
    width:60%;
    margin: 0 auto;
    text-align: center;
}
.section-expectancy h2{
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-head);
    margin-bottom: 25px;
    color: var(--text-white)
}
.section-expectancy p{
    font-size: 18px;
    font-family: var(--font-body);
    color: var(--text-white);
}
@media (max-width: 991px){
    .expectancy-content{
        width: 95%;
    }
}
.teacher-profile{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--bg-milk);
}
.profile-image{
    height: 550px; 
    overflow: hidden;
}
.profile-image img{
    width: 100%;
    height: auto;
    object-fit: cover;  
    object-position: center;
}
.profile-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.profile-name{
    padding: 120px 0;
}
.profile-name h2{
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-body);
    margin-left: 80px;
}

@media (max-width:768px){
    .teacher-profile{
        grid-template-columns: 1fr;
    }
    .profile-name{
        padding: 40px 0;
        text-align: start;
    }
}
@media (max-width:576px){
    .profile-name h2{
        font-size: 14px;
        margin-left: 20px;
    }
}
.teacher-quote{
    display:grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--bg-milk);
    
}

.quote-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.quote-text{
    width: 80%;
    padding: 40px;
    margin: 0 auto;
    background-color: var(--bg-milk);
}
.quote-text h2{
    font-size: 40px;
    line-height: 40px;
    font-weight: 700;
    font-family: var(--font-head);
    margin-bottom: 15px;
}
.quote-text h4{
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-head);
    font-style: italic;
    text-align: center;
}
.quote-image{
    position: relative;
    width: 100%;
    height: 532px;
    /* overflow: hidden; */
}
.quote-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Create the curved left edge */
    clip-path: ellipse(90% 50% at 100% 50%);
}
@media (max-width: 991px) {
    .quote-text{
        width: 98%;
        padding-right: 10px;
    }
    .quote-text h2{
        font-size: 38px;
        line-height: 39px;
    }
}
@media (max-width: 768px) {
    .quote-text{
        width: 100%;
        padding: 15px;
    }
    .quote-text h2{
        font-size: 14px;
        line-height: 24px;
    }
  .teacher-quote {
    grid-template-columns: 1fr;
  }

  /* Swap order: make right go first */
  .teacher-quote .quote-image {
    order: -1; /* moves it above the left one */
  }
}
.about-me{
    background-color: var(--primary);
    padding: 40px 10px;
}
.about-content{
    width: 50%;
    margin: 0 auto;
}
.about-content h2{
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-head);
    margin-bottom: 32px;
    color: var(--text-white);
    text-align: center;
}
.about-content p{
    font-size: 20px;
    font-family: var(--font-body);
    color: var(--text-white);
    margin-bottom: 20px;
    text-align: justify;
}
@media (max-width: 991px){
    .about-content{
        width: 80%;
    }
}
@media (max-width: 768px){
    .about-content{
        width: 96%;
    }
    .about-content p{
    font-size: 16px;
    }
}
.carousel-container{
     background-color: var(--bg-milk);
     padding: 50px 0 50px;
}
.carousel-section {
  width: 100%;
  position: relative;
}

.swiper {
  width: 80%;
  margin: 0 auto;
}

.swiper-wrapper{
    display: flex !important;
    align-items: center !important;
}

/* Default slide images */
.swiper-slide img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 15px;
  transition: height 0.4s ease, transform 0.4s ease;
}

/* Active slide: larger height + slight scale */
.swiper-slide-active img {
  height: 300px;
  transform: scale(1.05);
}
.swiper-pagination{
    bottom: -40px !important;
}

/* Navigation buttons styling */
.swiper-button-prev,
.swiper-button-next {
  color: var(--primary) !important;
  width: 10px !important;
  height: 10px !important;
  top: 60%;
  transform: translateY(-60%);
}

/* Place buttons at extreme edges */
.swiper-button-prev {
  left: 90px !important;
}
.swiper-button-next {
  right: 90px !important;
}

/* Pagination dots */
.swiper-pagination-bullet {
  background: #999 !important;
  opacity: 0.7;
}
.swiper-pagination-bullet-active {
  background: #000 !important;
  opacity: 1;
}
.testimonial{
    background: var(--primary);
    padding: 20px;
}
.testimonial h2{
    font-size: 25px;
    font-style: italic;
    font-weight: 800;
    text-align: center;
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-white);
}
@media (max-width: 768px){
    .testimonial h2{
        font-size: 14px;
    }
}
.signup-quote{
    background-color: var(--bg-milk);
    padding: 30px;
}
.signup-content{
    display: flex;
    align-items: center;
    gap: 50px;
    width: 70%;
    margin: 0 auto;
}
.signup-content-left h2{
    font-size: 25px;
    font-family: var(--font-body);
    margin-top: 20px;
    margin-bottom: 20px;
}
.signup-content-left h4{
    font-style: italic;
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--text);
}
.signup-content-left ul li{
    font-style: italic;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text);
    font-weight: 600;
}
.signup-content-left p{
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--text);
}
.signup-content-right{
    min-width: 380px;
}
@media (max-width: 1024px){
    .signup-content{
        width: 85%;
    }
    .signup-content-left{
        flex-grow: 1;
    }
}
@media (max-width: 991px){
    .signup-content{
        width: 95%;
    }
    .signup-content-left{
        flex-grow: 1;
    }
}
@media (max-width: 768px){
    .signup-content{
        width: 95%;
        flex-direction: column-reverse;
        gap: 20px;
    }
    .signup-content-left h2{
        font-size: 14px;
    }
}
.the-best{
    background-color: var(--primary);
    padding: 20px;
}
.the-best h2{
    font-size: 23px;
    text-align: center;
    color: var(--text-white);
    font-family: var(--font-body);
    font-weight: 700;
    margin:0;
}
@media (max-width: 768px){
    .the-best h2{
        font-size: 14px;
    }
}
.star-section{
    background-color: var(--bg-milk);
    padding: 30px;
}
.star-content{
    width: 65%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.start-review,.start-signup,.start-login{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.start-review h3,.start-signup h3,.start-login h3{
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-body);
    margin-top: 15px;
}
.start-review p,.start-signup p,.start-login p{
    font-size: 12px;
    font-family: var(--font-body);
    text-align: center;
    margin-top: 10px;
    color: var(--text);
}
.start-review img,.start-signup img,.start-login img{
    width: 100px;
    height: 100px;
}
@media (max-width: 991px){
    .star-content{
        width: 80%;
        gap: 30px;
    }
    .start-review h3,.start-signup h3,.start-login h3{
        text-align: center;;
    }
    .start-review p,.start-signup p,.start-login p{
        margin-top:0;
    }
}
@media (max-width: 576px){
    .star-content{
        width: 95%;
        flex-direction: column;
        gap: 10px;
    }
    .start-review img,.start-signup img,.start-login img{
        width: 80px;
        height: 80px;
    }
}
.tutoring-policy{
    background-color: var(--primary);
    padding: 40px 0;
}
.policy-content{
    width: 60%;
    margin: 0 auto;
    text-align: center;
}
.tutoring-policy h2{
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-head);
    margin-bottom: 50px;
    color: var(--text-white);
    text-align: center;
}
.tutoring-policy p{
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--text-white);
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 991px){
    .policy-content{
        width: 80%;
    }
}
@media (max-width: 768px){
    .policy-content{
        width: 96%;
    }
    .tutoring-policy h2{
        font-size: 14px;
        margin-bottom: 30px;
    }
}
.footer-section{
    background-color: #1b2222;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-section .site-logo img{
    height: 45px;
}
.footer-section p{
    color: var(--text-white);
    font-size: 11px;
    font-family: var(--font-body);
    margin: 0;
}
.footer-section .social-icons{
    list-style: none;
    display: flex;
    gap: 25px;
}
.footer-section .social-icons li a{
    width: 20px;
    height: 20px;
    color: var(--text-white);
}
@media (max-width: 576px){
    .footer-section{
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .footer-section ul.social-icons{
        align-self: center;
        justify-content: center;
        margin: 0;
    }
}