@font-face {
    font-family: Graphik-Regular;
    src: url(../fonts/Graphik/Graphik-Regular.woff2) format("woff2"), url(../fonts/Graphik/Graphik-Regular.woff) format("woff"), url(../fonts/Graphik/Graphik-Regular.ttf) format("truetype");
}
@font-face {
    font-family: Graphik-Light;
    src: url(../fonts/Graphik/Graphik-Light.woff2) format("woff2"), url(../fonts/Graphik/Graphik-Light.woff) format("woff"), url(../fonts/Graphik/Graphik-Light.ttf) format("truetype");
}
@font-face {
    font-family: Graphik-Medium;
    src: url(../fonts/Graphik/Graphik-Medium.woff2) format("woff2"), url(../fonts/Graphik/Graphik-Medium.woff) format("woff"), url(../fonts/Graphik/Graphik-Medium.ttf) format("truetype");
}
@font-face {
    font-family: Graphik-Bold;
    src: url(../fonts/Graphik/Graphik-Bold.woff2) format("woff2"), url(../fonts/Graphik/Graphik-Bold.woff) format("woff"), url(../fonts/Graphik/Graphik-Bold.ttf) format("truetype");
}

@font-face {
    font-family: DIN-NEXT-LT-PRO-MEDIUM;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/DINNextLTPro/DINNextLTPro-Medium.woff2) format("woff2"), url(../fonts/DINNextLTPro/DINNextLTPro-Medium.woff) format("woff"), url(../fonts/DINNextLTPro/DINNextLTPro-Medium.ttf) format("truetype");
}
@font-face {
    font-family: DIN-NEXT-LT-PRO-BOLD;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/DINNextLTPro/DINNextLTPro-Bold.woff2) format("woff2"), url(../fonts/DINNextLTPro/DINNextLTPro-Bold.woff) format("woff"), url(../fonts/DINNextLTPro/DINNextLTPro-Bold.ttf) format("truetype");
}
@font-face {
    font-family: DIN-NEXT-LT-PRO-HEAVY;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/DINNextLTPro/DINNextLTPro-Heavy.woff2) format("woff2"), url(../fonts/DINNextLTPro/DINNextLTPro-Heavy.woff) format("woff"), url(../fonts/DINNextLTPro/DINNextLTPro-Heavy.ttf) format("truetype");
}

.graphik_light{
    font-family: Graphik-Light;font-style: normal;font-weight: 300;
}
.graphik_regular{
    font-family: Graphik-Regular;font-style: normal;font-weight: 400;
}
.graphik_medium{
    font-family: Graphik-Medium;font-style: normal;font-weight: 500;
}
.graphik_bold{
    font-family: Graphik-Bold;font-style: normal;font-weight: 700;
}

.din_medium{
    font-family: DIN-NEXT-LT-PRO-MEDIUM;font-style: normal;font-weight: 500;
}
.din_bold{
    font-family: DIN-NEXT-LT-PRO-BOLD;font-style: normal;font-weight: 700;
}
.din_heavy{
    font-family: DIN-NEXT-LT-PRO-HEAVY;font-style: normal;font-weight: 800;
}

body{
    font-family: Graphik-Regular;font-style: normal;font-weight: 400; 
    background-color: #FFF;
    
}


.f_12{font-size: 12px;}
.f_14{font-size: 14px;}
.f_16{font-size: 16px;}
.f_18{font-size: 18px;}
.f_20{font-size: 20px;}
.f_22{font-size: 22px;}
.f_24{font-size: 24px;}
.f_26{font-size: 26px;}
.f_28{font-size: 28px;}
.f_38{font-size: 38px;}

