.hero {
    display: none;

    height: 60vh;
    /* min-height: 400px; */
    max-height: 200px;

    /* margin-bottom: 30px; */
    padding-top: min(5000000px, 20vh); /* To account for header */

    text-align: center;
    color: var(--hero_text);

    /* background-color: black; */
    /* background: url("../media/hero/hero_w2000px.webp"); */
    /* background-position: 0% 75%; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    /* background: linear-gradient(180deg, black 40%, var(--BRAND-PURPLE-HOVER) 100%); */
    /* background: url("../media/hero/new.jpg"); */
    background: none;
}
@media screen and (min-width: 800px) {
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        background: url("../media/hero/hero_w2000px.webp");
        background-position: 50% 75%;
        background-repeat: no-repeat;
        background-size: cover;
    }
}


/* @media only screen and (min-height: 200px) { */
    /*@media (min-width: 300px) {
        .hero {
            background-image: url("../media/hero/new-darkened.jpg");
        }
    }
    @media (min-width: 450px) {
        .hero {
            background-image: url("../media/hero/scales/w450px.webp");
        }
    }
    @media (min-width: 600px) {
        .hero {
            background-image: url("../media/hero/scales/w600px.webp");
        }
    }
    @media (min-width: 800px) {
        .hero {
            background-image: url("../media/hero/scales/w800px.webp");
        }
    }
    @media (min-width: 1250px) {
        .hero {
            background-image: url("../media/hero/scales/w1250px.webp");
        }
    }
    @media (min-width: 1600px) {
        .hero {
            background-image: url("../media/hero/scales/w1600px.webp");
        }
    } */
    /* @media (min-width: 20px) {
        .hero {
            background-image: url("../media/hero/new.jpg");
        } */
    /* }
    @media (min-width: 2250px) {
        .hero {
            background-image: url("../media/hero/scales/w2250px.webp");
        }
    } */
/* } */
.hero h1 {

    display: inline-block;

    font-size: clamp(2.25em, 10vw, 30px);

    line-height: max(1em, 10px);
}
.hero p {
    /* display: flex; */

    padding: 0px 9vw;

    margin: min(1.25vh, 20px) 0px;

    font-size: 1.1em;
    color: white;

    line-height: 30px;
}
.hero_linebreak {
    display: none;
}
@media screen and (min-width: 400px) {
    .hero_linebreak {
        display: block;
    }
}
.cta_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-top: 20px;
    
    /* background-color: blue; */
}
.hero .countdown {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 75vw;
    max-width: 460px;
    height: 14vh;
    max-height: 30px;

    border-radius: 5px 5px 0px 0px;

    color: white;
    background-color: black;
}
.hero a {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* width: 80vw; */
    max-width: 325px;
    height: 14vh;
    max-height: 65.2px;

    margin-top: 5px;

    padding: 0 min(15px, 10vw);

    background-color: var(--BRAND-GOLD);
    color: black;
    text-decoration: none;
    font-size: 1.1em;

    border-radius: 5px;  /* No countdown */
    /*border-radius: 0px 0px 5px 5px;*/ /* Countdown */



    transition: background-color 0.3s;
}
.hero a:hover {
    background-color: black;
    color: var(--BRAND-GOLD);
}
.hero_image {
    display: block;

    /* aspect-ratio: 1 / 1; */

    /* width: min(450px, 95%); */

    margin: min(27.5px, 5vh) auto;
}
.hero_image {
    width: min(95%, 800px);

    height: 50vh;
    max-height: 800px;

    object-fit:cover;
    object-position: 50% 12.5%;

    zoom: 1;

    border-radius: 30px;
}












.wrapper {
    /* background-color: red; */

    height: 100%;
    width: min(85vw, 750px);

    /* padding-top: 20px; */
    padding-left: 20px;
    padding-right: 20px;

    text-align: center;
}
.content {
    /* background-color: blue; */
    /* border: 1px solid orange; */

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

    text-align: center;

    /* margin-bottom: 30px; */
    /* padding-bottom: 10px; */

}
.content h2 {
    width: 100%;
    font-size: 1.8em;
    margin-top: clamp(0px, 2vh, 50px);
    margin-bottom: 17.5px;
    line-height: 1.15em;
}
.content h2 i {
    font-size: 1em;
}
.content p {
    font-size: 1em;
    margin-bottom: 30px;
}

.content p em, .content p i {
    font-size : 1em;
}

