/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3rem;

  /*========== Colors ==========*/
  /* CHANGE: Black with minty blue accents */
  --hue-color: 180; /* Minty blue base */
  --black-color: hsl(0, 0%, 0%); /* Deep black */
  --black-color-alt: hsl(0, 1%, 14%);
  --title-color: hsl(var(--hue-color), 50%, 85%);
  --text-color: hsl(var(--hue-color), 30%, 70%);
  --text-color-light: hsl(var(--hue-color), 30%, 60%);
  --white-color: #FFF;
  --body-color: hsl(0, 0%, 0%); /* Dark tech background */
  --container-color: hsl(0, 0%, 15%);
  --text-gradient: linear-gradient(hsl(var(--hue-color), 50%, 60%), hsl(var(--hue-color), 50%, 30%));
  --scroll-thumb-color: hsl(var(--hue-color), 50%, 25%);
  --scroll-thumb-color-alt: hsl(var(--hue-color), 50%, 35%);

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 5rem;
  --bigger-font-size: 3.5rem;
  --big-font-size: 2.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --text-line-height: 2rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margins Bottom ==========*/
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 7.5rem;
    --bigger-font-size: 4.5rem;
    --big-font-size: 3rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; }
body { margin: var(--header-height) 0 0 0; font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); color: var(--text-color); }
h1, h2, h3 { color: var(--title-color); }
ul { list-style: none; }
a { text-decoration: none; }
button, input { border: none; outline: none; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }

/*=============== REUSABLE CSS CLASSES ===============*/
.section { padding: 4rem 0 2rem; }
.section__title { font-size: var(--bigger-font-size); text-align: center; margin-bottom: var(--mb-2-5); }
.section__title-gradient { background: var(--text-gradient); color: transparent; -webkit-background-clip: text; background-clip: text; }

/*=============== LAYOUT ===============*/
.main { overflow: hidden; }
.container { max-width: 968px; margin-left: var(--mb-1-5); margin-right: var(--mb-1-5); }
.grid { display: grid; }

/*=============== HEADER ===============*/
.header { width: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-fixed); background: transparent; }

/*=============== NAV ===============*/
.nav { height: var(--header-height); display: flex; justify-content:space-between; align-items: center; }
/* .nav__logo { display: flex; width:5rem; } */
.nav__toggle { font-size: 1.2rem; color: var(--white-color); cursor: pointer; }
@media screen and (max-width: 767px) {
  .nav__menu { position: fixed; background-color: var(--body-color); top: -100%; left: 0; width: 100%; padding: 4rem 0 3rem; transition: .4s; }
}
.nav__logo img {
  height: 60px; /* Controls vertical size */
  width: auto;  /* Maintains aspect ratio */
  max-width: 170px; /* Optional: prevent it from getting too wide */
  display: block;
}


.nav__list { display: flex; flex-direction: column; align-items: center; row-gap: 1rem; }
.nav__link { color: var(--white-color); font-size: var(--h2-font-size); text-transform: uppercase; font-weight: var(--font-semi-bold); background: var(--text-gradient); color: transparent; -webkit-background-clip: text; background-clip: text; transition: .4s; }
.nav__link:hover { background: var(--white-color); color: transparent; -webkit-background-clip: text; background-clip: text; }
.nav__close { position: absolute; font-size: 1.5rem; top: 1rem; right: 1rem; color: var(--white-color); cursor: pointer; }
.show-menu { top: 0; }
.scroll-header { background-color: var(--body-color); }
.active-link { background: var(--white-color); color: transparent; -webkit-background-clip: text; background-clip: text; }

/*=============== HOME ===============*/
.home__img { width: 250px; position: absolute; top: -16rem; right: 1.5rem; }
.home__data { padding-top: 6rem; }
.home__header { position: relative; }
.home__title { position: absolute; top: -4rem; left: 1rem; line-height: 6rem; font-size: var(--biggest-font-size); background: var(--text-gradient); color: transparent; -webkit-background-clip: text; background-clip: text; }
.home__subtitle { font-size: var(--big-font-size); margin-bottom: var(--mb-2-5); }
.home__title-description { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb-1); }
.home__description { margin-bottom: var(--mb-2-5); line-height: var(--text-line-height); }
.home__price { font-size: var(--h3-font-size); font-weight: var(--font-semi-bold); margin-left: var(--mb-0-75); }

