@import url("https://use.typekit.net/lbt0nxv.css");

* {
    box-sizing: border-box;
}

html {
    height: unset;
}

:root {
    --blackText: #000000;
    --orange: #E87C46;
    --anacondaOrange: #F4771F;
    --creamBG: #F2F2E7;
    --creamText: #F2F2E7;
    --greyBG: #E6E6DB;
    --white: #fff;

}

.futuraBook {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.futuraHeavy {
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.futuraMedium {

    font-weight: 500;
    font-style: normal;
}

body {
    margin: 0;
    font-family: "futura-pt", sans-serif;
}

.topLogo,
.topLogoTerms {
    /* width: 100%; */
    width: 27.5%;
    height: 100%;
    max-width: 201px;
    margin: 0 auto;
    padding-top: 1rem;
}

.topLogo i,
.btmLogo i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/travalaLogo.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    padding-bottom: 34%;
    display: block;
}

.topLogoTerms i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/termsHeader.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    padding-bottom: 34%;
    display: block;

}

/* first BG for age gate, too soon, too late */
body:has(.firstBG) {
    height: 100%;
    width: 100%;

}

body:has(.tsBG) {
    height: 100%;
    width: 100%;
}

body:has(.tsBG i) {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/tsBG.jpg) center no-repeat;
    background-size: cover;
    display: block;
    width: 100%;

    min-height: 100vh;
    position: relative;
    z-index: -1;

}

/* .firstBG {
    height: 100%;
    width: 100%;
} */

body:has(.firstBG i) {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/ageGateBGMob.jpg) center no-repeat;
    background-size: cover;
    display: block;
    width: 100%;
    /* padding-bottom: 100vh; */
    /* padding-bottom: 220%; */
    min-height: 100vh;
    position: relative;
    z-index: -1;


}

/* .firstBG i {
    background: url(imgs/ageGateBGMob.jpg) center no-repeat;
    background-size: cover;
    display: block;
    width: 100%;

    padding-bottom: 220%;
    position: absolute;
    z-index: -1;

    min-height: 100vh;
} */

/* header for ageGate, TS, TL */

.mainHeaderTwo {
    /* font-size: min(42px, 6.2vw); */
    font-size: min(42px, 7.2vw);
    /* margin: min(1.5rem, 5.2vw) auto; */
    margin: min(1.5rem, 3.2vw) auto;
    line-height: 1.3;
}

.mainTextTwo {
    font-size: min(36px, 5.2vw);
    margin: min(1.5rem, 5.2vw) auto;

    line-height: 1.3;

}

.mainTextTwoWidth {
    width: 90%;
    margin: 0 auto;
}

.creamContainer {
    border-radius: 20px;
    background: var(--creamBG);
    margin: 1rem;
    text-align: center;
    padding: 1rem;
    width: min(820px, 94vw);
    /* margin: 0 auto; */
    margin: min(2rem, 5.9vw) auto;

}

.flexBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    margin: min(1.5rem, 5.2vw) auto;
    margin-bottom: 0;

}

.orangeBG {
    background: var(--orange);
}

.anacondaOrange {
    background: var(--anacondaOrange);
}

.greyBG {
    background: var(--greyBG);
}

.btn {
    border-radius: 200px;
    border: none;
    font-size: min(32px, 5.7vw);
    padding: min(1rem, 4.2vw) min(4rem, 16.5vw);
}

/* a {
    color: var(--blackText);
} */


a.orangeBG.btn {
    color: var(--blackText);
    text-decoration: none;
}

.screenReaderText {
    color: transparent;
    position: absolute;
    user-select: none;
    overflow: hidden;
}

.anaconda {
    width: 75%;
    height: 100%;
    margin: 0 auto;
}

.anaconda i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/anaconda.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 12%;
    display: block;
    /* margin-top: min(1rem, 4vw); */
    margin-top: min(0.5rem, 4vw);
}

.lagerBox {
    width: 83%;
    height: 100%;
    margin: min(1.5rem, 6vw) auto;

}

.lagerBox i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/lagerBox.png) center no-repeat;
    background-size: contain;
    width: 100%;
    display: block;
    padding-bottom: 87%;
}

