.heroSection{

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

margin:70px auto;
padding:80px;

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:70px;

background:#fff;

border-radius:35px;

position:relative;

overflow:hidden;

box-shadow:0 30px 70px rgba(0,0,0,.08);

}

/*Background circles*/

.heroSection::before{

content:"";

position:absolute;

right:-250px;
top:-150px;

width:900px;
height:900px;

background:repeating-radial-gradient(

circle,

rgba(0,0,0,.035)0px,

rgba(0,0,0,.035)2px,

transparent 2px,

transparent 28px

);

pointer-events:none;

}

.heroContent{

position:relative;

z-index:2;

}

.heroSpan{

display:inline-block;

color:#f58220;

font-weight:700;

letter-spacing:3px;

font-size:.9rem;

margin-bottom:18px;

}

.heroContent h1{

font-size:4rem;

line-height:1.1;

font-weight:700;

margin-bottom:25px;

color:#111;

}

.h1Span{

color:#f58220;

}

.heroContent p{

font-size:1.08rem;

line-height:1.8;

color:#666;

max-width:580px;

margin-bottom:45px;

}

.heroButtons{

display:flex;

gap:20px;

}

.primaryBtn{

padding:18px 35px;

border:none;

border-radius:50px;

background:#f58220;

color:#fff;

font-size:1rem;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.primaryBtn:hover{

background:#111;

}

.secondaryBtn{

padding:18px 35px;

background:#fff;

border:2px solid #ddd;

border-radius:50px;

font-size:1rem;

cursor:pointer;

transition:.35s;

}

.secondaryBtn:hover{

border-color:#f58220;

color:#f58220;

}

/*RIGHT*/

.heroImage{

display:flex;

justify-content:center;

align-items:center;

position:relative;

min-height:520px;

}

.cardStack{

position:relative;

width:600px;

height:500px;

}

/*Cards*/

.backCard{

position:absolute;

width:380px;

left:30px;

top:170px;

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.18);

z-index:1;

transition:.4s;

}

.frontCard{

position:absolute;

width:380px;

right:20px;

top:20px;

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.18);

z-index:2;

transition:.4s;

}

/*Floating statistics*/

.statsCard{

position:absolute;

top:-5px;

left:200px;

z-index:3;

}

.statsCard img{

width:240px;

}

/*Income*/

.incomeCard{

position:absolute;

right:30px;

bottom:65px;

z-index:3;

}

.incomeCard img{

width:180px;

}

/*Wallet*/

.walletIcon{

position:absolute;

right:15px;

bottom:0;

z-index:4;

}

.walletIcon img{

width:70px;

}

/*Hover*/

.heroSection:hover .frontCard{

transform:translateY(-10px);

}

.heroSection:hover .backCard{

transform:translateY(10px);

}

.heroSection:hover .statsCard{

transform:translateY(-8px);

transition:.4s;

}

.heroSection:hover .incomeCard{

transform:translateX(8px);

transition:.4s;

}

.heroSection:hover .walletIcon{

transform:translateY(-6px);

transition:.4s;

}

/*Responsive*/

@media(max-width:992px){

.heroSection{

grid-template-columns:1fr;

text-align:center;

padding:50px 30px;

}

.heroButtons{

justify-content:center;

flex-wrap:wrap;

}

.heroContent p{

margin:0 auto 40px;

}

.heroImage{

margin-top:30px;

}

.cardStack{

width:420px;

height:380px;

}

.frontCard,
.backCard{

width:280px;

}

.backCard{

left:10px;

top:130px;

}

.frontCard{

right:10px;

top:10px;

}




.heroContent h1{

font-size:1.5rem;

}

}
.planHeader{
width:100%;
padding:100px 6% 70px;
position:relative;
background:#fff;
}

.planHeader h4{
position:absolute;
top:105px;
right:6%;

font-size:.95rem;
font-weight:800;
letter-spacing:.5px;
color:#7a7a7a;

text-transform:uppercase;
}