/*=============== BUTTONS ===============*/
/* .button { display: inline-block; background-color: hsl(var(--hue-color), 50%, 50%); color: var(--black-color); padding: 1rem 1.25rem; border-radius: .5rem; transition: .3s; }
.button:hover { background-color: hsl(var(--hue-color), 50%, 60%); }
.button__icon { font-size: 1.2rem; }
.button--flex { display: inline-flex; align-items: center; column-gap: .75rem; }

.signup-button{
  background-color: hsl(var(--hue-color), 50%, 50%);
  color: var(--black-color);
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  transition: .3s;
} */
.button { display: inline-block; background-color:#8ef0e8; color:#0a100f; padding: 1rem 1.25rem; border-radius: .5rem; transition: .3s; box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2); }
        .button:hover { background-color: var(--mint-blue-light); transform: translateY(-2px); }
        .button__icon { font-size: 1.2rem; }
        .button--flex { display: inline-flex; align-items: center; column-gap: .75rem; }
        .home__signup-button{ background-color:#4ed4c6; color:#000; padding: 1rem 1.25rem; border-radius: .5rem; transition: .3s; box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2); }
        .home__signup-button:hover { background-color:#6cfff5; transform: translateY(-2px); }


/* Logo in home section */
.home__logo {
    display: flex;
    justify-content:space-between;
    align-items: center;
}

.home__logo-img {
    max-width: 100%;
    height: 300px;
    z-index: 1;
    position: relative;
}
.home__logo {
    opacity: 0;
    transform: translateX(-100px);
    animation: slideInLogo 2s ease forwards;
    animation-delay: 1s;
  }
  
  @keyframes slideInLogo {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @media screen and (max-width: 591px) {
    .home__logo {
      display: none;
    }
  }
  

/* Adjust media queries to accommodate logo */
@media screen and (min-width: 576px) {
    .home__logo-img {
        max-width: 80%;
    }
}

@media screen and (min-width: 767px) {
    .home__logo-img {
        max-width: 90%;
    }
}

@media screen and (min-width: 1024px) {
    .home__logo-img {
        max-width: 100%;
    }
}
/*=============== HOME BACKGROUND VIDEO ===============*/
.home {
    position: relative;
    overflow: hidden;
}

#home-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.7; /* Adjust opacity as needed */
}

/* Ensure content is visible over video */
.home__container {
    position: relative;
    z-index: 1;
}

/* Optional: Add a dark overlay to improve text readability */
.home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Adjust darkness as needed */
    z-index: 0;
}
/* Center and style the "What Our Users Say" title */
.testimonials .section__title {
  font-size: 4.5rem; /* Increased font size */
  text-align: center;
  margin-left: 0; /* Remove the left margin that was pushing it off-center */
  /* color: hsl(var(--hue-color), 50%, 60%); Change to the minty blue color used in your theme */
  color: #bde4e1;
  margin-bottom: 3rem; /* Add more space below the title */
}

/* Make the testimonial cards larger */
.rating__card {
  width: 280px; /* Increased from 250px */
  padding: 2.5rem; /* Increased from 2rem */
}

/* Improve the layout to fit three cards */
.testimonial__ratings {
  justify-content: center;
  gap: 2.5rem; /* Slightly increased gap between cards */
  width: 100%;
}

/* Add responsive adjustments */
@media screen and (min-width: 992px) {
  .testimonial__container {
    padding: 4rem 4rem;
  }
}
.testimonial__container {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 4rem 2rem;
    flex-wrap: wrap;
  }
  
  .testimonial__text {
    flex:1;
    max-width: 500px;
  }
  
  .trusted {
    color: hsl(180, 50%, 85%);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.875rem;
    font-weight: 600;
    display: block;
    margin-bottom: 1rem;
  }
  
  .section__title {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
    margin-left: 400px;
  }
  
  .testimonial__ratings {
    flex: 1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .rating__card {
    background-color: #1e1e1e;
    border-radius: 16px;
    padding: 1.5rem;
    color: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: none;
  }
  
  .rating__card:hover {
    box-shadow: 0 0px 30px hsl(180, 100%, 70%); /* minty blue shadow */
    transform: translateY(-5px);
  }
  
  
  .stars {
    font-size: 1.2rem;
    color: hsl(180, 100%, 70%);
    margin-bottom: 0.5rem;
  }
  
  .rating__score {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
  }
  
  .rating__score span {
    font-size: 1.5rem;
    color: gray;
  }
  
  .store {
    color: gray;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .testimonial__quote {
    font-size: 1rem;
    color: hsl(180, 50%, 85%);
    font-style: italic;
  }
  
  .testimonial__user {
    font-size: 0.9rem;
    color: gray;
    margin-top: 0.5rem;
  }
  

/*=============== SPONSOR ===============*/
.sponsor__img { width: 100px; margin-top: -100px;}
.sponsor__container { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); row-gap: 5rem; justify-items: center; align-items: center; }
   
/* .features-section {
  position: relative;
  background: #000000; 
  overflow: hidden;
}

.svg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

.svg-bg svg {
  width: 100%;
  height: 100%;
  filter: blur(100px);      
  opacity: 0.9;             
  transform: scale(1.2);    
} */

.features-section {
  position: relative;
  overflow: hidden;
  
  z-index: 0;
}


.background-video {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 100%;             /* Scale horizontally (you can decrease to squeeze) */
  height: 90%;            /* Scale vertically */
  object-fit: cover;
  transform: translate(-50%, -50%) scale(0.8); /* 👈 This keeps it centered & scaled */
  z-index: -2;
  pointer-events: none;
  
  opacity: 0.9;
  filter: brightness(0.5) contrast(1.1) blur(2px);
}


/*=============== SPECS ===============*/
.section__title-minty {
  font-size: 4.5rem;
  text-align: center;
  color: #8ef0e8;
  font-weight: 800;
  margin-bottom: 3rem;
  margin-top: -65px;
}

.specs__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  position: relative;
}

.specs__content-left,
.specs__content-right {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.specs__image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.specs__img {
  max-width: 270px;
  height: auto;
  border-radius: 50%;
}

/* Card Styles */
.specs__card {
  background-color: #141414;
  border-radius: 1.5rem;
  padding: 1.25rem 1rem;
  max-width: 250px;
  height: 150px;
  width: 100%;
  color: white;
  border: 1px solid rgba(142, 240, 232, 0.1);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInC 0.6s ease forwards;
}

/* Card Hover */
.specs__card:hover {
  transform: translateY(10px) scale(1.05);
  box-shadow: 0 10px 30px rgba(142, 240, 232, 0.2);
}

/* Card Content */
.specs__title {
  font-size: 1.2rem;
  font-weight: 600;
}

.specs__subtitle {
  font-size: 0.9rem;
  color: #b0e6e2;
}

.specs__icon {
  font-size: 1.8rem;
  color: #8ef0e8;
  margin-bottom: 0.5rem;
}

/* Fade-in animations */
.specs__content-left .specs__card:nth-child(1) { animation-delay: 0.1s; }
.specs__content-left .specs__card:nth-child(2) { animation-delay: 0.2s; }

.specs__content-right .specs__card:nth-child(1) { animation-delay: 0.3s; }
.specs__content-right .specs__card:nth-child(2) { animation-delay: 0.4s; }

@keyframes fadeInC {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .specs__container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .specs__content-left,
  .specs__content-right {
    align-items: center;
  }

  .specs__img {
    max-width: 200px;
  }
}

/* Make headings larger */
.section__title {
  font-size: 4.5rem;
  font-weight: 800;
  text-align: center;
  margin: 0 auto 2rem auto;
  display: block;
  margin-bottom: 80px;
  color: #e2faf7;
}


/* Floating animation for image */
.floating-img {
  animation: float 6s ease-in-out infinite;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .floating-img {
    max-width: 90%;
    width: 90%;
    margin-bottom: 20px;
    margin-top:-20px;
  }
}


@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Description styling */
.case__description {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #b0e6e2;
  margin-bottom: 1.5rem;
}

/* Highlight text styling */
.highlight {
  color: #8ef0e8;
  font-weight: 600;
}

/* Button styling (optional improvement) */
.button {
  background-color: #4ed4c6;
  color: #000;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 1rem;
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.05);
}



/*=============== DISCOUNT ===============*/
/* ===================== */
/* 🎥 Video Background Section */
/* ===================== */

.video-bg-wrapper {
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* Full screen height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

/* Background video */
.bg-video {
  position: absolute;
  top: 45%;
  left: 48%;
  width: 100%;
  max-width: 1300px; /* 👈 Squeeze it down */
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -2;
  opacity: 0.85;
}


/* Dark overlay for readability */
.video-bg-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .bg-video {
    max-width: 90vw;
  }
}


/* ===================== */
/* 📦 Discount Container */
/* ===================== */
.discount__animate{
margin-left:50px ;
}
.discount__container {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6); /* Slight transparent background */
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  color: #fff;
}

.discount__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-75);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.discount__description {
  margin-bottom: var(--mb-1);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.discount__img {
  width: 300px;
  position: absolute;
  top: 4rem;
  right: -11rem;
}

/* Responsive Image Handling */
@media screen and (max-width: 768px) {
  .discount__img {
    display: none;
  }

  .discount__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}



 /*=============== VIDEO SECTION ===============*/
 .video-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
 .video-section__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity:1; }
 /* .video-section__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 0; } */
 .video-section__text { font-size: var(--biggest-font-size); font-weight: var(--font-semi-bold); background: var(--text-gradient); color: transparent; -webkit-background-clip: text; background-clip: text; animation: floatText 4s infinite ease-in-out; text-align: center; z-index: 1; }
 @keyframes floatText {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-20px); }
 }