.color_white{color: #FFF;}
.color_grey1{color: #cbcbcb;}
.color_grey2{color: #9e9e9e;}

.bg_grey1{background-color: #fafafa;}

.mt_sl_icn{
    margin-top: 6px;
}

.mt_sec{
    padding-top: 140px;
}
.mt_sec2{
    padding-top: 200px;
}

.lh_22{line-height: 22px;}
.lh_44{line-height: 44px;}
.lh_40{line-height: 40px;}

.btn_lang{
    color: #FFF;
    padding: 1px 2px;
    opacity: .5;
}
.btn_lang:hover{
    color: #FFF;
    padding: 1px 2px;
    opacity: .9;
}

.btn_ykb{
    border-radius: 8;
    padding: 3px 12px;
    color: #FFF;
    border: 1px #FFFFFF55 solid;
}
.btn_ykb:hover{
    border-radius: 8;
    padding: 3px 12px;
    color: #FFF;
    border: 1px #ed1b24 solid;
    background-color: #ed1b24;
}


#header_a{
    height: 100vh;
    overflow: hidden;
    background-color: #FFF;
    position: relative;
}
#video_bg_cont{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg_poster.jpg?v=1);
    background-position: center;
    background-size: cover;
}

#video_bg_cont video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    
}
.header_dark{
    background-color: rgb(0, 0, 0, .35);
    position: absolute;
    left: 0; top: 0;
    right: 0; bottom: 0;
    z-index: 99;
    pointer-events: none;
}

.altay_logo_w{width: 300px;}

#header_c{
    position: absolute;
    top: 50%;
    z-index: 100;
    text-align: center;
    color: #FFF;
    left: 0; right: 0;
    transform: translateY(-50%);
}
.header_c_title{
    font-size: 50px;
}
.header_c_subtitle{
    font-size: 20px;
}

#header_t{
    width: 100%;
    position: absolute;
    z-index: 100;
    padding: 20px;
}

.frame {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-out;
}


.angles {
    background: linear-gradient(to right, #FFF 2px, transparent 2px) 0 0, linear-gradient(to bottom, #FFF 2px, transparent 2px) 0 0, 
    linear-gradient(to left, #FFF 2px, transparent 2px) 100% 0, linear-gradient(to bottom, #FFF 2px, transparent 2px) 100% 0, 
    linear-gradient(to left, #FFF 2px, transparent 2px) 100% 100%, linear-gradient(to top, #FFF 2px, transparent 2px) 100% 100%, 
    linear-gradient(to right, #FFF 2px, transparent 2px) 0 100%, linear-gradient(to top, #FFF 2px, transparent 2px) 0 100%;
    background-repeat: no-repeat;
    background-size: 5px 5px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.48;
    transition: background-size 0.2s ease-out;
}

.frame:hover {
    transform: scale(1.05);
}
.frame:hover .angles {
    background-size: 10px 10px;
    background-color: rgba(237, 28, 36, .81);
    opacity: 0.88;
}

.frame .met {
    padding: 15px 30px 14px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
}

.frame .met:before {
    content: '';
    background-color: rgba(237, 28, 36, 1);
    opacity: 1;
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.frame:hover .met:before{
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    background-color:rgba(0, 0, 0, 0.85);
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);


}
.met_text{opacity: 1; z-index: 112;}

.header_brochure{
    display: flex;
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 100;
    
    color: #FFF;
}

.header_ul{ list-style: none; padding: 0px; margin: 0px;}
.header_ul li {
    display: inline-block;
}
.header_ul li a{
    color: #FFF; 
    text-decoration: none;
    margin-left: 14px;
    letter-spacing: 1px;
    position: relative;
}
.header_ul li a:hover{
    color: #FFF; 
    text-decoration: none;
    margin-left: 14px;
    letter-spacing: 1px;
}

.header_ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #ed1b24;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.header_ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.header_mobile_ul{
    list-style: none; padding: 0px; margin: 30px 0px 0px 0px;
}

.header_mobile_ul li {
    margin-bottom: 10px;
}

.header_mobile_ul li a{
    color: #FFF; 
    text-decoration: none;
    margin-left: 14px;
    letter-spacing: 1px;
    position: relative;
}
.header_mobile_ul li a:hover{
    color: #FFF; 
    text-decoration: none;
    margin-left: 14px;
    letter-spacing: 1px;
}

.border_1{
    border: 1px #CCC solid;
}
.border_e_1{
    border-right: 1px #CCC solid;
}
.border_b_1{
    border-bottom: 1px #CCC solid;
}


.border_b_spe{
    border-bottom: 2px #ed1b24 solid;
}

.features{width: 980px; margin-left: auto; margin-right: auto; border-bottom: none;}

.features_div{ overflow: hidden; height: 280px; ;}
.features_div:hover{
}
.features_div_icon{
    margin-top: 60px;
    width: 100px; transition: all .2s ease-out;}
.features_div:hover .features_div_icon{
    width: 60px;
    margin-top: 20px;
}

.features_div_alt{
    position: absolute;
    height: 150px;
    bottom: -150px; left: 0; right: 0;
    transition: all .2s ease-out;
    border-top: 3px #ed1b24 solid;
    background-position: center;
    background-size: cover;
    z-index: 1;
    color: #FFF;
    font-size: 14px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}   



.fea_1{  background-image: url(../images/fea_1.jpg?v=132d13);}
.fea_2{  background-image: url(../images/fea_2.jpg?v=132d13);}
.fea_3{  background-image: url(../images/fea_3.jpg?v=132d13);}
.fea_4{  background-image: url(../images/fea_4.jpg?v=132d13);}


.features_div:hover .features_div_alt{
    bottom: 0px;
}
.features_div_text{margin-top: 20px;  transition: all .2s ease-out; font-size: 24px;}
.features_div:hover .features_div_text{
    margin-top: 10px;
    font-size: 18px
}



#sec2_out{
}
.sec2_out_top{
    margin-top: -180px;
}
#sec2{
    background-image: url(../images/map_bgpng.png?v=1);
    background-size: contain;
    background-color: #1b181a;
    box-shadow: inset 0 100px 0 0 #FFF, inset 0px 0 0 0 transparent, inset 0 0px 0 0 transparent, inset 0 0 0 0 transparent;
}


#sec2_img_bg{
    background-image: url(../images/sec2_bg_2.jpg);
    height: 500px;
    background-size: cover;
    border-bottom: 3px solid #ed1b24;
    background-position: center;
}

