*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:#14213d;
    background:#f7f9fc;
}

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

/* TOP BAR */
.top{
    background:#071a3d;
    color:white;
    padding:9px 5%;
    font-size:13px;
    display:flex;
    justify-content:space-between;
}

/* NAVBAR */
.nav{
    height:76px;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5%;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 4px 18px #00000012;
}

.logo{
    
    font-weight:800;
    color:#0c43a3;
}

.logo span{
    color:#e21b2d;
}

/* DESKTOP MENU */
.menu{
    display:flex;
    gap:20px;
    align-items:center;
    font-size:13px;
    font-weight:700;
}

.menu a:hover{
    color:#e21b2d;
}

.btn{
    background:#e21b2d;
    color:white !important;
    padding:12px 18px;
    border-radius:7px;
}

/* HAMBURGER */
.hamb{
    display:none;
    width:42px;
    height:42px;
    border-radius:7px;
    background:#071a3d;
    color:white;
    align-items:center;
    justify-content:center;
    font-size:25px;
    cursor:pointer;
    user-select:none;
}

/* MOBILE MENU */
.mobile-menu{
    display:none;
}

/* HERO */
.hero{
    position:relative;
    height:560px;
    overflow:hidden;
    background:#061b45;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .8s;
    /*display:grid;*/
    /*grid-template-columns:1.1fr .9fr;*/
    align-items:center;
   /* padding:55px 7%;
    color:white;*/
}

.slide.active{
    opacity:1;
}

.slide:nth-child(1){
    background:linear-gradient(
        110deg,
        #061b45 0%,
        #0a49a7 58%,
        #e21b2d 140%
    );
}

.slide:nth-child(2){
    background:linear-gradient(
        110deg,
        #061b45,
        #073b77
    );
}

.hero img{
    width:100%;
    /*max-height:450px;
    object-fit:contain;
    border-radius:18px;*/
}

.hero h1{
    font-size:52px;
    line-height:1.05;
    margin:0 0 18px;
}

.hero p{
    font-size:19px;
    line-height:1.6;
    max-width:600px;
    color:#eaf2ff;
}

.cta{
    display:inline-block;
    background:#fff;
    color:#0b3e91;
    padding:14px 24px;
    border-radius:8px;
    font-weight:800;
    margin-top:12px;
}

/* SLIDER DOTS */
.dots{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
}

.dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ffffff66;
    margin:4px;
}

.dot.on{
    background:white;
}

/* SECTION */
.section{
    padding:72px 7%;
}

.title{
    text-align:center;
    margin-bottom:42px;
}

.title h2{
    font-size:36px;
    margin:0 0 10px;
}

.title p{
    color:#64748b;
}

/* CARDS */
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.card{
    background:white;
    border-radius:16px;
    box-shadow:0 8px 28px #0b255014;
    overflow:hidden;
}

.card .pad{
    padding:22px;
}

.card img{
    width:100%;
    height:260px;
    object-fit:contain;
    background:#fff;
}

.tag{
    display:inline-block;
    background:#eaf2ff;
    color:#0c43a3;
    padding:7px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
}

/* ABOUT */
.about{
    background:#fff;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.about img{
    width:100%;
    max-height:430px;
    object-fit:contain;
}

.about h2{
    font-size:38px;
}

.about p{
    line-height:1.8;
    color:#56657a;
}

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

.feature{
    background:white;
    padding:28px;
    border-radius:14px;
    text-align:center;
    box-shadow:0 7px 24px #0b255012;
}

.feature b{
    display:block;
    font-size:18px;
    margin:12px;
}

.icon{
    font-size:34px;
}

/* VIDEO */
.video{
    background:#071a3d;
    color:white;
}

