/* Header */
@media (max-width: 1080px) {
  .container {
    width: 98%;
    padding: 0 30px;
  }

  .bicycle__container,
  .features__container,
  .best__container {
    width: 98%;
    padding: 0 30px;
  }

  .header__logo img{
    width: 70%;
  }

  .nav__list {
    font-size: 18px;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .burger-menu {
    display: flex; 
    margin-right: 40px;
    margin-left: auto;
  }

  .nav__list {
    display: none; 
    flex-direction: column;
    position: absolute;
    top: 80px;
    right: 0;
    background: rgba(42, 69, 88, 0.9);
    width: 40%;
    padding: 20px 10px 20px 30px;
    gap: 10px;
  }

  .nav__list.active {
    display: flex; 
    width: 40%;
    margin: 0;
  }

  .nav__list {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-right: 50px;
  }
}


/* Bicycle section */
@media (max-width: 1180px) {
  .support__brand {
    justify-content: flex-end;  
    width: 100%;
  }
}

@media (max-width: 994px) {
  .support-velo {
    height: 40vh;
  }
} 

@media (max-width: 980px) {
  .bicycle__explore {
    margin-top: 148px;
  }

  .bicycle__explore {
    max-width: 100%;
  }
}

@media (max-width: 920px) {
  .support__fast {
    padding: 37px 0px 37px 50px;
  }
}

@media (max-width: 870px) {
  .support__fast {
    padding: 37px 0px 37px 70px;
  }
}

@media (max-width: 836px) {

  .support__brand {
    justify-content: flex-start;  
    width: 100%;

  }
}

@media (max-width: 768px) {
  .bicycle__container {
    padding: 20px 10px;
    width: 100%;
  }

  .bicycle__explore {
    max-width: 100%;
    margin-top: 48px;
  }
  
  .bicycle__form {
    flex-direction: column;
    align-content: center;
    width: 82%;
    margin: 0 auto;
    text-align: center;
  }

  .bicycle-box-now {
    display: flex;
    gap: 16px;
    margin: 0 auto;
  }

  .bicycle-box {
    display: none;
  }

  .bicycle__title {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .bicycle__subtitle h5 {
    font-size: 14px;
  }

  .bicycle__title h1 {
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    font-size: 30px;
    line-height: 38px;
  }

  .bicycle__title p {
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
  }

  .bicycle-box button{
    gap: 16px;
  }

  .order-btn-shop,
  .order-btn-products {
    font-size: 14px;
    font-weight: 400;
    padding: 8px 36px;
  }

  .support__brand {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .bicycle__support {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
  }

  .support__fast {
    display: flex;
    padding: 37px 23px 37px 24px;
  }
}

@media (max-width: 658px) {
  .support__fast {
    padding: 37px 14px 37px 200px;
  }
}

@media (max-width: 548px) {
  .support__fast {
    display: flex;
    padding: 37px 14px 37px 300px;
  }
}

@media (max-width: 480px) {
  .support {
    width: 90%;
    height: auto;
  }

  .support__fast {
    display: none;
  }
} 
 

/* Section Features */
@media (max-width: 1024px) {
  .features__cards {
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 768px) {
  .features__container {
    width: 95%;
    padding: 0;
  }

  .features__title h2 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  .features__cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 496px) {
  .features__title h2 {
    text-align: center;
  }
} 

@media (max-width: 480px) {
  .features__cards {
    grid-template-columns: 1fr; 
  }
}

/* Section Best */
@media (max-width: 1024px) {
  .box__tandem {
    flex-direction: column;
    flex-direction: column-reverse; 
    text-align: center;
  }

  .box__fork {
    display: flex;
  }
  
  .block__tandem {
    margin-top: 20px;
    align-items: center;
    gap: 16px;
  }
  
  .best__title h2 {
    margin-top: 48px;
  }

  .block__tandem-description{
    margin: 0 auto;
  }

  .block__travel {
    text-align: center;
  }

  .level {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .level h5 {
    margin-top: 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
  }

  .level h3 {
    font-weight: 600;
    font-size: 26px;
    line-height: 34px;
  }

  .level p
  .box__travel {
    display: none;
  }

  .block__travel img {
    margin-top: 15px;
  }

  .tandem-description {
    margin: 0 auto;
    padding: 0 30px;
  }

  .button__tandem button {
    margin: 16px 0;
  }
}

@media (max-width: 768px) {
  #best {
    padding: 40px 60px;
  }

  .best__container {
    padding: 20px 10px; 
  }

  .best__title h2  {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  .best__capacity {
    grid-template-columns: 1fr; 
  }

  .button__best button,
  .button__tandem button {
    padding: 8px 26px;
  }
}

@media (max-width: 586px) {
  .best__container {
    margin: 0 30px;
    margin: 0 auto;
  }
  .level h3 {
    font-weight: 600;
    font-size: 26px;
    line-height: 34px;
  }
  
  .box__travel {
    display: flex;
  }

  .best__capacity, .box__travel {
    gap: 10px !important; 
  }

  .travel p {
    font-size: 14px;
    line-height: 18px;
  }
}

/* Section Category */
@media (max-width: 1024px) {
  .category-cards {
    grid-template-columns: 1fr; 
    grid-template-rows: auto;
  }

  .product-vertical {
    grid-row: auto;
    grid-column: auto;
  }

  .product-horizontal {
    flex-direction: row;
    text-align: center;
  }

  .product-horizontal .product__photo {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .category__container {
    padding: 20px 0px; 
  }

  .category-cards{
    width: 80%;
  }

  .category__title h4 {
    margin-top: 0;
  }

  .category__title h2  {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  .product-vertical h3 {
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
  }

  .category__text {
    max-width: 600px;
    padding: 0 20px;
    margin: 24px auto 0;  
  }

  .product-vertical{
    width: 100%;
  }

  .product-vertical img {
    width: 80%;
    height: auto;
    margin: 0 auto;
  }

  .order-btn-kids {
    max-width: 50%;
    padding: 6px 12px; 
    margin-top: 0;
  }

  .order-btn-details{
    margin-top: 20px;
    padding: 6px 14px; 
  }
}

@media (max-width: 596px) {
  .product__text h4 {
    font-size: 20px;
  }

  .button__details button {
    font-size: 16px;
    line-height: 20px;
    padding: 8px 16px;  
  }

  .product-horizontal { 
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}


/* Products */
@media (max-width: 1024px) {
  .bike__card {
    flex: 1 1 calc(50% - 20px); 
    max-width: calc(50% - 20px);
  }

  .bike__brand {
    display: flex;
  }

  .bike__text {
    margin-right: auto;
  }

   .commodity__title h4 {
    margin-top: 28px;
  }

  .cart-text-left,
  .cart-text-right {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .commodity__card { 
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .commodity__text {
    max-width: 600px;
    padding: 0px;
    margin: 24px auto 0;  
  }

  .commodity__title h2  {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  .bike__card {
    flex: 1 1 100%; 
    max-width: 600px;
    width: 100%;
  }

  .bike__text {
    gap: 84px;
  }
}

@media (max-width: 480px) {
  .bike__text {
    gap: 24px;
  }
}

@media (max-width: 442px) {
  .commodity__title h2 {
    text-align: center;
  }
}

@media (max-width: 358px) {
  .commodity__title h2 {
  text-align: center;
  }
}

/* Shop */
@media (max-width: 1024px) {
  .shop__cards {
    grid-template-columns: repeat(3, 1fr); 
  }
}

@media (max-width: 768px) {
  .shop__title h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  .shop__cards {
    grid-template-columns: repeat(2, 1fr); 
  }
}

.commodity__title h4 {
  margin-top: 48px;
}

@media (max-width: 558px) {
  .shop__title h2 {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .shop__cards {
    grid-template-columns: 1fr; 
  }
}

@media (max-width: 464px) {
  .shop__title h2 {
    text-align: center;
  }

  .shop__title h4 {
    margin-top: 0 ;
    text-align: center;
  }
}

/* Contacts */
@media (max-width: 1024px) {
  .contact__logo img {
    width: 90px;
    max-width: 100%; 
    height: auto;
  }
}

@media (max-width: 768px) {
  #contact {
    padding: 40px 0;
  }
  
  .contact__container {
    margin-bottom: 0px;
  }

  .contact__logo img {
    width: 90px;
    max-width: 100%; 
    height: auto;
  }

  .contacts, .contact__menu, .contact__social {
    flex: 1 1 calc(40% - 20px);  
    max-width: calc(50% - 20px);
  }
  
  .contact__menu{
    margin-left: 60px;
  }

  .contact__social {
    display: flex;
    flex-direction: row;
    gap: 54px;
  }

  .contacts, .contact__menu, .contact__social {
    flex: 1 1 40%; 
    max-width: 30%;
  }

  .contact__social {
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .contacts {
    gap: 8px;
  }

  .contact__mapa,
  .contact__phone,
  .contact__mail {
    gap: 8px;
  }

  .contact__container {
    gap: 10px;
  }

  .contacts__menu {
    flex-wrap: wrap;
  }

  .contact__filling {
    display: flex;
    flex-direction: column;
  }
}

/* Footer */