/* ************************************************ */
/* Global CSS */
/* ************************************************ */


/* fonts */

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("/assets/fonts/lato-regular.woff2")
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src:
        url("/assets/fonts/lato-300-webfont.woff2")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src:
        url("/assets/fonts/Roboto-300.woff2")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("/assets/fonts/roboto-latin-400.woff")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
        url("/assets/fonts/roboto-v29-latin-700.woff2")
}

/* ************************************************ */
/* Variables */
/* ************************************************ */


:root {
    --light-blue: #F6FAFF;
    --dark-blue: #3145FF;
    --pink: #E700C9;
    --text-black-dark: #1A1A1A;
    --text-black-light: #2C3338;
    --text-grey: #7F7F7F;
    --text-light-grey: #B6B6B6;
    --text-link-blue: #539AFF;
    --border-grey: #8A8B8C;
}


/* ************************************************ */
/* Headers */
/* ************************************************ */


h1 {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: 300;
}

h2 {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: 300;
}

h3 {
    font-family: "Roboto";
    font-weight: 700;
}

h4 {
    font-family: "Roboto";
    font-weight: 400;
}

p {
    font-family: 'Lato', Helvetica, sans-serif;
    font-weight: 400;
}

a {
    text-decoration: none;
}




h1 {
    font-size: 3.813rem;
    line-height: 4.9rem;
    letter-spacing: -0.5px;
    font-weight: 300;
}

h2 {
    font-size: 3rem;
    line-height: 3.9rem;
    letter-spacing: 0px;
}


h3 {
    font-size: 2.125rem;
    line-height: 2.583rem;
    letter-spacing: 0.25px;
    font-weight: 400;
}

h4 {
    font-size: 40px;
    line-height: 47px;
    margin: 0;
}

h5 {
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: var(--text-black-light);
    margin: 0;
    letter-spacing: -1.5%;
}

p {
    line-height: 1.38rem;
    font-size: 1.063rem;
    font-weight: 400;
    letter-spacing: 0.031rem;
}


.nav-li {
    font-family: "Roboto", Helvetica, sans-serif;
    font-weight: 400;
}


#nav-bar-div, #nav-bar-div .nav-li, #nav-bar-div a {
    z-index: 100000;
}

html {
    scroll-behavior: smooth;
}

/* About / Services */
.hero-h1 {
    margin-top: 0px;
}


/* Thank You Global */

#thank-you-message-div {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-top: 42px;
    width: 100%;
}

#thank-you-checkmark {
    max-width: 200px;
}



/* Privacy Policy Global */

#privacy-policy-section th {
    font-family: 'Roboto';
    font-weight: 700;
    color: var(--text-black-dark);
}

.email {
    color: var(--text-light-grey);
}

#privacy-policy-section a .email:hover {
    color:var(--dark-blue);
    text-decoration: none;
}

#privacy-policy-section a {
    text-decoration: none;
}

#privacy-policy-section a:hover {
    text-decoration: underline;
}

#privacy-policy-section strong {
    color: var(--text-black-dark);
    font-weight: 700;
}

#privacy-policy-section table {
    border-collapse: collapse;
}

#privacy-policy-section th, tr, td {
    border: 1px solid var(--border-grey);
}

#privacy-policy-section p, #privacy-policy-section ul, #privacy-policy-section li, #privacy-policy-section td {
    font-family: 'Lato';
    color: var(--text-grey);
    line-height: 29px;
}

#privacy-policy-section h3 {
    opacity: 70%;
}

#privacy-policy-section h2, #privacy-policy-section h3 {
    color: var(--text-black-light);
}


/* Header Global */

#mobile-menu {
    display: none;
}

/* Footer Global */

footer li {
    font-family: 'lato', sans-serif;
}

.bold {
    font-weight: 700;
}

.text-dark {
    color: var(--text-black-dark);
}

.text-light {
    color: var(--text-black-light);
}


/* button CSS */