.planHeader h1{
width:75%;
max-width:1050px;

font-size:clamp(1.6rem,2.2vw,4.7rem);
line-height:1.15;
font-weight:700;
color:#111;
font-size: 1.5 rem;

margin:0;
}

.planHeader .orange{
color:#f58220;
}

.planHeader .blue{
color:#2f80ed;
}
.option1{

width:min(1400px,92%);

margin:120px auto;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:80px;

align-items:center;

}

/*LEFT*/

.opt1Sect1 h3{

font-size:.9rem;

letter-spacing:3px;

color:#888;

margin-bottom:25px;

}

.opt1Sect1 h1{

font-size:3rem;

line-height:1.15;

max-width:700px;

margin-bottom:30px;

color:#111;

}

.opt1Sect1 h1 span{

color:#f58220;

}

.opt1Sect1 p{

font-size:1.05rem;

line-height:1.9;

color:#666;

max-width:650px;

margin-bottom:45px;

}

.opt1Sect1 h4{

font-size:1.4rem;

margin-bottom:25px;

}

.opt1Sect1 ul{

list-style:none;

padding:0;

display:grid;

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

gap:20px;

}

.opt1Sect1 li{

display:flex;

align-items:center;

gap:15px;

font-size:1rem;

color:#444;

}

.opt1Sect1 i{

width:42px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#fff4ea;

color:#f58220;

font-size:1rem;

}

/*CARD*/

.opt1Sect2{

background:#151515;

color:#fff;

padding:45px;

border-radius:28px;

position:relative;

box-shadow:0 30px 70px rgba(0,0,0,.2);

}

.limitedSlots{

display:inline-block;

padding:8px 18px;

background:rgba(255,70,70,.12);

border:1px solid rgba(255,70,70,.4);

color:#ff7d7d;

border-radius:30px;

font-size:.8rem;

margin-bottom:25px;

}

.opt1Sect2 h3{

font-size:.9rem;

color:#999;

margin-bottom:12px;

text-transform:uppercase;

}

.opt1Sect2 h1{

font-size:2.2rem;

line-height:1.2;

margin-bottom:18px;

}

.opt1Sect2 h1 span{

color:#f58220;

}

.opt1Sect2 p{

color:#bbb;

line-height:1.8;

margin-bottom:35px;

}

.price{

font-size:3rem;

font-weight:700;

margin-bottom:35px;

}

.price span{

display:block;

font-size:1rem;

font-weight:400;

color:#999;

margin-top:5px;

}

.opt1Sect2 ul{

list-style:disc;

padding-left:20px;

display:grid;

gap:15px;

margin-bottom:40px;

color:#ddd;

}

.opt1Sect2 button{

width:60%;

padding:18px;

border:none;

border-radius:50px;

background:#fff;

color:#111;

font-size:1rem;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.opt1Sect2 button:hover{

background:#f58220;

color:#fff;

}
.option2{
width:min(1400px,92%);
margin:120px auto;
display:grid;
grid-template-columns:.9fr 1.2fr;
gap:90px;
align-items:center;
}

/*LEFT CARD*/

.opt2Sect1{
background:linear-gradient(135deg,#f58220,#ff9f43);
color:#fff;
padding:45px;
border-radius:28px;
display:flex;
flex-direction:column;
align-items:flex-start;
box-shadow:0 30px 70px rgba(245,130,32,.3);
}

.availableShares{
display:inline-flex;
padding:8px 18px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.35);
border-radius:30px;
font-size:.82rem;
font-weight:600;
margin-bottom:25px;
}

.opt2Sect1 h3{
font-size:.9rem;
letter-spacing:1px;
color:#fff3e6;
margin-bottom:10px;
}

.opt2Sect1 h1{
font-size:2.3rem;
line-height:1.15;
margin-bottom:18px;
font-weight:700;
}

.opt2Sect1 h1 span{
color:#2d2d2d;
}

.opt2Sect1 p{
color:#fff6ee;
line-height:1.75;
margin-bottom:30px;
}

.opt2Sect1 .price{
font-size:3rem;
font-weight:700;
line-height:1;
margin-bottom:8px;
}

.opt2Sect1 .price span{
display:block;
margin-top:10px;
font-size:.95rem;
font-weight:400;
color:#fff3e8;
}

.cooperativeBtn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
margin:22px 0 30px;
background:#fff;
color:#222;
border:none;
border-radius:50px;
font-size:.9rem;
font-weight:600;
cursor:pointer;
transition:.35s;
}

