/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter,sans-serif;
    overflow-x:hidden;
    background:#000;
}

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

ul{
    list-style:none;
}

img{
    display:block;
    max-width:100%;
}

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

.container{

    width:100%;
    max-width:1700px;
    margin:auto;
    padding:0 56px;

}

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

/* ==========================
   BACKGROUND IMAGE
========================== */

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

/* ==========================
   LEFT DARK OVERLAY
========================== */

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.97) 0%,
        rgba(0,0,0,.94) 25%,
        rgba(0,0,0,.75) 50%,
        rgba(0,0,0,.35) 75%,
        rgba(0,0,0,0) 100%
    );
}

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

.header{

    position:absolute;

    width:100%;

    top:0;

    left:0;

    z-index:20;

    border-bottom:1px solid rgba(255,255,255,.20);

}

.navbar{

    height:92px;

    display:flex;

    justify-content:space-between;

    align-items:center;
    gap: 40px;

}

.logo{
     font-size:34px;
    letter-spacing:2px;

    color:#fff;

    font-size:42px;

    font-weight:700;

    letter-spacing:3px;

}

.nav-menu{
    gap:48px;


    display:flex;

    gap:54px;

}

.nav-menu a{

    color:#fff;

    font-size:18px;

    font-weight:500;

}

.nav-btn{
    height:56px;

    background:#0B6BFF;

    color:#fff;

    padding:0 28px;

    border-radius:10px;

    font-weight:600;

}

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

.hero-content{
    position:relative;
    z-index:10;

    height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    width:540px;

    margin-left:30px;
}

.hero-content h1{

    font-size:82px;

    font-weight:300;

    line-height:0.96;

    letter-spacing:-3px;

    margin-bottom:52px;

    color:#fff;

}

.hero-content p{

    max-width:460px;
    font-weight:400;

    font-size:18px;

    line-height:1.55;

    color:#fff;

    margin-bottom:42px;

}
.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:170px;

    height:58px;
    margin-bottom:30px;

    background:#0B6BFF;

    border-radius:10px;

    font-size:20px;

    font-weight:600;

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1200px){

.hero-content h1{

font-size:72px;

}

.hero-content p{

font-size:24px;

}

}

@media(max-width:991px){

.nav-menu{

display:none;

}

.hero-content{
 justify-content:flex-start;
    padding-top:190px;
max-width:100%;

}

.hero-content h1{

 justify-content:flex-start;
    padding-top:190px;

}

.hero-content p{

font-size:20px;

}

}

@media(max-width:576px){

.container{

padding:0 24px;

}

.navbar{

height:90px;

}

.nav-btn{

display:none;

}

.logo{

font-size:30px;

}

.hero-content h1{

font-size:46px;

}

.hero-content p{

font-size:18px;

}

.hero-btn{

padding:16px 30px;

font-size:18px;

}

}


/*=========================================================
                    OUR VISION
=========================================================*/

.vision{
    background:#ffffff;
    padding:140px 0 145px;
}

.vision .container{
    max-width:1280px;
    margin:0 auto;
    padding:0 60px;
}

/*=========================================================
                    TOP AREA
=========================================================*/

.vision-top{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:110px;
    margin-bottom:120px;
}

.vision-image{
    flex:0 0 370px;
}

.vision-image img{
    width:370px;
    height:370px;
    object-fit:cover;
    border-radius:28px;
    display:block;
}

.vision-content{
    flex:1;
    max-width:760px;
}

.vision-content h2{
    font-size:60px;
    font-weight:300;
    color:#12264B;
    line-height:1.05;
    letter-spacing:-1.6px;
    margin:0 0 42px;
}

.vision-content p{
    font-size:21px;
    font-weight:400;
    color:#444;
    line-height:1.75;
    max-width:760px;
    margin:0;
}

/*=========================================================
                    FEATURES
=========================================================*/

.vision-features{

    display:grid;

    grid-template-columns:330px 330px 330px;

    justify-content:space-between;

    row-gap:90px;

    margin-top:15px;

}

.feature-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.feature-card img{

    width:54px;

    height:54px;

    margin-bottom:30px;

}

.feature-card h3{

    font-size:28px;

    font-weight:300;

    color:#12264B;

    line-height:1.18;

    letter-spacing:-0.6px;

    margin:0 0 24px;

}

.feature-card p{

    font-size:18px;

    line-height:1.75;

    color:#555;

    margin:0;

    max-width:290px;

}

/*=========================================================
                    RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.vision .container{
padding:0 40px;
}

.vision-features{
grid-template-columns:repeat(2,1fr);
column-gap:60px;
}

}

@media(max-width:991px){

.vision{
padding:90px 0;
}

.vision-top{
flex-direction:column;
align-items:flex-start;
gap:50px;
margin-bottom:80px;
}

.vision-image{
flex:none;
}

.vision-image img{
width:100%;
max-width:390px;
height:auto;
}

.vision-content{
max-width:100%;
}

.vision-content h2{
font-size:46px;
margin-bottom:24px;
}

.vision-content p{
font-size:18px;
}

.vision-features{
grid-template-columns:1fr;
row-gap:60px;
}

.feature-card p{
max-width:100%;
}

}