@font-face {  
    font-family: 'Golos Text'; 
    font-weight: 400; 
    font-style: normal;  
    src: url('font/GolosText-Regular.ttf') format('opentype'),
}  


@font-face {  
    font-family: 'Golos Text'; 
    font-weight: 700; 
    font-style: normal;  
    src: url('font/GolosText-Bold.ttf') format('opentype'),
}  

@font-face {  
    font-family: 'Golos Text'; 
    font-weight: 500; 
    font-style: normal;  
    src: url('font/GolosText-Medium.ttf') format('opentype'),
}  

@font-face {  
    font-family: 'Golos Text'; 
    font-weight: 600; 
    font-style: normal;  
    src: url('font/GolosText-SemiBold.ttf') format('opentype'),
}  

@font-face {  
    font-family: 'Golos Text'; 
    font-weight: 900; 
    font-style: normal;  
    src: url('font/GolosText-Black.ttf') format('opentype'),
}  

@font-face {  
    font-family: 'Golos Text'; 
    font-weight: 800; 
    font-style: normal;  
    src: url('font/GolosText-ExtraBold.ttf') format('opentype'),
}  


html {
    scroll-behavior: smooth;
}

*{
    box-sizing: border-box;
}

:root {
    --golos: "Golos Text", sans-serif;
}


