/*********************************
    IMPORT MAIN STYLE SHEET
**********************************/
@import "./main.css"; 


/*********************************
            HEADER
**********************************/
header{
    width:100%;
    background:linear-gradient(to right, rgba(12, 12, 12, 1) 10%, rgba(12, 12, 12, 0.6) 50%, rgba(12, 12, 12, 0) 100%), url("../../assets/images/hero.jpg");
    background-size:cover;
    color:var(--white);
    align-items:center;
    position:relative;
}

header:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
    left:0;
    background:linear-gradient(to top, rgba(12, 12, 12, 1) 10%, rgba(12, 12, 12, 0.2) 50%, rgba(12, 12, 12, 0) 100%);
    
}

header article{
    width:55%;
    margin-top:150px;
    padding:3rem;
    padding-bottom:6rem;
    position:relative;
    z-index:1;
}

@media (max-width:980px){
    header article{
        width:70%;
    }
}

@media (max-width:720px){
    header article{
        width:100%;
        padding:1rem;
        margin-top:100px;
    }
    
    header article .title{
        line-height:1.9em;
    }
}


/*********************************
            MAIN
**********************************/

/*DIVISION_1*/
.division_1{
    width:100%;
    background-color:var(--dark);
    color:var(--white);
}

.division_1 .cards{
    flex-grow:1;
    justify-content:center;
    gap:1rem;
}

.division_1 .cards .card{
    background-color:var(--black);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:10px;
}

.cards .card .icon{
    color:var(--primary);
    display:block;
    margin-bottom:1rem;
}

.cards .card img{
    width:50px;
    height:50px;
    display:block;
    margin-bottom:1rem;
    pointer-events:none;
}

@media (max-width:720px){
    .division_1 .cards{
        gap:0.5rem;
    }
    
    .cards .card img{
        width:30px;
        height:30px;
    }
}


/*DIVISION_2*/
.division_2 article{
    padding:4rem 3rem;
}

.division_2 article .title{
    margin-bottom:15px;
}

.division_2 article .sub_title{
    opacity:0.7;
}

@media (max-width:720px){
    .division_2 article{
        padding:1rem;
    }
    
    .division_2 article .sub_title{
        line-height:1.9em;
        text-transform:none;
    }
}


/*DIVISION_3*/
.division_3{
    background-color:var(--primary);
    color:var(--white);
    padding:3rem;
}

.division_3 .title_header{
    text-align:center;
}

.division_3 ul{
    justify-content:space-between;
}

.division_3 ul li{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
}

.division_3 ul .title{
    text-transform:uppercase;
    font-weight:400 !important;
    margin-bottom:1rem;
    color:var(--white);
    pointer-events:none;
}

.division_3 ul a{   
    position:relative;
    display:flex;
    align-items:center;
    gap:0.8rem;
}

.division_3 ul .title:before{
    content:"";
    width:3px;
    height:70%;
    background-color:var(--white);
}

.division_3 ul li a:not(:first-child){
    margin-left:1rem;
    padding:0.5rem 0;
    margin-bottom:0.4rem;
    color:var(--white);
    opacity:0.6;
}

.division_3 ul li a:not(:first-child):hover:after{
    content:"\f08e";
    font-family:"FontAwesome";
}

.division_3 ul li a:not(:first-child):hover{
    opacity:1;
}

@media (max-width:720px){
    .division_3{
        padding:3rem 1rem;
    }
    
    .division_3 ul .title{
        margin-bottom:0.5rem;
    }
    
    .division_3 ul li{
        flex: 1 1 33%;
        padding:0.5rem 0 !important;
    }
}

@media (max-width:680px){
    .division_3 ul li{
        flex: 1 1 45%;
    }
}


@media (max-width:480px){
    .division_3 ul li{
        flex: 1 1 100%;
    }
}


/*DIVISION_4*/
.division_4{
    width:100%;
    position:relative;
}

.division_4:after{
    content:"";
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    color:var(--white);
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-11;
    background-color:var(--dark);
}

.division_4:before{
    content:"";
    display: inline-block;
    width: 2em;
    height: 2em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000'%3E%3Canimate attributeName='r' begin='0' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000' transform='rotate(45 12 12)'%3E%3Canimate attributeName='r' begin='0.125s' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000' transform='rotate(90 12 12)'%3E%3Canimate attributeName='r' begin='0.25s' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000' transform='rotate(135 12 12)'%3E%3Canimate attributeName='r' begin='0.375s' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000' transform='rotate(180 12 12)'%3E%3Canimate attributeName='r' begin='0.5s' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000' transform='rotate(225 12 12)'%3E%3Canimate attributeName='r' begin='0.625s' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000' transform='rotate(270 12 12)'%3E%3Canimate attributeName='r' begin='0.75s' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='2' r='0' fill='%23000' transform='rotate(315 12 12)'%3E%3Canimate attributeName='r' begin='0.875s' calcMode='spline' dur='1s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3C/svg%3E");
    background-color: var(--white);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:-1;
}

.division_4 iframe{
    width:100%;
    border:0;
    height:100vh;
}

@media (max-width:720px){
    .division_4 iframe{
        height:50vh;
    }
}


/*DIVISION_5*/
.division_5{
    background-color:#f9f9f9;
}

.division_5 section{
    width:100%;
    background:linear-gradient(to right, var(--primary_dark) 10%, var(--primary) 50%, var(--primary) 100%);
    border-radius:20px;
    color:var(--white);
    position:relative;
    margin-top:3rem;
}

.division_5 .left_section article{
    width:75%;
}

.division_5 .left_section article .title{
    text-transform:none;
    line-height:1.9em;
}

.division_5 .left_section article .underlined{
    color:var(--white);
}

.division_5 .left_section article .underlined:before{
    background-color:var(--white);
}

.division_5 figure{
    text-align:center;
    pointer-events:none;
    position:absolute;
    right:0;
    bottom:0px;
}

.division_5 figure img{
    width:280px;
}

@media (max-width:920px){
    .division_5 .right_section{
        display:none;
    }
    
    .division_5 section{
        margin-top:0;
    }
    
    .division_5 .left_section article{
        width:100%;
    }
}

@media (max-width:520px){
    .division_5 .left_section article{
        text-align:center;
        padding:1rem;
    }
    
    .division_5 .left_section article .underlined{
        margin:auto;
    }
}