/* === BUTLER FONT FAMILY === */
@font-face {
  font-family: 'Butler-Black';
  src: url('fonts/Butler_Black.otf') format('opentype');
}

@font-face {
  font-family: 'Butler-Bold';
  src: url('fonts/Butler_Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Butler-ExtraBold';
  src: url('fonts/Butler_ExtraBold.otf') format('opentype');
}

@font-face {
  font-family: 'Butler-Light';
  src: url('fonts/Butler_Light.otf') format('opentype');
}

@font-face {
  font-family: 'Butler-Medium';
  src: url('fonts/Butler_Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Butler-Regular';
  src: url('fonts/Butler_Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Butler-UltraLight';
  src: url('fonts/Butler_Ultra_Light.otf') format('opentype');
}

/* === CANIS MAJOR === */
@font-face {
  font-family: 'CanisMajor';
  src: url('fonts/CANIS-MAJOR.ttf') format('truetype');
}

/* === CINZEL FAMILY === */
@font-face {
  font-family: 'Cinzel-Black';
  src: url('fonts/Cinzel-Black.otf') format('opentype');
}

@font-face {
  font-family: 'Cinzel-Bold';
  src: url('fonts/Cinzel-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Cinzel-Regular';
  src: url('fonts/Cinzel-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'CinzelDecorative-Black';
  src: url('fonts/CinzelDecorative-Black.otf') format('opentype');
}

@font-face {
  font-family: 'CinzelDecorative-Bold';
  src: url('fonts/CinzelDecorative-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'CinzelDecorative-Regular';
  src: url('fonts/CinzelDecorative-Regular.otf') format('opentype');
}

/* === GILL SANS CONDENSED === */
@font-face {
  font-family: 'GillSansCondensed';
  src: url('fonts/gill-sans-mt-condensed.ttf') format('truetype');
}

/* === HERTINE === */
@font-face {
  font-family: 'Hertine';
  src: url('fonts/Hertine.woff') format('woff'),
       url('fonts/Hertine.ttf') format('truetype');
}

/* === MISTRAL === */
@font-face {
  font-family: 'Mistral';
  src: url('fonts/MISTRAL.ttf') format('truetype');
}

/* === MOVIE FILMSTRIP === */
@font-face {
  font-family: 'MovieFilmstrip';
  src: url('fonts/Movie.woff') format('woff'),
       url('fonts/Movie.ttf') format('truetype');
}




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

body {

    font-family: 'Rubik', sans-serif;  
  background-color: white;
  color: #111;
}


.hero {
  
  scroll-margin-top: 70vh; 


}

.about{
  scroll-margin-top: 10vh; 
}



.eps {
  
  scroll-margin-top: 20vh; 


}



.contact{
  scroll-margin-top: 10vh;
}


/* ========= HEADER ========= */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px 0;
  margin-top: 1.5%;
  background-color: transparent;
}

.nav-wrapper {
  max-width: 77%;
  margin: auto;
  padding: 3px 40px;

  /* NEW STYLE */
  background-color: rgb(255, 255, 255); /* semi-transparent white */
  backdrop-filter: blur(10px); /* blur effect */
  -webkit-backdrop-filter: blur(10px); /* for Safari */

  border: 1px solid black;
  border-radius: 70px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}


/* ========= NAVIGATION ========= */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 30px;
}

.logo {
  width: 88px;
  margin-top: 10%;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

nav ul li a {
  text-decoration: none;
  color: #000000;
  font-family: 'Cinzel-Bold', cursive;
  font-size: 13px;
  position: relative;
  transition: color 0.3s;
}

nav ul li a:hover,
nav ul li a.active {
  color: #002ed9;
}

nav ul li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  left: 0;
  bottom: -5px;
  background-color: #002ed9;
  transition: width 0.3s;
}

nav ul li a:hover::after,
nav ul li a.active::after {
  width: 100%;
}

/* ========= ICONS ========= */
.nav-icons {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-icons a,
.search-container i {
  color: #000000;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}

.nav-icons a:hover,
.search-container i:hover {
  color: #002ed9;
  transform: scale(1.1);
}

#insta {
  color: #000000;
  font-size: 19px;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}

#insta:hover {
  color: #002ed9;
  transform: scale(1.1);
}




/* ========= BURGER MENU ========= */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
  z-index: 1100;
}

.burger div {
  height: 3px;
  background-color: #000;
  border-radius: 5px;
  transition: 0.3s;
}










/* home page */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8%;
  padding: 0px 50px;
  height: 85vh;
  background-color: white;

  flex-direction: row-reverse; 
}

.text-content {
  max-width: 50%;
  margin-left: 4%;
}

.img-content {
  max-width: 45%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-content img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
}

/* Title */
.text-content h1 {
  font-family: 'Cinzel-Bold', cursive;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 30px;
  color: #000;
}

.text-content .highlight {
  color: #002ed9;
}

.text-content .h2 {
  font-size: 30px;
}

.small-text {
  font-size: 17px;
  font-family: 'GillSansCondensed', sans-serif;
  color: #002ed9;
  margin-bottom: 40px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

.contact-btn,
.order-btn {
  padding: 11px 25px;
  font-family: 'Cinzel-Bold', cursive;
  font-size: 13px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: transform 0.4s;
}

.contact-btn {
  background-color: black;
  color: white;
}

.order-btn {
  background-color: #002ed9;
  color: white;
}

.contact-btn:hover,
.order-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}





/* About Section */
.about {
  background-color: #ffffff;
  padding: 100px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  color: white;
  height: 100vh;
  margin-bottom: -80px;
}

.about-img {
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-img img {
  width: 100%;
  max-width: 670px;
  height: auto;
  object-fit: contain;
}

.about-content {
  flex: 1 1 55%;
  text-align: left;
  padding: 0 10px;
}


.about-content p {
  margin-top: -1%;
  font-size: 17px;
  font-family: 'GillSansCondensed', sans-serif;
  line-height: 1.5;
  color: #000000;
}





/* Stats Container */
.about-stats {
  margin-top: 7%;
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Single Small Card */
.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #ffffff;
  border: #000 solid 1px;
  border-radius: 50px;
  padding: 12px 16px;
  min-width: 190px;
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.05);
}

/* Icon */
.stat-card i {
  font-size: 20px;
  color: #002ed9;
}

/* Text Info */
.stat-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-number {
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  font-family: 'Cinzel-Bold';
}

.stat-number span{
    font-size: 15px;
}





/* episodes */

.eps{
margin-top: 5%;
  padding: 80px 40px;
  text-align: center;
  background-color: #ffffff;

}


.section-title {
  font-size: 35px;
  color: #002ed9;
  font-family: 'Cinzel-Bold', serif;
  margin-bottom: 30px;
}

    .outro {
      text-align: center;
      color: #000;
      font-size: 17px;
      line-height: 1.6;
      font-family: 'Gill Sans MT Condensed', sans-serif;
      margin-bottom: 70px;
      padding: 0 15%;
    }

.video-grid {
  display: grid;
   padding: 0 3%;
  grid-template-columns: repeat(3, 1fr); /* 3 cartes par ligne */
  gap: 10px;
}

.video-grid img {
  width: 100%;
  display: block;
  cursor: pointer;
  border-radius: 10px;
  filter: grayscale(100%); /* noir et blanc par défaut */
  transition: transform 0.2s, filter 0.3s; /* smooth transition */
}

.video-grid img:hover {
  transform: scale(1.03);
  filter: grayscale(0%); /* couleur au hover */
}









/* ===== CONTACT SECTION ===== */
.contact {
 
  margin-bottom: 5%;
  padding: 40px 40px;
  text-align: center;
  background-color: #ffffff;
}

.contact-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 60px;
  flex-wrap: wrap;
  gap: 10px;
}

/* image */
.contact-img {
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
}

.contact-img img {
  max-width: 50%;
}

/* links */
.contact-links {
  flex: 1 1 40%;
  margin-right: 10%;
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* paragraphe */
.contact-text {
      color: #000;
      font-size: 17px;
      line-height: 1.6;
      font-family: 'Gill Sans MT Condensed', sans-serif;
  margin-bottom: 25px;
}

/* card style */
.contact-card {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  font-family: 'GillSansCondensed', sans-serif;
  text-decoration: none;
  color: #000;
  border: 1px solid #000000;  
  border-radius: 22px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.contact-card i {
  font-size: 22px;
  color: #002ed9;
}

.contact-card span {

  font-size: 16px;
  font-family: 'Cinzel-Bold', serif;
}

.contact-card:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: #fdfdfd;
}










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



#main-footer {

  margin-top: 10%;
  background-color: rgba(255, 255, 255, 0.9); 
  color: white;
  padding: 40px 20px;
  font-family: 'Cinzel-Bold', serif;

}

#main-footer .footer-container {
  
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-left h3 {
  font-family: 'Cinzel-Bold', serif;
  margin-bottom: 20px;
  font-size: 20px;
  color: #002ed9;
}


.footer-left,
.footer-center,
.footer-right {
  flex: 1 1 250px;
  min-width: 230px;
}




.footer-left{

margin-left: 10%;

}


.footer-center{
  margin-left: 7%;

}


.footer-left p {
  font-family: 'GillSansCondensed', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #000000;
  margin-top: 5%;
  text-align: start;
}


.footer-center h3 {
  font-family: 'Cinzel-Bold', serif;
  margin-bottom: 20px;
  font-size: 20px;
  color: #002ed9;
}

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

.footer-center ul li {
  margin-bottom: 10px;
  
}

.footer-center ul li a {
  text-decoration: none;
  font-family: 'GillSansCondensed', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #000000;
  transition: color 0.3s;
  text-align: start;
}

.footer-center ul li a:hover {
  color: #002ed9;
}


.footer-right h3 {
     font-family: 'Cinzel-Bold', serif;
  margin-bottom: 20px;
  font-size: 20px;
  color: #002ed9;
}

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

.footer-right ul li {
  margin-bottom: 12px;
  font-family: 'GillSansCondensed', sans-serif;
  font-size: 14px;
  color: #000000;
}


#main-footer {
  text-align: start;
  margin-top: 35px;
  font-family: 'GillSansCondensed', sans-serif;
  font-size: 14px;
  color: #000000;

  padding-top: 15px;
}

