/* Importing Google fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Wittgenstein:ital,wght@0,400..900;1,400..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Wittgenstein", serif;
}



:root {
    /* Colors */
    --orange-color: #FFBB62;
    --dark-color: #E48C53;
    --yellow-color: #FDCD92;
    --color-primary: #FFFBF5;
    --color-secondary: #470A0B;
    --color-footer: #00050B;

    /* Font size */
    --font-weight-s: 0.8 rem;
    --font-size-n: 1rem;
    --font-size-m: 1.5rem;
    --font-size-l: 1.875rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 3.125rem;

    /* Font weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    /* Border radius */
    --border-radius-s: 8px;
    --border-radius-m: 30px;
    --border-radius-circle: 50%;

    /* Site max width */
    --site-max-width: 1300px;
}

/* Stylings for whole site */ 
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

img {
    width: 100%;
}

.section-content {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    padding: 60px 0 100px;
    font-size: var(--font-size-xxl);
}

/* Navbar styling */
header {
    position: fixed;
    width: 100%;
    z-index: 5;
    background: var(--color-primary);
}

header .navbar {
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
}

header .navbar .nav-logo .logo-image {
    width: 40px;
}

.navbar .nav-logo .logo-text {
    color: var(--color-secondary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    vertical-align: middle;
    display: flex;
    align-items: center; 
    gap: 8px; 
}

/* Hero section styling */
.hero-section {
    min-height: 100vh;
    background: var(--color-primary);
}

.hero-section .section-content {
    display: flex;
    align-items: center;
    min-height: 100vh;
    color: var(--color-secondary);
    justify-content: space-between;
}

.hero-section .hero-details .title {
    font-size: var(--font-size-xxl);
    color: var(--orange-color);
    font-family: "Wittgenstein", serif;
    margin-bottom: 10px;
    
}

.hero-section .hero-details .subtitle {
    margin-top: 8px;
    width: 70%;
    font-family: "DM Sans", sans-serif;
    font-size: var(--font-size-l);
    color: var(--color-secondary);
    font-weight: var(--font-weight-bold)
}

.hero-section .hero-details {
    max-width: 70%;
    margin: 24px 0 20px;
    font-size: var(--font-size-m);
}

.hero-section .hero-details .app-store-badge {
    margin-top: 50px;
    width: 200px;
    height: 100px;
}

.hero-section .hero-image-wrapper img {
    margin-top: 10vh;
    width: 38vh;
    transform: rotate(12deg);
}


/* About Verses section styling */
.about-section {
    background: radial-gradient(circle,rgba(255, 255, 255, 0.01) 0%, rgba(255, 243, 222, 1) 25%, rgba(255, 243, 222, 1) 75%, rgba(255, 214, 141, 0.55) 100%);
    padding: 4rem;
}

.about-section .grid-container {
    display: grid;
    justify-content: center;
    grid-template-columns: 50% 50%;
    grid-template-rows: max-content;
    grid-template-areas: 
    "box-1 box-2"
}

.about-section .grid-container .section-header .section-title {
    color: var(--dark-color);
    max-width: 85%;
    padding: 0 2em 2em 2em;
    text-align: left;
}

.about-section .grid-container .description .text {
    font-family: "DM Sans", sans-serif;
    font-size: var(--font-size-m);
    color: var(--color-footer);
    font-weight: var(--font-weight-medium);
    max-width: 85%;
}

.about-section .grid-container .description .text strong {
    font-family: "DM Sans", sans-serif;
    font-size: var(--font-size-m);
    color: var(--color-footer);
    font-weight: var(--font-weight-bold);
}

.about-section .carousel {
    margin: 100px auto;
    width: 100%;
    display: flex;
    overflow-x: auto;
    justify-content: center;
}


/* App Features Section Styling*/

.appfeature-section {
    display: flex;
    min-height: 100vh;
    padding: 0 0 4rem 0;   
}

.appfeature-section .square-box {
    width: 160vh;  
    height: 60vh;
    border-radius: 50px; 
    position: fixed;
    bottom: 10%;
    left: 10%;
    z-index: -2;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, rgba(255, 253, 249, 1) 25%, rgba(255, 243, 222, 0.88) 75%, rgba(255, 214, 141, 0.4) 100%);
}