/*=============== PRODUCTS ===============*/
.products { background-color: #111010; padding: 6rem 0; position: relative; overflow: hidden;}
.products__line { line-height: 4rem; }
.products__container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding-top: 3rem; position: relative; z-index: 1; margin-top: -40px;}
.products__card { position: relative; background: var(--container-color); padding: 2rem; border-radius: 1rem; text-align: center; transition: transform .4s, box-shadow .4s; overflow: hidden; }
.products__card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 255, 255, 0.1), transparent 70%); opacity: 0; transition: opacity .4s; }
.products__card:hover::before { opacity: 0.5; }
.products__card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 255, 255, 0.15); }
.products__img { width: 80px; margin: 0 auto -1.5rem; transition: transform .4s; }
.products__card:hover .products__img { transform: scale(1.1) rotate(5deg); }
.products__content { position: relative; z-index: 1; }
.products__title { font-size: var(--h2-font-size); margin: var(--mb-1) 0; background: var(--text-gradient); color: transparent; -webkit-background-clip: text; background-clip: text; }
.products__price { font-size: var(--big-font-size); font-weight: var(--font-semi-bold); color: var(--white-color); margin-bottom: var(--mb-1); }
.products__features { font-size: var(--small-font-size); color: var(--text-color-light); margin-bottom: var(--mb-1-5); line-height: 1.5; }
.products__button { background-color: #4ed4c6; padding: .75rem 1.5rem; border-radius: .5rem; font-size: var(--normal-font-size); transition: all .4s; box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }
.products__button:hover {background-color: #8ef0e8; transform: scale(1.05); box-shadow: 0 10px 15px rgba(19, 251, 255, 0.796); }
.selected-plan { border: 2px solid var(--mint-blue); transform: scale(1.05); box-shadow: 0 10px 25px rgba(10, 255, 255, 0.736); }
.products__bg-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/dark-mosaic.png'); opacity: 0.05; z-index: 0; }


/*=============== FOOTER ===============*/
.footer__container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); row-gap: 2rem; }
.footer__logo { width: 8rem;margin-right: 150px; }
.footer__title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb-1); }
.footer__links { display: flex; flex-direction: column; row-gap: .5rem; }
.footer__link { color: var(--text-color); }
.footer__link:hover { color: var(--white-color); }
.footer__form { display: flex; column-gap: .5rem; background-color: var(--container-color); padding: .5rem .75rem; border-radius: .5rem; margin-bottom: var(--mb-2); }
.footer__input { background-color: var(--container-color); width: 90%; color: var(--white-color); }
.footer__input::placeholder { color: var(--text-color); font-size: var(--normal-font-size); font-family: var(--body-font); }
.footer__social { display: flex; column-gap: 1.25rem; }
.footer__social-link { display: inline-flex; color: var(--white-color); background-color: var(--container-color); padding: .5rem; border-radius: .25rem; font-size: 1rem; }
.footer__social-link:hover { background-color: var(--black-color); }
.footer__copy { margin-top: 5rem; text-align: center; }
.footer__copy-link { font-size: var(--smaller-font-size); color: var(--text-color-light); }