.subHeadLogo {
    text-align: center;
    color: #fff;
    font-size: min(20px, 5.2vw);
}

.dispDesk {
    display: none;
}


.dispMob {
    display: block;
}

/* age gate  */
.ageGatePos .mainTextTwo {
    margin: min(2rem, 8.3vw) auto;
}

.ageGatePos .creamContainer {
    padding: 2rem 1rem;
    margin-top: 40%;
}

.ageGatePos .mainTextTwo {
    width: 77%;
}

.ageGatePos .flexBtn {
    gap: 1.5rem;
    margin-bottom: inherit;
}

.ageGatePos .btn {
    padding: min(1rem, 4.2vw) min(12rem, 24.5vw);
}

/*end of age gate  */

/* main form */
body:has(.headerContainer) {

    background: var(--creamBG);
}

.headerContainer {
    position: relative;
    /* background: #000000; */
}

.formHeader,
successHeader {
    width: 100%;
    height: 100%;
}

.formHeader i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/heroHeaderMob.jpg) center no-repeat;
    width: 100%;
    padding-bottom: 52%;
    background-size: cover;
    display: block;
    /* opacity: 70%; */
}

.successHeader i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/successHeaderMob.jpg) center no-repeat;
    width: 100%;
    padding-bottom: 52%;
    background-size: cover;
    display: block;
    /* opacity: 70%; */
}

.headerContainer .topLogoContainer {
    width: 100%;
    position: absolute;
    top: 0%;
    transform: translate(0%, 30%);
}

.headerContainer .topLogo,
.headerContainer .topLogoTerms {
    padding-top: unset;
    max-width: unset;
}


.headerContainer .topLogo i {}

.headerContainer .anacondaWhite {
    width: 50%;
    /* height: 100%; */
    position: absolute;
    margin: 0 auto;
    top: 0;
    transform: translate(50%, 520%);
}

.anacondaWhite i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/anacondaWhite.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 11.8%;
    display: block;

}


.headerContainer .headerText {
    position: absolute;
    top: 0;
    transform: translate(0%, 50%);
    color: #fff;
    width: 100%;
    /* font-size: min(28px, 7.3vw); */
    font-size: 7.3vw;
    text-align: center;
}

.mainText {
    text-align: center;
    font-size: min(32px, 8.2vw);
    margin: 2rem auto 1rem;
}

.mainSubText {
    font-size: min(26px, 6.7vw);
    text-align: center;
    width: 80%;
    margin: 0 auto;
    line-height: 1.34;
    max-width: 400px;
}

button {
    cursor: pointer;
}


/* bottom nav */
.btmContainer {
    padding: min(1rem, 4.2vw)
}

.btmLogoContainer {
    padding: min(1rem, 4.2vw) 0;
}

.btmLogo {
    width: 26%;
    height: 100%;
    /* padding: 30px; */
    margin: 0px auto;
    max-width: 100px;
}

.smallTerms {
    text-align: center;
    color: var(--creamText);
    font-size: min(14px, 3.6vw);
    padding: min(0.45rem, 1.8vw);

}

.smallTerms a {
    color: var(--creamText);
    text-decoration: none;
}

/* .btmLogo i {
    background: url(imgs/travalaLogo.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    padding-bottom: 34%;
    display: block;
} */

.facebook,
.instagram,
.x {
    width: min(30px, 10%);
    height: 100%;
}

.facebook i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/facebook.svg) center no-repeat;
    width: 100%;
    display: block;
    padding-bottom: 100%;
}

.instagram i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/instagram.svg) center no-repeat;
    width: 100%;
    display: block;
    padding-bottom: 100%;
}

.x i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/x.svg) center no-repeat;
    width: 100%;
    display: block;
    padding-bottom: 100%;
}

.flexLogos,
.flexBtmNav {
    display: flex;
    justify-content: center;
    gap: min(76px, 10vw);
    padding: min(2rem, 8.2vw) 0 0;
}

.flexBtmNav {
    gap: min(76px, 14vw);
    text-align: center;
    font-size: 14px;
    padding-left: min(30px, 4vw);
}

.flexBtmNav a {
    color: var(--creamText);
    text-decoration: none;
}

