/* --- HERO BANNER --- */

.hero-banner {

  position: relative;

  width: 100%;

  height: 65dvh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.hero-banner::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  background-image: linear-gradient(to top, #161616 10%, transparent);

}



.image-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: 0;

}



.banner-img {

  width: 100%;

  height: 100%;

  object-fit: cover;


}



.overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);

  z-index: 1;

}



.main-content {

  position: relative;

  z-index: 2;

  text-align: center;

  color: white;

  max-width: 800px;

  padding: 0 1rem;

}





.big-title {

  font-size: 5.5rem;

  font-weight: 900;

  text-shadow: 2px 2px 8px rgba(250, 243, 243, 0.3);

  transform: scale(1.05) skewX(-3deg);

  margin-bottom: 1rem;

}



.big-title:hover {

  text-shadow: 4px 4px 12px rgba(231, 227, 227, 0.3);

  cursor: default;

}



.second-paragraph {

  font-size: 1rem;

  color: rgba(255, 255, 255, 0.795);

  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);

  font-weight: 700;

  margin-top: 0;

}













.hero-buttons {

  margin-top: 2rem;

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;



  z-index: 2;

}





.btn-shop {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 24px;

  background-color: #2c6ba5;

  color: white;

  font-weight: 700;

  font-family: 'Roboto', sans-serif;

  font-size: 1.1rem;

  border-radius: 12px;

  text-decoration: none;

  box-shadow: 0 4px 15px #1a5f9799;

  transition: background-color 0.3s ease;

}



.btn-shop:hover {

  background-color: #2a67a0da;

  box-shadow: 0 6px 20px #1a5f9799;

  cursor: pointer;

}





.btn-status {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 24px;

  background: transparent;

  border: 2px solid white;

  color: white;

  font-weight: 700;

  font-family: 'Roboto', sans-serif;

  font-size: 1.1rem;

  border-radius: 12px;

  text-decoration: none;

  transition: background-color 0.3s ease, color 0.3s ease;

}



.btn-status:hover {

  background-color: white;

  color: #1a1a1a;

  cursor: pointer;

}





.btn-shop i,

.btn-status i {

  font-size: 1.4rem;

}





@media screen and (max-width: 450px) {



  .big-title {

    font-size: 3rem; 

    transform: scale(1) skewX(-2deg); 

  }





}









@media screen and (max-width: 800px) {





  .hero-banner {

  position: relative;

  width: 100%;

  height: 55dvh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.hero-banner::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  background-image: linear-gradient(to top, #161616 10%, transparent);

}



.image-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: 0;

}



.banner-img {

  width: 100%;

  height: 100%;

  object-fit: cover;


}



.overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);

  z-index: 1;

}



.main-content {

  position: relative;

  z-index: 2;

  text-align: center;

  color: white;

  max-width: 800px;

  padding: 0 1rem;

}







.big-title {

  font-size: 5rem; 

  font-weight: 900;

  letter-spacing: -1px;

  text-transform: uppercase;

  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);

  transform: scale(1.05) skewX(-3deg);

  margin-bottom: 1rem;

  font-family: 'Poppins', sans-serif;

}



.big-title:hover {

  text-shadow: 4px 4px 12px rgba(0,0,0,0.4);

  cursor: default;

}



.second-paragraph {

  font-size: 1rem;

  text-shadow: 4px 4px 12px rgba(0,0,0,0.3);

  font-weight: 700;

  margin-top: 0;

}





}















  @media screen and (max-width: 550px) {





.hero-banner {

  position: relative;

  width: 100%;

  height: 85vh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.hero-banner::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  background-image: linear-gradient(to top, #161616 10%, transparent);

}



.image-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: 0;

}



.banner-img {

  width: 100%;

  height: 100%;

  object-fit: cover;


}



.overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);

  z-index: 1;

}



.main-content {

  position: relative;

  z-index: 2;

  text-align: center;

  color: white;

  max-width: 90%;

  margin-top:-200PX;

  padding: 0 1rem;

}





