@font-face {font-family: "Mont-Bold"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype");}
@font-face {font-family: "Mont-Regular"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype");}
@font-face {font-family: "Mont-Medium"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype");}
@font-face {font-family: "Mont-Semi-Bold"; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");}
@font-face {font-family: "Mont-light"; src: url("../fonts/Montserrat-light.ttf") format("truetype");}
@font-face {font-family: "Mont-thin"; src: url("../fonts/Montserrat-Thin.ttf") format("truetype");}
@font-face {font-family: "Poppins-Medium"; src: url("../fonts/Poppins-Medium.ttf") format("truetype");}

body{width: 100%;display: flex; flex-direction: column; 
    background: #0F0F0F;;
    align-items: center;}
*{margin: 0; padding: 0;}
a { text-decoration: none; } 

button:hover{background: #E65200;cursor: pointer;}

header{
    width: 60%;
    /* border: 1px solid red; */
    height: fit-content;
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    min-width: 1160px;
    z-index: 1000;
    /* border: 1px solid red; */
}

.burger{
    display: none;
    display: flex;
    height: fit-content;
    flex-direction: column;
    align-items: end;
    width: fit-content;
    gap: 10px;
    /* background: red; */
    margin-left: auto;
    display: none;
}

.burger-big{
    width: 53px;
    height: 4px;
    background: white;
    border-radius: 20px;
}

.burger-small{
    width: 38px;
    height: 4px;
    background: white;
    border-radius: 20px;
}

.header-logo{
    width: 6%;
    aspect-ratio: 77/86;
}

.header-logo-text{
    width: fit-content;
    font-family: "Mont-Light";
    font-size: 16px;
    color: white;
    margin-left: 3%;
    display: none;
}

.nav-menu{
    width: 60%;
    aspect-ratio: 697/50;
    background: linear-gradient(-45deg, #000000 10%, rgba(96, 96, 96, 0.21) 100%);
    border-radius: 318px;
    border: 1px solid rgba(113, 113, 113, 0.5);
    margin-left: auto;
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 4%;
}

.nav-btn{
    width: fit-content;
    font-family: "Mont-Regular";
    font-size: 16px;
    text-decoration: none;
    color: white;
    /* border: 1px solid red; */
    padding: 1% 3%;
    border-radius: 20px;
    background: transparent;
    transition: color 0.5s ease, background 10s ease;
}

.nav-btn.active, .nav-btn:hover{
    background: linear-gradient(135deg, #FF5D04 0%, #FF9E68 100%);
    color: black;
}

.hide-menu{
    width: 60%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: start;
    color: white;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.hide-menu.show{
    transform: translateX(0%);
}

.close-menu-btn{
    width: fit-content;
    height: fit-content;
    /* aspect-ratio: 1/1; */
    margin-left: auto;
    margin-right: 5%;
    color: white;
    background: transparent;
    border: none;
    font-size: 5vw;
}

.menu-text{
    margin-left: 10%;
    margin-top: 15%;
    margin-bottom: 10%;
    font-family: "Mont-Bold";
    font-size: 10vw;
}

.hide-menu a{
    margin-left: 10%;
    color: white;
    font-family: "Mont-Medium";
    font-size: 5vw;
    margin-bottom: 5%;
}

.adv-desctop{
    width: 100%;
    aspect-ratio: 1920/277;
    min-height: 196px;
    background: black;
}



.adv-mobile{
    width: 100%;
    aspect-ratio: 768/269;
    background: #484848;
    display: none;
}

.adv-desctop-mask{
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #484848 0%, rgba(0, 0, 0, 0) 100%);
}

.header-section{
    width: 100%;
    aspect-ratio: 768/351;
    display: none;
    /* background: red; */
    position: relative;
    min-height: 194px;
    overflow: hidden;
}

.header-img{
    width: auto;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.header-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(6, 7, 9, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.last-article{
    width: 100%;
    /* background: red; */
    aspect-ratio: 1920/500;
    display: flex;
    justify-content: center;
    align-items: end;
    min-height: 500px;
    /* border: 1px solid green; */
    position: relative;
    overflow: hidden;
}

.last-article-img{
    /* width: 1920px; */
    /* height: 500px; */
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.last-article-img-mobile{
    width: 100%;
    height: auto;
}

.last-article-img-mobile-container{
    width: 100%;
    height: fit-content;
    display: none;
}

.article-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 1) 100%);
    display: none;
    z-index: 1;
}

.last-article-mask{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}

.last-article-content{
    width: 60%;
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    position: relative;
    color: white;
    gap: 30px;
    padding-bottom: 2%;
    min-width: 1160px;
    z-index: 2;
}

.last-article-content-name, .last-article-content-text{
    width: 70%;
}

.last-article-content-name{
    font-family: "Mont-Semi-Bold";
    font-size: 52px;
}

.last-article-content-text{
    font-family: "Mont-Light";
    font-size: 22px;
}



.last-article-content-btn-div{
    width: 100%;
    display: flex;
    
}

.last-article-content-btn-div-author{
    width: 70%;
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 30px;
}

.last-article-content-btn-div-btn{
    width: 25%;
    aspect-ratio: 286/61;
    display: none;
    background: rgba(255, 93, 4, 1);
    border-radius: 10px 30px 30px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    font-size: 16px;
    font-family: "Mont-Regular";
    max-width: 286px;
    margin-left: auto;
}

.author-content{display: flex; flex-direction: column; gap: 7px;}

.article-category{
    color: rgba(104, 104, 104, 1);
    font-family: "Mont-Light";
}

.article-category-content{
    font-family: "Mont-Light";
}

.article-grid{
    width: 60%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 28px;
    margin-top: 50px;
    min-width: 1160px;
}

.article-grid:hover{cursor: pointer;}

.article-grid-item{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.article-grid-item img{
    width: 100%;
    aspect-ratio: 360/233;
}

.article-grid-item-name{
    color: white;
    font-family: "Mont-Semi-Bold";
    font-size: clamp(15px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
}

.article-grid-item-theme{
    font-family: "Mont-thin";
    color: white;
    font-size: clamp(15px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
}

.article-grid-item-btn{
    width: 80%;
    aspect-ratio: 286/61;
    border: none;
    background: rgba(255, 93, 4, 1);
    border-radius: 10px 30px 30px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: "Mont-Regular";
    font-size: clamp(11px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
    max-width: 251px;
}

footer{
    margin-top: 60px;
    width: 100%;
    display: flex;
    /* height: 400px; */
    justify-content: center;
}

.footer-div{
    /* border: 1px solid green; */
    width: 60%;
    min-width: 1160px;
    display: flex;
    flex-direction: column;
}

.footer-menu {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    padding-bottom: 31px;
}

.footer-menu-row {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.footer-menu a {
    color: rgba(239, 239, 239, 1);
    font-size: 15px;
    font-family: "Mont-Regular";
    text-decoration: none;
}

.footer-info {
    display: grid;
    grid-template-columns: 1fr 10% 1fr;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 125px;
    /* border: 1px solid red; */
    margin-top: 31px;
    margin-bottom: 31px;
}

.footer-info-mobile{
    display: none;
}

.footer-info-content{
    /* border: 1px solid orange; */
    position: absolute;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-family: "Mont-Regular";
    color: white;
    height: fit-content;
}

.footer-info-content.start{left: 0;opacity: 0.75;}
.footer-info-content.center{left: 50%;transform: translateX(-50%);width: 9%;}
.footer-info-content.end{right: 0;}

@media (max-width: 1440px){
    header{width: 80%;min-width: 824px;}
    .nav-btn{font-size: clamp(11px, 1.0vw + 0.01px, 16px);}
    .header-logo-text{font-size: clamp(11px, 1.0vw + 0.01px, 16px);}
    

    .article-grid{width: 80%; min-width: 824px; font-size: clamp(15px, 1vw + 1px, 16px);}
    
    /* .last-article{min-height: 287px;} */
    /* .last-article img{width: 1100px; height: 287px;} */
    .last-article-content-name{font-size: clamp(37px, 2.5vw + 10px, 52px);  width: 80%;}
    .last-article-content-text{font-size: clamp(16px, 1.4vw + 5px, 22px);  width: 80%;}
    .last-article-content{width: 80%; min-width: 824px;}
    .last-article-content-btn-div-btn{min-width: 200px;}
    .footer-div{width: 80%;min-width: 824px;}
    .footer-info{font-size: clamp(9px, 1.2vw + 0.5px, 14px);}
    .footer-menu{font-size: clamp(11px, 1vw + 3px, 15px);}

    
    
}

@media (max-width: 900px){
    header{margin-top: 30px; min-width: 320px;}
    .header-logo{width: 21%;}
    .header-logo-text{display: none;}
    .nav-menu{display: none;}
    .burger{display: flex;}
    .adv-desctop{display: none;}
    .header-section{display: flex;min-width: 640px;}
    .article-grid{grid-template-columns: repeat(2, 1fr);min-width: 640px;}
    
    .last-article{width: 100%; aspect-ratio: 768/990;}
    .last-article-img{width: 100%; height: 100%;}
    .last-article-content-btn-div{flex-direction: column; gap: 30px;}
    .last-article-content-btn-div-btn{margin-left: 0; width: 42%;}
    .last-article-content{width: 85%;margin-left: 5%; min-width: 356px; gap: 41px; padding-bottom: 10%;}
    .last-article-content-name{font-size: 48px;}
    .last-article-content-text{font-size: 20px;}
    .article-category{font-size: 14px; color: white;}
    .article-category-content{font-size: 14px;}
    .last-article-mask{display: none;}
    .article-overlay{display: flex;}
    .article-grid-item-name{font-size: 18px;}
    .article-grid-item-theme{font-size: 12px;}
    .article-grid-item-btn{font-size: 16px;}
    .adv-mobile{width: 100%;aspect-ratio: 768/269;min-height: 152px; display: flex;}
    .footer-div{min-width: 640px;}
    .footer-menu{flex-direction: column; font-size: 30px; margin-top: 28px;}
    footer{background: #1A1A1A;}
    .footer-info{display: none;}
    .footer-info-mobile{display: flex;height: fit-content;width: 100%;align-items: center;margin-bottom: 100px;margin-top: 21px;gap: 30px;}
    .footer-info-content-img{width: 142px;aspect-ratio: 142/159;}
    .footer-info-content-rekv{flex: 1;display: flex;flex-direction: column;justify-content: end;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";margin-left: 20px;}
    .footer-info-content-prav{width: 35%;display: flex;flex-direction: column;justify-content: end;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";margin-left: 30px;}
    .footer-info-content-prav span{width: fit-content;}
}

@media (max-width: 768px){
    header{min-width: 310px;}
    .header-logo{min-width: 80px;}
    .burger{min-width: 53px;}
    .article-grid-item{min-width: none;}
    body{background: rgba(15, 15, 15, 1);}
    .header-section{display: flex;min-width: 310px; min-height: 194;}
    .header-img{width: 100%; height: auto;}
    .header-overlay{display: none;}
    .last-article{width: 100%; height: fit-content; flex-direction: column;min-height: none; aspect-ratio: auto; min-width: 310px;}
    .last-article-img{display: none;}
    .last-article-content{width: 100%; min-width: 310px; background: rgba(15, 15, 15, 1); align-items: center;}
    .last-article-content-name{font-size: 48px; width: 90%;}
    .last-article-content-text{width: 90%;}
    .article-grid{grid-template-columns: repeat(1, 1fr); min-width: 310px;}
    .article-grid-item-btn{width: 100%; max-width: none; min-width: 310px; aspect-ratio: 355/65;}
    
    .last-article{max-height: none; height: fit-content;}
    .last-article-img-mobile-container{display: flex; position: relative;}
    .last-article-content-btn-div-author{display: none;}
    .last-article-content-btn-div{width: 90%;}
    .last-article-content-btn-div-btn{width: 100%; min-width: 310px; font-size: 20px;}
    .last-article-img-mobile-mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 1) 70%);
    }
    footer{background: #1A1A1A; min-width: 310px;}
    .footer-menu{min-width: 310px; width: 100%; font-size: 30px; margin-top: 28px;}
    .footer-menu-row{width: 100%; gap: 30px;}
    .footer-menu-row a {font-size: 25px;}
    .footer-div{min-width: 310px;}
    .footer-info{min-width: 310px; display: none;}
    .footer-menu-row.down{flex-direction: column; align-items: center; gap: 20px;}
    .footer-info-mobile{display: flex;height: fit-content;width: 100%;align-items: center;flex-direction: column;margin-bottom: 100px;margin-top: 21px;gap: 30px;}
    .footer-info-content-img{width: 142px;aspect-ratio: 142/159;}
    .footer-info-content-rekv{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";}
    .footer-info-content-prav{width: 100%;display: flex;flex-direction: column;justify-content: center;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";text-align: center;align-items: center;}
    .footer-info-content-prav span{width: fit-content;}
}