/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

/*=== MEDIA QUERY ===*/
/* @import url("https://fonts.googleapis.com/css?family=Anaheim|Quattrocento+Sans:400,700");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,400,600"); */
@import url("font.css");

*{
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif!important;
}

@keyframes rotate {
 100% {
    transform: rotate( 180deg);
  }
}


@keyframes fadeout {
 from {
    opacity: 0;
  }

  to{
    opacity: 1;
  }
}

@keyframes radiate {

  0%{
    transform: scale(1);
  }

  50%{
    transform: scale(1.1);
  }

  100%{
    transform: scale(1);
  }
  
}

@keyframes unrotate {
  100% {
    transform: rotate(-180deg);
  }
}

:root {
  font-family: 'EB Garamound', sans-serif!important;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  --primary_text: #2D5446;
  --primary_background: #F3C623;
  --secondary_text: #7D7D7D;
  --white: #FFFFFF;
  --light_green: #5B7B61;
  --gold: #C69914;
  --btn: linear-gradient(0deg, var(--primary_background), #ffeb009e);
  --btn-2: linear-gradient(0deg, var(--primary_text), var(--light_green));
  --main-font: 'EB Garamound'!important;
  --text-font: 'Roboto'!important
}

@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

.secondary_btn{
  padding: 15px 20px;
  background: transparent!important;
  border-radius: 20px;
  color: var(--primary_text)!important;
  width: fit-content;
  text-decoration: none!important;
  border: 1px solid var(--primary_text);
}


.wrapper{
  background: white;
}

.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150px;
  padding: 0px 50px!important;
}