.big-title {

  font-size: 2rem; 

  font-weight: 900;

  letter-spacing: -0.5px;

  text-transform: uppercase;

  text-shadow: 1.5px 1.5px 6px rgba(0,0,0,0.3);

  transform: scale(1.03) skewX(-2deg);

  margin-bottom: 1rem;

  font-family: 'Poppins', sans-serif;

}



.big-title:hover {

  text-shadow: 3px 3px 8px rgba(0,0,0,0.4);

  cursor: default;

}



.second-paragraph {

  font-size: 0.9rem;

  text-shadow: 3px 3px 10px rgba(0,0,0,0.3);

  font-weight: 600;

  margin-top: 0;

}



}







@media screen and (max-width: 450px) {



  .big-title {

    font-size: 3rem; 

    transform: scale(1) skewX(-2deg); 

  }



  .btn-shop,

  .btn-status {

    padding: 14px 16px; 

    font-size: 0.9rem; 

    border-radius: 10px;

  }



  .second-paragraph {

  font-size: 0.8rem;

  text-shadow: 3px 3px 10px rgba(0,0,0,0.3);

  font-weight: 600;

  margin-top: 0;

}

  .btn-shop i,

  .btn-status i {

    font-size: 1.1rem;

  }

}





@media screen and (max-width: 400px) {



  .big-title {

    font-size: 2.4rem; 

    transform: scale(1) skewX(-2deg); 

  }



  .btn-shop,

  .btn-status {

    padding: 10px 16px; 

    font-size: 0.9rem; 

    border-radius: 10px;

  }



  .btn-shop i,

  .btn-status i {

    font-size: 1.1rem;

  }

}





/* end Hero banner */



















































.reviews-wrapper {

  max-width: 1250px;

  margin: 100px auto 40px;

  border-radius: 12px;

  padding: 25px 30px;



  color: #eee;

  font-family: Arial, sans-serif;

}

.reviews-wrapper h1 {

  margin-bottom: 20px;

  font-weight: 700;

  text-align: center;

  color: #ffffff;

  font-size: 2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

}



.reviews-wrapper h1 .icon {

  font-size: 2.2rem;

  color: #009dff;

  animation: spin-in 0.5s ease-in-out;

}



@keyframes spin-in {

  from {

    opacity: 0;

    transform: scale(0.5) rotate(-90deg);

  }

  to {

    opacity: 1;

    transform: scale(1) rotate(0deg);

  }

}



#reviews-container {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.review-card {

  display: flex;

  background: #222121;

  border-radius: 10px;

  padding: 20px 25px;

  gap: 20px;

  align-items: flex-start;

  transition: all 0.3s ease;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

}



.review-card:hover {

  transform: translateY(-5px) scale(1.01);

  background: #2c2c2c;

  box-shadow: 0 8px 20px rgba(0, 157, 255, 0.25);

}



.review-emoji {

  font-size: 2.8rem;

  line-height: 1;

  user-select: none;

  margin-top: 5px;

}

.review-content {

  flex: 1;

}

.review-content > div {

  display: flex;

  justify-content: space-between;

  font-size: 0.85rem;

  color: #bbb;

  margin-bottom: 7px;

}

.review-author {

  font-weight: 700;

  color: #009dff;

}

.review-timestamp {

  font-style: italic;

}

.review-text {

  font-size: 1.05rem;

  line-height: 1.4;

  white-space: pre-wrap;

  color: #ddd;

}

.pagination {

  margin-top: 25px;

  display: flex;

  justify-content: center;

  gap: 12px;

}

#pagination button {

  border: none;

  background: #161616;

  padding: 10px 16px;

  color: white;

  margin: 0 4px;

  border-radius: 6px;

  cursor: pointer;

  transition: background 0.2s;

}



#pagination button:hover:not(:disabled) {

  background: #009dff;

  color: white;

}



#pagination button:disabled {

  opacity: 0.4;

  cursor: default;

}