input:focus,
input:focus-visible,
button:focus,
button:focus-visible{
    outline: unset;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

img {
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

body{
    font-family: "Golos Text", sans-serif;
    background-color: #E4E0DB;
    margin: 0;
    scroll-behavior: smooth;
}

body.lock{
    overflow: hidden;
}

.header_container{
    max-width: 1300px;
    padding: 0 30px;
    margin: 0 auto;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 50px;
}

.logo{
    width: 140px;
    height: 20px;
    transition: all 0.3s ease;
}

header{
    margin-top: 40px;
    margin-bottom: 20px;
    position: sticky;
    top: 40px;
    z-index: 5;
}

.header_inner{
    background-color: #FFFFFF38;
    backdrop-filter: blur(14px);
    border-radius: 30px;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phone{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 47px;
    height: 30px;
    position: relative;
}

.phone img{
    position: absolute;
    left: 0;
        transition: all 0.3s ease;
    top: 0;
}

.phone img.mobile{
    transition: all 0.3s ease;
    opacity: 0;
}

.phone svg{
    fill: #FFFFFF;
}

header.scrolled .phone img.mobile{
    transition: all 0.3s ease;
    opacity: 0;
}

header.scrolled .phone img.desctop{
    transition: all 0.3s ease;
    opacity: 1;
}

header.scrolled .logo{
    transition: all 0.3s ease;
}

header.scrolled .logo path{
    fill: #000000;
    transition: all 0.3s ease;
}

.about{
    padding-top: 30px;
    padding-bottom: 90px;
}

.about_inner{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 92px;
}

.about_text{
    max-width: 430px;
}

.about_text h1{
    font-weight: 600;
    font-style: Text DemiBold;
    font-size: 46px;
    leading-trim: NONE;
    line-height: 110.00000000000001%;
    letter-spacing:normal;
    color: #0F1D2C;
    margin-bottom: 30px;
}

.about_text p{
    font-weight: 500;
    font-size: 15px;
    line-height: 130%;
    color: #0F1D2CB2;
}

.text1{
    margin-bottom: 17px;
}

.text2{
    margin-bottom: 50px;
}

.buttons{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buttons a,
.buttons button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    color: #0F1D2C;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -5%;
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 0;
    line-height: 130%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.buttons a svg,
.buttons button svg{
    transition: all 0.3s ease;
}

.buttons a.active,
.buttons button.active{
    background-color: #0F1D2C;
    color: #FFFFFF;
}

.buttons a.active svg path,
.buttons button.active svg path{
    fill: #ffffff;
}

.about_img{
    max-width: 478px;
    height: 648px;
    border-radius: 8px;
    overflow: hidden;
}

.about_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social_icons{
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

.social_icons a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 67px;
    height: 67px;
    border-radius: 100px;
    background-color: #0F1D2C0D;
    transition: all 0.3s ease;
}

.contacts_info{
    margin-bottom: 60px;
}

.contacts_info h2{
    font-weight: 500;
    font-style: Medium;
    font-size: 33px;
    leading-trim: NONE;
    line-height: 110.00000000000001%;
    letter-spacing: -4%;
    text-align: center;
    color: #0F1D2C;
    margin-bottom: 34px;
}

.contacts_info > p{
    color: #0F1D2C;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: -4%;
    text-align: center;
    opacity: 0.5;
    margin-bottom: 6px;
}

.contacts_info > a{
    color: #0F1D2C;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -4%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 18px;
    display: block;
    width: fit-content;
    opacity: 0.5;
}

.maps{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

[data-accordion-btn]{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    width: fit-content;
    margin-bottom: 12px;
}

[data-accordion-btn] p{
    color: #0F1D2C;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -4%;
}

[data-accordion-btn].active svg{
    transform: rotate(180deg);
    margin-top: 5px;
}

[data-accordion-content] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    justify-content: start;
    align-items: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

[data-accordion-content].active{
    transition: all 0.3s ease;
}

[data-accordion-content] a{
    color:#0F1D2C66;
    font-weight: 500;
    font-style: Medium;
    font-size: 13px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
    transition: all 0.3s ease;
}

footer{
    padding: 60px 0 70px 0;
    background-color: #FFFFFF4D;
}

.language_switch{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.language_switch li{
    color: #0F1D2C99;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -4%;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.language_switch svg{
    opacity: 0.5;
}

.language_switch li.active{
    color: #0F1D2CB2;
    opacity: 1;
}

.line_divider{
height: 1px;
    width: 80%;
    background: radial-gradient(72.53% 72.53% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 85%);
    background-image: radial-gradient(72.53% 72.53%, rgb(153 153 153 / 30%) 0%, rgba(0, 0, 0, 0) 85%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    margin: 40px auto;
}

.rights{
    display: flex;
    justify-content: center;
    align-items: center;
}

.rights p{
    text-align: center;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 20px;
    letter-spacing: -5%;
    text-align: center;
    color: #0F1D2C4D;
}

@media(min-width: 768px){
    .social_icons a:hover{
        background-color: #0F1D2C1A;
        transition: all 0.3s ease;
    }

    [data-accordion-content] a:hover{
        color:#0F1D2C99;
        transition: all 0.3s ease;
    }

    .language_switch li:hover{
        opacity: 1;
        transition: all 0.3s ease;
    }

    .buttons a:hover svg,
    .buttons button:hover svg{
        transform: translateX(5px);
        transition: all 0.3s ease;
    }


}

@media(max-width: 768px){

    body{
        position: relative;
    }

    body::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1055px;
        background: linear-gradient(180deg, #d5cdbc00 35.61%, #B2A875 118.7%);
        z-index: -1;
    }

    header{
        margin: 0;
        position: fixed;
        top: 30px;
        width: 100%;
        left: 0;
        z-index: 10;
    }

    .phone img.mobile{
        opacity: 1;
        transition: all 0.3s ease;
    }

    .phone img.desctop{
        transition: all 0.3s ease;
        opacity: 0;
    }

    .header_inner{
        backdrop-filter: blur(14px);
        background: #FFFFFF1F;
        padding: 15px 20px;
    }

    .logo{
        transition: all 0.3s ease;
    }

    .logo path{
        fill: #ffffff;
        transition: all 0.3s ease;
    }

    

    .about{
        padding-top: 0px;
        padding-bottom: 50px;
        overflow: hidden;
    }

    .about_text{
        margin-top: -170px;
        position: relative;
        z-index: 2;
    }

    .about_inner{
        gap: 0; 
        flex-direction: column-reverse;
        justify-content: flex-start;
    }

    .about_text h1{
        font-weight: 600;
        font-size: 36px;
    }

    .about_img{
        max-width: unset;
        height: 769px;
        width: calc(100% + 130px);
        margin-left: -30px;
        border-radius: 0;
        position: relative;
    }

    .about_img::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(228, 224, 219, 0) 55%, #E4E0DB 90%);
    }
    
    .social_icons{
        margin-bottom: 50px;
    }

    .social_icons a{
        width: 64px;
        height: 64px;
    }

    .contacts_info > a{
        margin-bottom: 14px;
    }

    .contacts_info{
        margin-bottom: 50px;
    }

    footer{
        padding: 40px 0 70px 0;
    }
}