.cooperativeBtn:hover{
background:#222;
color:#fff;
}

.opt2Sect1 hr{
width:100%;
height:1px;
border:none;
background:rgba(255,255,255,.25);
margin-bottom:30px;
}

.opt2Sect1 ul{
list-style:none;
padding:0;
margin:0;
width:100%;
display:grid;
gap:16px;
}

.opt2Sect1 li{
position:relative;
padding-left:18px;
color:#fff;
}

.opt2Sect1 li::before{
content:"•";
position:absolute;
left:0;
color:#fff;
}

/*RIGHT TEXT*/

.opt2Sect2 h3{
font-size:.9rem;
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
color:#777;
margin-bottom:25px;
}

.opt2Sect2 h1{
font-size:3rem;
line-height:1.15;
max-width:700px;
margin-bottom:28px;
font-weight:700;
color:#111;
}

.opt2Sect2 h1 span{
color:#f58220;
}

.opt2Sect2 p{
max-width:650px;
font-size:1.05rem;
line-height:1.9;
color:#666;
margin-bottom:40px;
}

.opt2Sect2 h4{
font-size:1.4rem;
margin-bottom:25px;
color:#111;
}

.opt2Sect2 ul{
list-style:none;
padding:0;
margin:0;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

.opt2Sect2 li{
display:flex;
align-items:center;
gap:14px;
font-size:1rem;
color:#444;
cursor:pointer;
transition:.35s;
}

.opt2Sect2 li i{
font-size:1.15rem;
color:#f58220;
transition:.35s;
}

.opt2Sect2 li:hover{
transform:translateX(8px);
color:#111;
}

.opt2Sect2 li:hover i{
transform:translateY(-4px) rotate(-15deg) scale(1.2);
color:#111;
}
.membershipPlans{
width:100%;
padding:120px 6%;
background:#f7f7f7;
border-radius:40px;
display:flex;
flex-direction:column;
gap:120px;
margin:100px auto;
box-sizing:border-box;
}
/* Premium FlexPlan Section */
/*============================
 FLEXPLAN SECTION
=============================*/

.flexplanSection{

    position:relative;

    width:100%;

    padding:90px 8%;

    background:#D9FF2F;

    overflow:hidden;

    display:grid;

    grid-template-columns:1.15fr 0.85fr;

    align-items:center;

    gap:90px;

}

/* Watermark */

.flexBgText{

    position:absolute;

    bottom:-70px;
    left:0;

    width:100%;

    text-align:center;

    font-size:16rem;

    font-weight:800;

    color:rgba(0,0,0,.2);

    pointer-events:none;

    user-select:none;

    white-space:nowrap;

    letter-spacing:-8px;

}

/*============================
 LEFT CARD
=============================*/

.flexCardSection{

    position:relative;

    background:#101010;

    color:#fff;

    border-radius:34px;

    padding:45px;

    box-shadow:
    0 30px 60px rgba(0,0,0,.18);

    z-index:2;

}

.flexBadge{

    display:inline-flex;

    align-items:center;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    border-radius:40px;

    padding:10px 22px;

    font-size:.9rem;

    margin-bottom:35px;

}

.flexCardSection h3{

    color:#a9a9a9;

    font-size:1rem;

    margin-bottom:18px;

}

.flexCardSection h1{

    font-size:2.3rem;

    line-height:1.2;

    margin-bottom:35px;

}

.flexCardSection span{

    color:#D9FF2F;

}

.price{

    font-size:3rem;

    margin-bottom:30px;

}

.price span{

    display:block;

    font-size:1rem;

    color:#9b9b9b;

    margin-top:6px;

}

.flexCardSection button{

    background:#D9FF2F;

    color:#111;

    border:none;

    border-radius:60px;

    padding:18px 45px;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.flexCardSection button:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(217,255,47,.45);

}

.flexCardSection hr{

    margin:40px 0;

    border:none;

    height:1px;

    background:rgba(255,255,255,.12);

}

.internalDetails3 h3{

    color:#fff;

    margin-bottom:18px;

}

.internalDetails3 ul{

    display:grid;

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

    gap:15px;

    list-style:none;

    padding:0;

}

.internalDetails3 li{

    color:#d5d5d5;

    position:relative;

    padding-left:18px;

}

.internalDetails3 li::before{

    content:"";

    width:7px;
    height:7px;

    background:#D9FF2F;

    border-radius:50%;

    position:absolute;

    left:0;
    top:9px;

}

/*============================
 RIGHT
=============================*/

.flexDescripSection{

    position:relative;

    z-index:2;

}

.miniTitle{

    color:#3b6110;

    letter-spacing:3px;

    font-weight:700;

}

.flexDescripSection h1{

    font-size:3.2rem;

    line-height:1.15;

    margin:20px 0;

    color:#111;

}

.flexDescripSection h1 span{

    color:#3d7800;

}

.flexDescripSection>p{

    color:#2f2f2f;

    line-height:1.8;

    margin-bottom:45px;

    max-width:480px;

}

.flexDescripSection ul{

    list-style:none;

    padding:0;

    margin:0;

}

.flexDescripSection li{

    display:flex;

    gap:22px;

    align-items:flex-start;

    margin-bottom:38px;

}

/* ICONS */

.iconCircle{

    width:65px;
    height:65px;

    flex-shrink:0;

    border-radius:50%;

    background:linear-gradient(
    145deg,
    #72c700,
    #4f8d00);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 12px 30px rgba(85,150,0,.25);

    position:relative;

}

.iconCircle::after{

    content:"";

    position:absolute;

    left:50%;

    top:100%;

    width:2px;

    height:40px;

    background:rgba(72,116,0,.35);

    transform:translateX(-50%);

}

.flexDescripSection li:last-child .iconCircle::after{

    display:none;

}

.iconCircle i{

    font-size:1.45rem;

    color:#111;

}

.text h4{

    font-size:1.2rem;

    margin-bottom:8px;

    color:#111;

}

.text p{

    color:#333;

    line-height:1.7;

}

/*============================
 RESPONSIVE
=============================*/

@media(max-width:1000px){

.flexplanSection{

grid-template-columns:1fr;

gap:60px;

}

.flexBgText{

font-size:8rem;

bottom:-20px;

}

.flexDescripSection h1{

font-size:2.5rem;

}

.price{

font-size:2.4rem;

}

}




















/* =========================================================
   MOBILE RESPONSIVE FIXES
   ========================================================= */


/* Prevent horizontal scrolling everywhere */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* Make images responsive */

img {
    max-width: 100%;
    height: auto;
}


/* Make links behave correctly around buttons */

.heroButton a,
.premiumButton a,
.cooperativeButton a,
.flexButton a {
    display: block;
    max-width: 100%;
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 1100px) {

    /* HERO */

    .heroSection {
        width: calc(100% - 40px);
        margin: 50px auto;
        padding: 60px 40px;
        grid-template-columns: 1fr;
        gap: 50px;
    }


    .heroContent {
        width: 100%;
    }


    .heroContent h1 {
        font-size: 3rem;
    }


    .heroContent p {
        max-width: 700px;
    }


    .heroImage {
        width: 100%;
        min-height: 430px;
    }


    .cardStack {
        width: 500px;
        max-width: 100%;
        height: 430px;
    }


    .frontCard,
    .backCard {
        width: 300px;
        max-width: 60%;
    }


    .backCard {
        left: 5%;
        top: 130px;
    }


    .frontCard {
        right: 5%;
        top: 10px;
    }


    /* PLAN HEADER */

    .planHeader {
        padding: 80px 6% 60px;
    }


    .planHeader h4 {
        position: static;
        margin-bottom: 25px;
    }


    .planHeader h1 {
        width: 100%;
        max-width: 100%;
    }


    /* MEMBERSHIP PLANS */

    .membershipPlans {
        padding: 80px 5%;
        gap: 80px;
        margin: 70px auto;
    }


    /* OPTION 1 */

    .option1 {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 60px;
        margin: 70px auto;
    }


    .opt1Sect1 h1 {
        max-width: 800px;
    }


    .opt1Sect1 p {
        max-width: 800px;
    }


    .opt1Sect2 {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }


    /* OPTION 2 */

    .option2 {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 60px;
        margin: 70px auto;
    }


    .opt2Sect1 {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }


    .opt2Sect2 {
        width: 100%;
    }


    /* FLEXPLAN */

    .flexplanSection {
        grid-template-columns: 1fr;
        gap: 70px;
        padding: 80px 7%;
    }


    .flexCardSection {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
    }


    .flexDescripSection {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
    }


    .flexBgText {
        font-size: 10rem;
        bottom: -20px;
    }

}



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

@media (max-width: 768px) {


    /* GENERAL */

    * {
        max-width: 100%;
    }


    body {
        width: 100%;
        overflow-x: hidden;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .heroSection {
        width: calc(100% - 24px);
        margin: 25px auto 45px;
        padding: 45px 20px;
        border-radius: 24px;

        display: flex;
        flex-direction: column;

        gap: 35px;
    }


    .heroContent {
        width: 100%;
        text-align: center;
    }


    .heroSpan {
        font-size: .75rem;
        letter-spacing: 2px;
        margin-bottom: 14px;
    }


    .heroContent h1 {
        font-size: 2.2rem;
        line-height: 1.15;
        margin-bottom: 20px;
    }


    .heroContent p {
        width: 100%;
        max-width: 100%;
        font-size: .95rem;
        line-height: 1.7;
        margin: 0 auto 30px;
    }


    /* HERO BUTTONS */

    .heroButtons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }


    .heroButton {
        width: 100%;
    }


    .heroButton a {
        width: 100%;
    }


    .primaryBtn,
    .secondaryBtn {
        width: 100%;
        max-width: 100%;
        padding: 15px 20px;
        font-size: .95rem;
    }


    /* =====================================================
       HERO IMAGE
       ===================================================== */

    .heroImage {
        width: 100%;
        min-height: 300px;

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


    .cardStack {
        width: 100%;
        max-width: 390px;
        height: 300px;
        position: relative;
    }


    .frontCard,
    .backCard {
        width: 70%;
        max-width: 250px;
        border-radius: 18px;
    }


    .backCard {
        left: 2%;
        top: 95px;
    }


    .frontCard {
        right: 2%;
        top: 5px;
    }


    /* Prevent hover movement from making cards overflow */

    .heroSection:hover .frontCard {
        transform: translateY(-5px);
    }


    .heroSection:hover .backCard {
        transform: translateY(5px);
    }


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

    .planHeader {
        width: 100%;
        padding: 55px 20px 45px;
    }


    .planHeaderContent {
        width: 100%;
    }


    .planHeader h4 {
        position: static;
        width: 100%;
        margin-bottom: 20px;

        font-size: .75rem;
        letter-spacing: .7px;
        text-align: left;
    }


    .planHeader h1 {
        width: 100%;
        max-width: 100%;

        font-size: 1.55rem;
        line-height: 1.35;
    }


    /* =====================================================
       MEMBERSHIP PLANS MAIN CONTAINER
       ===================================================== */

    .membershipPlans {
        width: 100%;

        padding: 55px 15px;

        margin: 50px 0;

        border-radius: 25px;

        gap: 65px;
    }


    /* =====================================================
       OPTION 1
       ===================================================== */

    .option1 {
        width: 100%;

        margin: 0;

        display: flex;
        flex-direction: column;

        gap: 40px;
    }


    .opt1Sect1 {
        width: 100%;
    }


    .opt1Text {
        width: 100%;
    }


    .opt1Sect1 h3 {
        font-size: .75rem;
        letter-spacing: 2px;
        margin-bottom: 18px;
    }


    .opt1Sect1 h1 {
        width: 100%;
        max-width: 100%;

        font-size: 2rem;
        line-height: 1.2;

        margin-bottom: 20px;

        overflow-wrap: break-word;
    }


    .opt1Sect1 p {
        width: 100%;
        max-width: 100%;

        font-size: .95rem;
        line-height: 1.75;

        margin-bottom: 30px;
    }


    /* WHY CHOOSE */

    .whyChoose {
        width: 100%;
    }


    .opt1Sect1 h4 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }


    .opt1Sect1 ul {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .opt1Sect1 li {
        width: 100%;

        gap: 12px;

        font-size: .95rem;

        align-items: center;
    }


    .opt1Sect1 li span {
        min-width: 0;
        overflow-wrap: break-word;
    }


    .opt1Sect1 i {
        width: 40px;
        min-width: 40px;

        height: 40px;
    }


    /* =====================================================
       PREMIUM CARD
       ===================================================== */

    .opt1Sect2 {
        width: 100%;
        max-width: 100%;

        padding: 30px 22px;

        border-radius: 22px;

        overflow: hidden;
    }


    .limitedSlots {
        max-width: 100%;

        padding: 7px 14px;

        font-size: .72rem;

        white-space: normal;
    }


    .opt1Sect2 h3 {
        font-size: .78rem;
    }


    .opt1Sect2 h1 {
        font-size: 1.9rem;
        line-height: 1.2;

        overflow-wrap: break-word;
    }


    .opt1Sect2 p {
        font-size: .92rem;
        line-height: 1.7;
    }


    .premiumButton {
        width: 100%;
    }


    .premiumButton a {
        width: 100%;
    }


    .opt1Sect2 button {
        width: 100%;
        max-width: 100%;

        padding: 15px 18px;

        font-size: .9rem;
    }


    .opt1Sect2 hr {
        margin: 25px 0;
    }


    .premiumFeatures {
        width: 100%;
    }


    .opt1Sect2 ul {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 12px;

        padding-left: 20px;
    }


    .opt1Sect2 li {
        font-size: .9rem;

        overflow-wrap: break-word;
    }


    /* =====================================================
       OPTION 2
       ===================================================== */

    .option2 {
        width: 100%;

        margin: 0;

        display: flex;
        flex-direction: column;

        gap: 40px;
    }


    /* COOPERATIVE CARD */

    .opt2Sect1 {
        width: 100%;
        max-width: 100%;

        padding: 30px 22px;

        border-radius: 22px;

        box-sizing: border-box;
    }


    .availableShares {
        max-width: 100%;

        padding: 7px 14px;

        font-size: .72rem;

        white-space: normal;
    }


    .opt2Sect1 h3 {
        font-size: .78rem;
    }


    .opt2Sect1 h1 {
        width: 100%;

        font-size: 1.9rem;
        line-height: 1.2;

        overflow-wrap: break-word;
    }


    .opt2Sect1 p {
        width: 100%;

        font-size: .92rem;
        line-height: 1.7;
    }


    .opt2Sect1 .price {
        font-size: 2.4rem;
    }


    .opt2Sect1 .price span {
        font-size: .85rem;
    }


    .cooperativeButton {
        width: 100%;
    }


    .cooperativeButton a {
        width: 100%;
    }


    .cooperativeBtn {
        width: 100%;

        padding: 15px 18px;

        margin: 20px 0 25px;

        font-size: .85rem;
    }


    .opt2Sect1 hr {
        margin-bottom: 25px;
    }


    .cooperativeFeatures {
        width: 100%;
    }


    .opt2Sect1 ul {
        width: 100%;

        gap: 13px;
    }


    .opt2Sect1 li {
        font-size: .9rem;

        overflow-wrap: break-word;
    }


    /* COOPERATIVE TEXT */

    .opt2Sect2 {
        width: 100%;
    }


    .opt2Text {
        width: 100%;
    }


    .opt2Sect2 h3 {
        font-size: .75rem;
        letter-spacing: 2px;

        margin-bottom: 18px;
    }


    .opt2Sect2 h1 {
        width: 100%;
        max-width: 100%;

        font-size: 2rem;
        line-height: 1.2;

        overflow-wrap: break-word;
    }


    .opt2Sect2 p {
        width: 100%;
        max-width: 100%;

        font-size: .95rem;
        line-height: 1.75;
    }


    .opt2Sect2 h4 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }


    .opt2Sect2 ul {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .opt2Sect2 li {
        width: 100%;

        align-items: flex-start;

        gap: 12px;

        font-size: .92rem;
    }


    .opt2Sect2 li span {
        min-width: 0;
        overflow-wrap: break-word;
    }


    /* =====================================================
       FLEXPLAN
       ===================================================== */

    .flexplanSection {
        width: 100%;

        padding: 55px 15px;

        display: flex;
        flex-direction: column;

        gap: 45px;

        overflow: hidden;
    }


    /* WATERMARK */

    .flexBgText {
        width: 100%;

        font-size: 5rem;

        bottom: 0;

        left: 50%;

        transform: translateX(-50%);

        letter-spacing: -3px;

        opacity: .7;

        white-space: nowrap;
    }


    /* FLEX CARD */

    .flexCardSection {
        width: 100%;
        max-width: 100%;

        padding: 30px 22px;

        border-radius: 22px;

        box-sizing: border-box;
    }


    .flexBadge {
        max-width: 100%;

        padding: 8px 15px;

        font-size: .75rem;

        white-space: normal;
    }


    .flexCardSection h3 {
        font-size: .85rem;

        margin-bottom: 15px;
    }


    .flexCardSection h1 {
        width: 100%;

        font-size: 1.9rem;
        line-height: 1.25;

        margin-bottom: 25px;

        overflow-wrap: break-word;
    }


    .flexCardSection .price {
        font-size: 2.3rem;

        line-height: 1.1;
    }


    .flexCardSection .price span {
        font-size: .85rem;
    }


    .flexButton {
        width: 100%;
    }


    .flexButton a {
        width: 100%;
    }


    .flexCardSection button {
        width: 100%;

        padding: 15px 20px;

        font-size: .9rem;
    }


    .flexCardSection hr {
        margin: 30px 0;
    }


    /* FLEXPLAN DETAILS */

    .internalDetails3 {
        width: 100%;
    }


    .internalDetails3 h3 {
        font-size: 1rem;
    }


    .internalDetails3 ul {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 13px;
    }


    .internalDetails3 li {
        width: 100%;

        font-size: .9rem;
        line-height: 1.6;

        overflow-wrap: break-word;
    }


    /* =====================================================
       FLEX DESCRIPTION
       ===================================================== */

    .flexDescripSection {
        width: 100%;

        position: relative;
    }


    .flexDescriptionText {
        width: 100%;
    }


    .miniTitle {
        font-size: .75rem;

        letter-spacing: 2px;
    }


    .flexDescripSection h1 {
        width: 100%;

        font-size: 2rem;

        line-height: 1.2;

        margin: 15px 0 20px;

        overflow-wrap: break-word;
    }


    .flexDescripSection > p {
        width: 100%;
        max-width: 100%;

        font-size: .95rem;

        line-height: 1.7;

        margin-bottom: 30px;
    }


    /* FLEX FEATURES */

    .flexDescriptionFeatures {
        width: 100%;
    }


    .flexDescripSection li {
        width: 100%;

        display: flex;

        gap: 15px;

        align-items: flex-start;

        margin-bottom: 30px;
    }


    .iconCircle {
        width: 50px;
        min-width: 50px;

        height: 50px;
    }


    .iconCircle i {
        font-size: 1.1rem;
    }


    .text {
        width: calc(100% - 65px);

        min-width: 0;
    }


    .text h4 {
        font-size: 1rem;

        margin-bottom: 6px;
    }


    .text p {
        font-size: .9rem;

        line-height: 1.6;

        overflow-wrap: break-word;
    }


    /* Shorter connecting line on mobile */

    .iconCircle::after {
        height: 25px;
    }

}



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

@media (max-width: 480px) {


    /* HERO */

    .heroSection {
        width: calc(100% - 16px);

        padding: 35px 16px;

        margin: 18px auto 35px;

        border-radius: 20px;
    }


    .heroContent h1 {
        font-size: 1.9rem;
    }


    .heroContent p {
        font-size: .9rem;

        line-height: 1.65;
    }


    .primaryBtn,
    .secondaryBtn {
        padding: 14px 16px;

        font-size: .88rem;
    }


    /* HERO IMAGES */

    .heroImage {
        min-height: 250px;
    }


    .cardStack {
        height: 250px;
    }


    .frontCard,
    .backCard {
        width: 72%;
        max-width: 210px;
    }


    .backCard {
        top: 80px;
    }


    /* PLAN HEADER */

    .planHeader {
        padding: 45px 16px 35px;
    }


    .planHeader h1 {
        font-size: 1.35rem;
        line-height: 1.4;
    }


    /* MEMBERSHIP */

    .membershipPlans {
        padding: 45px 12px;

        border-radius: 20px;

        gap: 50px;
    }


    /* OPTION 1 */

    .opt1Sect1 h1 {
        font-size: 1.7rem;
    }


    .opt1Sect1 p {
        font-size: .9rem;
    }


    .opt1Sect2 {
        padding: 25px 18px;
    }


    .opt1Sect2 h1 {
        font-size: 1.65rem;
    }


    .opt1Sect2 p {
        font-size: .88rem;
    }


    .opt1Sect2 .price {
        font-size: 2.2rem;
    }


    /* OPTION 2 */

    .opt2Sect1 {
        padding: 25px 18px;
    }


    .opt2Sect1 h1 {
        font-size: 1.65rem;
    }


    .opt2Sect1 p {
        font-size: .88rem;
    }


    .opt2Sect1 .price {
        font-size: 2.2rem;
    }


    .opt2Sect2 h1 {
        font-size: 1.7rem;
    }


    .opt2Sect2 p {
        font-size: .9rem;
    }


    /* FLEXPLAN */

    .flexplanSection {
        padding: 45px 12px;
    }


    .flexBgText {
        font-size: 3.8rem;
        letter-spacing: -2px;
    }


    .flexCardSection {
        padding: 25px 18px;
    }


    .flexCardSection h1 {
        font-size: 1.65rem;
    }


    .flexCardSection .price {
        font-size: 2.1rem;
    }


    .flexDescripSection h1 {
        font-size: 1.7rem;
    }


    .flexDescripSection li {
        gap: 12px;
    }


    .iconCircle {
        width: 45px;
        min-width: 45px;
        height: 45px;
    }


    .text {
        width: calc(100% - 57px);
    }


    .text h4 {
        font-size: .95rem;
    }


    .text p {
        font-size: .85rem;
    }

}