.nav .left{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav .left a{
  width: 200px;
}

.nav .left a img{
  width: 100%;
}


.nav .right{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav .right ul{
  display: flex;
  align-items: center;
}

.right ul li{
  list-style: none;
  margin: 0 15px;
}

.right ul .special{
  background: var(--btn);
  padding: 10px 15px;
  border-radius: 20px;
}

.right ul li a{
  text-decoration: none;
  color: var(--primary_text)!important;
  font-size: 16px;
}

.toggler{
  font-size: 28px;
  display: none;
  flex-direction: column;
  justify-content: center;
}


/* hero section */

.hero{
  padding: 0px 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero .hero-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-left .heroBig{
  font-size: 82px;
  font-weight: bolder;
  color: var(--primary_text);
  font-family: var(--main-font)!important;
  line-height: 85px;
}

.hero-left h1 span{
  color: var(--gold);
  font-family: var(--main-font)!important;
  line-height: 85px;
}

.hero-left p{
  font-size: 20px;
  line-height: 32px;
  color: var(--secondary_text);
}

.hero-cta{
  padding: 15px 20px;
  background: var(--btn)!important;
  border-radius: 20px;
  color: var(--primary_text)!important;
  width: fit-content;
  text-decoration: none!important;
  font-size: 16px;
}

.hero .hero-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero .hero-right .hero_img{
  width: 85%;
  display: none;
}

.active_hero{
  animation: fadeout 2s ease-in normal forwards;
  display: flex!important;
}

@media (max-width: 1000px) {
  .nav{
    padding: 0px 20px!important;
    z-index: 10!important;
    height: 150px;
  }

  .nav .left a{
    width: 200px;
  }

    .nav .right{
      position: absolute;
      left: -100%;
      top: 150px;
      width: 100%;
      height: calc(100% - 150px);
      background: var(--primary_text);
      transition: all .5s ease-in;
      z-index: 10;
    }

    .show_nav{
      left: 0!important;
    }

    .nav .right ul{
      flex-direction: column;
      width: 100%;
    }

    .right ul li{
      margin: 5px 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
    }

     .right ul .special{
      width: fit-content;
     }

     .right ul li:hover{
      background: rgba(0, 0, 0, .3);
     }

    .right ul li a{
      color: var(--white)!important;
      font-size: 20px;
    }

  .hero-left .heroBig{
    font-size: 42px!important;
  }

  .hero-left p{
    font-size: 16px;
    line-height: 24px;
  }


  .hero{
    padding: 0px 20px 50px 20px;
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    justify-content: flex-start;
    row-gap: 20px;
  }

  .hero .hero-right{
    height: auto;
  }

  .hero .hero-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero .hero-right img{
    width: 90%;
  }


  .toggler{
    display: flex;
    font-size: 28px;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
  }
}

@media (max-width: 550px) {
  .nav{
    padding: 0px 20px!important;
    z-index: 10!important;
    height: 100px;
  }

  .nav .left a{
    width: 130px;
  }

  .nav .right{
      position: absolute;
      left: -100%;
      top: 100px;
      width: 100%;
      height: calc(100% - 150px);
      background: var(--primary_text);
      transition: all .5s ease-in;
      z-index: 10;
  }

  .hero-left .heroBig{
    font-size: 42px!important;
    line-height: 42px;
  }

  .hero-left .heroBig span{
    line-height: 42px!important;
  }

  .hero-left p{
    font-size: 16px;
    line-height: 24px;
  }

  .hero{
    padding: 20px 20px 50px 20px;
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    justify-content: flex-start;
    row-gap: 20px;
  }

  .hero .hero-right{
    height: auto;
  }

  .hero .hero-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero .hero-right img{
    width: 90%;
  }

  .ctabtns{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    align-items: center;
  }
}


/*  Why and section */
.section{
  padding: 50px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh!important;
  height: auto;
}

@media (max-width: 550px) {
  .section{
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.section-header{
  font-size: 3rem;
  font-weight: bold;
  color: var(--primary_text);
  font-family: var(--main-font)!important;
  text-align: center;
}

.section-header span{
  color: var(--gold);
  font-family: var(--main-font)!important;
}

.why .card{
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  transition: all .5s ease-in;
}

.why .card:hover{
  scale: 0.9;
}

.card .card_img{
  width: 200px;
  height: 200px;
}

.card .card-icon{
  font-size: 2.5rem;
  color: var(--primary_text);
}

.card .card-title{
  font-weight: 500;
  font-size: 24px;
}

.card .card-text{
  color: var(--secondary_text);
}


/* How it works */
.how-left-picture{
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
}

.table-wrap{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--primary_text);
  /* width: 550px; */
}

@media (max-width: 550px) {
  .how-left-picture{
    width: 300px!important;
    height: 300px!important;
    border-radius: 50%;
    overflow: hidden;
  }
}

.how-left-picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how ul{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.how ul li{
  list-style: none;
  display: flex;
  padding: 15px 20px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, .1);
  margin: 10px;
  align-items: center;
  column-gap: 20px;
}

.how .how-icon{
  width: 50px!important;
  height: 50px!important;
  background: var(--primary_background);
  color: var(--primary_text);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

@media (max-width:550px) {
  .how .how-icon{
    width: 40px!important;
    height: 40px!important;
    font-size: 14px;
  }
}

.custom-header {
  background-color: #00332c; /* Deep academy green */
  font-size: 1.2rem;
}

/* The Golden Left Column */


/* The Alternating Lesson Column */
.lesson-col {
  background-color: #f8f9fa; /* Light grey/white */
  vertical-align: middle;
  color: #000;
  height: 70px;
  text-align: left!important;
  font-size: 18px;
}

/* Optional: Subtle Zebra Effect for the Lesson side */
tbody tr:nth-child(odd) .lesson-col{
  background-color: #FED761;
}

/* Removing the last border for the rounded look */
tr:last-child td {
  border-bottom: 0;
}





custom-card {
    border-radius: 24px;
    transition: all 0.3s ease-in-out;
    background: #ffffff;
  }

  .custom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
  }

  /* Icon Circles */
  .icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 1.8rem;
  }

  /* Light Background Colors for Icons */
  .bg-success-light { background-color: #e8f5e9; }
  .bg-gold-light { background-color: #fff9e6; }
  .bg-info-light { background-color: #e3f2fd; }

  /* Typography */
  .tracking-wider { letter-spacing: 2px; font-size: 0.85rem; }
  
  ul li {
    font-size: 0.95rem;
    color: #555;
  }



.member-img-container{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}

.member-img-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}




.step-number {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border: 2px solid #00332c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #00332c;
    background: #fff;
    position: relative;
    z-index: 1;
  }

  .enrollment-steps {
    position: relative;
  }

  /* Vertical Line Connector */
  .enrollment-steps::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #f1f1f1;
    z-index: 0;
  }

  .step-item {
    position: relative;
    z-index: 2;
  }

  /* Highlight on hover */
  .step-item:hover .step-number {
    background-color: #00332c;
    color: #fff;
    transition: 0.3s;
  }


  .card.shadow-lg {
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 51, 44, 0.05);
  }

  .card.shadow-lg:hover {
    transform: scale(1.02);
  }

  /* Styling the 'Check' icons with your Ochre Gold */
  .bi-check-circle-fill {
    color: #d4a017 !important;
  }

  /* Premium text spacing */
  .display-3 {
    letter-spacing: -2px;
  }




  /* footer */
  .footer-links li {
    margin-bottom: 10px;
  }
  
  .footer-links a {
    color: rgba(255, 255, 255, 0.6);
    transition: 0.3s;
  }
  
  .footer-links a:hover {
    color: #d4a017; /* Brand Gold */
    padding-left: 5px; /* Subtle movement effect */
  }

  /* Social Icon Hover */
  .bi:hover {
    color: #d4a017 !important;
  }




  /* contact page */
.whatsapp-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: white;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  display: flex;
  align-items: center;
  z-index: 1000;
  transition: transform 0.3s ease;
}
.whatsapp-btn i { font-size: 1.5rem; margin-right: 10px; }

.whatsapp-btn:hover {
  transform: scale(1.05);
  color: white;
  background-color: #1ebe57;
}

.form-control:focus, .form-select:focus {
  border-color: #00332c;
  box-shadow: 0 0 0 0.25rem rgba(0, 51, 44, 0.1);
}