/* GENERAL STYLES */
body {
    margin: 0;
    background-color: #1C1C1D
}
.main-content{
padding-top: 1.5rem;
}
h1,
h2,
h3 {
    color: #f5f5f7;
    font-family: "Geist", sans-serif;
    text-transform: uppercase;
    text-align: center;
    margin: 0
}

.hero-text {
    color: #f5f5f7;
    font-family:"League Gothic", sans-serif;
    text-transform: capitalize;
    font-weight: normal;
     font-size: clamp(3.2rem, 7vw, 8.5rem);
    
}

h1 {
    font-size: 2.6rem
}

@media(max-width: 480px) {
    h1 {
        font-size: 1.5rem
    }
}

h2 {
    font-size: 2.3rem
}

@media(max-width: 480px) {
    h2 {
        font-size: 1.4rem
    }
}

h3 {
    font-size: 1.4rem;
    transition: all .2s ease-in-out
}

@media(max-width: 480px) {
    h3 {
        font-size: 1.3rem
    }
}



img {
    width: 100%;
    height: auto
}
 /* Banners */
@media(min-width: 480px) {
    .mobile-only {
        display: none
    }
}

@media(max-width: 480px) {
    .desktop-only {
        display: none
    }
}


/* Header animation */
.translate {
    transform: translate(0, -63px)
}

@media(max-width: 480px) {
    .translate {
        transform: translate(0, -35px)
    }
}

/* HEADER STYLES */
header {
    border-bottom: 1px solid gray;
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100%;
    box-shadow: 0px 0px 27px -5px #141414;
    transition: all .4s ease-in-out
}
.content-header{
    display: flex;
     justify-content: space-between;
    flex-direction: row;
    padding:  0;
    width: 90%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    gap: 0
}


@media(max-width: 480px) {
    header .content-header {
        flex-direction: column
    }
}

header .content-header .header-logo {
    display: flex
}

header .content-header .header-logo img {
    max-height: 30px;
    height: 30px;
    transition: all .2s ease-in-out
}

header .content-header .header-logo img:hover {
    filter: brightness(0.5)
}

@media(max-width: 480px) {
    header .content-header .header-logo img {
        padding: 15px 0 0 0;
        height: 20px
    }
}

header .content-header .nav {
    display: flex;
    flex-wrap: wrap
}

@media(max-width: 320px) {
    header .content-header .nav {
        justify-content: center
    }
}

header .content-header .nav .main-cta {
    font-size: 15px;
    padding: 8px 35px 10px;
    margin: 15px 0 15px 10px
}

@media(max-width: 480px) {
    header .content-header .nav .main-cta {
        font-size: 11px;
        padding: 8px 40px 9px;
        margin: 10px 5px
    }
}

header .content-header .nav .secondary {
    box-shadow: inset 0px 0px 0px 2px #fff
}

header .content-header .nav .secondary:hover {
    color: #141414
}

/* WELCOME OFFER SECTION STYLES */
.content-box-welcome {
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    width: 90%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    gap: 4rem;
}

.content-box-welcome .cards-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap
}
.cards_titlle{
    font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2.4rem);
    margin-top: clamp(2rem, 10vw, 5rem);
    font-family: "Oswald", sans-serif;
    font-weight: 400;
}
.content-box-welcome .cards-wrapper .cards_card {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px
}

.content-box-welcome .cards-wrapper .cards_card img {
    border-radius: 10px;
    transition: all .2s ease-in-out;
    filter: brightness(0.9)
}
.content-box-welcome .cards-wrapper .cards_card h3 {
    font-size: 1.3rem;
   font-family: "Oswald", sans-serif;
   font-weight: 400;
}


@media all and (max-width: 1024px) {
    .content-box-welcome .cards-wrapper .cards_card {
        width: 250px
    }
}

.content-box-welcome .cards-wrapper .cards_card:hover img {
    filter: brightness(1.1)
}
.welcome-offer_secondtext{
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.4rem, 3.9vw, 4.5rem);
    font-weight: norm;
    margin: 0;
    color: #DFC091;
    line-height: 1;
}


/* PAYMENTS STYLES */
  .py_tittle{
    margin: 3rem 0 1.5rem;
    font-size: 1.3rem;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
  }
 
    .content_payment{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      gap: 1rem;
    }
  
    .content_social a img:hover {
      opacity: 0.5;
    }
  
    .content-icons a {
      width: 45px;
      height: fit-content;
      margin: 0 10px;
    }
  
    .content-icons a img {
      width: 100%;
      height: auto;
    }
  
    @media (max-width: 480px) {
      .content-icons .content_payment a {
        margin: 5px;
      }
  
      .content-icons a {
        width: 30px;
        margin: 0 5px;
      }
  

      .content_payment {
        margin: 0;
        gap: 0;
      }
      .py_tittle{
        margin: 0 0 .5rem;
      }
    }

/* CTA STYLES */
.main-cta {
    border: none;
    padding: 15px 75px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 25px;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    transition: all .2s ease-in-out;
    border-radius: 41px;
    line-height: 1;
}

@media(max-width: 480px) {
    .main-cta {
        font-size: 20px;
        padding: 8px 70px 12px
    }
}

.primary {
    color: #f5f5f7;
    background-color: #5C63FF;
    text-transform: uppercase;
}

.primary:hover {
    background-color: #1D3589
}