.footer-center-links {
  list-style: none;
  padding: 0;
  margin: 0;

  
}

.footer-center-links li {
  margin-bottom: 10px;
    text-align: start;
}

.footer-center-links li a {
  font-family: 'GillSansCondensed', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #000000;
  text-decoration: none;
  transition: color 0.3s;
  

}

.footer-center-links li a:hover {
  color: #002ed9;
}



.copyright {
  text-align: center;
  margin-top: 2%;
  padding-top: 2%;
  margin-bottom: -6px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 14px;
  color: #000000;
  border-top: 1px solid #002ed9;

}

.highlight{
 font-family: 'Cinzel-Bold', serif;
 color: #002ed9;

}






/* elements hidden initially */
.fade-up {
  opacity: 0;
  transform: translateY(30px); 
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* when in view */
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}









/* ========= MEDIA QUERIES ========= */


/* ========= MEDIA QUERIES ========= */

/* ====== TABLET (max 1024px) ====== */
@media (min-width: 600px) and (max-width: 1024px) {
  /* HEADER */
  .nav-wrapper {
    max-width: 90%;
    padding: 5px 20px;
  }

  nav {
    height: 55px;
    padding: 0 15px;
  }

  .logo {
    width: 70px;
  }

  nav ul {
    gap: 18px;
  }

  nav ul li a {
    font-size: 11px;
  }

  .nav-icons a,
  #insta {
    font-size: 15px;
  }

  

