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


/*======================================
    About Hero
======================================*/

.about-hero{

    min-height:60vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:

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

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

    background-size:cover;

    background-position:center;

    padding-top:120px;

}


.about-hero h1{

    font-size:6rem;

    text-shadow:

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

}


.about-hero p{

    max-width:750px;

    margin:25px auto;

    font-size:20px;

}



/*======================================
    Story Section
======================================*/


.about-story{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    background:#080808;

}


.about-image{

    position:relative;

}


.about-image img{

    border-radius:20px;

    box-shadow:

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

}


.about-image::after{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    right:-20px;

    bottom:-20px;

    background:var(--primary);

    border-radius:15px;

    z-index:-1;

}




.about-content h2{

    text-align:left;

    font-size:4rem;

    margin-bottom:30px;

}


.about-content h2::after{

    left:0;

    transform:none;

}


.about-content p{

    margin-bottom:20px;

}





/*======================================
    Mission Cards
======================================*/


.mission{

    display:grid;

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

    gap:35px;

    background:#111;

}


.mission-card{

    background:#171717;

    padding:45px;

    text-align:center;

    border-radius:18px;

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

    transition:.4s;

}



.mission-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:

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

}



.mission-card i{

    font-size:55px;

    color:var(--primary);

    margin-bottom:25px;

}



.mission-card h3{

    font-size:2.5rem;

    margin-bottom:15px;

}





/*======================================
    Why Choose Us
======================================*/


.why-us{

    background:#080808;

}



.why-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}



.why-card{

    background:#161616;

    padding:35px 25px;

    border-radius:15px;

    text-align:center;

    transition:.35s;

}



.why-card:hover{

    transform:translateY(-10px);

    background:#1b1b1b;

    box-shadow:

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

}



.why-card i{

    color:var(--primary);

    font-size:45px;

    margin-bottom:20px;

}



.why-card h3{

    font-size:2rem;

    margin-bottom:15px;

}





/*======================================
    Technology Section
======================================*/


.technology{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    background:#111;

}



.technology h2{

    text-align:left;

}


.technology h2::after{

    left:0;

    transform:none;

}



.technology ul{

    margin-top:30px;

}



.technology li{

    padding:12px 0;

    color:#ddd;

    font-size:18px;

}



.technology li i{

    color:var(--primary);

    margin-right:15px;

}



.technology-image img{

    border-radius:20px;

    box-shadow:

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

}





/*======================================
    About Stats
======================================*/


.about-story + .mission{

    margin-top:0;

}





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


@media(max-width:1100px){


.about-story,

.technology{

    grid-template-columns:1fr;

}


.about-content h2{

    font-size:3.5rem;

}


.why-grid{

    grid-template-columns:

    repeat(2,1fr);

}


.mission{

    grid-template-columns:1fr;

}


}



@media(max-width:768px){


.about-hero h1{

    font-size:3.8rem;

}


.about-hero p{

    font-size:16px;

    padding:0 20px;

}



.about-story{

    gap:40px;

}


.about-content h2{

    font-size:2.8rem;

}



.why-grid{

    grid-template-columns:1fr;

}



.mission-card{

    padding:30px;

}



.technology{

    gap:40px;

}



}



@media(max-width:450px){


.about-hero h1{

    font-size:2.8rem;

}


.about-content h2{

    font-size:2.4rem;

}


.mission-card h3{

    font-size:2rem;

}


.why-card h3{

    font-size:1.7rem;

}


}