.content span {
    font-size: 1em;
    margin-bottom: 30px;
}
.content .big-p {
    font-size: 1.3em;
}
.content em {
    font-weight: bold;
    font-style: normal;
}
.figure {
    margin-bottom: 30px;
}
.downarrow {
    display: block;
    font-size: 50px;
    margin-bottom: -60px;
}
#starLogo {
    font-size:larger;
}
.sub-wrapper {
    /* background-color: red; */

    height: 100%;
    width: min(85vw, 750px);

    margin-top: 6vh;
    margin-bottom: 6vh;

    text-align: center;
}
.sub-wrapper p {
    margin: 0px;
}
.ten-px-spacer {
    display: block;

    width: auto;
    height: 10px;

    /* background-color: purple; */
}





#struggle {
    padding-top: min(12.5vh, 80px); /* To account for header */
    

}
/* @media screen and (min-width: 800px) {
    #struggle {
        padding-top: 25px;
    }
} */







#story {
    background: linear-gradient(0deg, var(--realisation_background) 15%, var(--site_background) 100%);
}

.profile {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

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

    padding: 0px;
    padding-top: 1.25vw;
    padding-left: 2vw;
    padding-right: 2vw;
    /* margin-bottom: min(75px, 12vh); */

    height: auto;
    
    /* background-color: pink; */
    /* border: 1px solid purple; */

    border-radius: 20px;

    box-shadow: 0px 0px 15px 0.5vh lightgray;
    background-color: white;

    z-index: 5;

}
.photoWithCred {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;

    width: clamp(200px, 75vw, 400px);
    height: clamp(200px, 75vw, 400px);

    margin: 15px;
}
.profile img {
    position: relative;

    width: 100%;
    height: 100%;

    object-fit: cover; /* Ensures the image covers the entire container */
    border-radius: min(2vw, 20px); /* Optional: Makes the image a perfect circle */

    /* filter:brightness(0); */

    z-index: 2

}
/* #simonProfile img {
    margin-top: -55px;
} */
#photoCred {
    
    position: absolute;

    bottom: -14px;
    /* left: calc(50% - 75px); */
    right: 0px;
    left: auto;

    transform: translateY(16px);
    background-color: rgba(0, 0, 0, 0.75);
    color: lightgray;

    /* margin-top: -38px; */

    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;

    border-top-left-radius: min(2vw, 20px);
    /* border-top-right-radius: min(2vw, 20px); */
    border-bottom-left-radius: min(2vw, 20px);
    border-bottom-right-radius: min(2vw, 20px);

    /* width: 220px; */

    font-size: 0.7em;

    z-index: 5;
}
#photoCred a {
    color: lightgray;
    font-style: italic;
    text-decoration: none;
    font-size: 1em;
}
.profile .info {
    display: inline-block;

    width: clamp(250px, 75vw, 750px);

    /* background-color: orange; */
}
.profile .text {
    display: inline-block;

    width: clamp(250px, 70vw, 650px);
    margin-top: 2vh;

    /* background-color: orange; */
}
.profile h3 {
    font-size: 1.25em;

    /* background-color: lime; */
}
.role {
    color: gray;
    font-weight: normal;

    font-size: 1em;
}






.cta {
    /* margin-bottom: 30px; */
}
.cta a {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--accent);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.cta a:hover {
    background-color: var(--accent-hover);
}





.gradient {
    display: block;
    width: 100vw;
    height: min(70vh, 180000px);

    margin-top: -70vh;

    background: linear-gradient(0deg, var(--realisation_background) 0%, var(--site_background) 50%); }

.realisation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 90%;

    padding-top: 35px;
    padding-bottom: 10px;

    z-index: 0;

    color: black;
    background-color: var(--realisation_background);
}
.realisation .wrapper {
    padding-left: 0px;
    padding-right: 0px;
}





#products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    text-align: center;
    text-wrap: wrap;

    padding-top: 20px;
    padding-bottom: 20px;

    /* width: 100%; */

    background-color: var(--products_background);

    padding-left: 5vw;
    padding-right: 5vw;

}

.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-self: stretch;
    align-self: stretch;
    align-items: center;

    width: clamp(0px, 80vw, 620px);

    margin: 0 2.5vw;
    margin-bottom: min(7vh, 30px);


    padding: 10px;
    padding-bottom: 25px;

    border-radius: 15px;

    /* box-shadow: 0px 0px 15px 0.5vh rgb(210, 210, 210); */
    color: black;
    background-color: white;

    /* border: 3px solid lightslategray; */
}