/* HERO */
 .hero { flex-direction: column;
   align-items: center;
    margin-top: 15%;
     padding: 25px; 
     text-align: center;
      height: auto;
     } 
     
     .img-content { max-width: 70%;
       margin-bottom: 20px;
       } 
       .text-content { max-width: 100%;
         margin-left: 0;
         }
         
         .text-content h1 { font-size: 27px;
         }
         
         .text-content .highlight { color: #002ed9;
         } 
         
         .text-content .h2 { font-size: 17px; 
        
        } 
        
     .small-text {
  font-size: 13px;
  max-width: 88%;   /* ma yfootech 70% mn l screen */
  margin: 0 auto;   /* bach yji f center */
  margin-bottom: 5%;
}

         
         .hero-buttons { display: flex;
          
          flex-direction: column;
           justify-content: center; 
           align-items: center; /* باش يجيبو فالنص */ 
           width: 100%;
            gap: 5px;
           } 
           
           .contact-btn,
            .order-btn { width: 85%; /* نقصت العرض من 70% → 55% */ 
              padding: 8px 0;
               font-size: 12px;
                text-align: center; /* باش النص يبقى وسطي */ 
                margin: 5px 0; /* مسافة صغيرة بيناتهم */
               }
               
               .contact-btn:hover, 
               .order-btn:hover { transform: translateY(-3px); 
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
              }


  /* ABOUT */
  .about {
    padding: 60px 30px;
    height: auto;
  }

  .about-img img {
    max-width: 500px;
  }

  .about-content p {
    font-size: 15px;
  }

  .about-stats {
    margin-top: 5%;
    gap: 15px;
  }

  .stat-card {
    padding: 10px 14px;
    min-width: 150px;
  }

  .stat-card i {
    font-size: 15px;
  }

  .stat-number {
    font-size: 9px;
  }

  .stat-number span {
    font-size: 12px;
  }

  /* EPISODES */
  .eps {
    padding: 60px 20px;
  }

  .section-title {
    font-size: 28px;
  }

  .outro {
    font-size: 15px;
    padding: 0 10%;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* CONTACT */
  .contact {
    padding: 30px 20px;
  }

  .contact-img img {
    max-width: 70%;
  }

  .contact-text {
    font-size: 15px;
  }

  .contact-card {
    font-size: 14px;
    padding: 10px 14px;
  }

  .contact-card i {
    font-size: 18px;
  }

  .contact-card span {
    font-size: 14px;
  }

  /* FOOTER */
  #main-footer {
    padding: 30px 0px;
  }

  .footer-right {
    display: none;
  }

  .footer-left h3,
  .footer-center h3,
  .footer-right h3 {
    font-size: 17px;
  }

  .footer-right,
  .footer-center {
    margin-bottom: 5%;
  }

  .footer-left p,
  .footer-center ul li a,
  .footer-right ul li {
    font-size: 13px;
  }

  .copyright {
    font-size: 13px;
  }
}





