/*
Important colors:
#3a8f6a - green main color theme
#f2f1ef - light grey background for body
#faf9f7 - alternative for body, white
#ffffff - white for nav background
#555 - dark grey text to make it more interesting than black
#959595 - grey background for hero image placeholder


*/

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    background: #faf9f7;
}

nav {
    position: sticky;
    top: 0;
    /* We need top right and left for sticky to work */
    right: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #3a8f6a;
    padding: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    margin-left: 0.5rem;
    font-family: 'Cormorant Garamond', serif;
    /* Main font for logo, this is a very important font */
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #ffffff;
}

.nav-sections {
    display: none;
}

.book-button {
    font-size: 1rem;
    font-family: Georgia, serif;
    font-weight: 500;
    border-radius: 999px;
    padding: 0.75rem;
    background: #faf9f7;
    color: #3a8f6a;
}

.home-section {
    display: flex;
    /**width: 100%; removing width removed the overflow (cool emoji)**/
    gap: 2rem;
    padding: 1rem;
    align-items: center;
    background: #3a8f6a;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

/*By having flex: 1 for this and the hero-text, they will both take up equal space in hero-section*/
/* Add min-width: 0; cuz otherwise min-width is automatically set to auto which messes up the horizontal overflow and causes issues */

.hero-text {
    padding: 1rem;
}

.hero-text h1 {
    font-family: Georgia, serif;
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 400;
    color: #fff;
    margin: 0 0 1.25rem
}

.hero-text p {
    font-size: 1.1rem;
    padding-bottom: 1rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin: 0 0 2rem;
}

.hero-text .opener {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Roboto Mono', monospace;
}

.hero-button {
    margin: 2rem 0;
    font-size: 1.2rem;
}

.start-your-journey-btn {
    border-radius: 25px;
    padding: 1rem 1.5rem;
    background: #fff;
    color: #3a8f6a;
}

.hero-image {
    display: none;
}

.section-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    font-weight: 500;
    color: #3a8f6a;
    font-family: 'Roboto Mono', monospace;
    align-self: flex-start;
}

.section-title {
    font-family: Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.2;
    align-self: flex-start;
}


.section-title span {
    color: #3a8f6a;

}

.section-description {
    color: #555;
    font-size: 1rem;

}

.about-section {
    display: flex;
    padding: 1.5rem;
    padding-top: 2rem;
    gap: 3rem;
    background: #ffffff;
    flex-direction: column;
}

.about-me-intro {
    display: flex;
    flex-direction: column;
    /* Align-items is used for horizontal when flex-direction is column*/
    gap: 2rem;
}

.about-me-picture {
    display: none;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

}

.feature-card {
    background: #eef5f1;
    border-radius: 16px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: rgba(58, 143, 106, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.feature-card h3 {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a1a1a;
}

.feature-card p {
    font-size: 0.78rem;
    color: #666;
    margin: 0;
    line-height: 1.45;
}

.services-section {
    display: flex;
    flex-direction: column;
    background: #eef5f1;
    padding: 2rem 1.5rem;
    gap: 2rem;
}

.intro-section,
.services-grid {
    flex: 1;
    min-width: 0;
}

.services-intro {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.services-grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

.service-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 25px;
    gap: 1rem;
    box-shadow: 0 15px 40px rgba(58, 143, 106, 0.1);
}

.service-icon {
    display: flex;
    flex-direction: row;
    font-family: Georgia, serif;
    font-size: 0.95rem;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 25px 25px 0 0;
    color: #fff;
    background: #3A8F6A;
}

.service-card p {
    padding: 0 1rem;
}

.service-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 1rem 1rem;
    color: #3A8F6A;
}

.service-card li {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-card li::before {
    content: "✓";
    color: #3A8F6A;
    font-weight: bold;
}

.whats-included-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.included-box {
    background: #FFFFFF;
    border: 0.5px solid #d5e5dc;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 30px rgba(58, 143, 106, 0.08);
}

.included-box h2 {
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.75rem;
    align-self: center;
}

.included-box ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.included-box li {
    font-size: 0.9rem;
    color: #3a8f6a;
    margin: 0;
    display: flex;
    gap: 0.75rem;
}

.included-box li::before {
    content: "✓";
    color: #3A8F6A;
    font-weight: bold;
}

.testimonials-section {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 2rem;
    background: #3a8f6a;
}

.testimonials-section .section-label {
    color: rgba(255, 255, 255, 0.6)
}

.testimonials-section .section-title {
    color: #ffffff;
}

.testimonials-section .section-description {
    color: rgba(255, 255, 255, 0.65)
}

.testimonials-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.testimonials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.12);
    display: block;
    padding: 2rem;
    border-radius: 20px;
    border: 0.5px solid rgba(255, 255, 255, 0.18)
}

