:root {
    --primary: #662F8E;
    --primaryLight: #d499ff;
    --primaryLighter: #eed6ff;

    --secondary: #FAAF3B;
    --secondaryLight: #ffd79a;
    --secondaryLighter: #ffeaca;

    --tertiary: #c0272d;
    --tertiaryLight: #ff8488;
    --tertiaryLighter: #ffd4d6;

    --super-lightgrey: rgb(249, 249, 249);
    --bodyTextColor: #242424;
    --bodyTextColorWhite: #e4e4e4;

    --sectionPadding: 3rem;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--bodyTextColor);

    margin: 0;
    padding: 0;

    background-color: var(--super-lightgrey);
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}

section {
    padding: 3rem 1rem;
    margin: auto;
    /* min-height: 100vh; */
    width: 100%;
    height: 100%;
}

.container {
    justify-self: center;
    width: 100%;
}

h1, h2, h3, h4, h5, h6, 
p {
    margin:  0;
    padding: 0;
}

.primary { color: var(--primary); }
.primaryLight { color: var(--primaryLight); }
.primaryLighterBG { background-color: var(--primaryLighter); }
.secondary { color: var(--secondary); }
.secondaryLight { color: var(--secondaryLight); }
.secondaryLighterBG { background-color: var(--secondaryLighter); }
.tertiary { color: var(--tertiary); }
.tertiaryLight { color: var(--tertiaryLight); }
.tertiaryLighterBG { background-color: var(--tertiaryLighter); }

.topper {
    font-size: 0.8rem;
    font-weight: 350;
    letter-spacing: 1.5px;
}
.title {
    font-size: 3rem;
    font-weight: 600;
    padding-bottom: 1rem;
    
    max-width: 60rem;
}
.text {
    padding: 1rem 0;
    max-width: 60rem;
}



/*------------------------------>
<---     CUSTOM ELEMENTS      -->
<------------------------------*/

.primary-button {
    background-color: var(--secondary);
    border: 2px solid var(--secondary);
    border-radius: 100px;
    padding: 8px 15px;
    margin: 4px 2px;

    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    
    display: inline-block;
    cursor: pointer;

    transition: all .2s ease-in-out
}

.secondary-button {
    background-color: #662f8e37;
    /* border: none; */
    /* background-color: white; */
    border: 2px solid var(--primary);
    border-radius: 100px;
    padding: 8px 15px;
    margin: 4px 2px;

    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    
    display: inline-block;
    cursor: pointer;

    transition: all .2s ease-in-out

}
.primary-button:hover, .secondary-button:hover {
    transform: scale(1.03);
}


.flex {
    margin: auto;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    
    text-align: center;
    box-sizing: border-box;
}


/*------------------------------>
<---           HERO           -->
<------------------------------*/
#hero {
    padding: 0;
    z-index: 1;
    overflow: hidden;
    height: fit-content;

    border-radius: 0 0 40px 40px;


    background-image: url("/Assets/img/brand/SBY_Gradient.png");
    background-size: cover;                 /* Ensures image covers full area */
    background-position: center center;     /* Centers the image */
    background-repeat: no-repeat;           /* Prevents tiling */
    background-attachment: fixed;
}
#hero .container {
    width: 100%;
    padding: clamp(9rem, 25.95vw, 17.5rem) 0;
    margin: auto;
    color: #ffffff;
}
#hero .flex {
    max-width: 100%;
}
#hero .title {
    font-size: 3rem;
    font-weight: 750;
    padding: 0.6rem;
    margin: 0;
}
.hero-group {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-social-proof {
    padding: 1rem;
    text-align: left;
    font-size: 0.8rem;
}


/*------------------------------>
<---           HOOK           -->
<------------------------------*/
.hook-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.hook-card {
    display: flex;
    flex-direction: column;
    text-align: start;

    padding: 1.5rem;
    max-width: 22rem;

    /* border: 2px solid var(--primaryLight); */
    background-color: white;
    border-radius: 20px;
    box-shadow: rgb(234, 234, 234) 0px 5px 15px 0px;

}
.hook-card-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.hook-card-icon {
    width:  35px;
    height: 35px;
}
.hook-card-title {
    font-size: 1.5rem;
    font-weight: 600;
}
.hook-card-text {
    color: var(--bodyTextColor);
    padding: 0.4rem;
}




/* fundamentals */

/*------------------------------>
<---           ABOUT          -->
<------------------------------*/
#about {
    max-width: 60vw;
}
#about .text {
    padding: 0;
}
.about-text-section {
    text-align: left;
    display: flex;
    gap: 3rem;
    padding: 2rem;

    & img {
        width: 250px;
        height: 250px;
        border-radius: 20px;
        aspect-ratio: 1/1;
    }
}

