/* Variables */
  
  :root{
  --international-orange-engineering:hsl(1,92%,37%);
  --cadet-blue-creyola:hsl(222,14%,69%);
  --oxford-blue-1:hsl(222,47%,15%);
  --oxford-blue-2:hsl(222,44%,14%);
  --oxford-blue-3:hsl(222,50%,11%);
  --oxford-blue-4:rgb(37, 46, 91);
  --sonic-silver:hsl(0,0%,44%);
  --sonic-blue:hsl(231, 27%, 38%);
  --space-cadet:hsl(222,44%,18%);
  --pastel-pink:hsl(1,53%,75%);
  --light-yellow:hsl(44, 89%, 89%);
  --yellow:rgb(255, 240, 125);
  --eerie-black:hsl(0,0%,15%);
  --light-gray:hsl(0,8%,88%);
  --white:hsl(0,0%,100%);
  --white-pale:rgb(210, 210, 210);
  --bgcolor:hsl(0,0%,100%);
  --color-primary:rgb(145, 162, 247);

  --ff-arial:Arial, Helvetica, sans-serif;

  --section-padding:60px;

  --hamburger-1400-padding:10px;

  --shadow:8px 8px 100px 0px hsl(216,9%,90%);
  --box-shadow:0 10px 20px rgba(0,0,0,0.5);
  --backdrop-blur:blur(10px);

  --radius-pill:100px;
  --radius-circle:50%;

  --transition:0.25s ease;
  --cubic-out:cubic-bezier(0.05,0.83,0.52,0.97);


  --fs-1440-nav:2.4rem;
  --fs-1200-nav:2.4rem;
  --fs-992-nav:2.3rem;
  --fs:1em;
  --fs-1:3.5rem;
  --fs-2:3rem;
  --fs-3:2.4rem;
  --fs-4:1.8rem;
  --fs-5:1.4rem;
  --fs-6:1.2rem;
  --fs-7:0.8rem;
  --fw-400:400;
  --fw-600:600;
  --fw-700:700;
  }

  /* reset */

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  font-family:var(--ff-arial);
  font-size:10px;
  overflow-x: hidden;
}

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

body {
  width:100%;
  background-color:var(--bgcolor);
  color:var(--sonic-silver);
  font-size:1.6rem;
  line-height:1.5;
  margin:0; padding:0;
}

li{
  list-style:none;
}

a,
img,
span,
button{
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  height:auto; /*guarantees the image won't distort */
}

button{
  background:none;
  border:none;
  font:inherit;
  cursor:pointer;
}

.btn{
  background-color:var(--international-orange-engineering);
  color:var(--white);
  max-width:max-content;
  font-family:var(--ff-arial);
  font-weight:var(--fw-600);
  font-size:2rem;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
  padding:20px 30px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  transition:var(--transition);
  will-change:transform;
}

.btn:is(:hover,:focus-visible){
  transform:translateY(-5px);
  background-color:var(--oxford-blue-3);
  border-color:var(--white);
}

address{
  font-style:normal; /* override the default italic styling of <address>*/
}

:focus-visible{
  outline-offset:4px;
}

.container{
  max-width:2000px;
  margin:0 auto;
  /* padding-bottom:90px; */
}

/* *** reused *** */

/* *** Header *** */

.navbar{
  position:fixed;
  width:100%;
  top:0;
  left:0;
  background-color:rgba(25, 36, 69, 0.9);
  box-shadow:var(--box-shadow);
  backdrop-filter:var(--backdrop-blur);
  z-index:99;
}

.navbar-container{
  max-width:2000px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:40px 0;
}

.navbar-logo{
  width: 145px;
  flex-shrink: 0;
}

.navbar-logo img{
  width: 100%; 
  height: auto;
}

.navbar-menu{
  display:flex;
  flex-direction:row;
  text-align:center;
  gap:3rem;
}

.navbar-menu li a{
  font-size:var(--fs-1440-nav);
  font-weight:var(--fw-400);
  color:var(--white);
  transition: var(--transition);
  padding:4px 30px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border:3px solid transparent;
  border-radius:var(--radius-pill);
}

.navbar-menu li a:is(:hover, :focus-visible),
.navbar-menu li a.active
{
  color:var(--cadet-blue-creyola);
  background-color:var(--oxford-blue-3);
  border-color:var(--cadet-blue-creyola);

}

.navbar-toggle{
  display:none;
  background:transparent;
  padding:var(--hamburger-1400-padding);
  border:none;
  cursor:pointer;
}

.bar{
  display:block;
  width:25px;
  height:3px;
  margin:5px auto;
  background:var(--white);
  transition:var(--transition);
}

/* *** Hero section *** */