.product_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: stretch;
    align-items: center;

    text-wrap: wrap;

    width: 95%;

}

.product h3 {
    display: block;
    text-align: center;
    text-wrap: wrap;


    /* background-color: cadetblue; */

    padding-top: 5px;
    margin-bottom: 20px;

    font-size: 1.6em;
    font-variant: normal;

    /* width: 95%; */
    /* text-transform: uppercase; */
}

.product img {
    width: clamp(80px, 12vh, 100px);
    height: clamp(80px, 12vh, 100px);

    object-fit: contain; /* Ensures the image covers the entire container */
    /* border-radius: min(2vw, 20px); */
    border-radius: 100%;

    background-color: black;
    padding: 10px;

    margin-bottom: 20px;
}

/* #bio120- img {
    -webkit-filter: invert(1);
   filter: invert(1)
} */

.product p, .product .product_info p {
    margin-top: 20px;
    margin-bottom: 10px;
}

.product ul, .product .product_info ul {
    /* border: 1px solid pink; */
    /* background-color: red; */

    /* list-style-type: "▶  "; */
    list-style-type: disc;
    list-style-position: inside;

    margin-left: 15px;

    font-size: 1em;
    text-align: center;

    width: 90%;
}

.product li {
    margin-bottom: 1em;
    line-height: 1.1em;

    /* display: flex; */

    /* background-color: yellow; */
    text-align: left;
}

.ul {
    text-decoration: underline;
}

.product .nested {
    /* padding-left: 20px; */

    margin-bottom: 0px;
    
    text-align: left;
    text-wrap: wrap;
    line-height: 1.25em;


    /* width: 110%; */
    /* background-color: #005bb5; */
    /* border: 1px solid red; */
    list-style-type: circle;
    list-style-position: inherit    ;
}

@media screen and (min-width: 916px) {
    product span {
        width: 100%;
    }
}

.product .list-text {
    display: inline;
    /* background-color: orange; */
}

.product .buy-now {

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

    justify-self: baseline;
    /* align-self: flex-; */

    background-color: var(--BRAND-PURPLE);
    color: white;

    text-align: center;

    width: 80%;
    max-width: 400px;
    padding: 2%;

    border-radius: min(2vw, 10px); /* Optional: Makes the image a perfect circle */
    /* border: 2px solid var(--accent); */

    margin-top: 7.5px;

    font-size: 1.0em;
    font-weight: bold;
    text-decoration: none;
}
.buy-now i {
    line-height: 1em;
    font-size: 0.95em;
}
.product .buy-now span {
    display: inline;
    text-align: center;
    
    margin: 0px;
    line-height: 1em;
    /* margin-top: min(0.75vh, 7px); */
}
.product .buy-now .og_price {
    opacity: 90%;
    font-style: italic;
}
.product .buy-now span .og_price {
    display: none;
    font-size: 1em;
}
.product .buy-now .price {
    margin-top: 0;
    font-size: 1.6em;
}
@media screen and (min-width: 540px) {
    .product .buy-now span .og_price {
        display: inline;
        font-size: 1em;
    }

    .product .buy-now .price .og_price {
        display: none;
    }
}
.product .buy-now:hover {
    color: white;
    background-color: var(--BRAND-PURPLE-HOVER);
}

#psy100-deck {
    /* box-shadow: inset 0px 0px 15px 0.5vh var(--psy100); */
    /* border-color: var(--psy100); */
    background-color: white;
}

#bio120-deck {
    /* box-shadow: inset 0px 0px 15px 0.5vh var(--bio120); */
    /* border-color: var(--bio120); */
    background-color: white;
}