.video .title p{
    color:#b9c8df;
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.video-box{
    height:220px;
    background:linear-gradient(
        135deg,
        #123d79,
        #0c63c7
    );
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:50px;
}

/* DOWNLOAD */
.download{
    background:linear-gradient(
        100deg,
        #0b45a0,
        #071a3d
    );
    color:white;
    border-radius:20px;
    padding:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* FORM */
.form{
    max-width:820px;
    margin:auto;
    background:white;
    padding:32px;
    border-radius:16px;
    box-shadow:0 8px 30px #0b255015;
}

.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form input,
.form textarea{
    width:100%;
    padding:14px;
    border:1px solid #d7deea;
    border-radius:8px;
    margin-bottom:16px;
    font:inherit;
}

.form textarea{
    height:130px;
}

.form button{
    border:0;
    background:#e21b2d;
    color:white;
    padding:14px 26px;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer;
}

.note{
    font-size:12px;
    color:#7a8799;
    margin-top:10px;
}

/* FOOTER */
.footer{
    background:#04132e;
    color:#cbd5e1;
    padding:45px 7% 22px;
}

.footgrid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
}

.footer h3{
    color:white;
}

.copy{
    border-top:1px solid #ffffff1f;
    margin-top:30px;
    padding-top:18px;
    text-align:center;
    font-size:13px;
}

.hero2 {
            background: linear-gradient(110deg, #061b45, #0a49a7);
            color: #fff;
            padding: 65px 7%;
            text-align: center;
        }

        .hero2 h1 {
            font-size: 42px;
            margin: 0 0 10px;
        }

        .hero2 p {
            margin: 0;
            color: #dceaff;
        }

        .wrap {
            max-width: 1050px;
            margin: 45px auto;
            padding: 0 22px;
        }

        .intro {
            background: #fff;
            border-radius: 14px;
            padding: 24px 28px;
            box-shadow: 0 8px 28px #0b255012;
            margin-bottom: 24px;
        }

        .terms {
            counter-reset: item;
            display: grid;
            gap: 14px;
        }

        .term {
            background: #fff;
            border-radius: 12px;
            padding: 20px 24px;
            box-shadow: 0 5px 18px #0b255010;
            border-left: 4px solid #0c43a3;
        }

        .term b {
            color: #0c43a3;
        }

        .footer {
            background: #04132e;
            color: #cbd5e1;
            padding: 28px 7%;
            text-align: center;
            margin-top: 50px;
        }

        @media (max-width: 600px) {
            .logo {
                font-size: 19px;
            }

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

            .nav {
                padding: 16px 4%;
            }
        }


/* =========================================
   TABLET
========================================= */

@media(max-width:900px){

    .menu{
        display:none;
    }

    .hamb{
        display:flex;
    }

    /* MOBILE MENU PANEL */
    .mobile-menu{
        position:fixed;
        top:76px;
        right:-320px;
        width:300px;
        max-width:85%;
        height:calc(100vh - 76px);
        background:white;
        box-shadow:-5px 0 25px #00000020;
        z-index:999;
        display:flex;
        flex-direction:column;
        padding:25px 20px;
        gap:5px;
        overflow-y:auto;
        transition:right .35s ease;
    }

    .mobile-menu.open{
        right:0;
    }

    .mobile-menu a{
        padding:15px 12px;
        border-bottom:1px solid #edf0f5;
        font-size:14px;
        font-weight:700;
        color:#14213d;
    }

    .mobile-menu a:hover{
        color:#e21b2d;
        background:#f7f9fc;
    }

    .mobile-menu .mobile-login{
        background:#e21b2d;
        color:white;
        text-align:center;
        border-radius:7px;
        margin-top:10px;
        border:0;
    }

    /* OVERLAY */
    .menu-overlay{
        position:fixed;
        inset:0;
        background:#00000055;
        z-index:998;
        opacity:0;
        visibility:hidden;
        transition:.3s;
    }

    .menu-overlay.show{
        opacity:1;
        visibility:visible;
    }

    body.menu-open{
        overflow:hidden;
    }

    .hero{
        height:auto;
        min-height:650px;
    }

    .slide{
        grid-template-columns:1fr;
        position:absolute;
        padding:0px 0;
    }

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

    .slide img{
        max-height:300px;
    }

    .cards,
    .features,
    .video-grid{
        grid-template-columns:1fr 1fr;
    }

    .about{
        grid-template-columns:1fr;
    }

    .footgrid{
        grid-template-columns:1fr;
    }

    .download{
        display:block;
    }

    .row{
        grid-template-columns:1fr;
    }
}


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

@media(max-width:560px){

    .top{
        display:none;
    }

    .nav{
        height:66px;
        padding:0 5%;
    }

    .logo{
        font-size:21px;
    }

    .hamb{
        width:40px;
        height:40px;
        font-size:23px;
    }

    .mobile-menu{
        top:66px;
        height:calc(100vh - 66px);
        width:280px;
    }

    .cards,
    .features,
    .video-grid{
        grid-template-columns:1fr;
    }

    .hero{
        min-height:195px;
    }

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

    .hero p{
        font-size:16px;
    }

    .section{
        padding:55px 5%;
    }

    .title h2{
        font-size:30px;
    }

    .download{
        padding:28px 22px;
    }

    .form{
        padding:22px 18px;
    }

    .about h2{
        font-size:30px;
    }
}