.cta-btn-pink {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 1.25px;
    color: #fff;
    background-color: var(--pink);
    opacity: 75%;
    border-radius: 6px;
    text-align: center;
    padding: 17px 0;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex; /* Add this to center align items and allow SVG movement */
    align-items: center; /* Vertically center contents */
    justify-content: center; /* Horizontally center contents */
    gap: 8px; /* Optional: Adds space between text and SVG */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

.cta-btn-pink svg {
    transition: transform 0.3s ease; /* Transition for the SVG */
}

.cta-btn-pink:hover svg {
    transform: translateX(20px); /* Move the SVG to the right */
}

.cta-btn-pink:hover {
    opacity: 100%;
}

.cta-btn-inverse-pink {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.25px;
    color: var(--pink);
    box-shadow:0px 0px 0px 1px var(--pink) inset;
    border-radius: 6px;
    text-align: center;
    padding: 17px 0;
}

.cta-btn-inverse-pink:hover {
    color: #ffffff;
    background-color: var(--pink);
}

.white-btn {
    font-family: "Roboto";
    font-weight: 700;
    color: var(--text-black-dark);
    text-decoration: none;
    background-color: #ffffff;
    padding: 17px 0;
    width: 280px;
    min-width: 280px;
    border-radius: 6px;
    text-align: center;
}

.pricing-cta-btn {
    font-family: 'Roboto';
    font-weight: 700;
    font-size: 15px;
    color: var(--pink);
    text-decoration: none;
    letter-spacing: 1.25px;
    padding: 20px 100px;
    box-shadow:0px 0px 0px 2px var(--pink) inset;
    border-radius: 6px;
    text-align: center;
    padding: 17px 10px;
    width: 120px;
    max-width: 120px;
    height: 19.195px;
}

.pricing-cta-btn:hover {
    color: #ffffff;
    background-color: var(--pink);
}

.nav-title {
    color: #B6B6B6;
}

/* Header Global */



/* footer global */

footer {
    background-color: #0E1111;
}

footer ul {
    list-style: none;
}


footer a {
    font-size: 14px;
    text-decoration: none;
    color: #7F7F7F;
}

footer a:hover {
    color: var(--pink);
}

/* pricing sections */
.pricing-tile-description {
    font-family: "Lato";
    font-size: 1.063rem;
    line-height: 1.38rem;
    letter-spacing: 0.496px;
}

.price-number {
    text-align: center;
}




/* ************************************************ */
/* @media Queries */
/* ************************************************ */


/* phone / tablet */

@media only screen and (max-width: 1024px){
    

    section {
        padding: 30px 10.5px;
    }

    body {
        margin: 0;
    }

    /* Headers */

    .large-p {
        font-size: 20px;
    }

    /* Buttons */

    .cta-div {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cta-btn-pink {
        width: 100%;
        opacity: 100%;
        padding: 10px 0px;
        font-size: 15px;
        vertical-align: middle;
        padding: 13px 0;
    }

    .cta-btn-inverse-pink {
        padding: 13px 0;
    }

    .pricing-cta-btn {
        width: 100%;
        font-size: 15px;
        vertical-align: middle;
        min-width: 100%;
        padding: 13px 0;
    }
    
    .white-btn {
        width: 100%;
    }
    
    


    /* Header */

    #header-logo {
        max-width: 90px;
    }

    #logo-div {
        display: inline-block;
        padding-left: 15px;

    }

    header {
        background-color: #ffffff;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 10000;
    }

    .nav-li {
        list-style: none;
    }

    #nav-bar-div {
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: auto;
        background-color: #ffffff;
        z-index: 10000;
        top: 0;
        left: 0;
    }

    #header-cta-btn {
        display: none;
    }

    #mobile-header-cta {
        display: block;
    }

    .nav-li {
        padding-top: 42px;
    }

    .nav-ul a {
        display: block;
        padding: 30px;
    }

    .header-nav-item {
        font-size: 38px;
        font-weight: 300;
        color: var(--text-black-dark);
    }

    .nav-ul a:hover {
        background-color: #ffffff;
    }

    #nav-bar-div {
        max-height: 0;
        transition: max-height .5s ease-out;
    }

    #hamburger {
        background: var(--white);
        float: right;
        display: block;
        padding: 25px 20px;
        z-index: 10001;
    }

    #hamburger-icon {
        background: var(--text-black-dark);
        display: block;
        height: 2.2px;
        position: relative;
        width: 30px;
        margin-bottom: 3px;
        z-index: 10001;
    }

    #hamburger-icon::before, 
    #hamburger-icon::after {
        background: var(--text-black-dark);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
        margin-bottom: 3px;
        z-index: 10001;
    }

    #hamburger-icon::before {
        top: 5px;
        z-index: 10001;
    }

    #hamburger-icon::after {
        top: -5px;
        z-index: 10001;
    }

    #mobile-menu:checked ~ nav {
        max-height: 100%;
    }

    #mobile-menu:checked ~ #hamburger #hamburger-icon {
        background: transparent;
    }

    #mobile-menu:checked ~ #hamburger #hamburger-icon::before {
        transform: rotate(-45deg);
        top:0;
    }

    #mobile-menu:checked ~ #hamburger #hamburger-icon::after {
        transform: rotate(45deg);
        top:0;
    }



    /* Pricing */

    #pricing-section {
        background-color: var(--light-blue);
        scroll-behavior: smooth;
    }

    #pricing-tiles-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .pricing-tile {
        border-radius: 45px;
        padding: 8% 20px;
        position: relative;
        margin: 0 30px;
    }

    #pricing-tiles-wrapper {
        padding-top: 30px;
    }

    .side-tile {
        background-image: linear-gradient(to bottom, rgba(49,69,255, 50%) 10%, rgb(255, 255, 255, 0) 8%);
        border: 1px solid #D9D9D9;
        color: var(--text-black-light)
    }


    .middle-tile {
        background-image: linear-gradient(to bottom, rgba(231,0,201) 10%, rgb(255, 255, 255, 0) 8%);
        border: 1px solid var(--pink);
    }

    .price-title {
        padding-top: 30px;
    }

    .price-number {
        font-size: 58px;
        padding: 10px 0;
    }

    .month-price {
        font-size: 28px;
    }

    .pricing-tile-description li {
        margin-bottom: 10px;
    }

    .price-number {
        text-align: center;
        padding: 25px 0;
    }

    /* Benefits Section */

    #icon-tile-wrapper {
        padding: 0 30px;
    }
    
    .icon-tile {
        padding-bottom: 20px;
        border-bottom-width: 100px;
        border-bottom: 1px var(--border-grey) solid;
    }


    /* Pink Rocket CTA */

    #cta-section-description .white-btn {
        margin-top: 40px;
    }

    #mobile-cta-section {
        padding-top: 70px;
    }

    #mobile-cta-section a {
        text-align: center;
    }



    /* Footer */

    footer {
        padding: 20px 0;
    }

    footer ul {
        display: flex;
        flex-direction: column;
        gap: 12px 0;
        padding-inline-start: 0px;
    }


    footer {
        width: 100%;
    }

    .nav-title {
        font-size: 20px;
        margin-bottom: 5px;
    }

    #footer-wrapper {
        width: 100%;
        align-items: center;
        align-content: center;
        display: flex;
        flex-direction: column;
    }

    .footer-inner-div {
        align-items: center;
        align-content: center;
        text-align: center;
        width: 100%;
    }

    /* footer left */

    #footer-left {
        order: 3;
    }

    #footer-left p {
        font-size: 14px;
        color: #B6B6B6;
    }

    #footer-logo {
        width: 25%;
        max-width: 25%;
    }


    /* footer center */

    #footer-center {
        order: 1;
    }

    /* footer right */

    #footer-right {
        order: 2
    }

    /* Pink Rocket CTA Section */

    #pink-rocket-cta {
        background-color: #E700C9;
        background-repeat: none;
    }

    #cta-section-description {
        padding-top: 15px;
    }

    .white-text {
        color: #ffffff;
    }

    .white-btn:hover {
        color: var(--pink);
    }

    #cta-section-description h4{
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .white-btn {
        margin-top: -20px;
    }

    #mobile-cta-section {
        margin-top: -20px;  
    }

}