.btmFixed {
    /* position: fixed; */
    position: static;
    bottom: 0;
    width: 100%;
}

.termsContainer {
    padding: 0 1rem;
}

/* success */
.btnCopy {
    width: min(35px, 13%);
    /* width: 13%; */
    /* height: 0%; */
    border: none;
    position: absolute;
    top: 30px;
    left: 90%;
    z-index: 7;
    background: var(--white);
    transform: translate(-94%, 0px);
    border: none;



    animation: copy;
    animation-duration: 2s;
    animation-iteration-count: 1;
    color: var(--blackText);

}

.btnCopy i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/copyBtn.svg) center no-repeat;
    width: 100%;
    padding-bottom: 100%;
    display: block;
    border: none;
    background-size: contain;
}

.flexCopy {
    display: flex;
    position: relative;
    width: 100%;
}

.copyCode {
    width: 90%;
    border-radius: 200px;
    padding: 20px;
    font-size: 18px;
    margin: 1rem auto;
    border-radius: 200px;
    padding: 16px;
    border: none;
    background: var(--white);
    color: var(--blackText);
}

/* .copied {
    animation: copy;
    animation-duration: 2s;
    animation-iteration-count: 1;
    color: var(--blackText);
} */
.copied {
    animation: copy;
    animation-duration: 2s;
    animation-iteration-count: 1;
    color: var(--blackText);
}

.copyText {

    user-select: none;
    opacity: 0;
    position: absolute;
    top: -10px;
    left: 90%;
    z-index: 7;
    transform: translate(-94%, 0px);
}

.textC {
    text-align: center;
}

@keyframes copy {
    0% {
        display: block !important;
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}


.successWidth {
    width: 90%;
    margin: 0 auto;
}

.successWidth .anaconda {
    width: 100%;
}

.successWidth .orangeText {
    color: var(--orange);
    font-size: min(22px, 5.7vw);
    text-align: center;
    margin-bottom: 0;
}

.headerText.successHeader {
    transform: translate(0%, 70%);
}

.mainText.successMainText {
    letter-spacing: -1px;
}

.nearestStore {
    font-size: 26px;
    text-align: center;
    width: 70%;
    line-height: 1.36;
    margin: 0 auto;
}

.nearestStore a {
    color: var(--blackText);
}

.hikingImg {
    height: 100%;
    width: 100%;
    padding: 1.5rem;
}

.hikingImg i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/hikingImg.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 56%;
    display: block;
    border-radius: 20px;
}

.orangeContainer {
    margin: min(2rem, 5.9vw) auto;
    width: min(1200px, 94vw);
    border-radius: 20px;
}

.orangeContainer .anacondaWhite {
    width: 82%;
    margin: 0 auto;
}

.orangeContainer p {
    text-align: center;
    margin: 0rem;
    padding: 1.5rem 0 0.5rem;
    font-size: 20px;
    color: #fff;
}

.whiteContainer {
    background: var(--white);
    border-radius: 20px;
    margin: min(2rem, 8.2vw) auto;
    width: min(820px, 94vw);
    padding: 2rem 0;
}

.whiteContainerMarginB {
    margin-bottom: 2rem;

}

.sunsetShirt,
.barramundiShirt {
    width: 85%;
    height: 100%;
    margin: 0 auto;
}
.anacondaStore,
.websiteShop {
    width: 85%;
    height: 100%;
    margin: 0 auto;
}
.anacondaStore i {
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/anacondaStore.jpg) center no-repeat;
    padding-bottom: 105%;
    display: block;
    background-size: cover;
    border-radius: 20px;
}
.websiteShop i {
        width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/successWebsite.jpg) center no-repeat;
    padding-bottom: 105%;
    display: block;
    background-size: cover;
    border-radius: 20px;

}
.sunsetShirt i {
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/sunset.jpg) center no-repeat;
    padding-bottom: 108%;
    display: block;
    background-size: cover;
    border-radius: 20px;
}

.barramundiShirt i {
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/barramundi.jpg) center no-repeat;
    padding-bottom: 108%;
    display: block;
    background-size: cover;
    border-radius: 20px;
}


.whiteContainer .orangeText {
    color: var(--orange);
    font-size: 18.9px;
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;

}