/* ====== PHONE (max 600px) ====== */
@media (max-width: 600px) {

  /* HEADER */
  .nav-wrapper {
    max-width: 95%;
    padding: 5px 12px;
  }

  nav {
    height: 50px;
    padding: 0 12px;
  }

  .logo {
    width: 50px;
  }

  nav ul {
    gap: 12px;
  }

  nav ul li a {
    font-size: 9px;
  }

  .nav-icons {
    display: none;
  }







/* HERO */
 .hero { flex-direction: column;
   align-items: center;
    margin-top: 15%;
     padding: 25px; 
     text-align: center;
      height: auto;
     } 
     
     .img-content { max-width: 70%;
       margin-bottom: 20px;
       } 
       .text-content { max-width: 100%;
         margin-left: 0;
         }
         
         .text-content h1 { font-size: 27px;
         }
         
         .text-content .highlight { color: #002ed9;
         } 
         
         .text-content .h2 { font-size: 17px; 
        
        } 
        
        .small-text { font-size: 13px;
         } 
         
         .hero-buttons { display: flex;
          
          flex-direction: column;
           justify-content: center; 
           align-items: center; /* باش يجيبو فالنص */ 
           width: 100%;
            gap: 5px;
           } 
           
           .contact-btn,
            .order-btn { width: 85%; /* نقصت العرض من 70% → 55% */ 
              padding: 8px 0;
               font-size: 12px;
                text-align: center; /* باش النص يبقى وسطي */ 
                margin: 5px 0; /* مسافة صغيرة بيناتهم */
               }
               
               .contact-btn:hover, 
               .order-btn:hover { transform: translateY(-3px); 
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
              }






  /* ABOUT */
  .about {
    padding: 40px 20px;
    height: auto;
  }


  .about-img img {
  width: 100%;
  width: 370px;
  height: auto;
  object-fit: contain;
}

  .about-content p {
    margin-top: -15%;
    font-size: 13px;
  }


/* Stats Container */
.about-stats {
  margin-top: 7%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 بطاقات فالسطر */
  gap:8px; /* المسافة بين البطاقات */
  justify-items: center;
}

/* Single Small Card */
.stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #ffffff;
  border: #000 solid 1px;
  border-radius: 40px;
  padding: 8px 12px;       /* صغّرت padding */
  text-align: center;
  min-width: 100%;        /* صغرت الحجم */
  max-width: 150px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Icon */
.stat-card i {
  margin-top: 1%;
  font-size: 9px;   /* صغّرت شوية */
  color: #002ed9;
}

/* Text Info */
.stat-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-number {
  font-size: 6px;   /* صغرت الرقم */
  font-weight: bold;
  color: #000000;
  font-family: 'Cinzel-Bold';
}

.stat-number span {
  font-size: 8px;   /* صغرت النص */
}









  /* EPISODES */
  .eps {
    padding: 40px 12px;
    margin-top: 25%;
  }

  .section-title {
    font-size: 20px;
  }

  .outro {
    font-size: 13px;
    padding: 0 3%;
    
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }






  /* CONTACT */
  .contact-img {
    max-width: 100%;
  }

  .contact-links {
    width: 100%;
    align-items: stretch;
    text-align: left;
  }


/* paragraphe */
.contact-text {
      color: #000;
      font-size: 13px;
      line-height: 1.6;
      font-family: 'Gill Sans MT Condensed', sans-serif;
  margin-bottom: 25px;
  margin-top: 9%;
}


#contacth2{
  display: none;
}
/* card style */
.contact-card {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* العناصر يبدأو من اليسار */
  gap: 15px;
  font-size: 16px;
  font-family: 'GillSansCondensed', sans-serif;
  text-decoration: none;
  color: #000;
  border: 1px solid #000000;  
  border-radius: 22px;
  padding: 12px 16px;
  transition: all 0.3s ease;
  text-align: left;  /* النصوص يجيوا فاليسار */
  padding-left: 10%;
}

.contact-card i {
  font-size: 15px;
  color: #002ed9;
}

.contact-card span {
  font-size: 11px;
  font-family: 'Cinzel-Bold', serif;
  display: block;
  text-align: left; /* النص داخلي حتى هو يسار */
}

.contact-card:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: #fdfdfd;
}




  /* FOOTER */
  #main-footer .footer-container {
    flex-direction: column;
    gap: 25px;
    align-items: flex-start;
  }

.footer-left{
  display: none;
}


.footer-right{

  padding-bottom: 9%;
}

  .footer-left,
  .footer-center,
  .footer-right {
    margin: 0;
    flex: 1 1 100%;
    min-width: 100%;
    padding-left: 5%;
  }

  .footer-left h3,
  .footer-center h3,
  .footer-right h3 {
    font-size: 18px;
  }

  .footer-center ul li a,
  .footer-right ul li {
    font-size: 14px;
    
  }

  .copyright {
    font-size: 13px;
    padding-top: 7%;

  }

}