/* tablet */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Your CSS styles for tablets here */
}


/* desktop */
@media only screen and (min-width: 1025px) {
    /* Your CSS styles for desktops here */



    /* Padding */
    .padding-full-top {
        padding-top: 42px;
    }

    .padding-half-top {
        padding-top: 24px;
    }

    .padding-half-bottom {
        padding-bottom: 24px;
    }

    .padding-full-bottom {
        padding-bottom: 40px;
    }


    /* Margin Classes */

    .margin-left {
        margin-left: 155px;
    }

    .margin-right {
        margin-right: 155px;
    }

    .margin-full-top {
        margin-top: 42px;
    }

    .margin-half-top {
        margin-top: 24px;
    }

    .margin-full-bottom {
        margin-bottom: 42px;
    }


    /* Headers */
    h1 {
        font-size: 3.813rem;
        line-height: 4.9rem;
        letter-spacing: -0.5px;
        font-weight: 300;
    }

    h2 {
        font-size: 3rem;
        line-height: 3.9rem;
        letter-spacing: 0px;
    }


    h3 {
        font-size: 2.125rem;
        line-height: 2.583rem;
        letter-spacing: 0.25px;
        font-weight: 400;
    }

    h4 {
        font-size: 40px;
        line-height: 47px;
        margin: 0;
    }

    h5 {
        font-size: 28px;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        color: var(--text-black-light);
        margin: 0;
        letter-spacing: -1.5%;
    }

    p {
        line-height: 1.38rem;
        font-size: 1.063rem;
        font-weight: 400;
        letter-spacing: 0.031rem;
    }

    body {
        margin: 0;
        overflow-x: hidden;
    }

    /* button cta */
    .cta-btn-pink {
        min-width: 290px;
        font-size: 15px;
        letter-spacing: 1.25px;
    }


    /* Turnstiles */
    .cf-turnstile {
        padding: 0 30px 15px 30px;
        display: flex;
    }
    
    iframe {
        width: 100% !important;
    }
    


    /* Sections CSS */
    section {
        padding: 60px 155px;
    }


    /* Header CSS */

    header {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        max-height: 4.5rem;
        padding: 0 135px;
    }


    #header-logo {
        width: 90px;
    }

    #nav-bar-div {
        float: right;
        text-align: center;
    }

    .nav-li {
        list-style-type: none;
        display: flex;
    }

    #mobile-header-cta {
        display: none;
    }


    .header-nav-item {
        color: var(--text-black-dark);
        text-decoration: none;
        font-size: 1.125rem;
        letter-spacing: 0.15px;
    }

    .header-nav-item:hover {
        color: var(--pink);
    }

    #header-cta-btn {
        border-radius: 6px;
        padding: 10px 15px;
        font-weight: 700;
        background-color: var(--pink);
        opacity: 75%;
        color: #ffffff;
        font-size: 15px;
        letter-spacing: 1.25px;
    }

    #header-cta-btn:hover {
        opacity: 100%;
    }


    /* body */

    .cta-div {
        display: flex;
        gap: 10px;
    }


    /* Footer CSS */

    footer {
        padding: 0 155px;
    }

    footer li {
        margin-bottom: 10px;
    }

    /* Pink Rocket CTA Section */

    #pink-rocket-cta {
        width: 1130px;
        height: 383px;
        background-color: #E700C9;
        background-image: url('/assets/images/rocket-silhouette.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: center;
        padding: 0 65px;
        margin: 6rem 90px 0 90px;
        border-radius: 50px;
    }

    #cta-section-description {
        padding-top: 15px;
    }

    .white-text {
        color: #ffffff;
    }

    .white-btn {
        font-size: 15px;
        letter-spacing: 1.25px;
        text-align: center;
    }


    .white-btn:hover {
        color: var(--pink);
    }

    
    
    /* Pricing Section */

    #pricing-section {
        background-color: var(--light-blue);
        padding-bottom: 60px;
    }
    
    #pricing-description {
        max-width: 830px;
    }
    
    #pricing-tiles-wrapper {
        display: flex;
        flex-direction: row;
        gap: 60px;
        align-items: end;
    }
    
    .pricing-tile {
        max-width: 350px;
        border-radius: 45px;
        padding: 8% 20px;
        position: relative;
    }
    
    .pricing-tile .cta-btn-pink {
        width: 100%;
    }
    
    .side-tile {
        background-image: linear-gradient(to bottom, rgba(49,69,255, 50%) 10%, rgb(255, 255, 255, 0) 8%);
        border: 1px solid #D9D9D9;
        height: 360px;
    }
    
    .middle-tile {
        background-image: linear-gradient(to bottom, rgba(231,0,201) 10%, rgb(255, 255, 255, 0) 8%);
        border: 1px solid var(--pink);
        height: 400px;
    }

    .price-number {
        font-size: 50px;
        margin: 13px 0 27px 0;
    }
    
    .pricing-tile h3, .pricing-tile h5, .pricing-tile p {
        color: var(--text-black-dark);
    }
    
    .side-tile h5, .side-tile .price-number, .side-tile p {
        opacity: 85%;
    }
    
    .month-price {
        font-size: 30px;
    }
    
    /* Privacy Policy */

    #privacy-policy-section h3 {
        font-size: 18px;
    }

    #privacy-policy-section p, #privacy-policy-section ul, #privacy-policy-section li, #privacy-policy-section td {
        font-size: 16px;
    }

    #privacy-policy-section th {
        font-size: 18px;
    }

    #privacy-policy-section th, td {
        padding: 7px;
    }

    


    /* Footer CSS */

    footer {
        padding: 0 155px;
        margin: 6rem 0 0 0;
    }

    #footer-wrapper {
        display: flex;
        padding: 20px 0px;
        align-items: center;
        align-content: center;
    }

    .footer-inner-div {
        max-width: 33%;
        width: 33%;
    }

    .nav-title {
        font-size: 22px;
        padding-bottom: 6px;
    }

    footer li {
        margin-bottom: 10px;
    }

    /* footer left */

    #footer-left p {
        font-size: 14px;
        color: #B6B6B6;
    }

    #footer-logo {
        width: 82px;
    }
}