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

.services-hero{

    position: relative;

    height: 560px;

    overflow: hidden;

    display: flex;

    align-items: center;

}

.services-hero-bg{

    position: absolute;

    inset: 0;

}

.services-hero-bg img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.services-hero-overlay{

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.68) 0%,
        rgba(0,0,0,.52) 45%,
        rgba(0,0,0,.28) 100%
    );

}

.services-hero .container{

    position: relative;

    z-index: 2;

}

.services-hero-content{

    max-width: 720px;

    color: #ffffff;

}

.services-hero-tag{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 22px;

    margin-bottom: 18px;

    border-radius: 100px;

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

    border: 1px solid rgba(255,255,255,.22);

    color: #ffffff;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .12em;

}

.services-hero-content h1{

    font-size: 3.2rem;

    line-height: 1.05;

    margin-bottom: 18px;

    font-weight: 800;

    color: #ffffff;

}

.services-hero-content p{

    max-width: 640px;

    font-size: 1.08rem;

    line-height: 1.7;

    color: rgba(255,255,255,.90);

}

/* =========================================================
   SERVICE BLOCKS
========================================================= */

.services-page-content{

    padding: 90px 0;

    background: #f5f7fa;

}

/* BLOCK */

.service-block{

    display: grid;

    grid-template-columns: 520px 1fr;

    align-items: center;

    gap: 70px;

    margin-bottom: 110px;

}

/* IMAGE */

.service-block-image{

    width: 100%;

    padding-left: 48px;

    height: 420px;

    border-radius:10px;

    overflow: hidden;

    position: relative;

    box-shadow:
    0 18px 45px rgba(0,0,0,.12);

}

.service-block-image img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

/* CONTENT */

.service-block-content{

    max-width: 620px;
    display:flex;
    flex-direction:column;

}

.service-badge{

    display:inline-flex;

    align-items:center;
    align-self: flex-start;

    justify-content:center;

    padding:12px 38px;

    border-radius:100px;

    background:
    rgba(0,43,91,.06);

    border:
    1px solid rgba(0,43,91,.12);

    color:#002b5b;

    font-size:.82rem;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

    margin-top:32px;

    margin-bottom:22px;

}

/* SMALL TITLE */

.service-anchor-title{

    display: inline-block;

    margin-bottom: 18px;

    font-size: .92rem;

    font-weight: 800;

    letter-spacing: .14em;

    color: var(--primary);

}

/* H2 */

.service-block-content h2{

    font-size: 2.4rem;

    line-height: 1.05;

    margin-bottom: 28px;

    color:#4b5563;
     max-width:620px;

}

/* TEXT */

.service-block-content p{

    font-size: 1.08rem;

    line-height: 1.7;

    color: #4f5b6b;

    margin-bottom: 22px;

    text-align:justify;

}

/* LIST */

.service-features{

    display: grid;

    grid-template-columns: repeat(2, minmax(180px,1fr));

    gap: 14px 24px;

    margin: 34px 0 40px;

    padding: 0;

    list-style: none;

}

.service-features li{

    position: relative;

    padding-left: 22px;

    font-size: 1rem;

    font-weight: 600;

    color: #09101d;

}

/* RED DOT */

.service-features li::before{

    content: "";

    position: absolute;

    left: 0;

    top: 10px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #ff1f2b;

}

.service-block-content .btn-primary{

    align-self: center;

    margin-top: 12px;

}
.service-block-content .btn-primary{

    align-self: center;

    margin-top: 12px;

    padding: 14px 36px;

    min-width: 270px;

}

.service-block{

    scroll-margin-top: 180px;

}

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

@media screen and (max-width: 992px){

    .services-hero{

        padding: 120px 0 100px;

    }

    .services-hero-content{

        text-align: center;

        max-width: 100%;

    }

    .services-hero-content h1{

        font-size: 3rem;

    }

    .service-block{

        grid-template-columns: 1fr;

        gap: 50px;

        margin-bottom: 90px;

    }

    .service-block.reverse{

        direction: initial;

    }

    .service-block-image{

        width: 100%;

        height: 420px;

        padding-left: 0;

        overflow: hidden;

        border-radius: 28px;

    }

    .service-block-image img{

        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;

    }

    .service-block-content{

        width: 100%;

        max-width: 100%;

        padding: 0;

    }

}

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

