/* =========================================================
   HOW TO BUY SECTION
   Everything is scoped to .howToBuy so it won't interfere
   with the navbar or other sections.
========================================================= */

.howToBuy{
    position:relative;
    width:100%;
    padding:90px 7%;
    background:#ffffff;
    overflow:hidden;
    box-sizing:border-box;
}


/* ---------------------------------------------------------
   SUBTLE BACKGROUND DETAIL
--------------------------------------------------------- */

.howToBuy::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    top:-180px;

    background:rgba(245,140,35,.055);

    border-radius:50%;
    pointer-events:none;
}

.howToBuy::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    left:-160px;
    bottom:-160px;

    background:rgba(245,140,35,.04);

    border-radius:50%;
    pointer-events:none;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.howToBuyHeader{
    position:relative;
    z-index:2;

    max-width:720px;
    margin:0 auto 55px;

    text-align:center;
}


.howToBuyEyebrow{
    display:inline-block;

    margin-bottom:12px;

    font-size:13px;
    font-weight:800;
    letter-spacing:3px;

    color:#f28a22;
}


.howToBuyHeader h1{
    margin:0;

    color:#171717;

    font-size:clamp(32px,4vw,48px);
    font-weight:800;
    line-height:1.15;

    letter-spacing:-1.5px;
}


.howToBuyHeader h1 strong{
    color:#f28a22;
    font-weight:800;
}


.howToBuyHeader p{
    max-width:620px;

    margin:18px auto 0;

    color:#6c6c6c;

    font-size:15px;
    line-height:1.8;
}


/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */

.howToBuyGrid{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:22px;
}


/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.howToBuyCard{
    position:relative;

    min-height:315px;

    padding:38px 35px 34px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.055);

    border-radius:4px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.055);

    text-align:center;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.howToBuyCard::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#f28a22;

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .4s ease;
}


.howToBuyCard::after{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    right:-80px;
    bottom:-90px;

    border-radius:50%;

    background:rgba(242,138,34,.045);

    transition:
        transform .5s ease,
        background .5s ease;
}


.howToBuyCard:hover{
    transform:translateY(-8px);

    border-color:rgba(242,138,34,.22);

    box-shadow:
        0 18px 45px rgba(0,0,0,.09);
}


.howToBuyCard:hover::before{
    transform:scaleX(1);
}


