* {
  font-family: Poppins ,Arial, Helvetica, sans-serif;
}

:root {
    --primary: #000000;
    --secondary: #600867;
    --accent: #a3cd3a;
    --light: #f3f3f3;
    --red: #af1b05;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

h1 {
    font-size: 35px;
}

h2 {
    font-size: 25px;
}

h3 {
    font-size: 16px;
}

h4 {
    font-size: 14px;
}

p {
    font-size: 14px;
}

.icon {
    height: 15px;
}


body {
  margin: 0;
  padding: 0px;
  background: #ffffff;
  color: #000;
  gap: 0;
}

.section-container, .countdown-section {
  margin: 0;
  padding: 0px 0px;
}

.event-banner {
  margin: 0;
  padding: 0px 0px;
  
  height: 100%;
}

.pc-banner {
    color: white;
    width: 100%;
    margin-bottom: -7px;
}

.mobile-banner {
  display: none;
  width: 100%;
}

.countdown-section {
  background-color: var(--secondary);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.countdown-section h4 {
  text-transform: uppercase;
}

.timer, h4, h1 {
  padding: 0;
  margin: 0;
  color: var(--light);
  text-align: center;
  width: 400px;
}

.timer .inner-count {
  display: none;
}

.arrows img {
  width: 35px;
}

.left-arrow img {
  animation: leftMove 1.5s infinite ease-in-out;
}

@keyframes leftMove {
  0%   { transform: translateX(-20px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}


.right-arrow img {
  animation: rightMove 1.5s infinite ease-in-out;
}

@keyframes rightMove {
  0%   { transform: translateX(20px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

.cruise-banner img {
  width: 100%;
}

.required-products {
  background-color: var(--secondary);
  padding: 50px 50px;
  text-align: center;
  justify-content: center;
}

.required-products,
.guide-lines,
.facebook-post {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    text-align: center;   
}

.required-products p,
.guide-lines p {
    text-align: center;
}

.required-products h4 {
  text-transform: uppercase;
  color: #a3cd3a;
}

.required-products h1 {
  width: 100%;
 }

.required-products h4, h1, p, div {
  padding: 0;
  margin: 0;
}

.required-products p {
  color: var(--light);
  margin-top: 15px;
  justify-self: center;
  width: 70%;
}

.products {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}


.product-img img {
  width: 320px;
  height: 320px;
  margin-bottom: -50px;
  margin-top: 20px;
}

.product-img button {
  font-weight: bold;
  color: #f3f3f3;
  background-color: #a3cd3a;
  border: none;
  padding: 5px 15px;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.product-img button:hover {
  background-color: #600867;

}

.guide-lines {
  padding: 50px;
  text-align: center;
  justify-content: center;
}

.guide-lines span {
  color: #600867;
  font-weight: bold;
}

.guide-lines h4 {
  color:var(--red) ;
}

.guide-lines h1 {
  color: #000000;
}

.guide-demostration {
  display: flex;
  margin: 40px 300px;
  gap: 65px;
  align-items: center;

}

.img-guide img {
  width: 250px;
}

.guide-instructions div{
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.guide-instructions img {
  width: 30px;
}

.guide-instructions p {
  text-align: left;
  font-size: 17px;
  line-height: 20px;
  font-weight:500;
}

.note-button {
  font-weight: normal;
  color: #f3f3f3;
  background-color: #600867;
  border: none;
  padding: 15px 25px;
  border-radius: 40px;
}

.note-button span {
  color: #af1b05;
  font-weight: bold;
}

.win-guide {
  background-color: #600867;
  padding: 60px 70px;
  justify-items: center;
  text-align: center;
}

.win-guide h4 {
  color: #a3cd3a;
  text-transform: uppercase;
  padding-bottom: 60px;
}

.win-guide h1 {
  text-transform: uppercase;
  width: 60%;
  padding-bottom: 60px;
}

.win-guide button {
  font-size: 18px;
  padding: 20px 30px;
  width: 60%;
  background-color: transparent;
  border: 3px solid #a3cd3a ;
  border-radius: 20px;
  color: #ffffff;
}

.win-guide span {
  font-weight: bold;
}

.facebook-title {
  padding-top: 40px;
  padding-bottom: 20px;
  color: #000000;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.pc-facebook-post,
.mobile-facebook-post {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 40px;
}

.pc-facebook-post {
  display: flex;
}
.mobile-facebook-post {
  display: none;
}

@media (max-width: 1024px) {

.countdown-section {
  padding: 0 10px;
  gap: 10px;
}

.countdown-section h2 {
  text-transform: uppercase;
  font-size: 15px;
}

.timer, h2, h1 {
  width: 350px;
}

.required-products {
  padding: 20px;
}

.required-products p {
  margin-top: 15px;
  width: 90%;
}

.product-img {
    width: 350px;
    height: 350px;
    justify-items: center;
    justify-content: center;
    justify-self: center;
    align-items: center;
    align-content: center;
}

.product-img img {
  margin-top: 10px;
    width: 350px;
    height: 350px;
  }

.products {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 per row */
  gap: 15px;
  padding-bottom: 15px;
}

.guide-demostration {
  display: flex;
  margin: 20px 5px;
  gap: 25px;
  align-items: center;

}

.win-guide {
  padding: 50px;
}

.win-guide h4 {
  padding-bottom: 10px;
}

.win-guide h1 {
  text-transform: uppercase;
  width: 90%;
  padding-bottom: 20px;
  line-height: 40px;
}

.win-guide button {
  font-size: 18px;
  padding: 20px 30px;
  width: 90%;
  background-color: transparent;
  border: 3px solid #a3cd3a ;
  border-radius: 20px;
  color: #ffffff;
}

}



@media (max-width: 720px) {

  h1 {
    font-size: 25px;
    }
    h2 {
        font-size: 18px;
    }
    h3 {
        font-size: 14px;
    }
    h4 {
        font-size: 14px;
    }
    p {
        font-size: 12px;
    }

  .pc-banner {
    display: none;
}

  .mobile-banner {
  display: flex;
}

.countdown-section {
  gap: 5px;
  text-align: center;
}

.countdown-section h4 {
  display: none;
}

.required-products {
  padding: 20px;
  gap: 10px;
}

.required-products p {
  margin-top: 5px;
  width: 100%;
}

.products {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  align-items: center;
}

.product-img {
  width: 250px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product-img img {
  width: 250px;
  height: 250px;
  display: flex;
  margin-bottom: -50px;
  margin-top: 0px;

}

.guide-lines {
  padding: 20px;
}

.guide-lines p {
  width: 90%;
}

.guide-demostration {
  display: grid;
  margin: 20px 5px;
  gap: 25px;
  align-items: center;

}

.img-guide img {
  width: 200px;
}

.guide-instructions p {
  text-align: left;
  font-size: 14px;
  line-height: 16px;
  font-weight:500;
}

.timer, h4, h1 {
  width: 250px;
}

.timer .inner-count {
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: 10px;
}

.win-guide {
  padding: 20px 0px;
}

.win-guide h4 {
  padding-bottom: 20px;
}

.win-guide h1 {
  width: 70%;
  padding-bottom: 30px;
}

.win-guide button {
  font-size: 14px;
  padding: 10px 20px;
  width: 80%;
  border: 2px solid #a3cd3a ;
  border-radius: 15px;
}

.pc-facebook-post {
    display: none;
  }

  .mobile-facebook-post {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 17px;
  }

  .mobile-facebook-post iframe {
    width: 100% !important; 
    max-width: 500px;       
    height:400px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }


}