/* ================================
   CSS Best Practice Template
   Author: Your Name
   ================================ */

/* ===== 1. Reset & Base Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
   font-family: "Avengeance";
   src: url("../fonts/AVENGEANCE\ HEROIC\ AVENGER.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: "Skaters";
   src: url("../fonts/") format("truetype"); /* adjust path as needed */
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: "Impact";
   src: url("../fonts/impact.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

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

html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   font-family: "avengeance_heroic_avengerRg", sans-serif;
   line-height: 1.6;
   color: var(--text-color);
   background-color: var(--bg-color);
   letter-spacing: 2px;
}

/* ===== 2. CSS Variables ===== */
:root {
   --primary: rgba(248, 209, 70, 1);
   --secondary: rgba(60, 22, 101, 1);
   --white: #fff;
   --black: #000;
   --border-color: rgba(248, 209, 70, 0.5);
   --border-color-dark: rgba(135, 102, 171, 0.5);
   --transition: all 0.3s ease-in-out;
}

/* ===== 3. Typography ===== */

h1 {
   font-family: "avengeance_heroic_avengerRg", sans-serif;
   letter-spacing: 2px;
   font-size: 80px !important;
}
h2 {
   font-family: "avengeance_heroic_avengerRg", sans-serif;
   letter-spacing: 2px;
   font-size: 74px !important;
}
h3 {
   font-family: "avengeance_heroic_avengerRg", sans-serif;
   letter-spacing: 2px;
   font-size: 60px !important;
}
h4 {
   font-family: "avengeance_heroic_avengerRg", sans-serif;
   letter-spacing: 2px;
   font-size: 42px !important;
}
h5 {
   font-family: "avengeance_heroic_avengerRg", sans-serif;
   letter-spacing: 2px;
   font-size: 28px !important;
}
h6 {
   font-family: "avengeance_heroic_avengerRg", sans-serif;
   letter-spacing: 2px;
   font-size: 24px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 600;
   margin-bottom: 0.75rem;
   line-height: 1.2;
   color: var(--white) !important;
   word-spacing: 5px;
}

p {
   font-size: 1rem;
   line-height: 1.6;
   color: var(--white);
   /* margin-bottom: 1rem;      */
   font-family: "Roboto", Arial, sans-serif;
}

a {
   text-decoration: none;
   transition: var(--transition);
}
a:hover {
   color: var(--primary-dark);
}

/* ===== 4. Layout Helpers ===== */
/* .container {
  width: 90%;
  max-width: var(--max-width);
  margin: auto;
} */
/* 
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.col {
  flex: 1;
  min-width: 280px;
} */

/* ===== 5. Utility Classes ===== */
/* .text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; } */

/* ===== 6. Navbar ===== */
.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--heading-color);
   padding: 1rem 2rem;
   color: var(--white);
   font-family: "impactregular", sans-serif !important;
}
.navbar a {
   color: var(--white);
   margin-left: 1rem;
}
.navbar a:hover {
   color: var(--primary);
}

/* ===== 8. Cards ===== */
.card {
   background: var(--white);
   padding: 1.5rem;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   transition: var(--transition);
}
.card:hover {
   transform: translateY(-5px);
}

/* ===== 9. Forms ===== */
input,
textarea,
select {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #ddd;
   border-radius: var(--radius);
   outline: none;
   transition: var(--transition);
   margin-bottom: 1rem;
}
input:focus,
textarea:focus,
select:focus {
   border-color: var(--primary);
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
}

/* ===== 10. Footer ===== */
.footer {
   background: var(--heading-color);
   color: var(--white);
   text-align: center;
   padding: 1rem;
   margin-top: 2rem;
}
/* ===== Custom Navbar Styling ===== */
.bg-img {
   background-image: url("/assets/imgs/bg-img.png");
   min-height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.custom-navbar {
   border: 1px solid var(--primary); /* thin var(--primary) border like the image */
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.5); /* dark transparent */
   backdrop-filter: blur(6px);
   z-index: 1000;
   padding: 0.5rem 1.5rem;
   left: 0;
   right: 0;
}

.navbar-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
}

/* Logo */
.navbar-brand img {
   max-height: 40px;
}

/* Toggle Button */
.nav-toggle {
   font-size: 24px;
   background: none;
   border: none;
   color: var(--primary);
   cursor: pointer;
   display: none; /* hidden on desktop */
}

/* Nav Links */
.nav {
   display: flex;
   flex-wrap: wrap;
   justify-content: end;
   gap: 2rem; /* spacing between links */
   flex: 1 1 auto;
   list-style: none;
   margin: 0;
   padding: 0;
   transition: max-height 0.3s ease;
}

