html,
body {
    padding: 0;
    margin: 0;
    font-family: 'Oswald', sans-serif!important;
}

#agenda {
    color: whitesmoke;
}
#agenda hr {
    border: none;
    height: 3px;
    background-color: red;
    width: 100%;
    margin: 20px 0;
}
#booster {
    width: 18rem;
    height: auto;
    background-color: transparent;
    border-radius: 25px;
    padding: 20px;
    color: white;
    border: 5px solid white;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.7);

}
.flip-container {
    perspective: 1000px;
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  
  .flipper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    transform-style: preserve-3d;
    animation: flip 5s linear infinite;
  }
  .flipper {
    @media screen and (min-width: 800px) {
        padding-bottom: 40%!important;
    }
  }

  .front,
  .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .back {
    transform: rotateY(180deg);
  }
  
  @keyframes flip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
  }
  

  #attention {
    color: white;
    background-color: rgb(252, 28, 28);
    width: 15%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border-radius: 20px;
  }


/* Main card styles */
#cards {
    display: flex;
    justify-content: center;
}

.theimages {
    @media screen and (min-width: 800px) {
        width:50%!important;
    }
}
.card {
   
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/test.jpg");
    margin: 10px;
    color: white;
    background-size: inherit;
    padding: 7px;
    border-radius: 30px!important;
   
  }
  
  .card:hover {
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
  }
  

  
  .card-body {
    padding: 2rem;
  }
  

  /* Price styles */
.card-title {
    font-weight: bolder;
}
  .price {
 
        font-size: 48px;
        font-weight: bold;
        color: transparent;
        background: white;
        background-clip: text;
        -webkit-background-clip: text;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);   
  }

  

  

 /* Define the pulse animation */
@keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* Apply the pulse animation to an element */
  .pulse {
    animation: pulse 1s ease-in-out infinite;
  }
  

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 100%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}
@media screen and (max-width: 920px) {
  
}
@media screen and (min-width: 480px) {
    #secondBack {
        padding: 25px !important;
    }
    .flip-box {
        margin-left: auto;
        margin-right: auto;
        width: 465px;
    }
}

@media screen and (max-width: 580px) {
    #frstTxt {
        margin-top: 10px !important;
    }
    .flip-box {
        margin-left: auto;
        margin-right: auto;
        width: 465px;
    }
}

.responsive {
    width: 100%;
    height: auto;
}

#bestseller {
    position: absolute;
    top: -59px;
    padding: 10px;
}

#youAreSelected {
    background-color: #092752;
    padding: 15px;
    font-weight: bolder;
    margin: 0;
    color: white;
}
#header {
    background-image: url(Images/treta.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.firstText {
    font-family: "Montserrat", sans-serif;
    color: #d5bb6c;
}

#grad {
    font-weight: bolder;
    font-size: 33px;
    margin-top: 30px;
}

#belowComments {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#buyBtn {
    color: rgb(255, 255, 255);
    font-weight: 600;
    background-color: rgb(166, 0, 0);
    font-size: 40px;
    padding: 10px;
}
#buyBtnModal {
       color: rgb(255, 255, 255);
    font-weight: 600;
    background-color: rgb(166, 0, 0);
    font-size: 20px;
    padding: 10px;
}
#myBTN {
    color: Black;
    font-weight: bolder;
    background: white;
    border-radius: 40px;
    text-decoration: none;
    padding: 18px 36px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  }
  
  
  

.freeShippingSpan {
    font-size: 15px;
    color: #bf953f;
}


    .firstBG {
        /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/bg.jpg");
      
        /* Set a specific height */
        height: 50%;
      
        /* Position and center the image to scale nicely on all screens */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
      }




#selected {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/freedom.jpg");
    background-size: cover;
}
#selected2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/freedom.jpg");
    background-size: cover;
 
}

#selectedImg {
    margin-top: auto;
    margin-bottom: auto;
    padding: 28px;
}

.selectedText {
    font-weight: bold;
    color: white;
    font-size: 20px;
    padding: 25px;
}

.checked {
    color: orange;
}
#faq {
    background-color: whitesmoke;
}
.comments {
    padding: 20px 0 20px 0;
}

.myVoucher {
    padding: 25px;
}

.personimage {
    border-radius: 45px;
    padding: 20px;
}

.accordion-button {
    border: 2px solid black !important;
    background-color: black !important;
    color: white !important;
    font-weight: bolder !important;
    padding: 20px !important;
    border-radius: 25px !important;
}

.accordion-body {
    padding: 25px !important;
    border: 2px solid gray !important;
    margin-top: 10px !important;
    border-radius: 20px !important;
    background-color: #645f5f !important;
    color: white !important;
}

.accordion-item {
    border: none !important;
}

.theBeforeFooter {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/freedom.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: white;
}

#beforeFooter {
    padding: 20px;
    text-align: -webkit-center;
}



#imageBefore {
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 20px;
}

.modal-content {
    background-color: black !important;
}
.modal-body {
    text-align: center;
}
#footer {
    background-color: black;
    padding-top: 50px;
    color: white;
    margin-bottom: 0;
    padding-bottom: 0;
}

#countdown {
    font-size: 78px;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: transparent;
    padding: 20px;
    letter-spacing: 15px;
  }
  

.terms {
    display: flex;
    justify-content: center;
}

.flinks {
    list-style-type: none;
    padding: 5px;
    text-decoration: none;
    color: #f0da6b;
}

.glow-box {
    box-shadow: 0 0 20px rgb(241, 241, 240);
    padding: 15px;
    margin: 15px;
    border: 2px solid white;
    border-radius: 20px;
}
.gold-text {

    color: gold;
}