@import url('../fonts/stylesheet.css');

:root {
    --primary-color: #D0255E;
    --seconday-color: #FFDEE9;
    --light-gray: #a7a7a7;
    --dark: #2B2B2B;
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

*::-webkit-scrollbar {
    display: none;
}

.no-hide::-webkit-scrollbar {
    display: block;
}

html {
    font-size: 62.5%;
    background-color: rgb(250, 250, 250);
}

body {
    font-family: 'Athletics', sans-serif;
    background-color: rgb(250, 250, 250);
}

a {
    text-decoration: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus button:focus,
.navbar-toggler:focus {
    box-shadow: none;
}

/* hero section  */
.header-bg {
    background: linear-gradient(121.21deg, #D0255E 38.78%, #D025B5 103.52%);
    padding: 3rem 0;
}



.custom-nav {
    border-radius: 5rem;
    padding: 1rem 5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(50px);
    background-color: #ffffff;
    top: 1rem;
}

.custom-nav .navbar-nav {
    color: var(--dark);
    font-size: 1.6rem;
    display: flex;
    gap: 3rem;

}

.custom-nav .navbar-nav .nav-link {
    position: relative;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out;

}

.custom-nav .navbar-nav .nav-link:hover {
    color: var(--primary-color);

    transform: scale(1.1);

}


.custom-nav .nav-logo {
    width: 8rem;
    height: auto;
}

.hero-section main {
    margin: 4rem 0;
}

.hero-section h1 {
    font-size: 6.4rem;
    color: #ffffff;
    padding: 2rem 0;

}

.hero-section h1 span {
    font-size: 4.8rem;
    background: #ffffff;
    line-height: 5.9rem;
    color: var(--dark);
    border-radius: 3rem;
    padding: 1.2rem 3rem;
}

.hero-section p {
    font-size: 2rem;
    color: #ffffff;
    line-height: 1.6;
    font-weight: 400;
}

.submit-button {
    height: 7.4rem;
    width: 31rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 3.1rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: var(--dark);
    border-bottom: 4px solid rgba(255, 255, 255, 1);
    border-radius: 2rem;
}


.coming-soon p {
    font-size: 1.6rem;
    color: #ffffff;
    line-height: 1.6;
    font-weight: 400;
}

.coming-soon button {
    height: 5.3rem;
    padding: 1.5rem 3rem;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    background: var(--dark);
    border-radius: 2.1rem;
    display: flex;
    justify-content: center;
    gap: .6rem;
    font-size: 1.6rem;
    color: #ffffff;
}

.paring-section {
    padding: 10rem 0;

}

.paring-section h3 {
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 5.9rem;
    text-align: center;
    color: var(--dark);
}

.paring-section p {
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.1rem;
    text-align: center;
    color: var(--dark);
    /* width: 50rem; */
    margin: 2rem auto;
}

.paring-section .img-wrapper {
    padding: 5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paring-section .img-wrapper img {
    min-width: 60rem;
    width: auto;

}


.testimony-section {
    padding: 8rem 0;
}

.testimony-section h3 {
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 5.9rem;
    text-align: center;
    color: var(--dark);
}

.testimony-section p {
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.1rem;
    text-align: center;
    color: var(--dark);
    width: 50rem;
    margin: 1rem auto;
}


.card-container {
    gap: 2rem;
    padding: 2rem;
    border: none;
    border-radius: 2.5rem;
    min-height: 30rem !important;
    color: #fff;
    margin: 3rem;
}

/* Even cards - primary color */
.card-container:nth-child(even) {
    background: var(--primary-color);
}

/* Odd cards - dark color */
.card-container:nth-child(odd) {
    background: var(--dark);
}



.card-container h4 {
    color: #ffffff;
    padding: 1rem;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 3.9rem;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.card-container p {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 3rem;
    text-align: center;
    width: auto;
    margin: 1rem auto;
    color: #ffffff;
}

.card-container .card-profile-container {
    background: #ffffff;
    padding: 1rem 0.9rem;
    border-radius: 2.2rem;
    margin: 2rem auto;
    width: 25rem;
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;

}

.card-container .card-profile-container img {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 40%;
}

.card-container .card-profile-container h5 {
    font-size: 2rem;
    font-weight: 400;
    margin: 0;
    color: var(--dark);
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: text;
}

.card-container .card-profile-container p {
    color: var(--dark);
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
    word-wrap: break-word;
    text-align: left;
    width: auto;
}


.work-container {
    background: linear-gradient(270deg, rgba(255, 222, 233, 1));
    padding: 5rem 0;
    background-image: url("../images/love.png");
    background-repeat: no-repeat;
    background-position: left bottom;
}

.work-wrapper {
    border-radius: 4.8rem;
    padding: 3rem;

    background: linear-gradient(270deg, rgba(208, 37, 94, 0.1) 0%, rgba(208, 37, 94, 0.0228721) 77.13%, rgba(208, 37, 94, 0) 100%);
}

.work-wrapper h3 {
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 79.68px;
    text-align: left;
}

.work-wrapper p {
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.1rem;
    text-align: left;
    width: 50rem;
}

.waitlist-container {
    background: linear-gradient(121.21deg, #D0255E 38.78%, #D025B5 103.52%);
    padding: 5rem 0;
}

.waitlist-wrapper {
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 4rem;
    padding: 5rem;
    background-color: #fff3;
}

.waitlist-wrapper h3 {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 79.68px;
    text-align: left;
    color: rgba(255, 255, 255, 1);

}

.waitlist-wrapper p {
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.1rem;
    text-align: left;
    color: rgba(255, 255, 255, 1);
}

.waitlist-wrapper .waitlist-form {
    padding: 3rem 5rem 0 0;
}

.waitlist-wrapper .form-control {
    height: 6rem;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    border-bottom: 5px solid rgba(0, 0, 0, 1);
    border-radius: 1rem;
    color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(4px);
    font-size: 1.6rem
}

.waitlist-wrapper .form-control option {
    color: #000;
    background-color: #fff;
}

.waitlist-wrapper .form-control::placeholder {
    color: rgba(255, 255, 255, 1);

}

.waitlist-submit-btn {
    padding: 1rem 5rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 3.1rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: var(--dark);
    border-bottom: 4px solid rgba(255, 255, 255, 1);
    border-radius: 1rem;
}

.is-invalid {
    color: #fb0557;
    background-color: rgba(255, 255, 255, 1);
    font-size: 1.3rem;
    border-radius: 0 0 1rem 1rem;

    padding: .5rem 1rem;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 2.2rem !important;
}

div:where(.swal2-container) div:where(.swal2-html-container) {

    font-size: 1.8rem !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    padding: 2rem !important;
    width: 40rem !important;
}

.comfirm-alert-button {
    height: 5rem;
    width: 6rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 3.1rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: var(--dark);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 1.5rem;
}

footer {
    background-color: var(--dark);
    padding: 3rem 0 10rem 0;
    background-image: url("../images/footer-logo.png");
    background-repeat: no-repeat;
    background-position: center bottom;

}

.footer-wrapper {
    padding: 0 3rem 15rem 3rem;
    color: white;
}

.footer-wrapper .footer-link {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}


.footer-wrapper .footer-link a {
    color: rgba(255, 255, 255, 1);
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.1rem;
}

.footer-wrapper .footer-logo {
    width: 20rem;
}

.footer-wrapper .footer-btn {
    background: rgba(255, 255, 255, 1);
    border: none;
    border-bottom: 2px solid rgba(208, 37, 94, 1);
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border-radius: 2.1rem;

    font-size: 1.6rem;
    width: 20rem;
    height: 6rem;
    margin: 1rem;
}

.contact-info {
    margin: 1rem;
}

.contact-info p:first-child {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 700;

    letter-spacing: 0.005em;

}

.contact-info p:nth-child(2) {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.005em;
}

.term-header h1 {
    font-size: 6.4rem;
    font-weight: 700;
    text-align: center;
    margin-top: 4rem;
}

.terms-container {
    margin: 8rem 0;
}

.terms-container h3 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 24px;
    letter-spacing: 0.5%;
    text-align: justify;
    margin-bottom: 3rem;

}

.terms-container p {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
    text-align: justify;
    margin: 2rem 0;
    color: var(--light-gray);
}

.terms-content {
    margin-bottom: 2rem;
}

.terms-content h2 {
    font-weight: 700;
    font-size: 3.6rem;
    padding: 1rem;
}

.terms-content p {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
    text-align: justify;
    margin: 0;
    color: var(--light-gray);
}

.terms-body {
    padding: 0 0 3rem 0;
}

.terms-body h4 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 3.1rem;
    letter-spacing: 0%;
    text-align: justify;

}

.terms-body p {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.5%;
    color: #454545;
}

.terms-body ul {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.5%;
    color: #454545;
}

.terms-links {
    margin-top: 1rem;
}

.terms-links a {
    display: flex;
    flex-direction: column;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--primary-color);
    cursor: pointer;
    margin: 1rem 0;
}

.terms-bg {
    background: linear-gradient(121.21deg, #D0255E 38.78%, #D025B5 103.52%);
    padding: 5rem 0;
    position: relative;
    /* overflow: hidden; Optional — uncomment to prevent overflow */
}

.terms-bg::before,
.terms-bg::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    z-index: 1;
    pointer-events: none;
}

.terms-bg::before {
    background-image: url("../images/double-love.png");
    left: 0;
    bottom: 0;
    transform: translateY(27%);
}

.terms-bg::after {
    background-image: url("../images/love-white.png");
    top: 10%;
    right: 0;
}



@media (max-width: 1024px) {
    .work-wrapper p {
        width: 90%;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 56.25%;
    }

    .work-container {

        background-image: none;
        background-repeat: no-repeat;
        background-position: left bottom;
    }

    .waitlist-wrapper h3,
    .waitlist-wrapper p {
        text-align: center;
    }

    .waitlist-wrapper .waitlist-form {
        margin: 0 auto;
        padding: 3rem 5rem;
    }

    .waitlist-submit-btn {
        width: 100%;
        border-radius: 1rem;
        padding: 1.2rem 4rem;
    }

    .footer-wrapper .footer-link {
        gap: 2rem;
        margin: 2rem 0;
    }

    .footer-wrapper {
        padding: 0 1rem 15rem 1rem;
        color: white;
    }

    .paring-section .img-wrapper img {
        max-width: 60rem;

    }

    .custom-nav .navbar-nav {
        margin: 1.5rem 0;
        gap: .6rem;
    }

    .work-wrapper p {
        width: 100%;
    }

    .terms-bg::before,
    .terms-bg::after {
        display: none;
    }
}

@media (max-width: 450px) {
    html {
        font-size: 50%;
    }

    .work-container {

        background-image: none;
        background-repeat: no-repeat;
        background-position: left bottom;
    }

    .waitlist-wrapper .waitlist-form {
        margin: 0 auto;
        padding: 2rem 0;
    }

    .paring-section p,
    .testimony-section p {
        width: auto;
    }

    .paring-section .img-wrapper img {
        min-width: 20rem;
        max-width: 40rem;

    }

    .footer-wrapper .footer-btn {
        padding: 1.5rem 2rem;
    }
}

/* Preloader styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

#preloader p {
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    color: var(--dark)
}

#loader {
    width: 20rem;
}

.loaded #preloader {
    display: none;
}