:root{

    --primary:#0F766E;

    --primary-dark:#065F46;

    --bg:#F5F7F4;

    --card:#FFFFFF;

    --text:#1F2937;

}

body{

    background:
    radial-gradient(circle at top right,
    rgba(15,118,110,.10),
    transparent 30%),

    radial-gradient(circle at bottom left,
    rgba(22,163,74,.08),
    transparent 25%),

    var(--bg);

    color:var(--text);

}

/* =======================
        NAVBAR
======================= */

.navbar{

    padding:25px 0;

}

.logo-white{

    color:#1F2937;

    font-size:30px;

}

.logo-purple{

    color:var(--primary);

    font-size:30px;

}

.nav-link{

    color:#6B7280;

    margin:0 14px;

    transition:.3s;

}

.nav-link:hover{

    color:var(--primary);

}
/* ======================
        HERO
====================== */

.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

}

.hero-content h1{

    font-size:70px;

    font-weight:700;

    line-height:1.15;

    margin-top:20px;

    color:#1F2937;

}

.hero-content span{

    color:#0F766E;

}

.hero-content p{

    margin-top:25px;

    color:#6B7280;

    font-size:18px;

    line-height:1.8;

}

.hero-tag{

    display:inline-block;

    background:rgba(15,118,110,.10);

    color:#0F766E;

    padding:10px 18px;

    border-radius:30px;

}

.hero-buttons{

    margin-top:40px;

}

.btn-start{

    background:#0F766E;

    color:white;

    padding:14px 35px;

    border-radius:15px;

    margin-right:20px;

}

.btn-start:hover{

    background:#065F46;

    color:white;

}

.btn-explore{

    border:2px solid #0F766E;

    color:#0F766E;

    padding:14px 35px;

    border-radius:15px;

}

.btn-explore:hover{

    background:#0F766E;

    color:white;

}

.hero-globe{

    width:600px;

    animation:float 6s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}