@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&display=swap');
:root {--primary-bg-color:#2e2e2e; --primary-font-color:#333; --wrap-padding:10%;}
html{scroll-behavior: smooth; scroll-padding-top: 120px;}
*{margin:0; padding: 0; box-sizing: border-box !important; font-family: 'Afacad', sans-serif; user-select:none}
body{overflow-x: hidden !important;}

header{width:100%; height: 120px; background:#fff; z-index: 2; padding-inline: var(--wrap-padding); border:1px solid rgb(0,0,0,0.05); position: fixed; top:0px}
#head_logo{width:50%; height: 100%; float: left}
#head_logo img{margin-top: 10px; height: 100px; object-fit: contain; object-position: left;}

#head_links{width:50%; height: 100%; float: right;}
#head_links ul{list-style-type: none; display: flex; justify-content: right;}
#head_links ul li{padding-inline: 20px; float: left}
#head_links ul li a{text-decoration: none; color: var(--primary-font-color);}
#head_links ul li a i{transition: all 0.3s; border:1px solid #fff; width:40px; height: 40px; margin-top: 40px; background:var(--primary-bg-color); border-radius: 100%; line-height: 40px; color: #fff; text-align: center;}
#head_links ul li a i:hover{background:none; color:var(--primary-font-color); border-color: #ccc;}

#slider{width:100%; padding-inline: var(--wrap-padding); padding-block: 160px 80px;}

#slider_content h1{font-size: 72px; text-align: center; line-height: 90px; color: var(--primary-font-color);}
#slider_content p{font-size: 30px; text-align: center; margin-block:30px;}
#slider_content ul{list-style-type: none;}
#slider_content ul li{padding-inline: 40px; margin-top: 20px; width:20%; float: left;}
#slider_content ul li img{width:100px; height: 100px; object-fit: contain; display: block; margin: auto;}

#about{padding-bottom: 40px; padding-inline: var(--wrap-padding);}
#about_left{width:40%; height: 450px; float: left;}
#about_left h2{font-size: 36px; color: var(--primary-font-color); text-align: center;}
#about_left img{width:100%; height: 100%; object-fit: contain; object-position: center left;}

#about_right{width:60%; height: 450px; float: right;}
#about_right h2{font-size: 36px; color: var(--primary-font-color);}
#about_right p{padding-top: 20px; font-size: 20px;}

#stats{background:#f1f1f1; width:100%; height: 300px; padding-inline: var(--wrap-padding); padding-block: 100px 40px;}
#stats ul{list-style-type: none;}
#stats ul li{width:25%; text-align: center; float: left; color: var(--primary-font-color);}
#stats ul li h2{font-size: 36px; font-weight: 700;}
#stats ul li p{font-size: 24px; margin-top: 10px;}

footer{width:100%; padding-inline: var(--wrap-padding); padding-top: 80px;}
footer img{width: 250px; height: 150px; object-fit: contain; display: block; margin: auto;}
footer div{width:80%; margin: auto;}
footer table{width:50%; float: left; margin-block: 40px;}
footer table tr td{font-size: 22px; padding-block: 10px; font-size: 20px;}
footer table tr td:first-child{width:40px}
footer h2{text-align: center; padding-block: 20px; font-size: 18px; color: var(--primary-font-color); border-top:1px solid rgb(0,0,0,0.1); border-bottom: 1px solid rgb(0,0,0,0.1);}

.sm_only{display: none;}
@media screen and (min-width:320px) and (max-width:1024px){
    :root {--wrap-padding:20px;}
    .sm_only{display: block;}
    #head_links,.lg_only{display: none;}
    #head_logo{width:100%;}
    #head_logo img{display: block; margin-inline: auto;}

    #slider{padding-bottom: 40px;}
    #slider_content h1{font-size: 36px; line-height: 40px; padding-inline: 20px;}
    #slider_content ul li{width:50%; float: left;}
    #slider_content ul li img{display: block; margin: auto;}
    
    #about_left{width:100%; float: none; object-position: center center; height: auto}
    #about_right{height: auto; width:100%; float: none;}
    #about_right p{padding-top: 0px;}

    #stats{height: auto; padding-block: 30px;}
    #stats ul li{width:100%; float: none; margin-block: 40px;}
    #stats ul li p{margin-top: 0px;}

    footer{padding-inline: 40px;}
    footer div{width: 100%;}
    footer table{width: 100%; float: none;}
}
@media screen and (min-width:501px) and (max-width:1024px){
    #about_left img{height:400px; object-position: center center;}
}
@media screen and (min-width:700px) and (max-width:1024px){
    #slider_content ul li{width:33.33%;}
    #stats ul li{width:50%; float: left;}
    footer table{width: 50%; float: left;}
}