.bonuses {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    padding-top: 10px;
    padding-bottom: 6.5vh;

    background-color: white;
    background: linear-gradient(0deg, #E8E8E8 50%, white 90%); 


    width: 100vw;
    height: auto;
}

.bonus {
    width: clamp(30px, 75vw, 500px);
    /* height: max(210px, 17.5vw); */
    height: auto;

    display: inline-block;
    text-align: left;

    border-radius: min(2vw, 10px); /* Optional: Makes the image a perfect circle */
    /* border: 2px solid var(--accent); */

    box-shadow: 0px 0px 15px 0.5vh rgb(210, 210, 210);
    /* color: black; */
    background-color: white;

    margin: 10px;

    padding: 20px;

    /* background-color: blue;
    border: 1px pink solid; */
}

.bonus .check {
    display: inline-block;

    height: 60px;
    width: 60px;

    /* border: 1px solid violet; */

    font-size: 4.5em;

    text-align: left;

    /* background-color: yellow; */
}

.bonus h3 {
    font-size: 1.25em;

    line-height: 30px;
}

.bonus p {
    margin: 0px;
    margin-top: 10px;

    line-height: 30px;
}





#difference {
    /* padding-top: 30px; */
    /* padding-bottom: 10px; */

    background: rgb(0,0,0);
    background: linear-gradient(0deg, white 50%, #E8E8E8 90%); 

    padding-bottom: 20px;
}

#difference .reason {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap:wrap;

    width: clamp(245px, 75vw, 900px);
    /* width: 60vw; */
    /* width: 1100px; */

    margin-top: 30px;   
    margin-bottom: 30px;

    font-size: 22px;
    list-style: none;

    border-radius: 20px;

    padding: 20px;

    box-shadow: 0px 0px 15px 0.5vh lightgray;
    background-color: white;
}

#difference #anki {
    flex-direction: row-reverse;
}


#difference .visual {
    width: clamp(245px, 67.5vw, 400px);
    /* height: clamp(260px, 50vw, 350px); */
    object-fit: contain;
    border-radius: min(2vw, 20px);

    border-bottom-right-radius: min(1vw, 10px);
    border-bottom-left-radius: min(1vw, 10px);
}

#anki .visual {
    object-fit: contain;
}

#difference #deck-design #transcripts .grade_proof {

    display: inline-block;
    height: 50%;

    object-fit: cover;

    /* border: 1px solid orange; */

}

#difference #transcripts {
    object-fit: cover;
}


.reason .text {

    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    
    /* width: 100%; */
    max-width: 450px;

    padding: 20px 0px;

    text-align: left;

    /* background-color: orange; */

    /* padding-left: */
}

.reason .text h3 {
    font-size: 1.3em;

    margin-top: 10px;
    margin-bottom: 30px;
    
    line-height: 1.05em;
}

.reason ul {
    /* list-style: "▶"; */
    list-style-position: inside;
}

.reason ul li:before {
    content: "▶";
  }

.reason ul li {
    display: flex;
    justify-content: space-evenly;
    
    /* background-color: cyan; */
    margin-bottom: 25px;

    line-height: 25px;
}

.reason ul .last_li {
    margin-bottom: 0px;
}

.reason ul li div {
    /* display: inline-block; */

    width: 80%;

    /* margin-left: 30px; */
    transform: translateX(-0px);

    /* background-color: red; */
}


















.view_products {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    min-width: 250px;
    width: 90%;
    max-width: 500px;
    height: 80px;

    margin-bottom: clamp(0px, 5vh, 50px);

    border-radius: 15px;

    text-decoration: none;

    font-size: 1.1em;
    font-weight: bold;

    color: white;
    background-color: var(--BRAND-PURPLE);
}
.view_products:hover {
    background-color: var(--BRAND-PURPLE-HOVER);
}



















#testimonials {
    padding-bottom: 0px;

    background: gray;
    /* background-color: red; */
    background: linear-gradient(0deg, var(--still_not_convinced) 0%, black 100%); 
}

#testimonials h2 {
    padding-top: 20px;

    color: white;

    /* background-color: rebeccapurple; */
}

.hallOfTestimony {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* overflow: hidden; */
    /* flex-wrap: wrap; */
    /* overflow-x: auto; */
    /* scroll-snap-type: x mandatory; */


    width: 100vw;
    max-width: 2000px;

    /* padding-bottom: 60px; */
    padding-bottom: min(50px, 5vh);
    /* background: gray; */
    /* background-color: red; */
    /* background: linear-gradient(0deg, var(--realisation_background) 50%, white 90%);  */
}

.testimony {

    display: inline-flex;
    align-self: stretch;
    justify-self: stretch;
    flex-direction: column;
    justify-content: space-between;

    scroll-snap-align: start;
    
    width: 75vw;
    /* max-width: 270px; */

    /* height: max(210px, 17.5vw); */
    height: auto;

    /* display: inline-block; */
    text-align: left;

    border-radius: min(2vw, 10px); /* Optional: Makes the image a perfect circle */
    /* border: 2px solid var(--accent); */

    /* box-shadow: 0px 0px 15px 0.5vh lightgray; */
    /* color: black; */
    background-color: white;

    margin: 10px auto;

    padding: 20px;
}