.sec2_l{
    color: #FFF;
}
.sec2_lb{
    height: 250px; margin-top: 90px;
    margin-right: 40px;
    
    background-position: center;
    position: relative;
    overflow: hidden;

}
.sec2_lb_alt{
    position: absolute;
    bottom: 0px; left: 0px; right: 0px;
    background-color: #00000086;
    padding: 10px; color: #FFF;

}
.sec2_lb_alt_text{
    height: 0px;
    opacity: 0;
    transition: all .2s ease-in;

}
.sec2_lb_bg{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(../images/altay_mini2.jpg);
    background-size: cover;
    background-position: center;
    transition: all 1s ease-out;
}

.sec2_lb:hover .sec2_lb_alt_text{
    height: 50px;
    opacity: 100;
}
.sec2_lb:hover .sec2_lb_bg{
    scale: 1.2;
}


.sec2_r_bg{
    background-color: #FFF;
    padding: 30px;
}

#sec3_tests{
    background-image: url(../images/tests_bg.jpg);
    height: 500px;
    border-bottom: 4px #ed1c24 solid;
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-position: 50% 0;

}

.sec3_tests_text_top{
    margin-top: 100px;
}

.tests_div_cnt{
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
}

.tests_div1{
    background-image: url(../images/test1.png?v1);
    background-size: 100%;
    width: 320px;
    height: 220px;
    transition: all .2s ease-out;
    position: relative;
    background-position: center;
    border: 0px #17c5bb solid;
    margin-left: 10px;
    margin-right: 10px;
}
.tests_div1:hover{
    margin-top: -10px;
    background-size: 110%;
    border-bottom: 5px #17c5bb solid;
}

.tests_div2{
    background-image: url(../images/test2.png?v1);
    background-size: 100%;
    width: 300px;
    height: 220px;
    transition: all .2s ease-out;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
    background-position: center;
    border: 0px #17c5bb solid;
}
.tests_div2:hover{
    margin-top: -10px;
    background-size: 110%;
    border-bottom: 5px #17c5bb solid;
}

