/*======================================
    D-40 AV & Entertainment
    Services Page Styles
======================================*/


/*======================================
    Services Hero
======================================*/

.services-hero{

    min-height:60vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:

    linear-gradient(
        rgba(0,0,0,.7),
        rgba(0,0,0,.9)
    ),

    url("../images/services/services-hero.jpg");

    background-size:cover;

    background-position:center;

    padding-top:120px;

}


.services-hero h1{

    font-size:6rem;

    text-shadow:

    0 0 30px rgba(26,115,255,.7);

}


.services-hero p{

    max-width:800px;

    margin:25px auto;

    font-size:20px;

}



/*======================================
    Service Feature Section
======================================*/


.services-list{

    background:#080808;

}



.service-feature{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:50px;

    align-items:center;

    background:#151515;

    padding:50px;

    margin-bottom:40px;

    border-radius:20px;

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

    transition:.4s;

}



.service-feature:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:

    0 0 40px rgba(26,115,255,.2);

}



.service-feature.reverse{

    grid-template-columns:1fr 180px;

}



.service-feature.reverse .service-icon{

    order:2;

}



.service-icon{

    width:150px;

    height:150px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    rgba(26,115,255,.12);

    border:2px solid var(--primary);

    box-shadow:

    0 0 30px rgba(26,115,255,.3);

}



.service-icon i{

    font-size:60px;

    color:var(--primary);

}





.service-info h3{

    font-size:3.2rem;

    margin-bottom:20px;

}



.service-info p{

    font-size:18px;

    margin-bottom:25px;

}



.service-info ul{

    display:grid;

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

    gap:15px;

}



.service-info li{

    color:#ddd;

}



.service-info li i{

    color:var(--primary);

    margin-right:10px;

}





/*======================================
    Process Section
======================================*/


.process{

    background:#111;

}



.process-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



.process-grid > div{

    background:#171717;

    padding:45px 30px;

    text-align:center;

    border-radius:18px;

    transition:.4s;

    position:relative;

}



.process-grid > div:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 35px rgba(26,115,255,.25);

}



.process-grid span{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    width:80px;

    height:80px;

    border-radius:50%;

    background:var(--primary);

    font-size:30px;

    font-weight:700;

    margin-bottom:25px;

}



.process-grid h3{

    font-size:2.5rem;

    margin-bottom:15px;

}





/*======================================
    Service CTA
======================================*/


.services-list + .process{

    margin-top:0;

}





/*======================================
    Responsive
======================================*/


@media(max-width:1100px){


.service-feature,

.service-feature.reverse{

    grid-template-columns:1fr;

    text-align:center;

}



.service-feature.reverse .service-icon{

    order:0;

}



.service-icon{

    margin:auto;

}



.service-info ul{

    text-align:left;

}



.process-grid{

    grid-template-columns:1fr;

}



}




@media(max-width:768px){


.services-hero h1{

    font-size:3.8rem;

}


.services-hero p{

    font-size:16px;

    padding:0 20px;

}



.service-feature{

    padding:35px 25px;

}



.service-info h3{

    font-size:2.5rem;

}



.service-info ul{

    grid-template-columns:1fr;

}



.service-icon{

    width:120px;

    height:120px;

}



.service-icon i{

    font-size:45px;

}



}



@media(max-width:450px){


.services-hero h1{

    font-size:2.8rem;

}



.service-info h3{

    font-size:2rem;

}



.process-grid span{

    width:65px;

    height:65px;

    font-size:24px;

}



}