@media screen and (min-width: 900px) {
    .hallOfTestimony {
        flex-direction: row;
        flex-wrap: wrap;
        width: 90vw;
    }

    .testimony {
        width: 20%;
        min-width: 300px;
        margin: 10px;
    }
}

.testimony p {
    font-style: italic;

    font-size: 0.9em;
}

.testimony em {
    font-style: italic;
}

.testimony .name {
    font-weight: bold;
    font-size: 1em;
}

.testimony .course, .testimony .course sup {
    color: black;
    opacity: 80%;
    font-size: 0.9em;
}













#last-cta-buy {

    padding-top: 5vh;

    
    /* background-color: #E8E8E8; */
    background-color: black;
}

#last-cta-buy .wrapper h2 {
    color: white;
    padding-top: 20px;
    /* margin-bottom: 60px; */
}

#last-products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    text-align: center;
    text-wrap: wrap;

    padding: 20px 40vw;

    width: 90vw;

    /* background-color: var(--products_background); */

    padding-left: 5vw;
    padding-right: 5vw;
}


.added-value {
    display: inline;
    /* font-size: 22px; */
}

@media screen and (min-width: 900px) {
    #products {
        padding-left: 0px;
        padding-right: 0px;
    }

    #last-products {
        width: 100vw;

        padding-left: 0px;
        padding-right: 0px;
    }

    .product {
        width: min(40vw, 620px);
    }
}









#still_not_convinced {

    /* display: block; */
    /* height: 100vh; */

    text-align: center;

    padding-top: 1.5vh;
    /* padding-bottom: 5vh; */

    color: white;
    background-color: var(--still_not_convinced);
    /* background: linear-gradient(var(--still_not_convinced) 80%, black 100%); */

}

#still_not_convinced p {
    margin-bottom: min(35px, 7.5vh);
}

#still_not_convinced .try {
    display: inline-block;

    width: 30vw;
    min-width: 260px;

    font-weight: bold;

    border-radius: min(2vw, 10px);

    text-decoration: underline;


    padding: 10px;

    color: white;
    /* background-color: var(--accent-hover); */
    font-size: 1.0em;
}

#still_not_convinced .try:hover {
    text-decoration: underline;
    background-color: white;
    color: black;
}










#book {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    font-weight: bold;
    font-style: normal;

    text-align: center;
    text-decoration: none;

    /* margin-top: 30px; */
    margin-bottom: 80px;

    width: 50vw;
    max-width: 300px;

    padding: 15px 60px;

    border-radius: 15px;

    color: white;
    background-color: var(--BRAND-PURPLE);
}
#book:hover {
    background-color: var(--BRAND-PURPLE-HOVER);
}










.unfinished {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    text-align: center;
    margin-top: 30px;

    /* background-color: pink; */

    /* border-radius: 15px; */

    /* border: 1px solid red; */

    /* min-height: 340px; */
    /* height: 50vw; */
    height: 315px;
    /* max-height: 280px; */

    overflow: hidden;

}

.available {

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

    text-align: center;
    margin-top: 30px;

    /* background-color: pink; */

    height: auto;

    overflow: hidden;
}

@media screen and (min-width: 433px) {
    .unfinished {
        height: 290px;
        /* max-height: 280px; */
    }
}

@media screen and (min-width: 900px) {
    .coming_soon {
        height: 290px;
    }

    .available {
        justify-content: space-between;
        max-height: none;
    }
}

.coming_soon_announcement {
    font-size: 1.25em;
    margin-bottom: 0px;

    width: 80%;
}

.coming_soon p {
    display: inline-block;
    margin: 0px;
    text-align: center;
    width: 90%;

    margin: 10px auto;

    line-height: 1.2em;
}




.cp-checkout iframe {

    border: 10px solid orange;
    
    max-width: 600px;
    width: 90vw;
    min-height: 350px;
    height: 50vh;
    max-height: 400px;

    font-size: 300px;

}

iframe .cp_product-description-wrapper .cp_product-description {
    color: white;
}

#bio120-deck .cp-checkout iframe {

    border: 10px solid orange;
    
    max-width: 600px;
    width: 100%;
    min-height: 350px;
    /* height: clamp(100px, 20vh, 400px); */

    /* margin-bottom: -170px; */

    border: 1px solid red;

    font-size: 300px;

}