.hero, .series{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-container{
  max-width:2000px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  --final-padding: calc(var(--dynamic-nav-height) + 20px);
  padding-top: var(--final-padding);
  padding-bottom:90px;
}

.hero-content{
  padding-top:12rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:start;
}

.hero-subtitle{
  font-size:3rem;
  color:rgb(255, 240, 125);
  margin-bottom:5rem;
}

.hero-title{
  color:var(--white);
  font-size: 5rem;
  margin-bottom:5rem;
}

.hero-text{
  color:var(--white);
  font-size:2.2rem;
  margin-bottom:8rem;
}

.hero-content .btn{
  margin-bottom:6rem;
}

.hero-picture{
  overflow:hidden;
  padding-top:4rem;  
}

.hero-picture img{
  border-radius:30px;
  width:100%;
  object-fit:cover;
}

.navbar-container, .hero-container{
  padding-inline:12rem;
}


/* ****************Products Section ******************** */

.products{
  background-color:var(--light-gray);
}

.products-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:75px;                       
  align-items:stretch;
  padding-block:10rem;
  width:90%;
  margin-block:auto;
  margin-inline:auto; 
}

.product-card{
  background-color:rgb(223, 223, 223);
  width:100%;    
  max-width:580px; 
  border-radius: 30px;
  padding:5rem;
  box-shadow:var(--box-shadow);
}

.product-card h2{
  color:var(--oxford-blue-3);
  font-size:3rem;
  padding:1rem 0;
  text-align:center;
}

.product-card h3{
  color:var(--international-orange-engineering);
  font-size:2.5rem;
  padding:1.8rem 0;
  text-align:center;
}

.product-pic{
  width:100%;
  aspect-ratio:800 / 1067;         /* locks the image ratio, prevents layout shift */
  overflow:hidden;
  border-radius:30px;
}

.product-pic img{
  width:100%;
  object-fit:cover;
  cursor:pointer;
  transition:var(--transition);
}

.product-pic:is(:hover,:focus-within) img {
  transform: scale(1.05);
  filter: saturate(1.15);
}

/* ************ footer ************* */

.footer{
  padding:0 0 6rem;
  background:var(--oxford-blue-4);
  padding-top:5rem;
}

.footer .container{
  max-width:2000px;
  width:100%
}

.footer-container{
  width:90%;
  margin:0 auto;
  display:grid;
  gap:5rem;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  padding-top: var(--final-padding);
  padding-bottom:90px;
}

.footer-card{
  border-radius:1rem;
  display:flex;
  justify-content:start;
}

.footer-card.card-zerui{
 max-width:200px;
}

.footer-card h4{
  font-size:3rem;
  color:var(--light-gray);
  margin-bottom:1rem;
}

.footer__card__info{
  width:fit-content;
  text-align:left;
}

.footer-card a, .footer-card p{
  color:var(--white-pale);
  font-size:1.8rem;
  text-align:left;
  transition:var(--transition);
}

.footer-card a:hover{
  color:var(--color-primary);
}