.appfeature-section .section-content .section-title{
    color: var(--orange-color);
}

.section-content .img-group h3{
    font-family: "DM Sans", sans-serif;
    font-size: var(--font-size-m);
    color: var(--color-secondary);
    font-weight: var(--font-weight-semi-bold)
    
}

.section-content .img-group p{
    max-width: 30%;
    font-family: "DM Sans", sans-serif;
    font-size: var(--font-size-s);
    color: var(--color-secondary);
    font-weight: var(--font-weight-regular);
    text-align: justify;
    text-align-last: left;
    text-justify: auto;
}

.appfeature-section .img-group img {
    width: 20%;
    height: 50%;
    margin: 0 auto;
}

/* CTA section styling */

.cta-section {
    min-height: 20vh;
    background: var(--yellow-color);
    background-image: url("CTALeaves.PNG");
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    align-items: center;
    padding: 8rem 0;
}

.cta-section .section-content {
    text-align: center;
    justify-content: center;
    display: block;
    margin: auto;
}

.cta-section .section-content .title {
    font-size: var(--font-size-xxl);
    color: var(--color-primary);
    font-family: "Wittgenstein", serif;
    margin-bottom: 30px;
    margin-top: 0;
}

.cta-section .section-content img {
    width: 12vw;
}

.cta-section .section-content .cta-button {
    font-family: DM Sans, sans-serif;
    font-weight: var(--font-weight-extra-bold);
    font-size: var(--font-size-l);
}

.cta-section .section-content .cta-button {
    padding: 12px 100px;
    background: radial-gradient(circle,rgba(255, 255, 255, 0.01) 0%, rgba(255, 243, 222, 1) 25%, rgba(255, 243, 222, 1) 75%, rgba(255, 214, 141, 0.55) 100%);
    font-weight: var(--font-weight-medium);
    border: 2px solid transparent;
    border-radius: var(--border-radius-m);
    color: var(--color-footer)
}

.cta-section .section-content .cta-button:hover {
    border-color: var(--yellow-color);
}

/* Footer section styling */
.footer-section {
    padding: 40px 0;
    background: var(--color-footer);
}

.footer-section .section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-section :where(.copyright-text, .social-link, .policy-link) {
    color: var(--color-primary); 
    transform: 0.2s ease;
    font-family: "DM Sans", sans-serif;
    font-weight: bold;
}

.footer-section .social-link-list {
    display: flex;
    gap: 25px;
}

.footer-section .social-link-list .social-link {
    font-size: var(--font-size-l);
}

.footer-section .social-link-list .social-link:hover {
    color: var(--orange-color);
}

.footer-section .section-content .copyright-text .footer-logo {
    width: 28px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

/* Responsive media query code for max width 900px */
@media screen and (max-width: 900px) {
        :root {
            --font-size-m: 1rem;
            --font-size-l: 1.3rem;
            --font-size-xl: 1.5rem;
            --font-size-xxl: 1.8rem;
        }

        .hero-section .section-content {
            text-align: center;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
        }

        .hero-section .hero-details :is(.title) .about-section .about.details {
            max-width: 100%;
            margin-top: 1rem;
        }

        .hero-section .hero-details .subtitle {
            margin: 0 auto;
            text-align: center;
        }

        .hero-section .hero-details .buttons {
            justify-content: center;
        }

        .hero-section .hero-image-wrapper {
            margin-right: 0;
            padding: 0;
        }

        .about-section .section-content {
            flex-direction: column;
            gap: 70px;
        }

        .about-section .about-image-wrapper .about-image {
            width: 100%;
            height: 100%;
            max-width: 250px;
            aspect-ratio: 1;
        }

        .footer-section .section-content {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }   
}