/*==================================================
    SEGURIDAD247
==================================================*/

:root{

    --primary:#0056d6;
    --secondary:#111827;
    --success:#25D366;
    --light:#f8fafc;
    --gray:#6b7280;
    --border:#e5e7eb;

}

/*==================================================
    GENERAL
==================================================*/

*{

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

}

body{

    font-family:'Inter',sans-serif;
    color:var(--secondary);
    background:#ffffff;
    line-height:1.7;

}

a{

    text-decoration:none;
    transition:.25s;

}

img{

    max-width:100%;
    display:block;

}

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

.navbar{

    background:#ffffff;
    padding:18px 0;
    border-bottom:1px solid var(--border);
    transition:.30s;

}

.navbar-brand img{

    height:46px;

}

.navbar-nav .nav-link{

    color:#222;
    font-size:15px;
    font-weight:600;
    padding:0 18px;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}

/*==================================================
    BOTON
==================================================*/

.btn-success{

    background:var(--success);
    border:none;
    border-radius:50px;
    padding:12px 30px;
    font-weight:700;

}

.btn-success:hover{

    background:#1db954;

}

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

.hero{

    padding:120px 0;

}

.hero h1{

    font-size:58px;
    font-weight:800;
    line-height:1.1;

}

.hero p{

    color:var(--gray);
    font-size:20px;
    margin:25px 0;

}

.btn-primary{

    background:var(--primary);
    border:none;
    border-radius:50px;
    padding:15px 40px;
    font-weight:700;

}

.btn-primary:hover{

    background:#0048b3;

}

/*==================================================
    FOOTER
==================================================*/

footer{

    background:#111827;
    color:#ffffff;
    padding:50px 0;

}

footer a{

    color:#ffffff;

}

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

@media(max-width:992px){

.hero{

padding:80px 0;

}

.hero h1{

font-size:38px;

}

.navbar-nav{

text-align:center;

}

.btn-success{

margin-top:20px;

}

}