.card-links__links, .card-privacy__links, .card_social_links{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.card-contact-social{
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-top:1rem;
  gap:0.5rem;
}

.card-contact-social i{
  font-size:3rem;
  transition:var(--transition);
  display: inline-block;
}
.card-contact-social i:hover{
  color:var(--color-primary);
}

.footer__copyright{
  font-size:2.2rem;
  width:fit-content;
  text-align:center;
  letter-spacing:1px;
  color:var(--white-pale);
  margin:1rem auto 6rem;
  padding:1.2rem 6rem;
  border-top:1px solid var(--color-bg2);
}

/* --------------responsive for different screen width  -------------------- */

/* 320 - 479px (vertical navigation bar)
480 - 575px (vertical navigation bar)
576 - 767px (vertical navigation bar)
768 - 991px (vertical navigation bar)
992 - 1199px （horizontal navigation bar), navigation bar elements: 0.9rem;
1200 - 1439px (horizontal navigation bar), navigation bar elements: 1rem;
1440 up (horizontal navigation bar), navigation bar elements: 1.1rem
*/


/* ***** This section is screen width 1200 - 1439px ***** */

@media (max-width:1439px){

  /* *** navigation *** */

  .navbar-logo{
    width: 135px;
  }

  .navbar-menu li a{
    font-size:var(--fs-1200-nav);
  }


  /* *** hero section *** */

  .navbar-container, .hero-container{
    padding-inline:10rem;
  }

  .hero-container{
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding-bottom:60px;
  }

  .hero-subtitle{
    font-size:2.5rem;
  }

  .hero-title{
    font-size: 3.8rem;
  }

  .hero-text{
    font-size:1.8rem;
  }

  .btn{
    font-size:1.9rem;
    padding:20px 28px;
  }

}

/* ***** This section is screen width 992 - 1199px ***** */

@media (max-width:1199px){

/* *** navigation bar *** */

  .navbar-container, .hero-container{
    padding-inline:8rem;
  }

  .navbar-logo{
    width: 120px;
  }

  .navbar-menu li a{
    font-size:var(--fs-992-nav);
    padding: 4px 16px; /* reduce horizontal padding from 30px →16px */
  }

  .navbar-menu {
    gap: 1.8rem; /* reduce gap from 3rem →1.8rem */
  }


  /* *** hero section *** */

  .hero-container{
    grid-template-columns:1fr 1fr;
    gap:50px;
    padding-bottom:40px;
  }

  .hero-subtitle{
    font-size:1.9rem;
    margin-bottom:2.5rem;
  }

  .hero-title{
    font-size: 3.1rem;
    margin-bottom:3rem;
  }

  .hero-text{
    font-size:1.4rem;
  }

  .btn{
    font-size:1.8rem;
    padding:18px 26px;
  }

  .products-container{
    grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
    justify-items:center;
  }

}

/* ***** This section is screen width 768 - 991px ***** */
@media (max-width:992px){

  .navbar-container, .hero-container{
    padding-inline:6rem;
  }

  .navbar{
      box-shadow:none;
      backdrop-filter:none;
  }

  .navbar-logo{
    width: 110px;
  }

  .navbar-container .navbar-menu{
    transform:translateX(100%); 
    opacity:0;
    flex-direction:column;
    align-items:flex-start;
    gap:1.7rem !important;
    position:fixed;
    height:100vh;
    width:340px;
    top:0;
    right:0;
    background-color:rgba(25, 36, 69, 0.7);
    padding:20rem 1.5rem 0 5rem;
    backdrop-filter:var(--backdrop-blur);
    box-shadow:var(--box-shadow);
    transition:0.3s linear;
  }

  .navbar-container .navbar-menu.active{
    transform:translateX(0);
    opacity:1
  }

  .navbar-toggle{
    display:block;
    z-index:999;
  }

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

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

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

  /* *** hero section *** */

  .hero-container{
    grid-template-columns:1fr;
    /* gap:0.8rem; */
    gap:4rem;
    padding-top: 80px;
    padding-bottom:80px;
  }

  .hero-subtitle{
    font-size:2.5rem;
    margin-top:5rem;
  }

  .hero-title{
    margin-top:2rem;
    font-size: 4.2rem;
  }

  .hero-text{
    margin-top:2rem;
    font-size:2rem;
    margin-block-end:45px;
  }

  .btn{
    font-size:2rem;
    padding:18px 26px;
    margin-inline:auto;
  }

  .hero-picture{
    width:80%;
    margin-inline:auto;
  }

}

/* ***** This section is screen width 576 - 767px ***** */
@media (max-width:767px){

  .navbar-container, .hero-container{
  padding-inline:6rem;
  }

  .navbar-logo{
    width: 100px;
  }

  .navbar-container .navbar-menu{
    width:310px;
  }

  /* *** hero section *** */

  .hero-container{
    padding-top: 65px;
  }

  .hero-subtitle{
    font-size:2.0rem;
    margin-bottom:1.8rem;
  }

  .hero-title{
    font-size: 3.7rem;
    margin-bottom:2.5rem;
  }

  .hero-text{
    font-size:1.8rem;
    margin-bottom:7rem;
  }

  .btn{
    font-size:1.7rem;
    padding:16px 22px;
  }

  .hero-picture{
    padding-top:2rem;
    width:95%;
  }

}

/* ***** This section is screen width 480 - 575px ***** */
@media (max-width:575px){

  .navbar-container, .hero-container{
    padding-inline:6rem;
  }

  .navbar-logo{
    width: 90px;
  }

  .navbar-container .navbar-menu{
    width:270px;
  }


  /* *** hero section *** */

  .hero-container{
    padding-top: 55px;
  }

  .hero-subtitle{
    font-size:1.9rem;
    margin-bottom:1.6rem;
  }

  .hero-title{
    font-size: 3.2rem;
    margin-bottom:2.5rem;
  }

  .hero-text{
    font-size:1.6rem;
    margin-bottom:6rem;
  }

  .btn{
    font-size:1.7rem;
    padding:16px 22px;
    margin-inline:auto;
  }

  .hero-picture{
    width:95%;
    padding-top:0.5rem;
  }

}

/* ***** This section is screen width 320 - 479px ***** */
@media (max-width:479px){

  .navbar-container, .hero-container{
    padding-inline:5rem;
  }

  .navbar-container .navbar-menu{
    width:200px;
    padding:16rem 1.5rem 0 2rem;
  }

  /* *** hero section *** */

  .hero-container{
    padding-bottom:50px;
  }

  .hero-subtitle{
    font-size:1.8rem;
    margin-bottom:2rem;
  }

  .hero-title{
    font-size: 2.2rem;
    line-height:1.3;
    margin-bottom:2rem;
  }

  .hero-text{
    font-size:1.4rem;
    margin-bottom:4rem;
  }

  .btn{
    font-size:1.3rem;
    padding:10px 14px;
    margin-inline:auto;
  }

  .hero-picture{
    width:95%;
    padding-top:0;
  }

  .products-container{
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  }

  .product-card{
      padding:3rem;
  }

}