.nav-item {
   flex-shrink: 0;
}

.nav-link {
   font-family: "impactregular", sans-serif !important;
   font-size: clamp(12px, 1.5vw, 16px);
   color: var(--white) !important;
   padding: 0.5rem 0.75rem;
   position: relative;
   white-space: nowrap;
   text-align: center;
   transition: color 0.3s ease;
}
.nav-link .active {
   color: var(--primary) !important;
}
.nav-link:hover,
.nav-link:focus {
   color: var(--primary) !important;
   transition: all 500ms;
}

.nav-link.active::after {
   content: "";
   display: block;
   height: 3px;
   width: 100%;
   background: var(--primary);
   position: absolute;
   bottom: 0;
   left: 0;
   border-radius: 2px;
}

/* Language switch */
.lang-switch {
   display: flex;
   gap: 0.3rem;
   font-weight: 600;
   color: var(--primary);
   flex-shrink: 0;
}

.lang-switch a {
   color: var(--primary);
   text-decoration: none;
   transition: color 0.3s ease;
}

.lang-switch a:hover {
   color: #fff;
}
.custom-height {
   height: 700px;
}

.lovengers-btn {
   /* Basic Button Styling */
   display: inline-block;
   padding: 15px 40px;
   font-family: "skatersregular", cursive; /* or a similar bold, playful font */
   font-size: 24px;
   color: var(--primary); /* Yellow color for the text */
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;

   /* Background and Border */
   background-color: var(--secondary); /* Dark purple background */
   border: 3px solid var(--primary); /* Yellow border */
   position: relative;
   z-index: 1; /* To ensure content is on top */

   /* The angled shape */
   transform: skew(-20deg);

   /* Smoother transition on hover */
   transition: all 0.3s ease;
   border-radius: 5px;
}

/* Fix the text from being skewed */
.lovengers-btn span {
   display: inline-block;
   transform: skew(20deg); /* Counter-skew the text to make it straight */
}

/* Create the outer orange border using a pseudo-element */
/* .lovengers-btn::after {
   content: "";
   position: absolute;
   top: -5px;
   right: -5px;
   bottom: -5px;
   left: -5px;
   border: 3px solid var(--primary); 
   transform: skew(0deg);
   z-index: -1; 
   transition: all 0.3s ease;
   border-radius: 5px;
} */

/* Hover effects */
.lovengers-btn:hover {
   background-color: var(--secondary);
   transform: skew(-20deg) scale(1.05);
   color: var(--white);
}

/* .lovengers-btn:hover::after {
   transform: skew(0deg) scale(1.05);
} */

