:root {
    --primary-dark: #7355b0;
    --hero: #6973da;
    --accent: #f1c086;
    --accent-dark: #e3ad6d;
    --accent-light: #FF9800;
    --text-dark: #1f2933;
    --text-light: #5f6c7b;
    --bg-light: #f7f8fc;
    --border: #e5e7eb;
    --marks: #279427;    
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background-color: #ffffff;
}

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

button.lang-btn {
    color: var(--accent-dark);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.shadow-large-black {
    box-shadow: 0 10px 30px 0 rgba(49, 52, 57, .3), 0 10px 30px rgba(0, 0, 0, .08);
}

/* FONT AWESOME */
i.fa.icon {
    margin-bottom: 25px;
}

i.fa.icon.reverse.large {
    font-size: 3.5rem;
}

.button.color1, button.color1, i.fa.icon.reverse.color1 {
    background-color: #03a9f4;
}

i.fa.icon.reverse {
    color: #fff;
    background-color: #03a9f4;
    padding: .5em;
    font-size: 1.8rem;
    width: 2.142857146875em;
    height: 2.142857146875em;
    line-height: 1.205357146875em;
}

i.fa.icon.round, img.round {
    border-radius: 100%;
}

/* NAVIGATION BAR */
.navbar-nav li.nav-item {
    margin-left : 15px;
}

.navbar {
    background-color: var(--primary-dark);
    border-bottom: 2px solid var(--accent-light);
}

.navbar-brand { color: white !important; }
a.nav-link { color : white !important; }
a.nav-link:hover { color : var(--accent) !important; }

hr {
    margin: 15px 35%;
    border-color: var(--accent-light) !important;
}

/* HERO */
.hero {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff, var(--bg-light));
}

.hero img { width: 500px; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 200px;
    align-items: center;
}

.hero h1 {
    line-height: 1.2;
    margin-bottom: 16px;
}

.hero p {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 32px;
}

.cta {
    display: inline-block;
    background-color: var(--accent-dark);
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.cta:hover {
    background-color: var(--accent-light);
    color: #fff;
}

.cta-note {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-light);
}

.hero-image {
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 24px;
    text-align: center;
    color: var(--text-light);
}

/* SECTIONS */
section {
    padding: 25px 0;
}

section h2 {
    font-size: 25px;
    margin-bottom: 15px;
    text-align: center;
}

section p.section-intro {
    max-width: 700px;
    margin: 0 auto 28px;
    text-align: center;
    color: var(--text-light);
    font-size: 18px;
}

/* PROBLEM */
.problems {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.problem {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: #fff;
}

.problem h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

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

/* FEATURES */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.feature {
    padding: 24px;
}

.feature h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

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

/* AUDIENCE */
section.audience { text-align: center; }

.audience-list {
    max-width: 700px;
    margin: 0 auto;
    display: inline-block;
    text-align: left;
}

.audience-list li {
    list-style: none;
    padding: 12px 0;
    font-size: 18px;
}

.audience-list li::before {
    content: "✓";
    color: var(--marks);
    font-weight: bold;
    margin-right: 12px;
}

/* SOLUTION */
.container.solution {
    margin-top: 50px;
}

/* FINAL CTA */
.final-cta {
    text-align: center;
    background: linear-gradient(180deg, var(--bg-light), #ffffff);
}

.final-cta .container { margin-top: 15px; }

/* TOOLS */
.tools-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.tools-items .tool-item
{
    margin: 25px;
    text-align: center;
    color: var(--text-light);
    font-size: 18px;
}

/* ABOUT ME */
section.about-me h2 { margin-top : 25px; }
section.about-me h6 { margin-top : 15px; }
section.about-me .image img
{
    width: 25em;
    border-radius: 8em;
}

footer {
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-light);
}

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    .hero 
    { 
        text-align: center; 
        padding-bottom: 40px;
    }
    .hero-grid 
    { 
        grid-template-columns: 1fr; 
        gap : 10px;
    }
    section h2 { margin-bottom: 45px; }
    .problems,
    .features { grid-template-columns: 1fr; }
    .feature 
    { 
        padding: 0; 
        margin-bottom: 20px;
    }

    .hero h1 { font-size: 25px; }

    .hero img { width: 300px; }
    section.about-me .image img { width: 20em; }

    .tools-items {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

}