@charset "UTF-8";
/*
    This CSS stylesheet was created by the Crattivo Department of Gocreattivo.
    It is designed to style HeroStyle-3.html
    Our team specializes in Full Stack Development, Database Management, API Integration,
    Frontend & Backend Coordination, and Code Optimization.
    Gocreattivo is dedicated to providing high-quality, efficient, and scalable design solutions.
*/
.service-hero{
    width:100%;
    overflow:hidden;
    background:#0e5cab;
}

.service-hero-content{
    display:flex;
    height: 15vw;
}

.service-hero-left{
    position:relative;
    flex:0 0 60%;
    background: linear-gradient(
        to bottom,
        #4B80DE,
        #0D2C62
    );
    display:flex;
    align-items:center;
    justify-content: center;
}

/* angled edge */
.service-hero-left::after{
    content:"";
    position:absolute;
    top:0;
    right:-90px;
    width:180px;
    height:100%;
    background:inherit;
    transform:skewX(18deg);
    z-index:2;
}

.service-hero-text{
    position:relative;
    z-index:3;
    width:80%;
    margin-left:5vw;
    color:white;
}

.service-hero-text h1{
    font-size:clamp(2.5rem,2.8vw,3.4rem);
    margin-bottom:.75rem;
    font-weight:700;
}

.service-hero-text p{
    font-size:clamp(1.1rem,1vw,1.25rem);
    margin-bottom:1.5rem;
    color:#f3f3f3;
}

.service-hero-right{
    flex:1;
    overflow:hidden;
}

.service-hero-right img{

    width:100%;
    height:100%;
    object-fit:cover;
}
@media (min-width: 1201px) and (max-width: 1680px)  {
    .service-hero-content{
        height:20vw;
    }
}

/* ---------------- */
/*  Large Tablets   */
/* ---------------- */
@media (min-width: 767px) and (max-width: 1200px) and (orientation: portrait) {

    .service-hero-content{
        height:32vw;
    }

    .service-hero-text{
        width:85%;
        margin-left:5vw;
    }

}

/* --------- */
/*  Tablets  */
/* --------- */
@media (min-width: 767px) and (max-width: 1200px) and (orientation: landscape) {

    .service-hero-content{
        height:35vw;
    }

    .service-hero-left::after{
        right:-60px;
        width:120px;
    }

    .service-hero-text{
        margin-left:5vw;
    }

}

/* -------- */
/*  Phones  */
/* -------- */
@media (max-width: 767px) and (orientation: portrait)  {

    .service-hero-content{
        height:auto;
    }

    .service-hero-left{
        width:100%;
        flex:1;
        padding:4.5rem 0;
        justify-content:center;
    }

    .service-hero-left::after{
        display:none;
    }

    /* Hide image on phones */
    .service-hero-right{
        display:none;
    }

    .service-hero-text{
        width:min(90%, 34rem);
        margin:0 auto;
        text-align:center;
    }

    .service-hero-text p{
        margin-bottom:1.5rem;
    }
    .service-hero .cta-container{
        width:100%;
        display:flex;
        justify-content:center;
    }
}
@media (max-width: 767px) and (orientation: landscape) {
    .service-hero-content{
        height:auto;
    }

    .service-hero-left{
        width:100%;
        flex:1;
        padding:3.5rem 0;
        justify-content:center;
    }

    .service-hero-left::after{
        display:none;
    }

    /* Hide image on phones */
    .service-hero-right{
        display:none;
    }

    .service-hero-text{
        width:min(90%, 34rem);
        margin:0 auto;
        text-align:center;
    }

    .service-hero-text p{
        margin-bottom:1.5rem;
    }
    .service-hero .cta-container{
        width:100%;
        display:flex;
        justify-content:center;
    }
}