.tests_div3{
    background-image: url(../images/test3.png?v1);
    background-size: 100%;
    width: 320px;
    height: 220px;
    transition: all .2s ease-out;
    position: relative;
    background-position: center;
    border: 0px #17c5bb solid;
    margin-left: 10px;
    margin-right: 10px;
}
.tests_div3:hover{
    margin-top: -10px;
    background-size: 110%;
    border-bottom: 5px #17c5bb solid;
}

.test_div_fnt::before{
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all .5s ease-out;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);

}
.test_div_fnt:hover::before{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.tests_div_text{
    position: absolute;
    bottom: 20px;
    left: 10px;
    right: 10px;
    text-align: center;
    color: #FFF;
    transition: all .23s ease;
    z-index: 25;
}

.test_div_fnt:hover .tests_div_text{
    bottom: 60px;
}

.tests_div_wrapper{ position: absolute; bottom: -60px; left: 0; right: 0; display:flex;justify-content:center;align-items:center; z-index: 0; scale: .8;}
.checkmark__circle{
    stroke-dasharray: 166; 
    stroke-dashoffset: 166;   
    stroke-width: 2; 
    stroke-miterlimit: 10;
    stroke: #17c5bb;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    animation-play-state: paused;    
}
.checkmark{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #17c5bb;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    animation-play-state: paused; 

}
.checkmark__check{
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;  
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    animation-play-state: paused;
}

.test_div_fnt:hover .checkmark__circle , .test_div_fnt:hover .checkmark__check, .test_div_fnt:hover .checkmark {
    animation-play-state: running;
}

.checkmark__circle_reverse{
    animation: strok_rev 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark_reverse{
    animation: fill_rev .4s ease-in-out  forwards, scale_rev .3s ease-in-out  reverse;

}
.checkmark__check_reverse{
    animation: strok_rev 0.1s cubic-bezier(0.65, 0, 0.45, 1)  forwards;

}

@keyframes stroke{100%{stroke-dashoffset: 0}}
@keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}
@keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #17c5bb}}

@keyframes strok_rev{0%{stroke-dashoffset: 0}}
@keyframes scale_rev{100%, 50%{transform: scale3d(1.1, 1.1, 1)} 0%{transform: none}} 
@keyframes fill_rev{0%{box-shadow: inset 0px 0px 0px 30px #17c5bb}}

.grid-item img {
    border-radius: 0px;
    border: 0px;
    padding: 0px;
}


.grid-item {
    margin-bottom: 30px;
}

.row.grid {
    display: block;
}

.grid_div_cont{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.div_overlay{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: #00000000;
    transition: all .23s ease;
    cursor: pointer;
    z-index: 2;
}

.div_overlay:hover  {
    background-color: #00000095;
}

.grid_divs{
    background-size: cover;
    background-position: center;
    transition: all .23s ease;

}
.grid_div_cont:hover  .grid_divs{
    scale: 1.1;
}

.grid_div1{
    height: 300px;
}

.grid_div2{
    height: 500px;
}
.grid_div3{
    height: 220px;
}


.div_zoom{
    position: absolute;
    width: 30px;
    z-index: 3;
    top: 40px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transition: all .23s ease;
    opacity: 0;
    pointer-events: none;
}

.grid_div_cont:hover  .div_zoom{
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
}


.grid_div_cont:hover .blink_me {  animation: blinker 1.1s ease infinite;}

@keyframes blinker {50% {opacity: 0;}}


.grid_div_play_icon{
    position: absolute;
    z-index: 5;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

#sec6_footer{
    background-image: url(../images/footer_bg.jpg?v=2);
    background-size: cover;
    background-position: center;
    height: 500px;
    position: relative;
}
.sec6_copy{
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    background-color: #00000060;
    color: #FFF;
    text-align: right;
}



#timeline .timeline-item:after, #timeline .timeline-item:before {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
  
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

#timeline {
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 0 10px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#timeline:before {
    content: "";
    width: 3px;
    height: 100%;
    background: #ed1c24;
    left: 50%;
    top: 0;
    position: absolute;
}
#timeline:after {
content: "";
clear: both;
display: table;
width: 100%;
}



.timeline {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px 0;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #ed1c24;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline_container {
    padding: 15px 30px;
    position: relative;
    background: inherit;
    width: 50%;
    margin-bottom: 30px;
}

.timeline_container.left {left: 0;}
.timeline_container.right {left: 50%;}

.timeline_container::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 12px);
right: -8px;
background: #ffffff;
border: 2px solid #ed1c24;
border-radius: 16px;
z-index: 1;
}

