/*  
===========================================
📱 RESPONSIVE DESIGN - MEDIA QUERIES  
=========================================== 

📌 GLOBAL NAVBAR STYLING  

   ✅ The Navbar and are shared across all pages 
      (Home, About, Contact).
   ✅ Separate CSS files are not used to maintain consistency.
   ✅ Responsive behavior is handled using media queries.
*/

/*  
===========================================
📌 GLOBAL VARIABLES - RESPONSIVE DESIGN  
=========================================== 
*/
@media (max-width: 375px) {
  :root {
    --p-size: 20px;
  }
}

/* Mobile (480px ) */
@media (max-width: 480px) {
  :root {
    --p-size: 20px;
    --h1-size: 28px;
    --padding: 10px;
  }
}

/* Tablet (768px ) */
@media (max-width: 768px) {
  :root {
    --font-size: 16px;
  }
}

/* Laptop/Desktop (1024px+) */
@media (min-width: 1024px) {
  :root {
    --font-size: 20px;
  }
}

/* ------------------------
    start main code 
---------------------- */

@media (max-width: 1100px) {
  /* navigation */
  nav {
    flex-direction: column;
  }

  .nav-menu {
    flex-direction: column;
    text-align: center;
    display: none;
    height: 100vh;
  }

  .nav-menu.active {
    display: flex;
  }
  nav .logo img:hover {
    transform: none;
  }

  .logo {
    width: 100%;
    justify-content: space-between;
  }

  .humburger {
    display: block;
    margin-right: 1rem;
  }

  .humburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .humburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .humburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Home Style */
  .headline {
    display: flex;
    flex-direction: column;
    padding: 3rem;
    max-width: 1000px;
  }
  .headline h1 {
    font-size: 3rem;
  }
}

/* ----------------------------------    1024p     ------------------------------------------- */
/* Home Buttons for Laptop View */
@media (max-width: 1024px) {
  .headline {
    margin: 0%;
  }
  .home-btns {
    font-size: 17px;
    padding: 11px 22px;
  }
  .whychoose {
    flex-direction: column;
  }
  .whychoose-box {
    justify-content: left;
  }
  .whychoose-container h1 {
    font-size: 2rem;
  }
  .whychoose-p {
    font-size: 1.4rem;
  }
  .whychoose-item i {
    font-size: 1.6rem;
  }
  .whychoose-item h3 {
    font-size: 1.2rem;
  }
  .whychoose-item {
    width: 450px;
  }

  /* Our Service */
  .service-head {
    font-size: 2rem;
  }
  .service-box {
    margin: 12px;
  }
  .service-box h1 {
    font-size: 1.2rem;
  }
}

/* -------------
   2 Home Section
   -------------- */
@media (max-width: 1024px) {
  .logo2 h1 {
    font-size: 3rem;
    padding: 1.2rem;
  }
  .home-intro {
    font-size: 1.4rem;
  }
  .intro-home {
    padding: 8rem 4rem;
  }

  /*--------------------
      Customer Testimontals
      ---------------------*/
  .Customer-testimontals h1 {
    font-size: 2rem;
  }

  /*-----------------
      Insta frame 
      -----------------*/
  .insta-frame {
    max-width: 600px;
  }
}

/*-------------------------- 820p For I Pad Air ------------------------------------------- */
@media (max-width: 820px) {
  .home-page {
    background: url("6.jpg") no-repeat center center/cover;
  }
  .service-container {
    padding: 20px 0;
  }

  /* Why choose fi bridge  */
  .whychoose-container {
    padding: 30px;
  }
  .whychoose-container h1 {
    padding: 12px;
  }

  /* testimonial-card-container */
  .testimonial-card-container {
    flex-direction: column;
  }
}

/* ----------------------------------   768p for Tablet    ------------------------------------------- */
/* Home Buttons   */
@media (max-width: 768px) {
  .nav .logo img {
    width: 100px;
  }
  .home-btns {
    font-size: 17px;
    padding: 11px 22px;
  }

  /*----------------
     Whychoose Contain
     -----------------*/

  .whychoose {
    flex-direction: column;
  }
  .whychoose-container h1 {
    font-size: 28px;
  }
  .whychoose-p {
    padding: 10px;
    font-size: 20px;
  }

  /*-----------------
      Insta frame 
      -----------------*/
}
/* 540px */
@media (max-width: 540px) {
  .headline h1 {
    font-size: 36px;
  }
  .headline p {
    font-size: 15px;
  }
  .whychoose-container {
    padding: 30px 0px;
  }
  .bmi {
    padding: 20px 0;
  }
}
/* ----------------------------------    480p     ------------------------------------------- */
/* Home Buttons for mobile*/
@media (max-width: 480px) {
  .headline {
    padding: 10px;
  }
  .headline h1 {
    font-size: 35px;
  }
  .headline p {
    font-size: 16px;
  }
  .logo2 h1 {
    font-size: 34px;
  }
  .home-btns {
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 6px;
  }
  .intro-home {
    padding: 90px 10px;
  }

  .service-head h1 {
    padding: 20px 10px;
  }

  .whychoose-box {
    padding: 0;
  }
  .bmi {
    padding: 30px 0px;
  }
  .insta-frame {
    height: 80vh;
  }
}

/* 375px iphone se */
@media (max-width: 375px) {
  nav {
    padding: 0;
  }
  .headline h1 {
    font-size: 28px;
  }
}

/*=============================

    About page responsive  

=============================*/
/* ---------- Tablet Screens ---------- */
@media (max-width: 1024px) {
  .our-story {
    flex-direction: column;
    align-items: center;
  }

  .our-story-item {
    padding: 4rem 2rem;
    flex-basis: 100%;
    text-align: center;
  }

  .our-story-img {
    width: 100%;
    max-width: 450px;
  }

  .mission,
  .vision {
    flex-basis: 100%;
    padding: 30px;
  }

  .mission-vision-container h1 {
    padding: 4rem 2rem;
  }
}

/* ---------- Mobile Screens ---------- */
@media (max-width: 768px) {
  .about-us-head {
    padding: 3rem 1rem;
  }

  .about-us-head h1 {
    font-size: 36px;
  }

  .about-us-head p {
    font-size: 18px;
  }

  .our-story-item h1 {
    font-size: 28px;
    padding: 1rem 0;
  }

  .our-story-item p {
    font-size: 16px;
  }

  .mission h3,
  .vision h3 {
    font-size: 22px;
  }

  .mission p,
  .vision p {
    font-size: 16px;
  }
}

/* ---------- Small Mobile (iPhone SE etc.) ---------- */
@media (max-width: 480px) {
  .about-us-head h1 {
    font-size: 28px;
  }

  .about-us-head p {
    font-size: 16px;
  }

  .our-story-item {
    padding: 2rem 1rem;
  }

  .our-story-img {
    width: 100%;
    max-width: 100%;
    border-radius: 20px;
  }

  .mission,
  .vision {
    padding: 20px;
  }

  .mission h3,
  .vision h3 {
    font-size: 20px;
  }

  .mission-vision-container h1 {
    font-size: 26px;
    padding: 2rem 1rem;
  }
}