/*------------------------------>
<---          PROCESS         -->
<------------------------------*/
#process .container {
    background-color: white;
    padding: 1rem;
    border-radius: 20px;
}
#process .flex {
    gap: 2rem;
}
.process-intro {
    text-align: start;
    max-width: 40rem;

    p { padding: .3rem 0 }
}
.process-intro-title {

}
.process-benefits {
    text-align: start;
}
.process-benefits-list {
    margin: 0;

    li {
        padding: .1rem 0;
        font-weight: 500;
    }
    li::marker {
        color: var(--tertiary);
        font-size: 1.4rem;
    }
}
.process-intro-elements {
    margin-top: 1;
    padding: 0;
    list-style: none;
    text-align: start;

    max-width: 41.5rem;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;

    li {
        max-width: 20rem;
        padding: 1rem;
        background: radial-gradient(var(--tertiaryLighter) 0%, white 100%);
        border: 2px dotted var(--tertiaryLighter);
        border-radius: 20px;

        font-weight: 300;
    }
}

.process-video {
    margin: 2rem;
    width: 40rem;
    height: 20rem;
    border: 5px solid grey;
    border-radius: 20px;

    display: none;
}
.process-concept-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.process-concept-title {
    margin: 1rem 0;
}
.process-concept-cards {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center; 
    justify-content: center;
    gap: 2rem;
}
.process-concept-card {
    text-align: start;
    align-self: stretch;
    max-width: 35rem;
    padding: 1rem;
    border-radius: 20px;
    box-shadow: lightgray 0px 5px 15px 0px;
}
.process-concept-card-title {
    text-align: center;
}
.process-concept-card-title-text {
    margin: .3rem;
}
.process-concept-title-icon {
    height: 50px;
    width:  50px;
}
.process-concept-card ul {
    display: flex;
    flex-direction: column;
    
    margin-left: 0;
    padding-left: 0;
    list-style: none;

    flex: 1;
}
.process-concept-card li {
    padding: .3rem;
    font-weight: 500;
}


/*------------------------------>
<---          REVIEWS         -->
<------------------------------*/

.review-logos-container {
    margin-bottom: 2rem;

    p { padding: .5rem 0 }
}
.review-logos {
    display: flex;
    flex-wrap: nowrap;
    gap: 5rem;

    img {
        object-fit: contain;
        max-width:  150px;
        max-height: 95px;
        width: auto;
        height: auto;
    }
}

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

    background: radial-gradient(circle,
    var(--primaryLight), 
    var(--primary));
    /* background: radial-gradient(circle,
    rgba(63, 94, 251, 1) 0%, 
    rgba(252, 70, 107, 1) 100%); */

    width: 100%;
    padding: 2.5rem 1.5rem;
    border-radius: 20px;

    .title, .topper {
        color: white;
    }
}
.review-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    flex: 1;

    max-width: 100%;
}
.review-item {
    max-width: 25rem;
    min-width: 20rem;
    padding: 1rem;
    
    align-self: stretch;
    
    background-color: white;
    border-radius: 15px;

    transition: all .2s ease-in-out;
}
.review-item:hover {
    box-shadow: lightgray 0px 5px 15px 0px;
}
.review-title {
    color: var(--primaryLight);
    font-size: 1.4rem;
    font-weight: 700;
}
.review-text {
    color: var(--primary);
    font-size: 0.8rem;
    padding: 0.5rem 0;
}
.review-name {
    color: var(--primaryLight);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
}


/*------------------------------>
<---          CONTACT         -->
<------------------------------*/
 #contact {
     padding-bottom: 6rem;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    
    padding: 1rem;
    background-color: var(--secondaryLight);
    border-radius: 20px;
}
.form-control {
    background-color: var(--super-lightgrey);
    border-radius: 20px;
    border: none;
    box-shadow: lightgray 0px 2px 5px 0px;

    width: 18rem;
}
input,
textarea {
    font-family: "Inter", sans-serif;
    color: var(--bodyTextColor);
    font-size: 1rem;
    font-weight: 300;

    padding: 0.5rem 1rem;
}
::placeholder {
    color: var(--secondaryLight);
}


/*------------------------------>
<---          FOOTER          -->
<------------------------------*/
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    
    color: white;
    text-align: center;
    
    border-radius: 40px 40px 0 0;
    
    background-image: url("/Assets/img/brand/SBY_Gradient_Upsidedown.svg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.footer-nav ul {
    display: flex;
    gap: 2rem;
    
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a {
        color: white;
        text-decoration: none;
    }
}




/* MOBILE */
@media only screen and (max-width: 768px) {

    body {
        font-size: .85rem;
    }

    /* HERO */
    #hero .title {
        font-size: 2.5rem;
    }

    h1 .title {
        font-size: 2rem;
    }

    .process-steps-container {
        padding: 0.5rem;
    }
    
    .process-step {
        padding: 1rem 0;
        
        svg {
            display: none;
        }
    }
    .process-step-column {
        padding-left: 0;
    }

    .review-logos-container {
        display: none;
    }

    .footer-container { display: none; }
}