.secondary {
    box-shadow: inset 0px 0px 0px 3px #fff;
    color: #f5f5f7;
    font-family: "Oswald", sans-serif;
     text-transform: uppercase;
}

.secondary:hover {
    color: #e80000;
    background-color: #f5f5f7
}


/*FEE*/
.content-box {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    width: 90%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    gap: 50px
}

.content-box h2
 {
 color: #f5f5f7;
 font-family: "Oswald", sans-serif;
 font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2.4rem);
 font-weight: 400;
}

@media(max-width: 480px) {
    .content-box
     {
        gap: 30px;
        padding: 20px 0;
    }
}
.content-box .cards-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap
}

.content-box .cards-wrapper .cards_card {
    width: 23%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px
}

.content-box .cards-wrapper .cards_card img {
    border-radius: 10px;
    transition: all .2s ease-in-out;
    filter: brightness(0.9)
}

.content-box .cards-wrapper .cards_card span {
    color: #d7aa50
}

@media all and (max-width: 1024px) {
    .content-box .cards-wrapper .cards_card {
        width: 250px
    }
}

.content-box .cards-wrapper .cards_card:hover img {
    filter: brightness(1.1)
}

@media all and (max-width: 500px) {
    .content-box .cards-wrapper .mySlides
     {
        display: none;
        text-align: center;
        width: 90%;
        gap: 20px
    }
}


/*Fee*/

.main-content .rewards {
    color: #f5f5f7;
}

.main-content .rewards .content-box .h2-padding {
    padding-top: 30px !important;
}

.main-content .rewards .content-box .cards-wrapper {
    gap: 5px;
    align-items: flex-start
}


@media(max-width: 320px) {
    .main-content .rewards .content-box .cards-wrapper {
        font-size: .8em;
    }
}

@media(max-width: 425px) {
    .main-content .rewards .content-box .cards-wrapper {
        justify-content: space-between;
        gap: 5px;
    }
}

.main-content .rewards .content-box .cards-wrapper .cards_card {
    width: 220px;
}

@media(max-width: 850px) {
    .main-content .rewards .content-box .cards-wrapper .cards_card {
        width: 32%;
    }
}

.main-content .rewards .content-box .cards-wrapper .cards_card img {
    width: 110px;
    filter: brightness(1);
}

@media(max-width: 500px) {
    .main-content .rewards .content-box .cards-wrapper .cards_card img {
        width: 75%;
    }
}

.main-content .rewards .content-box .cards-wrapper .cards_card h3 {
    color: #f5f5f7;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1rem, 0.8944rem + 0.338vw, 1.3rem);
    font-weight: 400;
    padding: 0 20px;
    width: 10rem;
}

@media(max-width: 1000px) {
    .main-content .rewards .content-box .cards-wrapper .cards_card h3 {
        font-size: .9rem;
        padding: 0 5px !important;
        width: 9rem;
    }
}

@media(max-width: 500px) {
    .main-content .rewards .content-box .cards-wrapper .cards_card h3 {
        font-size: .9rem;
        padding: 0 !important;
        width: 5rem;
    }
}

.main-content .rewards .content-box .cards-wrapper .cards_card:hover img {
    transform: translateY(-5px) scale(1.05);
    filter: brightness(1);
}

.main-content .rewards .content-box .cards-wrapper .cards_card:hover h3 {
    transform: scale(0.9);
}

/* FOOTER STYLES */

footer {
    text-align: center;
    padding-bottom: 1rem;
}

.container-footer{
    display: flex;
    flex-direction: column;
    width: 40%;
    margin: auto;
    align-items: center;
    gap: 5px;
}

footer .container-footer .footer-bdg-logo img {
    height: 40px;
    transition: all .2s ease-in-out;

}

footer .container-footer .footer-bdg-logo img:hover {
    opacity: .5
}

footer .container-footer p {
    color: #f5f5f7;
    font-size: 0.85rem;
    margin: 15px 0 0 0;
    font-family:"Geist", sans-serif;
}

@media(max-width: 480px) {
    
.container-footer{
    width: 90%;

}
    footer .container-footer p {
        font-size: 0.65rem;
    }
    footer .container-footer .footer-bdg-logo img {
    height: 30px;
    

}
}

footer .container-footer .footer-logos {
    max-width: 435px;
    margin: 2em 0;
}

@media(max-width: 480px) {
    footer .container-footer .footer-logos {
        max-width: 285px;
        margin: 1em 0;
    }
}


/* FIXED NAV STYLES */
.fixed-nav {
    background-color:  #E8E8ED;
    position: sticky;
    bottom: 0;
    z-index: 9;
    transition: all .4s ease-in-out
}
.content-fixed {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 0;
    width: 90%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    gap: 0px
}


@media(max-width: 768px) {
    .fixed-nav .content-fixed {
        gap: 10px;
        flex-direction: column
    }
}

.fixed-nav .content-fixed img {
    height: 30px


}

@media(max-width: 425px) {
    .fixed-nav .content-fixed img {
        height: 20px
    }
}

.fixed-nav .content-fixed h3 {
    color: #000
}

@media(max-width: 425px) {
    .fixed-nav .content-fixed h3 {
        font-size: 1rem
    }
}

.fixed-nav .content-fixed .main-cta {
    font-size: 1.3rem;
    padding: 8px 50px 10px
}

@media(max-width: 425px) {
    .fixed-nav .content-fixed .main-cta {
        font-size: .9rem
    }
}


/*# sourceMappingURL=styles.css.map */