.whiteContainer .shopText {
    font-size: 26px;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    line-height: 1.23;
}

.whiteContainer .btn {
    font-size: min(22px, 5.7vw);
    padding: min(1rem, 4.2vw) min(7.2rem, 27vw);
}

.marginTC {
    margin-top: 0.5rem;
}

.moreBtn,
.marginTC {
    margin-bottom: 4rem;
}

.footer-top-text {
    padding: 0 !important;
    max-width: unset !important;
}

footer .footer-links {
    margin: 0 !important;
}


.codeBox {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 580px;
    padding: 8px;
}


.codeBox i {
    background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/modalImg.png) center no-repeat;
    width: 100%;
    padding-bottom: 67%;
    display: block;
    background-size: contain !important;
}

.codeBox+ol {
    list-style: none;
    text-align: center;


    font-size: min(36px, 3.6vw);
    max-width: 480px;
    margin: 0 auto;
    margin-top: 20px;
    padding-left: 0;
}




.mat-dialog-content.content:has(.codeBoxContainer) {
    padding: 0 !important;
    width: 100%;
    margin: 0 auto;
}

.cdk-overlay-pane:has(.codeBoxContainer) {
    width: 100%;
    max-width: min(800px, 80vw) !important;
}


/* modal */
.mat-dialog-container {
    background: var(--creamBG);
    color: var(--blackText);
    text-align: center;
    padding-bottom: 40px;
}

.mat-dialog-content {
    max-height: unset !important;
}

.mat-dialog-content h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: min(62px, 6.3vw);
}

.cdk-overlay-container {
    background: rgb(0 0 0 / 70%) !important;
    overflow: auto;
}

.cdk-overlay-dark-backdrop {
    background: transparent !important;
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    /* opacity: 0.7 !important; */
    opacity: 1;
}

.mat-dialog-container .mat-dialog-actions {
    display: none !important;
}

.close-button-container mat-icon {
    float: right !important;
    position: relative !important;
    top: 0% !important;
    right: 5% !important;
    transform: translate(100%, -50%);
    font-size: min(300%, 4.9vw) !important;
    overflow: inherit !important;
}