@media screen and (max-width: 768px){

    html,
    body{

        overflow-x: hidden;

    }

    /* =====================================================
       TOP BAR
    ===================================================== */

    .top-bar{

        display: none;

    }

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

    .header-wrapper{

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        z-index: 99999;

    }

    .main-header{

        background: #ffffff;

    }

    .header-container{

        height: 88px;

        position: relative;

    }

    .logo{

        padding: 0;

        height: auto;

    }

    .logo img{

        width: 185px;

    }

    .header-container > .btn-primary{

        display: none;

    }

    /* =====================================================
       HAMBURGER
    ===================================================== */

    .menu-toggle{

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 6px;

        width: 42px;

        height: 42px;

        cursor: pointer;

        z-index: 100001;

    }

    .menu-toggle span{

        width: 32px;

        height: 3px;

        background: #003b95;

        border-radius: 20px;

        transition: .3s ease;

    }

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

    .main-nav{

        position: static;

    }

    .nav-menu{

        position: fixed;

        top: 0;

        left: -100%;

        width: 100%;

        height: 100vh;

        background: #6d6d6d;

        padding: 120px 34px 60px;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

        gap: 42px;

        overflow-y: auto;

        transition: .35s ease;

        z-index: 100000;

    }

    .nav-menu.active{

        left: 0;

    }

    .nav-menu li{

        width: 100%;

        list-style: none;

        text-align: center;

    }

    .nav-menu li a,
    .dropdown-toggle{

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        color: #ffffff;

        font-size: 1rem;

        font-weight: 700;

        text-decoration: none;

        line-height: 1.4;

    }

    .dropdown{

        width: 100%;

    }

    .dropdown-menu{

        position: static;

        width: 100%;

        margin-top: 18px;

        padding: 22px;

        border-radius: 22px;

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

        border: 1px solid rgba(255,255,255,.12);

        display: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        box-shadow: none;

    }

    .dropdown.active .dropdown-menu{

        display: block;

    }

    .dropdown-menu li{

        margin-bottom: 14px;

        text-align: center;

    }

    .dropdown-menu li:last-child{

        margin-bottom: 0;

    }

    .dropdown-menu li a{

        color: #ffffff;

        font-size: .95rem;

        font-weight: 500;

        justify-content: center;

    }

    .dropdown-chevron{

        width: 14px;

        height: 14px;

        filter: brightness(0) invert(1);

    }

    .menu-title{

        display: none;

    }

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

    .services-hero{

        min-height: auto;

        padding: 140px 0 90px;

    }

    .services-hero-content{

        text-align: center;

        max-width: 100%;

    }

    .services-hero-content h1{

        font-size: 2.4rem;

        line-height: 1.1;

    }

    .services-hero-content p{

        font-size: 1rem;

        line-height: 1.8;

    }

    /* =====================================================
       SERVICES LAYOUT
    ===================================================== */

    .services-page-content{

        padding: 70px 0 90px;

    }

    .service-block{

        display: grid;

        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 20px;

    }

    .service-block-image{

        width: 100%;

        height: 260px;

        padding-left: 0;

        overflow: hidden;

        border-radius: 24px;
        margin-top: -50px;
        

    }

    .service-block-image img{

        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;
     
       

    }

    .service-block-content{

        width: 100%;

        max-width: 100%;

        padding: 34px 24px 8px;

        text-align: left;
        

    }

    .service-badge{

        margin-top: 0;

        margin-bottom: 18px;

    }

    .service-badge{

        font-size: .72rem !important;

        padding: 8px 14px !important;

        letter-spacing: .08em !important;

    }

    .service-block-content h2{

        font-size: 2rem;

        line-height: 1.15;

        margin-bottom: 22px;

    }

    .service-block-content p{

        display: block;

        font-size: 1rem;

        line-height: 1.8;

        color: #4f5b6b;

        margin-bottom: 12px;

    }
 
    .service-features{

        grid-template-columns: 1fr;

        gap: 14px;

        margin: 26px 0 34px;
        

    }

    .service-features li{

        font-size: .98rem;

        line-height: 1.7;

    }

    .service-block-content .btn-primary{

        width: 100%;

        min-width: 100%;

        justify-content: center;

    }

}

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

@media screen and (max-width: 480px){

    .nav-menu{

        padding: 110px 28px 50px;

        gap: 34px;

    }

    .nav-menu li a,
    .dropdown-toggle{

        font-size: 1rem;

    }

    .services-hero{

        padding: 130px 0 80px;

    }

    .services-hero-content h1{

        font-size: 2rem;

    }

    .services-hero-content p{

        font-size: .96rem;

    }

    .service-block-image{

        height: 220px;

    }

  @media screen and (max-width: 480px){

    .service-block-content h2{

        font-size: 1.45rem;

        line-height: 1.1;

    }

}

}