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


/*********************************
            HEADER
**********************************/
.header{
    background:linear-gradient(to bottom, rgba(12, 12, 12, 0.8) 10%, rgba(12, 12, 12, 0.6) 50%, rgba(12, 12, 12, 0.6) 100%), url("../../assets/images/service_hero.jpg");
    background-position:center;
}

.back_links{
    position:absolute;
    bottom:0;
    left:50%;
}

/*********************************
             MAIN
**********************************/
main{
    padding-top:3rem;
    background-color:#f1f1f1;
}

@media (max-width:720px){
    main{
        padding-top:1rem;
    }
}

/*DIVISION_1*/
.division_1 .title_header .title{
    text-transform:none;
}

.cards{
    gap:1rem;
    flex-wrap:wrap;
    flex-direction:row;
}

.cards .card{
    flex-grow:1;
    flex:1 1 30%;
    background-color:var(--white);
    border:1px solid rgba(1,1,1,0.2);
    border-radius:10px;
}

.card iconify-icon{
    background-color:var(--primary);
    padding:1rem;
    border-radius:10px;
    color:var(--white);
}

.card .title{
    margin:2rem 0 !important;
}

@media (max-width:720px){
    .cards .card{
        flex:1 1 45%;
    }
}

@media (max-width:520px){
    .cards .card{
        flex:1 1 100%;
    }
}



/*********************************
**********************************
     SERVICE DETAILS PAGE
**********************************
**********************************/
/*MAIN*/
main .title, main .sub_title{
    text-transform:none;
}

table{
    width:100%;
    border-collapse:collapse;
    margin:1rem 0;
}

table tr:first-child{
    background-color:var(--dark);
    color:var(--white);
}

table th{
    font-weight:500;
}

table th, table td{
    padding:0.5rem;
    border:1px solid rgba(1,1,1,0.2);
}

table tr:not(:first-child) td:not(:first-child){
    text-align:center;
}

table tr:not(:first-child):hover{
    background-color:var(--white);
}

.video_player{
    width:100%;
    position:relative;
}

.video_player .title{
    margin-bottom:1rem;
    line-height:1.9em;
}

.video_player:before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:60%;
    background-color:var(--primary);
    z-index:0;
}

.video_player iframe{
    width:100%;
    height:60vh;
    border-radius:10px;
    overflow:hidden;
    border:0;
    position:relative;
    z-index:1;
}

.tab_transition{
    width:100%;
    position:relative;
    z-index:1;
    justify-content:left;
    gap:1rem;
    margin:1rem auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tab_transition::-webkit-scrollbar {
    display:none;
}

.tab_transition li{
    flex-grow:1;
    border:2px solid rgba(255,255,255,1);
    border-radius:10px;
    overflow:hidden;
    opacity:0.5;
    width:200px;
    height:150px;
}

.lengthy_tumbnail li{
    width:150px;
    height:100px;
}

.tab_transition .active{
    opacity:1;
}

.tab_transition li img{
    width:100%;
    height:100%;
}

@media (max-width:820px){
    .tab_transition{
        overflow-x:auto;
    }
    
    .tab_transition li{
        flex: 0 0 auto;
    }
    
    .video_player iframe{
        height:45vh;
    }
}

@media (max-width:540px){
    table th, table td{
        font-size:12px;
    }
}