/* =========================
ROOT
========================= */
@import url("variables.css");
@import url("reset.css");
@import url("typography.css");
@import url("header.css");
:root{

--primary:#2563EB;
--secondary:#7C3AED;
--accent:#06B6D4;

--dark:#0F172A;
--heading:#111827;
--text:#64748B;

--white:#fff;
--light:#F8FAFC;
--border:#E5E7EB;

--radius:24px;

--shadow:
0 20px 60px rgba(15,23,42,.08);

}

/* =========================
RESET
========================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Inter',sans-serif;

color:var(--text);

background:#fff;

overflow-x:hidden;

}

h1,h2,h3,h4,h5{

font-family:'Space Grotesk',sans-serif;

color:var(--heading);

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

/* =========================
CONTAINER
========================= */

.container{

max-width:1380px;

}

/*==================================
HEADER
==================================*/

.tt-header{

    position:fixed;

    top:20px;

    left:0;

    width:100%;

    z-index:9999;

    transition:.4s;

}

.tt-navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:82px;

    padding:0 30px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border-radius:22px;

    position:relative;

}

.tt-mega-dropdown:hover .tt-mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0) scale(1);

}

.tt-mega-menu{

    transform-origin:top center;

    transform:translateX(-50%) translateY(20px) scale(.96);

}

.tt-mega-grid a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 16px;

    border-radius:12px;

    transition:.3s;

    color:var(--text);

}

.tt-mega-grid a::after{

    content:"→";

    opacity:0;

    transform:translateX(-8px);

    transition:.3s;

}

.tt-mega-grid a:hover{

    background:#F8FAFC;

    color:var(--primary);

}

.tt-mega-card{

    border-radius:22px;

    padding:35px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #4F46E5,
        #7C3AED
    );

    color:#fff;

    position:relative;

    overflow:hidden;

}

.tt-mega-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-80px;

    top:-80px;

}

.tt-mega-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    left:-40px;

    bottom:-40px;

}

.tt-menu{

display:flex;

gap:40px;

align-items:center;

}

.tt-menu a{

font-weight:600;

color:var(--heading);

transition:.3s;

}

.tt-menu a:hover{

color:var(--primary);

}

    .tt-logo img{

        width:150px;

        height:auto;

    }

.tt-btn{

height:54px;

display:flex;

align-items:center;

padding:0 28px;

border-radius:999px;

background:linear-gradient(90deg,#2563EB,#7C3AED);

color:#fff;

font-weight:600;

}

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

.tt-hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:140px;

background:

radial-gradient(circle at top right,#dbeafe 0%,transparent 40%),

radial-gradient(circle at bottom left,#ede9fe 0%,transparent 40%),

#fff;

}

/*==================================
MOBILE MENU
==================================*/

.tt-menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    gap:6px;

}

.tt-menu-toggle span{

    width:28px;

    height:3px;

    background:#111827;

    border-radius:20px;

    transition:.35s;

}

.tt-mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:360px;

    max-width:100%;

    height:100vh;

    background:#fff;

    z-index:99999;

    padding:30px;

    transition:.45s;

    overflow-y:auto;

}

.tt-mobile-menu.active{

    right:0;

}

.tt-mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}

.tt-close-menu{

    border:none;

    background:none;

    font-size:26px;

    cursor:pointer;

}

.tt-mobile-menu ul{

    list-style:none;

    margin:0;

    padding:0;

}

.tt-mobile-menu li{

    margin-bottom:12px;

}

.tt-mobile-menu a,

.tt-mobile-dropdown button{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border:none;

    background:none;

    font-size:18px;

    cursor:pointer;

}

.tt-mobile-submenu{

    display:none;

    padding-left:20px;

}

.tt-mobile-submenu a{

    padding:12px 0;

    font-size:16px;

}

.tt-mobile-submenu.active{

    display:block;

}

.tt-mobile-menu .tt-btn{

    margin-top:40px;

    width:100%;

    justify-content:center;

}

.tt-mobile-dropdown button i{

    transition:.3s;

}

.tt-mobile-dropdown button.active i{

    transform:rotate(180deg);

}

@media(max-width:991px){

.tt-nav,

.tt-nav-right{

display:none;

}

.tt-menu-toggle{

display:flex;

}

}
/*=============================
Mobile Header
=============================*/

@media (max-width: 991px){

    .tt-nav{

        display:none !important;

    }

    .tt-nav-right{

        display:none !important;

    }

    .tt-menu-toggle{

        display:flex !important;

    }

    .tt-navbar{

        height:70px;

        padding:0 20px;

    }

    .tt-logo img{

        width:150px;

        height:auto;

    }

}

.tt-nav{

    display:flex;

    align-items:center;

    gap:34px;

    margin:0;

    padding:0;

    list-style:none;

    flex:1;

    justify-content:center;

}
.tt-nav-right{

    flex-shrink:0;

}

.tt-menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:none;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    padding:0;

}

.tt-menu-toggle span{

    width:28px;

    height:3px;

    background:#111827;

    border-radius:20px;

    transition:.35s;

}
@media(max-width:991px){

.tt-nav{

display:none;

}

.tt-nav-right{

display:none;

}

.tt-menu-toggle{

display:flex;

}

.tt-navbar{

height:72px;

padding:0 20px;

}

}

.tt-mobile-menu{

position:fixed;

top:0;

right:-100%;

width:360px;

max-width:100%;

height:100vh;

background:#fff;

z-index:99999;

transition:.4s;

padding:35px;

overflow-y:auto;

box-shadow:-20px 0 60px rgba(0,0,0,.12);

}

.tt-mobile-menu.active{

right:0;

}