/*
Theme Name: MentalEvo
Theme URI: https://mentalevo.example.com/
Author: Your Name
Author URI: https://yourwebsite.example.com/
Description: Custom theme based on the MentalEvo landing page design
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mentalevo
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Tilt+Warp&display=swap');

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

:root {
    --primary-blue: #3F6FB9;
    --light-blue: #F4F9FF;
    --white: #FFFFFF;
    --black: #000000;
    --light-blue-bg: #DDEDFF;
    --card-stroke: #D2E7FF;
    --dot-inactive: #D9D9D9;
    --dot-active: #9BA3AC;
    --hr-color: #E4E8EC;

    --gradient-blue: linear-gradient(90deg, rgba(221, 237, 255, 0.9) 13%, rgba(221, 237, 255, 0.7) 56%, rgba(191, 180, 165, 0.8) 98%);
    --feature-overlay: linear-gradient(90deg, rgba(221, 237, 255, 0.9) 13.38%, rgba(221, 237, 255, 0.7) 56.22%, rgba(58, 55, 50, 0.8) 98.21%);
    --benefit-overlay: linear-gradient(90deg, #DDEDFF 13.38%, rgba(221, 237, 255, 0.8) 100%);
    --hero-bg: linear-gradient(-49deg, rgba(226, 246, 221, 1) 0%, rgba(198, 225, 248, 1) 66%, rgba(166, 201, 253, 1) 100%);

    --heading-large: 48px;
    --heading-medium: 40px;
    --heading-small: 24px;
    --text-large: 32px;
    --text-medium: 24px;
    --text-small: 20px;

    --section-spacing: 80px;
    --card-spacing: 35px;
    --border-radius-lg: 25px;
    --border-radius-md: 20px;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: var(--black);
    background-color: var(--white);
}

button {
    font-family: inherit;
}

.flex-start {
    display: flex;
    align-items: start;
}

.justify-end {
    display: flex;
    justify-content: end;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.w-full {
    width: 100%;
}

.absolute {
    position: absolute;
}

.left-0 {
    left: 0;
}

.pl-20 {
    padding-left: 20px;
}
    
.mt-20 {
    margin-top: 20px;
}

.mt-5 {
    margin-top: 10px;
}

.pt-40 {
    padding-top: 40px;
}

.pr-40 {
    padding-right: 40px;
}

.pl-40 {
    padding-left: 40px;
}

.mb-5 {
    margin-bottom: 5px;
}