.bg-img-two {
   background-image: url("/assets/imgs/bg-img-two.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.facts-card {
   border-radius: 10px;
   border: 4px solid rgba(248, 209, 70, 0.5);
   background: rgba(17, 17, 17, 0.4);
   padding: 20px 40px;
   margin-bottom: 20px;
}
.facts-card h1 {
   font-size: 42px;
}

.bg-img-three {
   background-image: url("/assets/imgs/bg-img-three.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.bg-img-four {
   background-image: url("/assets/imgs/bg-img-four.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
}
.bg-img-five {
   background-image: url("/assets/imgs/bg-img-five.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
}

.bg-footer {
   background-image: url(../imgs/footer-bg.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.modal-title {
   color: var(--white);
   font-family: "Avengeance Heroic Avenger";
   font-size: 46px !important;
   text-align: center;
}

.modal-content {
   border-radius: 10px !important;
   border: 10px solid rgba(248, 209, 70, 0.5) !important;
   background: rgba(17, 17, 17, 0.4) !important;
   backdrop-filter: blur(6px);
}
.modal-header {
   border: none !important;
}
.modal p {
   font-size: 20px !important;
   line-height: 1.2;
}
.modal-footer {
   justify-content: center !important;
   border: none !important;
}
/* Initial state — modal hidden below */
/* Make modal fade smoothly and slide up */
.modal.fade .modal-dialog {
   transform: translateY(100%) !important;
   transition: transform 0.4s ease !important;
}

.modal.show .modal-dialog {
   transform: translateY(0) !important;
}
.modal.fade {
   transition: opacity 0.4s ease;
}

.ansCards {
   border: 5px solid rgba(248, 209, 70, 0.5) !important;
   border-radius: 10px;
   padding: 20px 30px;
   min-height: 200px;
   align-items: center;
   justify-content: center;
   display: flex;
   cursor: pointer;
}

.ht {
   min-height: 100vh;
   /* display: flex;
   flex-direction: column;
   justify-content: space-between; */
}

.descBox {
   border: 4px solid var(--border-color-dark);
   border-radius: 10px;
   padding: 20px 20px;
   margin-bottom: 10px;
   backdrop-filter: blur(6px);
}
.descBox h5 {
   color: var(--primary) !important;
   font-size: 32px !important;
}
.descBox p {
   margin-bottom: 0;
}

@media (max-width: 1440px) {
   h1 {
      font-size: 54px !important;
   }
   h2 {
      font-size: 42px !important;
   }
   h3 {
      font-size: 40px !important;
   }
   p {
      font-size: 12px;
   }
}

@media (max-width: 1366px) {
   .custom-height {
      height: 410px !important;
   }
   h1 {
      font-size: 50px !important;
   }
   h2 {
      font-size: 44px !important;
   }
   h3 {
      font-size: 40px !important;
   }
   p {
      font-size: 12px;
   }
   .lovengers-btn {
      font-size: 14px;
   }
   .ht {
      height: 100%;
   }
   h4 {
      font-size: 38px !important;
   }
   .descBox h5 {
      font-size: 22px !important;
   }
   .bg-img {
      height: 750px;
   }
}

@media (min-width: 1200px) {
   .modal-xl {
      --bs-modal-width: 1320px !important;
   }
}
@media (max-width: 1024px) {
   .custom-height {
      height: 100%;
   }
   .nav-toggle {
      display: block;
   }
   .nav {
      flex-direction: row;
      width: 100%;
      max-height: 0;
      overflow: hidden;
   }

   .nav.show {
      max-height: 300px;
   }

   .nav-link {
      text-align: center;
      width: 100%;
      padding: 0.75rem 0;
   }

   .lang-switch {
      justify-content: end;
      flex: auto;
   }
   .nav-link .active {
      color: var(--primary) !important;
   }

   h1 {
      font-family: "avengeance_heroic_avengerRg", sans-serif;
      letter-spacing: 2px;
      font-size: 40px !important;
   }
   .lovengers-btn {
      font-size: 14px;
   }
   p {
      font-size: 14px;
      line-height: 1.1;
   }
   h2 {
      font-family: "avengeance_heroic_avengerRg", sans-serif;
      letter-spacing: 2px;
      font-size: 37px !important;
   }

   h3 {
      font-family: "avengeance_heroic_avengerRg", sans-serif;
      letter-spacing: 2px;
      font-size: 30px !important;
   }

   .facts-card {
      height: 231px;
   }
   .ht {
      height: 100%;
   }
}

@media (max-width: 768px) {
   .nav-toggle {
      display: block;
   }

   .nav {
      flex-direction: column;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease; /* smooth sliding */
   }

   .nav.show {
      max-height: 500px;
   }

   .nav-link {
      text-align: center;
      width: 100%;
      padding: 0.75rem 0;
   }

   .lang-switch {
      justify-content: end;
   }
   .nav-link .active {
      color: var(--primary) !important;
   }
   h1 {
      font-family: "avengeance_heroic_avengerRg", sans-serif;
      letter-spacing: 2px;
      font-size: 40px !important;
   }
   h2 {
      font-family: "avengeance_heroic_avengerRg", sans-serif;
      letter-spacing: 2px;
      font-size: 37px !important;
   }
   h3 {
      font-family: "avengeance_heroic_avengerRg", sans-serif;
      letter-spacing: 2px;
      font-size: 30px !important;
   }
   h4 {
      font-family: "avengeance_heroic_avengerRg", sans-serif;
      letter-spacing: 2px;
      font-size: 21px !important;
   }

   body .from-right {
      transform: translateX(0px);
   }

   .lovengers-btn {
      font-size: 14px;
   }

   .custom-height, 
   .bg-img-four, 
   .bg-img-five {
      height: auto;
      min-height: auto;
   }

   .bg-img-four {
      height: auto;
   }
   .bg-img-five {
      height: auto;
   }
   p {
      font-size: 14px;
      line-height: 1.2;
   }
   .lovengers-btn {
      padding: 15px 15px;
   }

   .ht {
      height: 100%;
      /* display: flex;
   flex-direction: column;
   justify-content: space-between; */
   }
}

.animate-on-scroll {
   opacity: 0;
   transition: all 1s ease-out;
}

/* Directions */
.from-left {
   transform: translateX(-50px);
}
.from-right {
   transform: translateX(40px);
}
.from-top {
   transform: translateY(-50px);
}
.from-bottom {
   transform: translateY(50px);
}

/* When visible */
.show {
   opacity: 1;
   transform: translate(0, 0);
}