:root {
  /* You can move your global variables here if needed, or keep in home.css */
  --white: #ffffff;
  --eerie-black: #212121;
  --oxford-blue-3: #283655;
  --international-orange-engineering: #c73e1d;
  --fw-600: 600;
  --box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  --transition: 0.2s ease;
}

.series{
  background-color:var(--white);
}
.series-container{
  max-width:2000px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  --dynamic-nav-height: calc(var(--dynamic-nav-height, 0px) + 40px);
  padding-top: var(--dynamic-nav-height);
  padding-bottom:90px;
  padding-inline:12rem;
  align-items: center; 
}

.series-subtitle{
  font-size:2.5rem;
  color:var(--eerie-black);
  margin-bottom:2rem;
}
.series-subtitle em{
  color:var(--international-orange-engineering);
  font-style:normal;
}
.series-title{
  color:var(--eerie-black);
  font-size: 4rem;
  margin-bottom:5rem;
}
.series-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem 3rem;
  width:100%;
  max-width:800px;
  margin-top:4rem;
  list-style:none;
  margin-bottom:5rem;
}
.series-feature{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  font-size:1.6rem;
  line-height:1.2;
}
.series-picture{
  width: 80%;
  margin-left: auto;
  display: grid;
  place-items: center;  
  aspect-ratio: 1 / 1; 
  overflow: hidden;
}
.series-picture img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  display: block;
}
.series-feature i{
  flex-shrink:0;
  font-size:3.5rem;
  color:rgb(16, 29, 71);
  margin-top:0.2rem;
}
.series-feature p{
  color:var(--eerie-black);
  font-size:2rem;
  line-height:1.6;
}
.series-feature strong{
  color:var(--eerie-black);
  font-weight:var(--fw-600);
  text-transform:uppercase;
}
.series-content .btn{
  margin-inline:auto;
}

/* *** items section*** */
.spec{
  background-color:white;
}

.spec .container h3{
  text-align:center;
  font-size:5rem;
  color:black;
  margin-bottom:3.6rem;
}

.spec-container{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:35px;                      
  align-items:stretch;
  padding-block:3rem;
  width:55%;
  margin-inline:auto; 
  background-color:rgb(236, 236, 236);
  margin-bottom:12rem;
  padding-inline:4rem;
  border-radius:2rem;
  /* align-items: start; */
}

.spec-comp{
  display:grid;
  grid-template-columns:1.2fr 2fr;
  gap:2rem;
align-items: center;
}

.spec-comp h1{
  font-size:2.4rem;
  background-color:rgb(143, 143, 143);
  padding:2px 12px;
  color:white;
  flex-shrink:0;

}

.spec-comp h2{
  font-size:2.1rem;
  background-color:rgb(237, 239, 239);
}



/* --------------responsive media queries -------------------- */

@media (max-width:1900px){
  .spec-container{
    width:75%;
    grid-template-columns:1fr 2fr;
  }
}

@media (max-width:1799px){
  .series-title{
    font-size: 3.5rem;
    margin-bottom:3rem;
  }
  .series-feature{
    gap:0.7rem;
    font-size:1.2rem;
    line-height:1.2;
  }
  .series-picture{
    width: 90%;
  }
}

@media (max-width:1610px){
  .series-container{
    gap:3rem;
  }
  .series-title{
    font-size: 3.1rem;
    margin-bottom:2rem;
  }
  .series-feature{
    line-height:1;
  }
  .series-picture{
    width: 100%;
  }

}

@media (max-width:1439px){
  .series-container{
    grid-template-columns:1fr 1fr;
    padding-bottom:60px;
  }
  .series-subtitle{
    font-size:2.5rem;
  }
  .series-title{
    font-size: 2.2rem;
  }
  .series-feature p{
    line-height:1.2;
  }
  .btn{
    font-size:1.9rem;
    padding:20px 28px;
  }

  .spec-container{
    grid-template-columns:1fr 1.6fr;
  }

}

@media (max-width:1200px){

  .series-container{
    grid-template-columns:1fr;
    width:80%;
  }

  .series-content{
    order:2;
  }

  .series-picture{
    order:1;
  }

  .spec .container h3{
    font-size:4.5rem;
  }

  .spec-container{
    grid-template-columns:1fr 1.2fr;
  }

  .spec-comp{
    grid-template-columns:1.5fr 2fr;
  }

}
@media (max-width:992px){
  .series-container{
    padding-inline:6rem;
    width:85%;
  }

.spec-container{
  width:85%;
}

.spec-comp h1{
  font-size:2.0rem;
}

}

@media (max-width:799px){
  .series-container{
    padding-inline:4rem;
    width:90%;
  }
  .spec-container{
    grid-template-columns:1fr;
  }
}

@media (max-width:576px){
  .series-container{
    padding-inline:2rem;
    width:95%;
  }

  .spec .container h3{  
    font-size:4.0rem;
  }

  .spec-container{
   gap:1rem;
  }

  .spec-comp{
    grid-template-columns:1fr;
    gap:1rem;
  }

}

@media (max-width:480px){
  .series-container{
    padding-inline:1rem;
  }

  .series-features{
    grid-template-columns:1fr;
    margin-top:2rem;
    margin-bottom:5rem;
  }

  .spec .container h3{
    font-size:3.0rem;
  }


}