.howToBuyCard:hover::after{
    transform:scale(1.7);

    background:rgba(242,138,34,.07);
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.howToBuyIcon{
    position:relative;
    z-index:2;

    width:78px;
    height:78px;

    margin:0 auto 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(242,138,34,.065);

    color:rgba(242,138,34,.72);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;
}


.howToBuyIcon::before{
    content:"";

    position:absolute;
    inset:7px;

    border:1px solid rgba(242,138,34,.14);

    border-radius:50%;

    transition:
        transform .4s ease,
        border-color .4s ease;
}


.howToBuyIcon svg{
    position:relative;
    z-index:2;

    width:38px;
    height:38px;

    transition:
        transform .4s ease,
        opacity .4s ease;
}


.howToBuyCard:hover .howToBuyIcon{
    transform:translateY(-5px) scale(1.08);

    background:#f28a22;

    color:#ffffff;

    box-shadow:
        0 12px 25px rgba(242,138,34,.25);
}


.howToBuyCard:hover .howToBuyIcon::before{
    transform:scale(1.18);

    border-color:rgba(255,255,255,.25);
}


.howToBuyCard:hover .howToBuyIcon svg{
    transform:scale(1.08);
}


/* ---------------------------------------------------------
   STEP NUMBER
--------------------------------------------------------- */

.howToBuyStep{
    position:relative;
    z-index:2;

    display:inline-block;

    margin-bottom:10px;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;

    color:#f28a22;

    transition:
        color .3s ease,
        letter-spacing .3s ease;
}


.howToBuyCard:hover .howToBuyStep{
    color:#171717;
    letter-spacing:2.5px;
}


/* ---------------------------------------------------------
   CARD TITLE
--------------------------------------------------------- */

.howToBuyCard h3{
    position:relative;
    z-index:2;

    margin:0 auto 13px;

    max-width:390px;

    color:#171717;

    font-size:21px;
    font-weight:750;

    line-height:1.3;
}


/* ---------------------------------------------------------
   CARD DESCRIPTION
--------------------------------------------------------- */

.howToBuyCard p{
    position:relative;
    z-index:2;

    max-width:430px;

    margin:0 auto;

    color:#707070;

    font-size:14px;
    line-height:1.75;
}


/* ---------------------------------------------------------
   SMALL ORANGE ARROW DETAIL
--------------------------------------------------------- */

.howToBuyCard .howToBuyStep::after{
    content:"";

    display:inline-block;

    width:18px;
    height:1px;

    margin-left:8px;

    vertical-align:middle;

    background:#f28a22;

    transition:
        width .3s ease,
        background .3s ease;
}


.howToBuyCard:hover .howToBuyStep::after{
    width:28px;
    background:#171717;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:850px){

    .howToBuy{
        padding:75px 5%;
    }

    .howToBuyGrid{
        gap:18px;
    }

    .howToBuyCard{
        min-height:300px;

        padding:32px 25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px){

    .howToBuy{
        padding:65px 20px;
    }


    .howToBuyHeader{
        margin-bottom:40px;
    }


    .howToBuyHeader h1{
        font-size:32px;
    }


    .howToBuyHeader p{
        font-size:14px;
        line-height:1.7;
    }


    .howToBuyGrid{
        grid-template-columns:1fr;

        gap:18px;
    }


    .howToBuyCard{
        min-height:auto;

        padding:35px 25px;
    }


    .howToBuyIcon{
        width:72px;
        height:72px;
    }


    .howToBuyIcon svg{
        width:35px;
        height:35px;
    }


    .howToBuyCard h3{
        font-size:20px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:380px){

    .howToBuy{
        padding-left:15px;
        padding-right:15px;
    }

    .howToBuyHeader h1{
        font-size:29px;
    }

    .howToBuyCard{
        padding:30px 20px;
    }

}
/* =========================================================
   PAYMENT BANK ACCOUNTS SECTION
========================================================= */

.payment1 {
    position: relative;

    width: 100%;

    padding: 75px 6% 85px;

    background: #eeeeee;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   SUBTLE ORANGE BACKGROUND DETAILS
========================================================= */

.payment1::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -250px;
    right: -170px;

    border-radius: 50%;

    background: rgba(255, 140, 0, .06);

    pointer-events: none;

    z-index: -1;
}


.payment1::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -210px;
    left: -150px;

    border-radius: 50%;

    background: rgba(255, 140, 0, .045);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   HEADER
========================================================= */

.payment1Header {
    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto 38px;

    text-align: center;
}


.payment1Header span {
    display: inline-block;

    margin-bottom: 8px;

    color: #ff8c00;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


.payment1Header h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(30px, 4vw, 42px);

    font-weight: 800;

    line-height: 1.2;
}


.payment1Header h2 strong {
    color: #ff8c00;

    font-weight: 800;
}


.payment1Header p {
    max-width: 600px;

    margin: 13px auto 0;

    color: #666666;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   TWO PAYMENT IMAGES
========================================================= */

.payment1Images {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 25px;

    align-items: stretch;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.paymentImageCard {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    padding: 12px;

    background: #ffffff;

    border-radius: 10px;

    border: 1px solid rgba(0, 0, 0, .06);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .08);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* Orange line at top */

.paymentImageCard::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    

    z-index: 2;
}


/* Hover */

.paymentImageCard:hover {
    transform: translateY(-5px);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .11);
}


/* =========================================================
   PAYMENT IMAGE
========================================================= */

.paymentImageCard img {
    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    object-fit: contain;

    border-radius: 6px;

    transition:
        transform .35s ease;
}


.paymentImageCard:hover img {
    transform: scale(1.015);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .payment1 {
        padding: 65px 5% 70px;
    }

    .payment1Images {
        gap: 18px;
    }

    .paymentImageCard {
        padding: 9px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .payment1 {
        padding: 55px 20px 65px;
    }


    .payment1Header {
        margin-bottom: 30px;
    }


    .payment1Header h2 {
        font-size: 30px;
    }


    .payment1Header p {
        font-size: 14px;
    }


    .payment1Images {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .paymentImageCard {
        padding: 8px;
    }

}