.timeline_container.right::after {left: -8px;}
.timeline_container.right::before {left: 8px;}

.timeline_date  {
    position: absolute;
    display: inline-block;
    top: calc(50% - 16px);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #ed1c24;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
}

.date1_pos { right: -66px; top:  calc(50% - 28px);}
.date2_pos { left: -66px;}
.date3_pos { right: -66px;}
.date4_pos { left: -66px; top:  calc(50% - 28px);}
.date5_pos { right: -66px;}

.timeline_container .timeline_content {text-align: right;}
.timeline_container.right .timeline_content {text-align: left;}

.timeline-content.right {float: right;}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #ed1c24;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-body{
    background-color: #f8f8f8;
}
.accordion-button:not(.collapsed)::after {
    background-image: url(../swg/chevron-down_w.svg);
}

.accordion-button::after {
    background-image: url(../swg/chevron-down.svg);
}


.card_1{
    width: 650px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0px;
    border-top: 2px #ed1c24 solid;
    overflow: hidden;
    padding-top: 10px;
}

.card_1_bg{
    background-image: url(../images/card_1.jpg?v=1);
    background-position: center;
    background-repeat: no-repeat;
    width: 160px;
    height: 100%;
    border-radius: 8px;
}
.card_2_bg{
    background-image: url(../images/card_2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    width: 160px;
    height: 100%;
    border-radius: 8px;
    
}


#header_d_menu{display: block;}
.header_m_menu_con{display: none;}

.header_m_menu{
    width: 280px;
    position: fixed;
    right: -280px;
    top: 0px;
    bottom: 0px;
    background-color: #000;
    z-index: 200;
    transition: all .23s ease;
    color: #FFF;
    padding: 20px;
}
.header_m_menu_open{
    right: 0px;
}

.header_m_menu_bg{
    background-color: #0000007d;
    position: fixed;
    top: 0px; right: 0px; left: 0px; bottom: 0px;
    z-index: 199;
    display: none;
}


@media (max-width: 576px) {
    .card_1{
        width: 96%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    .card_1_bg{
        display: none;
    }
    .card_2_bg{
        display: none;
    }
    
    #header_d_menu{display: none;}
    .header_m_menu_con{display: block;}


    .timeline::after {   left: 70px;   }

    .timeline_container {
        width: 100%;
        padding-left: 100px;
        padding-right: 10px;
        margin-bottom: 10px;

    }

    .timeline_container.right {  left: 0%;  }
    .timeline_container.left::after, .timeline_container.right::after {  left: 62px;   }

    .date1_pos { left: 15px; right: auto; top: calc(50% - 28px); }
    .date2_pos { left: 15px;}
    .date3_pos { right: auto; left: 15px;}
    .date4_pos { left: 15px; right: auto; top: calc(50% - 28px); }
    .date5_pos { right: auto; left: 15px;}


    .timeline_container .timeline_content {text-align: left;}
    .timeline_container.right .timeline_content {text-align: left;}



    .features{ width: 100%; }

    .features_div_icon{
        margin-top: 60px;
    }
    .features_div:hover .features_div_icon{
        width: 00px;
        margin-top: 00px;
    }

    .features_div_alt{
        height: 210px;
        bottom: -210px;
    }   

    .features_div:hover .features_div_text {
        margin-top: 0px;
        font-size: 15px

    }




    .sec2_out_top{ margin-top: -240px;  }
    .header_c_subtitle {padding-left: 20px; padding-right: 20px; margin-top: 20px; font-size: 16px;}
    .container { width: 98%;  }
    .container { max-width: 98%;  }
    .sec2_lb{    margin-right: 0px; margin-top: 120px;    }
    .tests_div_cnt {  left: 10px; right: 10px; bottom: -382px; }
    #sec2_img_bg{  height: 400px; }

    .tests_div1 {width: 100%; margin-left: 0; margin-right: 0;}
    .tests_div2 {width: 100%; margin-left: 0; margin-right: 0; margin-top: 20px; }
    .tests_div3 {width: 100%; margin-left: 0; margin-right: 0; margin-top: 20px; margin-bottom: 20px;}

    #sec4_sps{ margin-top: 495px;  }
    .tests_div_wrapper{ bottom: 60px;}

    .tests_div1:hover{ margin-top: 0px; }
    .tests_div2:hover{ margin-top: 20px; }
    .tests_div3:hover{ margin-top: 20px; }

    .sec6_footer_text{font-size: 14px;}
    .sec3_tests_text_top{    margin-top: 20px;   }

    .altay_logo_w{width: 260px; margin-bottom: 10px;}
    .header_c_title{  line-height: 44px; margin-top: 20px !important; }

    #video_bg_cont video {display: none;}


    #sec3_tests{
        background-attachment: unset;
        background-repeat: repeat-y;
        background-position: center;
        background-size: cover;
    }


    #sec6_footer{
        background-image: url(../images/footer_bg.jpg?v=2);
        background-size: 98%;
        background-repeat: no-repeat;
        background-color: #000;
        background-position: top;
        height: 210px;
        position: relative;
    }

}