/*=============== SCROLL UP ===============*/
.scrollup { position: fixed; right: 1rem; bottom: -20%; display: flex; background-color: var(--container-color); border-radius: .25rem; padding: .45rem; opacity: .9; z-index: var(--z-tooltip); transition: .4s; }
.scrollup:hover { background-color: var(--black-color); opacity: 1; }
.scrollup__icon { color: var(--white-color); font-size: 1.35rem; }
.show-scroll { bottom: 5rem; }

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar { width: .60rem; border-radius: .5rem; }
::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-color); border-radius: .5rem; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-color-alt); }

/*=============== TESTIMONIALS ===============*/
.testimonials__container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding-top: 1rem; }
.testimonials__card { background-color: var(--container-color); padding: 1.5rem; border-radius: .5rem; text-align: center; transition: transform .3s; }
.testimonials__card:hover { transform: translateY(-5px); }
.testimonials__rating { margin-bottom: var(--mb-1); }
.testimonials__rating i { color: hsl(var(--hue-color), 50%, 50%); font-size: 1.25rem; }
.testimonials__text { font-size: var(--normal-font-size); line-height: var(--text-line-height); margin-bottom: var(--mb-1); }
.testimonials__author { font-size: var(--small-font-size); color: var(--text-color-light); }

/*=============== MEDIA QUERIES ===============*/
@media screen and (max-width: 340px) {
  .container { margin-left: var(--mb-1); margin-right: var(--mb-1); }
  .section__title { font-size: var(--big-font-size); }
  .home__img { width: 200px; top: -13rem; }
  .home__title { top: -4rem; font-size: var(--bigger-font-size); }
  .home__data { padding-top: 1rem; }
  .home__description { font-size: var(--small-font-size); }
  .specs__img { width: 200px; }
  .case__container { grid-template-columns: .6fr 1fr; }
  .case__img { width: 220px; top: -2rem; left: -9rem; }
  .case__data { padding: 0; }
  .products__container { grid-template-columns: 1fr; }
  .products__card { height: auto; padding: 1rem; }
  .products__img { width: 50px; top: -2rem; }
}