@media only screen and (min-width:768px) {

    /* on PN to put on actual body of the pages required */
    body:has(.firstBG i) {
        background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/ageGateBG.jpg) center no-repeat;
        display: block;
        background-size: cover;
        padding-bottom: unset;

    }

    /* .firstBG i {
        background: url(imgs/ageGateBG.jpg) center no-repeat;
        display: block;
        background-size: cover;
        padding-bottom: unset;
    } */

    .ageGatePos {
        /* position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%); */


        position: static;
        /* left: 50%;
        top: 50%; */
        transform: translate(0%, 0%);
    }

    .creamContainerPos {
        position: static;
        transform: translate(0%, 0%);

    }

    .flexBtn {
        flex-direction: row;
        margin: min(2rem, 5.2vw) auto;
    }

    .subHeadLogo {
        font-size: min(42px, 5.2vw);
        margin: 16px auto 32px;
    }

    .anaconda {
        width: 64%;
    }

    .lagerBox {
        width: 51%;
        margin: min(2rem, 6vw) auto;
    }

    .btn {
        padding: min(1.25rem, 4.2vw) min(3rem, 16.5vw);
        /* font-size: min(32px, 1.7vw); */
    }

    /* .ageGatePos {
        position: static;
        transform: translate(0%, 40%);
    } */

    .ageGatePos .creamContainer {
        padding: 2rem;
        margin-top: 10%;

    }

    .ageGatePos .mainHeaderTwo {
        width: 100%;
    }

    /* .ageGatePos .mainTextTwo {
        width: 75%;
    } */

    .ageGatePos .btn {
        padding: min(1.25rem, 4.2vw) min(6rem, 16.5vw);
    }

    .mainHeaderTwo {
        width: 70%;
        /* font-size: min(42px, 2.2vw); */
    }



    .mainTextTwo.mainTextTwoWidth {
        width: 100%;
    }

    .ts .mainTextTwoWidth {
        width: 82%;
    }

    .mainTextTwo {
        /* font-size: min(36px, 1.9vw); */
    }

    .dispDesk {
        display: block;
    }

    .dispMob {
        display: none;
    }

    /* form */
    form {
        max-width: 820px !important;
    }


    form label {
        display: block !important;
        text-align: center !important;
    }

    .key-firstName {
        display: block !important;
        text-align: center !important;

    }

    .mat-input-element {
        background: #fff !important;
    }

    input {
        text-align: left !important;
    }

    /* .anaconda i {
        margin-top: min(2rem, 4vw);
    } */

    /* mainform Header */
    .formHeader i {
        background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/heroHeader.jpg) center no-repeat;

        width: 100%;
        padding-bottom: min(500px, 46.2%);
        margin: 0 auto;
        background-size: contain;
        display: block;
    }

    .successHeader i {
        background: url(https://cdn.promo-now.com/site-files/6936eb430fe8e0cbf41091f3/successHeaderDesk.jpg) center no-repeat;
        width: 100%;
        padding-bottom: min(400px, 46.2%);
        background-size: contain;
        display: block;
        /* opacity: 70%; */
        /* max-width: 2000px; */
        margin: 0 auto;
    }

    .mainText {
        font-size: min(62px, 8.2vw);
        /* margin: 4rem auto 2rem; */
        /* 75% */
        margin: 3rem auto 1.5rem;
    }

    .mainSubText {
        font-size: min(36px, 6.7vw);
        max-width: 510px;
    }

    .headerContainer .topLogo,
    .headerContainer .topLogoTerms {
        width: 10.5%;
    }

    .headerContainer .headerText {
        transform: translate(0%, 44%);
        font-size: 3.2vw;
    }

    .headerContainer .anacondaWhite {
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0 auto;
        top: 50%;
        transform: translate(0%, 2%);
    }

    /* btm section */
    .btmContainer {
        padding: min(3rem, 4.2vw);
        display: flex;
        width: 100%;
        margin: 0 auto;
        max-width: 2000px;
    }

    .btmLogoContainer {
        padding: min(1rem, 4.2vw) 0;
        width: 100%;
    }

    .btmLogo {
        margin: 0;
        margin-left: min(2rem, 1.7vw);
    }

    .btmLogo i {
        width: min(150px, 150%);
    }

    .flexContainer {
        width: 100%;
    }

    .flexLogos,
    .flexBtmNav {
        justify-content: flex-end;
        gap: min(76px, 10vw);
        padding: min(2rem, 8.2vw) 0 0;
    }

    .flexBtmNav {

        gap: min(38px, 2vw);

        font-size: 20px;
        padding-left: min(30px, 4vw);
    }

    .smallTerms {
        font-size: min(12px, 3.6vw);
        align-self: center;
        padding: 0;
        width: 189%;
        max-width: 886px;
    }

    .orangeContainer {

        margin: min(24px, 5.9vw) auto;
        max-width: 750px;
    }

    .headerContainer .anacondaWhite i {
        padding-bottom: unset;
        width: 25.6vw;
        height: 3.1vw;
        margin: 0 auto;


    }

    .orangeContainer .anacondaWhite i {
        padding-bottom: unset;

        margin: 0 auto;
        /* 75% */
        width: 405px;
        height: 48px;
    }

    .orangeContainer p {
        /* font-size: min(32px, 1.7vw); */
        /* font-size: 32px;
        padding: 4rem 0 1rem; */
        /* 75% */
        font-size: 24px;
        padding: 3rem 0 0.75rem;
    }

    .whiteContainer .orangeText {
        font-size: 32px;
        margin-bottom: 0.5rem;
    }

    .hikingImg {
        /* padding: 4rem;
        padding-top: 3rem; */
        /* 75% */
        padding: 3rem;
        padding-top: 2.25rem;
    }


    .hikingImg i {
        border-radius: min(30px, 100vw);
    }

    .successMaxWidth {
        /* max-width: 1000px; */
        margin: 0 auto;
        /* 75% */
        max-width: 750px;
    }

    .whiteContainer .btn {
        font-size: min(32px, 4.9vw);
        margin-top: 2rem;
        padding: min(1.4rem, 4.2vw) min(5rem, 29.5vw);
    }
        .productFlex .whiteContainer .websiteShop ~ .successFlex .flexBtn .btn, .productFlex .whiteContainer .anacondaStore ~ .successFlex .flexBtn .btn   {
            margin-top: 1rem !important;
        }

    .copyCode {
        width: 475px;
        /* margin: 1.5rem auto 0 */
        /* 75% */
        margin: 1.125rem auto 0
    }

    .nearestStore {
        /* margin: 2.5rem auto 4rem; */
        /* font-size: 36px; */
        /* 75% */
        margin: 1.875rem auto 3rem;
        font-size: 27px;

    }

    .btnCopy,
    .copyText {
        left: 50%;
        transform: translate(531%, 0px);
        top: 32px;
    }

    .copyText {
        top: -3px;
        transform: translate(421%, 0px);
    }


    .mainText.successMainText {
        /* font-size: 62px; */
        /* 75% */

        font-size: 46.5px;
    }

    .successWidth .orangeText,
    .whiteContainer .shopText {
        font-size: 42px;
    }

    .successWidth .anaconda {
        width: 540px;
        height: 65px;
    }



    .whiteContainer {
        display: flex;
        flex-direction: row-reverse;
        padding: 2rem;
        width: min(100%, 94vw);
        max-width: 1000px;
        margin: min(4rem, 8.2vw) auto;
        padding-right: 4rem;
    }

    .whiteContainerMarginB {
        margin-bottom: 4rem;
    }

    .successFlex {
        width: 250%;
        display: flex;
        flex-direction: column;
        /* text-align: left; */
        align-items: flex-start;
    }

    .whiteContainer .shopText,
    .whiteContainer .flexBtn {
        text-align: left;
        margin: 0;
    }

    .whiteContainer .shopText {
        letter-spacing: -1px;
    }

    /* success 2 */
    .productFlex {
        display: flex;
        width: 100%;
        /* gap: 2rem; */
        margin: 0 auto;
        /* max-width: 1200px; */
        /* margin: min(4rem, 5.9vw) auto; */
        width: min(1200px, 94vw);
        /* margin-bottom: 4rem; */
        /* 75% */
        max-width: 750px;
        margin: min(3rem, 5.9vw) auto;
        

        margin-bottom: 3rem;
        gap: 24px;
        max-height: 450px;


    }
    .productFlex:first-child {
        margin-bottom: 1.5rem;
        }
    .productFlex + .productFlex{
        margin-top: 1.5rem;
        }

    .productFlex .whiteContainer {
        display: flex;
        flex-direction: column;
        /* padding: 2rem; */
        width: min(100%, 47vw);
        /* max-width: 580px; */
        margin: 0 auto;
        /* 75% */

        padding: 24px;

        max-width: 435px;
    }

    .productFlex .sunsetShirt,
    .productFlex .barramundiShirt {
        width: 58.7%;
    }

    .productFlex .anacondaStore,
    .productFlex .websiteShop {
        width: 100%;

        }
    .productFlex .successFlex {
        width: 100%;
        align-items: center;
    }

    .productFlex .whiteContainer .orangeText {
        /* margin: 1.5rem auto;
        font-size: 26px; */
        /* 75% */
        margin: 18px auto;
        font-size: 19.5px;

    }

    .productFlex .shopText.futuraHeavy {
        /* font-size: 32px; */
        text-align: center;
        width: 100%;
        /* 75% */
        font-size: 24px;
    }

    .productFlex .whiteContainer .btn,
    .more {
        /* font-size: min(18.9px, 4.9vw); */
        /* padding: min(1rem, 4.2vw) min(8rem, 10vw);
        font-size: min(32px, 3.1vw); */
        /* 75% */
        padding: min(0.75rem, 4.2vw) min(6rem, 10vw);
        font-size: 23px;
    }

    .more {
        /* padding: min(1rem, 4.2vw) min(3rem, 10vw); */
        /* 75% */
        padding: min(0.75rem, 4.2vw) min(2.25rem, 10vw);
    }

    .moreBtn {
        margin-top: 0;
        /* margin-bottom: 8rem; */
        /* 75% */
        margin-bottom: 6rem;

    }






}