@media  (min-width: 577px) and (max-width: 768px) { 

    .card_1{
        width: 96%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    .card_1_bg{
        display: none;
    }
    .card_2_bg{
        display: none;
    }

    #header_d_menu{display: none;}
    .header_m_menu_con{display: block;}


    .timeline::after {   left: 70px;   }
    .timeline_container {
        width: 100%;
        padding-left: 100px;
        padding-right: 10px;
        margin-bottom: 10px;
    }

    .timeline_container.right {  left: 0%;  }
    .timeline_container.left::after, .timeline_container.right::after {  left: 62px;   }

    .date1_pos { left: 15px; right: auto; top: calc(50% - 28px); }
    .date2_pos { left: 15px;}
    .date3_pos { right: auto; left: 15px;}
    .date4_pos { left: 15px; right: auto; top: calc(50% - 28px); }
    .date5_pos { right: auto; left: 15px;}

    .timeline_container .timeline_content {text-align: left;}
    .timeline_container.right .timeline_content {text-align: left;}



    .features{ width: 100%; }
    .header_c_subtitle {padding-left: 30px; padding-right: 30px;}
    .container { width: 96%;  }
    .container { max-width: 96%;  }
    .sec2_lb{    margin-right: 0px;    }

    .tests_div_cnt {  left: 10px; right: 10px;   bottom: -382px; }
    #sec2_img_bg{  height: 400px; }

    .tests_div1 {width: 90%; margin-left: auto; margin-right: auto;}
    .tests_div2 {width: 90%; margin-left: 0; margin-right: 0; margin-top: 20px; }
    .tests_div3 {width: 90%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;}

    
    .tests_div1:hover{ margin-top: 0px; }
    .tests_div3:hover{ margin-top: 20px; }

    #sec4_sps{ margin-top: 530px;  }


    #video_bg_cont video {display: none;}

    #sec6_footer{
        background-image: url(../images/footer_bg.jpg?v=2);
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: #000;
        background-position: top;
        height: 300px;
        position: relative;
    }

}

@media (min-width: 767px) and (max-width: 992px) {
    .features{ width: 100%; }
    .container { width: 96%;  }
    .container { max-width: 96%;  }
    .header_c_subtitle {padding-left: 30px; padding-right: 30px;}
    .sec2_lb{    margin-right: 0px;    }

    .tests_div_cnt {
        left: 10px; right: 10px;
    }

    #header_d_menu{display: none;}
    .header_m_menu_con{display: block;}

}

@media (min-width: 993px) and (max-width: 1200px) {
    .container { width: 96%;  }
    .container { max-width: 96%;  }
    .sec2_lb{    margin-right: 20px;    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .features_div_icon {
        margin-top: 60px;

    }
}