@media screen and (min-width: 576px) {
  .home__container { grid-template-columns: .8fr 1fr; margin-top: 30px;}
  .home__data { padding-top: 2rem; }
  .home__img { top: -7rem; left: 0; }
  .specs__img { position: initial; }
  .specs__container { grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; }
  .case__img { position: initial; }
  .case__data { padding: 0; }
  .case__container { grid-template-columns: max-content 250px; justify-content: center; align-items: center; column-gap: 2rem; }
  .discount__img { position: initial;}
  .discount__container { grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; }
  .products__container { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 767px) {
  body { margin: 0; }
  .section { padding: 6rem 0 8rem; }
  .nav { height: calc(var(--header-height) + 1.5rem); }
  .nav__logo { width: 2rem; }
  .nav__list { flex-direction: row; column-gap: 3.5rem; }
  .nav__link { font-size: var(--normal-font-size); text-transform: initial; }
  .nav__toggle, .nav__close { display: none; }
  .home__container { position: relative; grid-template-columns: repeat(2, 1fr); }
  .home__img { top: -9rem; left: 4rem; }
  .home__data { padding-top: 8rem; }
  .specs__img { width: 300px; }
  .case__container { column-gap: 5rem; }
  .case__img { width: 300px; }
  .case__description { margin-bottom: var(--mb-2); }
  .discount__container { grid-template-columns: 250px max-content; justify-content: center; column-gap: 5rem; padding: 3rem 0; }
  .discount__title { font-size:2rem; margin-bottom: var(--mb-1); }
  .discount__description { margin-bottom: var(--mb-2); }
  .products__container { grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: 5rem; }
  .products__card { height: auto; padding: 2rem; }
  .products__img { width: 80px;margin-bottom:0.3px; }
  .footer__container { grid-template-columns: .4fr .7fr .7fr 1fr; }
}

@media screen and (min-width: 1024px) {
  .container { margin-left: auto; margin-right: auto; }
  .home__img { width: 300px; top: -15rem; }
  .home__title { top: -5rem; left: 3.5rem; }
  .home__description { padding-right: 5rem; }
  .sponsor__img { width: 200px; }
  .discount__img { width: 350px; }
  .footer__container { padding-top: 3rem; }
  .footer__copy { margin-top: 9rem; }
}
/* ... (Your existing CSS remains unchanged until the end) ... */

/*=============== LOGIN PAGE ===============*/
.login-page { margin: 0; overflow: hidden; }
.login-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login { position: relative; width: 100%; height: 100vh; padding: 0; }
.login__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.8; }
.login__overlay { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; background: rgba(0, 0, 0, 0.7); }
.login__form-container { background: var(--container-color); padding: 2rem; border-radius: 1rem; width: 100%; max-width: 400px; box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); }
.login__toggle { display: flex; justify-content: space-between; margin-bottom: var(--mb-2); }
.login__tab { background: none; color: var(--text-color); font-size: var(--h3-font-size); font-weight: var(--font-medium); padding: 0.5rem 1rem; cursor: pointer; transition: all 0.3s ease; }
.login__tab.active { background: hsl(var(--hue-color), 50%, 50%); color: var(--black-color); border-radius: 0.5rem; }
.login__tab:hover { color: var(--white-color); }
.login__form { display: none; transition: opacity 0.3s ease; }
.login__form.active { display: block; animation: fadeIn 0.5s ease forwards; }
.login__title { font-size: var(--big-font-size); text-align: center; margin-bottom: var(--mb-2); }
.login__input-group { position: relative; margin-bottom: var(--mb-1-5); }
.login__icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: var(--text-color-light); font-size: 1.2rem; }
.login__input { width: 100%; padding: 1rem 1rem 1rem 3rem; background: var(--black-color-alt); color: var(--white-color); border-radius: 0.5rem; font-size: var(--normal-font-size); transition: all 0.3s ease; }
.login__input:focus { border: 2px solid hsl(var(--hue-color), 50%, 50%); }
.login__input::placeholder { color: var(--text-color-light); }
.login__button { width: 100%; justify-content: center; font-size: var(--h3-font-size); padding: 1rem; margin-top: var(--mb-1); }
.login__switch { text-align: center; margin-top: var(--mb-1); font-size: var(--small-font-size); }
.login__link { color: hsl(var(--hue-color), 50%, 50%); font-weight: var(--font-medium); }
.login__link:hover { color: var(--white-color); text-decoration: underline; }

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/*=============== MEDIA QUERIES ===============*/
/* (Your existing media queries remain unchanged, adding responsive adjustments for login) */
@media screen and (max-width: 340px) {
  .login__form-container { padding: 1.5rem; max-width: 300px; }
  .login__title { font-size: var(--h2-font-size); }
  .login__input { padding: 0.8rem 0.8rem 0.8rem 2.5rem; }
}

@media screen and (min-width: 576px) {
  .login__form-container { max-width: 450px; padding: 2.5rem; }
}