.testimonial-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;

}

.client-name {
    font-size: 1.3rem;
    color: #ffffff;
    padding-bottom: 0.5rem;
}

.client-goal {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.718);
}

.rating {
    font-size: 2rem;
    color: #f5b400;
    /* gold */
}

.testimonial-body {
    margin-top: 1.2rem;
}

.testimonial-text {
    font-size: 1.2rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    padding-left: 1rem;
    font-style: italic;
}

.testimonial-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid #eee;
}

.testimonial-result {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Cinzel', serif;
}

.carousel-btn {
    display: none;
    /* Show it on desktop only */
}

.contact-section {
    display: flex;
    flex-direction: column;
    background: #1f5c42;
    padding: 4rem 1.5rem;
    gap: 2rem;
}

.contact-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    color: #ffffff;
}

.contact-intro h2 {
    font-family: Georgia, serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
}

.contact-intro p {
    font-size: 1.2rem;
    opacity: 0.9;

}

.contact-me {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.whatsapp-btn {
    display: inline-block;
    background: #25D366;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    background: #1ca64f;
    color: white;
}


/*   Notes: 

Use vw and vh when you want an element's size to be directly proportional to the size of the user's screen.
Use rem when you want an element's size to scale according to the user's accessibility settings and the overall typography of your design. 

*/




/* ------------------------------------------------ Optimizing for diff devices, using a mobile-first approach --------------------------------------------------------------*/


@media (min-width: 1025px) {

    nav {
        padding: 0.75rem;
        font-size: 1.05rem;
    }

    .logo {
        margin-left: 2rem;
        font-size: 2.3rem;
    }

    .nav-sections {
        display: flex;
        font-family: Georgia, serif;
        gap: 3rem;
        color: #ffffff;
        /* Was 555 b4*/
    }

    .book-button {
        font-size: 1.2rem;
        transition: 0.2s ease;

    }

    .book-button:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }

    .hero-text {
        padding: 2rem;
    }

    .hero-text h1 {
        font-size: 3.5rem;
        line-height: 1.1;
    }

    .hero-text p {
        font-size: 1.3rem;
    }

    .start-your-journey-btn {
        transition: 0.2s ease;
    }

    .start-your-journey-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }

    .hero-image {
        display: flex;
        border-radius: 25px;
        padding: 0.75rem;
        background: #adadad;
        justify-content: center;
        align-items: center;
        flex: 1.3;
    }

    .hero-image img {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 20px;
        object-fit: cover;
    }

    .hero-container,
    .hero-image {
        /* We want the picture to be slightly wider than the text so flex is set to 1.3 in .hero-image */
        flex: 1;
        min-width: 0;
    }

    .section-label {
        align-self: center;
    }

    .section-title {
        font-size: 2.8rem;
        line-height: 1.15;
        align-self: center;
    }

    .about-section .section-title {
        align-self: flex-start;
    }

    .section-description {
        color: #555;
        font-size: 1.1rem;
    }

    .about-section {
        flex-direction: row;
        padding: 4rem;
    }

    .about-me-picture {
        display: flex;
        border: 2px solid black;
        border-radius: 25px;
        justify-content: center;
        align-items: center;
    }

    .about-me-picture,
    .about-me-intro {
        flex: 1;
        min-width: 0;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;

    }

    .feature-card {
        box-shadow: none;
        gap: 0.5rem;

    }

    .feature-card h3 {
        font-size: 1.2rem;
    }

    .feature-card p {
        font-size: 1rem;
    }

    .services-section {
        padding: 4rem;
        gap: 4rem;
    }

    .services-intro {
        gap: 1.5rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .included-box {
        padding: 2.5rem 6rem;
    }

    .included-box h2 {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;

    }

    .included-box li {
        font-size: 1.2rem;
    }

    .testimonials-section {
        padding-bottom: 5rem;
    }

    .testimonials {
        flex-direction: row;
    }

    .testimonial-card {
        display: none;
        opacity: 0;
        transition: opacity 4s ease;
        width: 70%;
    }

    .testimonial-card.active {

        /* This means that only elements that have both classes at the same time should be shown.*/

        display: block;
        opacity: 1;
    }

    .carousel-btn {
        display: block;
        font-size: 2rem;
        font-weight: 100;
        border: none;
        background: white;
        color: #3A8F6A;
        border-radius: 50%;
        cursor: pointer;
        width: 4rem;
        height: 4rem;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.25s ease;
    }

    .carousel-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        background: #3A8F6A;
        color: white;
    }

    .contact-intro h2 {
        font-size: 2.5rem;
    }

    .contact-intro p {
        font-size: 1.3rem;
    }

    .whatsapp-btn {
        font-size: 1.5rem;
    }


}