/* fonts */
body{
    font-family: 'Nunito Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}
/* cssreset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* root: */
:root{
--color1:#000;
--color2:#aa0000;
--color3:#fff;
--colo4:#1b1a1a;
--title:40px;
--subtitle:30px;
--text:20px;
--megatitle:90px;
}
section{
    width: 100%;
    padding-left: 13%;
    padding-right: 13%;
    background: var(--color1);
}
.container{
    display: flex;
    width: 100%;

}
a{
    text-decoration: none;
    color: white;
}
/* section_menu */
.section_menu{
    background: var(--color1);
}
.container_menu{
    height: 8vh;
    background: var(--color1);
    justify-content: space-between;
    align-items: center;
}
.nav_menu{
    width: 72%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 5%;
    padding-left: 5%;
    z-index: 7;
}
.link_menu{
    font-size: var(--text);
}
.link_menu:nth-last-child(3){
    padding-left: 50%;
}
.inner_menu{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.menu_logo{
    height: 100%;
    width: 135px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.menu_logo::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 35px;
    left: 160px;
    background: var(--color3);
}
.logo_menu{
    width: 135px;
    height: 40px;
}
.ahart_logo{
    height: 100%;
    width: 150px;
    display: flex;
    justify-content: center;
    padding-left: 70px;
}
.ahart_logo{
    height: 42px;
    width: 150px;
}
.burger_menu{
    height: 100%;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
.menu_burger{
    width: 35px;
    height: 45px;
}
.menu_link{
    width: 35px;
    height: 35px;
}
.cross_menu{
    width: 100px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.menu_cross{
    width: 40px;
    height: 100px;
}

@media(max-width:1500px){
    .container_menu{
       flex-direction: column;
       height: 17vh;
       padding-top: 2%;
    }
    .nav_menu{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .link_menu:nth-last-child(3){
        padding-left: 30%;
    }
}
@media(max-width:768px){
    .container_menu{
        flex-direction: row;
        height: 8vh;
        padding-top: 0;
     }
    .nav_menu{
        width: 320px;
        height: 100vh;
        background: var(--color1);
        display:flex ;
        flex-direction: column;   
        justify-content: start;
        align-items: start;
        position: absolute;
        top: 0;
        right: -320px;
        transition: 0.3s;
    }
    .cross_menu{
        display: block;
        padding-bottom:0 ;
        height: 100px;
    }
    .link_menu:nth-last-child(3){
        padding-left: 0;
    }
    .link_menu{
        padding-top: 7px;
    }
    .burger_menu{
        height: 100%;
        width: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo_menu{
        width: 100px;
        height: 40px;
    }
    .ahart_logo{
        height: 30px;
        width: 70px;
    }
    .menu_logo{
        width: 120px;
    }
    .menu_logo::before{
        position: absolute;
        content: '';
        width: 1px;
        height: 25px;
        left: 128px;
        background: var(--color3);
    }
    .section_menu{
        padding-left: 0%;
        padding-right: 4%;
    }
}
.right{
    right: 0;
    transition: 0.3s;
}
/* section_banner */
.section_banner{
    background: url(./img/banner.jpg);
    background-position: center;
    object-fit: cover;
    padding: 0;
    background-repeat: no-repeat;
}
.container_banner{
    height: 100vh;
    background: url(./img/banner.jpg);
    background-position: center;
    background-size: cover;
}
.inner_banner{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: 100%;
    padding-top: 10%;
    padding-bottom: 5%;
}
.logo_banner{
    width: 400px;
    height: 135px;
}
.banner_logo{
    width: 100%;
    height: 100%;
}
.subtitle_banner{
    font-size: var(--subtitle);
    font-weight: 1000;
    padding-top: 6%;
    padding-bottom: 6%;
}
.link_banner{
    background: var(--color2);
    padding: 17px;
    padding-right: 110px;
    padding-left: 110px;
    font-weight: 800;
    font-size: var(--text);
    position: relative;
}
.link_banner:hover{
    background: var(--color1);
}
.link_bannerb::before{
    content: '';
    position: absolute;
    background: var(--color2);
    width: 286px;
    height: 2px;
    left: 0;
    top: -10%;
}
.link_bannerb::after{
    content: '';
    position: absolute;
    background: var(--color2);
    width: 286px;
    height: 2px;
    left: 0;
    bottom: -10%;
}
.link_banner:nth-last-child(1){
    border: 2px solid var(--color2);
    padding: 15px;
    color: var(--color2);
    font-weight: 800;
    font-size: var(--text);
    background:rgba(255, 255, 255, 0) ;
    margin-top: 4%;
}
@media(max-width:880px){
    .logo_banner{
        width: 300px;
        height: 105px;
    }
}
@media(max-width:768px){
     .inner_banner{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding-top: 10%;
        padding-bottom: 5%;
    }
}
/* section_choice */
.section_choice{
    padding-left: 3%;
    padding-right: 3%;
    background: #000;
}
.container_choice{
    height: 120vh;
    background: var(--color1);
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 6%;
}
.title_choice{
    color:var(--color3);
    font-size: var(--title);
    width: 100%;
    height: 8vh;
    text-align: start;
    padding-left: 40px;
    position: relative;
}
.title_choice::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 32px;
    left: 20px;
    top: 8px;
    background:var(--color2);
}
.inner_choice{
    width: 100%;
    height: 105vh;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 3%;
}
.card_choice{
    width: 32%;
    height: 100%;
    background: var(--colo4);
    display: flex;
    flex-direction: column;
}
.choice_img{
    width:100%;
    height:40%;
}
.img_choice{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.text_choice{
    width: 100%;
    padding-top: 6%;
    padding-bottom: 6%;
    text-align: center;
    font-size: var(--subtitle);
    font-weight: 900;
    color: var(--color2);
}
.list_choice{
    width: 100%;
    padding-left: 10%;
    line-height: 40px;
    padding-top: 3%;
    color: var(--color3);
}
.line{
    color: rgb(105, 105, 105);
    text-decoration: line-through;
    text-decoration-color: rgb(105, 105, 105);
}
.indent{
    margin-left: 45px;
    list-style-type: circle;
}
.red::marker{
    color: red;
}
/* section_sub */
.section_sub{
    padding-left:3% ;
    padding-right:3% ;
    background: var(--color1);
}
.container_sub{
    height: 110vh;
    flex-direction: column;
}
.inner_sub{
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid var(--color2);
    padding: 3%;
    background: linear-gradient(270.39deg, rgba(157, 36, 27, .2) 7.11%, transparent 89.02%);
}
.card_sub{
    width: 60%;
    height: 100%;
}
.subtitle_sub{
    padding-bottom: 2%;
    font-size: var(--subtitle);
    color: var(--color3);
}
.text_sub{
    font-size: var(--text);
    color: var(--color3);
}
.image_sub{
    width: 20px;
    height: 20px;
}
.sub_link{
    width: 300px;
    padding: 15px;
    text-align: center;
    background:var(--color2);
    font-size: var(--text);
    font-weight: 800;
    position: relative;
}
.sub_link::before{
    content: '';
    position: absolute;
    background: var(--color2);
    width: 39px;
    height: 2px;
    left: 0;
    bottom: -10%;
}
.sub_inner{
    margin-top: 4%;
    width: 100%;
    height: 45%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 3%;
    background:url(./img/save.jpg);
    background-size: cover;
    background-position: center;
}
.st{
    font-size: var(--title);
}
/* section_about */
.section_about{
    padding-left:3% ;
    padding-right:3% ;
    background: var(--color1);
}
.container_about{
    flex-direction: column;
}
.subtitle_about{
    width: 100%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-size: var(--title);
    padding-left: 40px;
    color: var(--color3);
    position: relative;
}
.subtitle_about::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 32px;
    left: 20px;
    top: 14px;
    background:var(--color2);
}
.title_about{
    width: 100%;
    color: var(--color2);
    font-size: var(--megatitle);
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-left: 5vh;
}
.title_about2{
    width: 100%;
    color: var(--color2);
    font-size: var(--megatitle);
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-left: 5vh;
    text-align: right;
}
.inner_about{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2%;
}
.about_first{
    width: 90%;
    display: flex;
    flex-direction: row;
}
.line_about{
    width: 320px;
    height: 4px;
    background:var(--color2);
    position: relative;
}
.line_about::before{
    background:var(--color2);
    content: '';
    position: absolute;
    width: 50px;
    height: 6px;
    top: 3px;
}
.text_about{
    height: 100%;
    width: 70%;
    font-size: var(--text);
    color: var(--color3);
    padding-left: 5%;
}
.about_second{
    width: 8%;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}
.box_about{
    width: 40px;
    height: 40px;
    background: var(--color2);
}
.img_box{
    width: 100%;
    height: 100%;
}
.wrapper_about{
    width: 310vh;
    height: 100vh;
    padding: 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: -70%;
    transition: 0.5s;
}
.card_about{
    width: 150vh;
    height: 100%;
    background: green;
}
.img_about{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.right2{
    margin-left: 0;
    transition: 0.5s;
}
/* section_mat */
.section_mat{
    padding-left: 3%;
    padding-right: 3%;
}
.container_mat{
    flex-direction: column;
}
.wrapper_mat{
    width: 100%;
    padding: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card_mat{
    width: 32%;
    padding-top: 2%;
}
.img_mat:hover{
    border: 2px solid var(--color2);
}
.img_mat:active{
    border: 2px solid var(--color2);
}
.img_mat{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--color1);
}
/* footer */
footer{
    background: var(--color1);
}
.container_footer{
    padding: 2%;
    flex-direction: row;
    justify-content: space-between;
}
.text_footer{
    color: var(--color3);
}
.footer_img{
    background: var(--color3);
    border-radius: 6%;
    width: 50px;
    height: 50px;
}
.img_footer{
    width: 100%;
    height: 100%;
}