:root { 
    --main-color: #F0C693;
    --border-color: #484848;
}

body { 
    overflow-x: hidden;
    background: #fff;
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

/* 1️⃣ GENERAL */

@media screen and (min-width: 1200px) {
    .main { 
        display: flex;
        flex-direction: column;
    }

    .container { 
        display: flex;
        flex-direction: column;
    }

    .corner__button { 
        position: relative;
    }

    .button__corner-1,
    .button__corner-2,
    .button__corner-3,
    .button__corner-4 { 
        transition: all 0.3s ease; 
    }

    .button__corner-1 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-right: none;
        border-bottom: none;
        top: -9px;
        left: -9px;
    }

    .button__corner-2 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-left: none;
        border-bottom: none;
        top: -9px;
        right: -9px;
    }

    .button__corner-3 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-top: none;
        border-left: none;
        bottom: -9px;
        right: -9px;
    }

    .button__corner-4 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-right: none;
        border-top: none;
        bottom: -9px;
        left: -9px;
    }

    .corner__button:hover .button__corner-1 {
        animation: corner-bounce-1 0.4s ease forwards;
    }
    
    .corner__button:hover .button__corner-2 {
        animation: corner-bounce-2 0.4s ease forwards;
    }
    
    .corner__button:hover .button__corner-3 {
        animation: corner-bounce-3 0.4s ease forwards;
    }
    
    .corner__button:hover .button__corner-4 {
        animation: corner-bounce-4 0.4s ease forwards;
    }
    
    /* Анимации для каждого уголка */
    @keyframes corner-bounce-1 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(-5px, -5px); /* Влево вверх */
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    @keyframes corner-bounce-2 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(5px, -5px); /* Вправо вверх */
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    @keyframes corner-bounce-3 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(5px, 5px); /* Вправо вниз */
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    @keyframes corner-bounce-4 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(-5px, 5px); /* Влево вниз */
        }
        100% {
            transform: translate(0, 0);
        }
    }
}

@media screen and (min-width: 300px) and (max-width: 1199px) {
    .main { 
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    .container { 
        display: flex;
        flex-direction: column;
    }

    .corner__button { 
        position: relative;
    }

    .button__corner-1,
    .button__corner-2,
    .button__corner-3,
    .button__corner-4 { 
        transition: all 0.3s ease; 
    }

    .button__corner-1 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-right: none;
        border-bottom: none;
        top: -9px;
        left: -9px;
    }

    .button__corner-2 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-left: none;
        border-bottom: none;
        top: -9px;
        right: -9px;
    }

    .button__corner-3 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-top: none;
        border-left: none;
        bottom: -9px;
        right: -9px;
    }

    .button__corner-4 { 
        position: absolute;
        width: 15px;
        height: 15px;
        border: 1px solid var(--border-color);
        border-right: none;
        border-top: none;
        bottom: -9px;
        left: -9px;
    }

    .corner__button:hover .button__corner-1 {
        animation: corner-bounce-1 0.4s ease forwards;
    }
    
    .corner__button:hover .button__corner-2 {
        animation: corner-bounce-2 0.4s ease forwards;
    }
    
    .corner__button:hover .button__corner-3 {
        animation: corner-bounce-3 0.4s ease forwards;
    }
    
    .corner__button:hover .button__corner-4 {
        animation: corner-bounce-4 0.4s ease forwards;
    }
    
    /* Анимации для каждого уголка */
    @keyframes corner-bounce-1 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(-5px, -5px); /* Влево вверх */
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    @keyframes corner-bounce-2 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(5px, -5px); /* Вправо вверх */
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    @keyframes corner-bounce-3 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(5px, 5px); /* Вправо вниз */
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    @keyframes corner-bounce-4 {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(-5px, 5px); /* Влево вниз */
        }
        100% {
            transform: translate(0, 0);
        }
    }
}

/* 2️⃣ HEADER */

@media screen and (min-width: 1200px) {
    .header { 
        position: fixed;
        top: 0;
        left: 0;
        background: transparent;
        width: 100%;
        z-index: 999;
        height: 75px;
        transition: background 0.3s ease;
    }

    .header__container { 
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 65px;
        padding: 0px 45px;
        height: 100%;
    }

    .header__list { 
        display: flex;
        gap: calc(100vw / 19.2);
        align-items: center;
    }

    .header__list li a { 
        color: #fff;
        font-family: "Inter";
        font-size: 21px;
        font-weight: 800;
        transition: all ease 0.3s;
        position: relative;
    }

    .header__list li a:hover { 
        color: var(--main-color);
    }

    .header__list li a::after { 
        content: "";
        position: absolute;
        bottom: -2px;
        left: -2px;
        height: 1px;
        width: calc(100% + 4px);
        width: 0px;
        background: var(--main-color);
        z-index: 999;
        transition: all ease 0.3s;
    }

    .header__list li a:hover::after { 
        width: calc(100% + 4px);
    }

    .header__devider { 
        width: 1px;
        height: 40px;
        background-color: #fff;

    }

    .header__links { 
        display: flex;
        gap: calc(100vw / 42);
        align-items: center;
    }
}

@media screen and (min-width: 300px) and (max-width: 1199px) {
    .header { 
        position: fixed;
        top: 0;
        left: 0;
        background: transparent;
        width: 100%;
        z-index: 999;
        height: 75px;
        transition: background 0.3s ease;
    }

    .header__container { 
        display: flex;
       
        align-items: center;
        gap: 15px;
        padding: 0px 45px;
        height: 100%;
    }

    .header__list { 
        display: flex;
        gap: calc(100vw / 19.2);
        align-items: center;
    }

    .header__list li a { 
        color: #fff;
        font-family: "Inter";
        font-size: 12px;
        font-weight: 800;
        transition: all ease 0.3s;
        position: relative;
    }

    .header__list li a:hover { 
        color: var(--main-color);
    }

    .header__list li a::after { 
        content: "";
        position: absolute;
        bottom: -2px;
        left: -2px;
        height: 1px;
        width: calc(100% + 4px);
        width: 0px;
        background: var(--main-color);
        z-index: 999;
        transition: all ease 0.3s;
    }

    .header__list li a:hover::after { 
        width: calc(100% + 4px);
    }

    .header__devider { 
        width: 1px;
        height: 40px;
        background-color: #fff;

    }

    .header__links { 
        height: 100%;
        display: flex;
        gap: calc(100vw / 42);
        align-items: center;
    }

   

    .header__links-item img { 
        min-width: 16px;
    }
}

/* 3️⃣ WELCOME */
@media screen and (min-width: 1200px) {
    .welcome__container { 
        height: calc(834px);
        width: 100%;
        background-image: url('../../public/img/welcome.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        padding: 130px 0px 0px 140px;
        margin: 0px 0px 266px 0px;
    }

    .welcome__container h1 { 
        font-size: 65px;
        color: #000;
        font-family: "Raleway";
        font-weight: 700;
    }

    .welcome__subtitle { 
        font-size:  21px;
        color: #141414;
        padding: 20px 0px 0px 0px;
    }

    .welcome__buttons { 
        display: flex;
        gap: 40px;
        margin-top: 40px;
    }

    .welcome__button-type1 { 
        position: relative;
        font-size: 21px;
        font-weight: 500;
        font-family: "Raleway";
        padding: 14px 25px;
        background: var(--main-color);
        color: #fff;
        display: inline-block;
        border: none;
        cursor: pointer;
    }

    .welcome__button-type2 { 
        position: relative;
        font-size: 21px;
        font-weight: 500;
        font-family: "Raleway";
        padding: 14px 25px;
        background: #3B3B3B;
        color: #fff;
        display: inline-block;
        border: none;
        cursor: pointer;
    }

    .welcome__footer { 
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 266px;
        transform: translateY(100%);
        background: #565656;
        padding: 0px calc(100vw / 38.4);
        display: flex;
        gap: calc(100vw / 16);
        align-items: center;
    }

    .welcome__footer-item { 
        display: flex;
        gap: 15px;
        align-items: flex-end;
        position: relative;
    }

    .welcome__footer-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: calc(-100vw / 32); 
        top: 50%;
        transform: translateY(-50%);
        height: 90px;
        width: 1px;
        background-color: #DADADA;
    }

    .welcome__footer-item p { 
        position: relative;
        color: #DADADA;
        font-size: calc(100vw / 80);
        font-weight: 600;
        padding: 0px 0px 10px 0px;
        text-wrap: nowrap;
    }

    .welcome__footer-item p::after { 
        content: "";
        position: absolute;
        top: -13px;
        left: 0px;
        height: 2px;
        width: 24px;
        background: #F0C693;
    }
}

@media screen and (min-width: 300px) and (max-width: 1199px) {
    .welcome__container { 
        
        width: 100%;
        background-image: url('../../public/img/welcome.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        padding: 130px 40px 0px 40px;
        margin: 0px 0px 0px 0px;
    }

    .welcome__container h1 { 
        font-size: 45px;
        color: #000;
        font-family: "Raleway";
        font-weight: 700;
    }

    .welcome__subtitle { 
        font-size:  21px;
        color: #141414;
        padding: 20px 0px 0px 0px;
    }

    .welcome__buttons { 
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
    }

    .welcome__button-type1 { 
        position: relative;
        font-size: 21px;
        font-weight: 500;
        font-family: "Raleway";
        padding: 14px 15px;
        background: var(--main-color);
        color: #fff;
        display: inline-block;
        border: none;
        cursor: pointer;
    }

    .welcome__button-type2 { 
        position: relative;
        font-size: 21px;
        font-weight: 500;
        font-family: "Raleway";
        padding: 14px 25px;
        background: #3B3B3B;
        color: #fff;
        display: inline-block;
        border: none;
        cursor: pointer;
    }

    .welcome__footer { 
        
        width: 100vw;
        height: 266px;
        transform: translateX(-40px);
        margin: 180px 0 0 0 ;
        background: #565656;
        padding: 20px calc(100vw / 38.4);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(100vw / 16);
        align-items: center;
    }

    .welcome__footer-item { 
        display: flex;
        gap: 15px;
        align-items: flex-end;
        position: relative;
    }

    .welcome__footer-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: calc(-100vw / 32); 
        top: 50%;
        transform: translateY(-50%);
        height: 90px;
        width: 1px;
        background-color: #DADADA;
    }

    .welcome__footer-item:last-child { 
        display: none;
    }

    .welcome__footer-item p { 
        position: relative;
        color: #DADADA;
        font-size: calc(100vw / 80);
        font-weight: 600;
        padding: 0px 0px 10px 0px;
        text-wrap: nowrap;
    }

    .welcome__footer-item p::after { 
        content: "";
        position: absolute;
        top: -13px;
        left: 0px;
        height: 2px;
        width: 24px;
        background: #F0C693;
    }
}

/*  4️⃣ EXPIRIENCE  */

@media screen and (min-width: 1200px) {
    .experience__container { 
        padding: 200px 30px 120px 30px;
        flex-direction: row;
        gap: 40px;
        border-bottom: 1px solid #EAEAEA;
    }

    .experience__wrapper { 
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        max-width: calc(100vw / 1.6991);
    }

    .experience__title-wrapper { 
        padding: 40px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 849px;
        
        width: 100%;
        position: relative;
        background-image: url('../../public/img/sec-1.png');
    }

    .experience__title-img { 
        position: absolute;
        top: 40px;
        right: 50px;
        cursor: pointer;
    }

    .experience__title-wrapper h2 { 
        font-size: 40px;
        font-weight: 700;
        color: #EBEBEB;
        
    }

    .experience__title-disc { 
        font-size: 21px;
        font-weight: 400;
        color: #E0E0E0;
        max-width: 880px;

    }

    .experience__title-disc span { 
        color: #F0C693;
        font-weight: 600;
    }

    .experience__house { 
        background: #B2B2B2;
        height: 414px;
        width: 100%;
        position: relative;
    }

    .experience__house-image { 
        position: absolute;
        bottom: 0px;
        width: 100%;
    }

    .experience__house-image img { 
        width: 100%;
    }

    .experience__block { 
        width: 100%;
        max-width: calc(100vw / 2.8276);
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .experience__block-title { 
        padding: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 396px;
        position: relative;
    }

    .experience__block-text { 
        display: flex;
        flex-direction: column;
        gap: 20px;

    }

    .experience__block-text h3 { 
        font-size: 28px;
        color: #0d0d0d;
        font-weight: 700;
        font-family: "Raleway";
    }

    .experience__block-text p  { 
        font-size: 19px;
        font-weight: 400;
        max-width: 560px;
        color: #343434;
    }

    .experience__block-text span { 
        font-weight: 600;
        color: #F0C693;
    }

    .experience__button { 
        color: #fff;
        background: #F0C693;
        width: 209px;
        height: 53px;
        transform: translateX(10px);
        font-size: 21px;
        font-weight: 500;
    }
    /* ----------------------------------------------- */

    .block__corner-1, .block__corner-2,
    .block__corner-3, .block__corner-4 { 
        position: absolute;
        border: 1px solid #DCDCDC;
        width: 60px;
        height: 60px;
        z-index: 9;
    }

    .block__corner-1 { 
        border-bottom: none;
        border-right: none;
        top: 0px;
        left: 0px;
    }

    .block__corner-2 { 
        border-left: none;
        border-bottom: none;
        top: 0px;
        right: 0px;
    }

    .block__corner-3 { 
        border-top: none;
        border-left: none;
        bottom: 0px;
        right: 0px;
    }

    .block__corner-4 { 
        border-right: none;
        border-top: none;
        bottom: 0px;
        left: 0px;
    }

    /* ------------------------------------------------------- */

    .experience__block-image { 
        position: absolute;
        bottom: 25px;
        right: 25px;
        cursor: pointer;
        z-index: 50;

    }

    .experience__block-footer { 
        height: 100%;
        max-height: 414px;
    }

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

@media screen and (min-width: 300px) and (max-width: 1199px) {
    .experience__container { 
        padding: 100px 30px 60px 30px;
        
        gap: 40px;
        border-bottom: 1px solid #EAEAEA;
    }

    .experience__wrapper { 
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        
    }

    .experience__title-wrapper { 
        padding: 40px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        
        background: #6E6E6E;
        width: 100%;
        position: relative;
        background-image: none !important;

    }

    .experience__title-img { 
        position: absolute;
        top: 40px;
        right: 50px;
        cursor: pointer;
    }

    .experience__title-wrapper h2 { 
        font-size: 40px;
        font-weight: 700;
        color: #EBEBEB;
        
    }

    .experience__title-disc { 
        font-size: 21px;
        font-weight: 400;
        color: #E0E0E0;
        max-width: 880px;

    }

    .experience__title-disc span { 
        color: #F0C693;
        font-weight: 600;
    }

    .experience__house { 
        background: #B2B2B2;
        height: 414px;
        width: 100%;
        position: relative;
    }

    .experience__house-image { 
        position: absolute;
        bottom: 0px;
        width: 100%;
    }

    .experience__house-image img { 
        width: 100%;
    }

    .experience__block { 
        width: 100%;
        
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .experience__block-title { 
        padding: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        position: relative;
    }

    .experience__block-text { 
        display: flex;
        flex-direction: column;
        gap: 20px;

    }

    .experience__block-text h3 { 
        font-size: 28px;
        color: #0d0d0d;
        font-weight: 700;
        font-family: "Raleway";
    }

    .experience__block-text p  { 
        font-size: 19px;
        font-weight: 400;
        max-width: 560px;
        color: #343434;
    }

    .experience__block-text span { 
        font-weight: 600;
        color: #F0C693;
    }

    .experience__button { 
        color: #fff;
        background: #F0C693;
        width: 209px;
        height: 53px;
        transform: translateX(10px);
        font-size: 21px;
        font-weight: 500;
        margin-top: 20px;
    }
    /* ----------------------------------------------- */

    .block__corner-1, .block__corner-2,
    .block__corner-3, .block__corner-4 { 
        position: absolute;
        border: 1px solid #DCDCDC;
        width: 60px;
        height: 60px;
        z-index: 9;
    }

    .block__corner-1 { 
        border-bottom: none;
        border-right: none;
        top: 0px;
        left: 0px;
    }

    .block__corner-2 { 
        border-left: none;
        border-bottom: none;
        top: 0px;
        right: 0px;
    }

    .block__corner-3 { 
        border-top: none;
        border-left: none;
        bottom: 0px;
        right: 0px;
    }

    .block__corner-4 { 
        border-right: none;
        border-top: none;
        bottom: 0px;
        left: 0px;
    }

    /* ------------------------------------------------------- */

    .experience__block-image { 
        position: absolute;
        bottom: 25px;
        right: 25px;
        cursor: pointer;
        z-index: 50;

    }

    .experience__block-footer { 
        height: 100%;
        max-height: 414px;
    }

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

@media screen and (min-width: 1200px) {
    .service__container { 
        padding: 100px calc(100vw / 8.3478) 140px 30px;
        height: 100vh;
        justify-content: center;
        
    }

    .service__list { 
        display: flex;
        gap: calc(100vw / 7.4708);
    }

    .service__disc { 
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: calc(100vw / 3.878787);
    }

    .service__container h3 { 
        color: #000;
        font-family: "Raleway";
        font-size: 32px;
        font-weight: 700;
    }

    .service__disc-subtitle { 
        font-size: 21px;
        font-weight: 400;
        color: #8C8C8C;
        margin-top: 10px;
    }

    .service__disc-subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .service__disc-image { 
        width: 100%;
        margin-top: 40px;
        max-height: 411px;
        overflow: hidden;
    }

    .service__disc-image-wrapper { 
        transition: all ease 0.3s;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .service__disc-image-wrapper  img { 
        height: 411px;
        object-fit: cover;
    }

    .service__block { 
        padding: 105px;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;

    }

    .service__block-overflow { 
        overflow: hidden;
        max-height: 339px;
        min-height: 339px;
        
    }

    .service__block-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;
        max-height: 339px;
        transition: all ease 0.3s;
    }

    .service__block-item { 
        display: flex;
        flex-direction: column;
        min-height: 340px;
        max-height: 340px;
    }

    .service__block-number { 
        position: absolute;
        top: 46px;
        left: 46px;
        font-family: "Crimson";
        font-weight: 700;
        color: #6E6E6E;
        font-size: 30px;
        overflow: hidden;
        transition: all ease 0.3s;
        height: 39px;

    }

    .service__block-number-wrapper { 
        display: flex;
        flex-direction: column;
        transition: all ease 0.3s;
    }

    .service__block-number span  { 
        color: #2D2D2D;
    }

    .service__block-title { 
        font-size: calc(100vw / 29.5384);
        color: #262626;
        font-weight: 800;
    }

    .service__block-subtitle { 
        font-size: 21px;
        color: #8C8C8C;
        font-weight: 400;
        margin-top: 20px;
    }

    .service__block-subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .service__block-button { 
        font-weight: 500;
        font-size: 21px;
        color: #fff;
        background-color: #3B3B3B;
        padding: 14px 25px;
        position: relative;
        max-width: 222px;
        margin-top: auto;
        transform: translate(23px, -10px);
    }

    .service__block-count { 
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 56px;
        position: absolute;
        right: 30px;
        bottom: 41px;
    }

    .service__block-count-item { 
        border: 1px solid #000;
        background: transparent;
        transition: all ease 0.7s;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 10;
    }

    .service__block-count-item.active { 
        background: #000;
    }
    
    .service__container {
        height: 65vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }

    .service__buttons { 
        display: flex;
        gap: 70px;
        padding: 0px 30px 10px 0px;
        position: absolute;
        top: 30px;
        right: 0px;
    }

    .service__button-1 {      
        background-color: #505050;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .service__button-2 { 
        background-color: #F0C693;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

@media screen and (min-width: 300px) and (max-width: 1199px)  {
    .service__container { 
        padding: 100px 30px 140px 30px;
        
        justify-content: center;
        
    }

    .service__list { 
        display: flex;
        flex-direction: column;
    }

    .service__disc { 
        display: flex;
        flex-direction: column;
        width: 100%;
        
    }

    .service__container h3 { 
        color: #000;
        font-family: "Raleway";
        font-size: 32px;
        font-weight: 700;
    }

    .service__disc-subtitle { 
        font-size: 21px;
        font-weight: 400;
        color: #8C8C8C;
        margin-top: 10px;
    }

    .service__disc-subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .service__disc-image { 
        width: 100%;
        margin-top: 40px;
        max-height: 411px;
        overflow: hidden;
    }

    .service__disc-image-wrapper { 
        transition: all ease 0.3s;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .service__disc-image-wrapper  img { 
        height: 411px;
        object-fit: cover;
    }

    .service__block { 
        padding: 40px 30px 30px 6px;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;

    }

    .service__block-overflow { 
        overflow: hidden;
        max-height: 339px;
        min-height: 339px;
        
    }

    .service__block-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;
        max-height: 339px;
        transition: all ease 0.3s;
    }

    .service__block-item { 
        display: flex;
        flex-direction: column;
        min-height: 340px;
        max-height: 340px;
    }

    .service__block-number { 
        position: absolute;
        top: 6px;
        left: 6px;
        font-family: "Crimson";
        font-weight: 700;
        color: #6E6E6E;
        font-size: 30px;
        overflow: hidden;
        transition: all ease 0.3s;
        height: 39px;

    }

    .service__block-number-wrapper { 
        display: flex;
        flex-direction: column;
        transition: all ease 0.3s;
    }

    .service__block-number span  { 
        color: #2D2D2D;
    }

    .service__block-title { 
        
        color: #262626;
        font-weight: 800;
    }

    .service__block-subtitle { 
        font-size: 21px;
        color: #8C8C8C;
        font-weight: 400;
        margin-top: 20px;
    }

    .service__block-subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .service__block-button { 
        font-weight: 500;
        font-size: 21px;
        color: #fff;
        background-color: #3B3B3B;
        padding: 14px 25px;
        position: relative;
        max-width: 182px;
        margin-top: auto;
        transform: translate(23px, -10px);
    }

    .service__block-count { 
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 46px;
        position: absolute;
        right: 30px;
        bottom: 41px;
    }

    .service__block-count-item { 
        border: 1px solid #000;
        background: transparent;
        transition: all ease 0.7s;
        width: 15px;
        height: 15px;
        cursor: pointer;
        z-index: 10;
    }

    .service__block-count-item.active { 
        background: #000;
    }
    
    .service__container {
        
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }

    .service__buttons { 
        display: flex;
        gap: 30px;
        padding: 0px 30px 10px 0px;
        position: absolute;
        top: 30px;
        right: 0px;
    }

    .service__button-1 {      
        background-color: #505050;
        width: 40px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .service__button-2 { 
        background-color: #F0C693;
        width: 40px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* 5️⃣ ABOUT */

@media screen and (min-width: 1200px) {
    .about { 
        overflow: hidden;
    }
    
    .about__container { 
        padding: 0px 0px 0px 30px;
        flex-direction: row;
        border-top: 1px solid #D9D9D9;
        border-bottom: 1px solid #D9D9D9;
    }

    .about__title { 
        display: flex;
        flex-direction: column;
        border-right: 1px solid #D9D9D9;
        padding: 50px 8px 50px 0px;
        max-width: calc(100vw / 2.57372);
        width: 100%;
    }

    .about__title h3 { 
        font-family: "Raleway";
        font-size: 32px;
        color: #000;
        font-weight: 700;
        font-style: normal;
    }

    .about__sutitle { 
        font-size: 21px;
        color: #616161;
        margin-top: 10px;
        max-width: calc(100vw / 4.4547);
    }

    .about__sutitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .about__title-image { 
        max-width: calc(100vw / 2.6016);
        margin-top: 66px;
    }

    .about__block { 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }

    .about__block-disc { 
        display: flex;

    }

    .about__block-disc-1-image { 
        width: 100%;
        max-width: calc(100vw / 5.0393);

    }

    .about__block-disc-1-text { 
        height: 100%;
        padding: calc(100vw / 27.826) calc(100vw / 22.5882) calc(100vw / 28.2352) calc(100vw / 27.8260);
    }

    .about__block-disc-1-text-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        padding: calc(100vw / 64);
        position: relative;
        max-width: calc(100vw / 2.9223);
        
    }

    .about__block-disc-1-text-wrapper h5 { 
        font-size: 45px;
        font-weight: 700;
        color: #000;
    }

    .about__block-disc-1-text-block { 
        color: #616161;
        font-size: 21px;

    }

    .about__block-disc-1-text-block span { 
        font-weight: 600;
        color: #F0C693;
    }

    .about__block-text { 
        padding: 20px;
        border-left: 1px solid #D9D9D9;
        display: flex;
        align-items: end;
    }

    .about__block-text-element { 
        max-width: calc(100vw / 6.9818);
        font-size: 19px;
        color: #616161;

    }

    .about__block-text-element span { 
        font-weight: 600;
        color: #F0C693;
    }

    .about__block-footer { 
        will-change: auto;
        border-top: 1px solid #D9D9D9;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        padding: 0px 30px 0px 0px;
    }

    .about__block-footer-disc { 
        font-size: 21px;
        font-size: calc(100vw / 91.4285);
        padding: 0px 0px 0px 15px;
        color: #616161;
        padding: 15px 0px 0px 15px;
        max-width: calc(100vw / 4.7642);
    }

    .about__block-footer img { 
        max-width: calc(100vw / 5.0393);
    }


    .about__block-footer-disc  span { 
        color: #F0C693;
        font-weight: 600;
    }

    .about__block-footer-button { 
        position: relative;
        background-color: #F0C693;
        color: #fff;
        padding: 14px 25px;
        font-size: 21px;
        height: 53px;
        width: 100%;
        max-width: calc(100vw / 9.1866);
        text-align: center;
        margin: auto 0 15px auto;
        text-wrap: nowrap;
    }
}

@media screen and (min-width: 300px) and (max-width: 1199px) {
    .about__container { 
        padding: 0px 30px 0px 30px;
       
        border-top: 1px solid #D9D9D9;
        border-bottom: 1px solid #D9D9D9;
    }

    .about__title { 
        display: flex;
        flex-direction: column;
        border-right: 1px solid #D9D9D9;
        padding: 50px 8px 50px 0px;
        
        width: 100%;
    }

    .about__title h3 { 
        font-family: "Raleway";
        font-size: 32px;
        color: #000;
        font-weight: 700;
        font-style: normal;
    }

    .about__sutitle { 
        font-size: 21px;
        color: #616161;
        margin-top: 10px;
        
    }

    .about__sutitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .about__title-image { 
        
        margin-top: 66px;
    }

    .about__block { 
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: space-between;
        width: 100%;
    }

    .about__block-disc { 
        display: flex;
        flex-direction: column;
    }

    .about__block-disc-1-image { 
        width: 100%;
       

    }

    .about__block-disc-1-image img { 
        width: 100%;
    }

    .about__block-disc-1-text { 
        height: 100%;
       
    }

    .about__block-disc-1-text-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        
        position: relative;
        
        
    }

    .about__block-disc-1-text-wrapper h5 { 
        font-size: 45px;
        font-weight: 700;
        color: #000;
    }

    .about__block-disc-1-text-block { 
        color: #616161;
        font-size: 21px;

    }

    .about__block-disc-1-text-block span { 
        font-weight: 600;
        color: #F0C693;
    }

    .about__block-text { 
        padding: 20px;
        
        display: flex;
        align-items: end;
    }

    .about__block-text-element { 
        
        font-size: 19px;
        color: #616161;

    }

    .about__block-text-element span { 
        font-weight: 600;
        color: #F0C693;
    }

    .about__block-footer { 
        will-change: auto;
        border-top: 1px solid #D9D9D9;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        flex-direction: column;
        padding: 0px 30px 0px 0px;
    }

    .about__block-footer-disc { 
        font-size: 21px;
        padding: 0px 0px 0px 15px;
        color: #616161;
        padding: 15px 0px 0px 15px;
        
    }


    .about__block-footer-disc  span { 
        color: #F0C693;
        font-weight: 600;
    }

    .about__block-footer-button { 
        position: relative;
        background-color: #F0C693;
        color: #fff;
        padding: 14px 25px;
        font-size: 21px;
        height: 53px;
        width: 100%;
        
        text-align: center;
        margin: auto 0 15px auto;
        text-wrap: nowrap;
    }
}

/* 6️⃣ HISTORY */

@media screen and (min-width: 1200px) {
    .history__container { 
        padding: 0px 30px;
    }

    .history__container h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;
        padding: 120px 0px 0px 0px;
    }

    .history__container-subtitle { 
        font-size: 21px;
        color: #616161;
        font-weight: 400;
        padding-bottom: 80px;
        margin-top: 10px;
        max-width: calc(100vw / 4.4547);
    }

    .history__container-subtitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .history__list { 
        display: flex;
        gap: calc(100vw / 21.3333);
    }

    .history__item { 
        padding: 20px 0px 25px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        border-top: 1px solid #D9D9D9;
        border-bottom: 1px solid #D9D9D9;
        position: relative;
    }

    .history__item:not(:last-child)::after { 
        content: "";
        position: absolute;
        top: 25px;
        right: calc(-100vw / 21.3333 / 2);
        height: 100%;
        max-height: calc(100% - 50px);
        width: 1px;
        background-color: #D9D9D9;
        z-index: 9;
    }

    .history__item__image { 
        position: absolute;
        right: calc(-100vw / 21.3333 / 2);
        top: -20px;
        transform: translateX(50%);
    }

    .history__item-main-image { 
        margin-bottom: 30px;
    }

    .history__item-title { 
        font-size: 32px;
        color: #000;
        font-weight: 600;

    }

    .history__item-subtitle { 
        font-size: 21px;
        color: #8D8D8D;

    }

    .history__item-subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .history__block { 
        padding: 20px 0px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #D9D9D9;
    }

    .history__block h5 { 
        font-weight: 600;
        font-size: 32px;
        color: #000;

    }

    .history__block-subtitle { 
        font-size: 21px;
        color: #8D8D8D;
        margin-top: 15px;
        max-width: calc(100vw / 2.2561);
    }

    .history__block-subtitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .history__block-image { 
        width: 100%;
        max-width: calc(100vw / 1.9773);
    }

    .history__footer { 
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .history__footer-text { 
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 120px 0px 60px 0px;
    }

    .history__footer-text  h5 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .history__footer-disc { 
        font-size: 21px;
        color: #8C8C8C;
        max-width: calc(100vw / 4);
    }

    .history__footer-disc span { 
        color: #F0C693;
        font-weight: 600;
    }

    .history__footer-button { 
        width: 43px;
        height: 53px;
        background-color: #F0C693;
        margin-bottom: 70px;
    }
}

@media screen and ( min-width: 300px) and (max-width: 1199px) {
    .history__container { 
        padding: 0px 30px;
    }

    .history__container h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;
        padding: 60px 0px 0px 0px;
    }

    .history__container-subtitle { 
        font-size: 21px;
        color: #616161;
        font-weight: 400;
        padding-bottom: 80px;
        margin-top: 10px;
        
    }

    .history__container-subtitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .history__list { 
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .history__item { 
        padding: 20px 0px 25px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        border-top: 1px solid #D9D9D9;
        border-bottom: 1px solid #D9D9D9;
        position: relative;
    }

    

    .history__item__image { 
        position: absolute;
        right: calc(-100vw / 21.3333 / 2);
        top: -20px;
        transform: translateX(50%);
        display: none;
    }

    .history__item-main-image { 
        margin-bottom: 30px;
    }

    .history__item-title { 
        font-size: 32px;
        color: #000;
        font-weight: 600;

    }

    .history__item-subtitle { 
        font-size: 21px;
        color: #8D8D8D;

    }

    .history__item-subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .history__block { 
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #D9D9D9;
    }

    .history__block h5 { 
        font-weight: 600;
        font-size: 32px;
        color: #000;

    }

    .history__block-subtitle { 
        font-size: 21px;
        color: #8D8D8D;
        margin-top: 15px;
        
    }

    .history__block-subtitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .history__block-image { 
        width: 100%;
        margin-top: 20px;
    }

    .history__footer { 
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .history__footer-text { 
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 120px 0px 60px 0px;
    }

    .history__footer-text  h5 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .history__footer-disc { 
        font-size: 21px;
        color: #8C8C8C;
        
    }

    .history__footer-disc span { 
        color: #F0C693;
        font-weight: 600;
    }

    .history__footer-button { 
        width: 43px;
        min-width: 43px;
        height: 53px;
        background-color: #F0C693;
        margin-bottom: 70px;
    }
}

/* 7️⃣ ALBUM */

@media screen and (min-width: 1200px) {
    .album__container { 
        padding: 0px;
    }

    .album__item-full { 
        display: flex;

    }

    .album__item-wrapper { 
        position: relative;
        overflow: hidden;
    }

    .album__item-wrapper img { 
        transition: all ease 0.5s;
    }

    .album__item-wrapper:hover img { 
        scale: 1.1;
    }

    .album__item-row { 
        display: flex;
    }

    .album__item-text { 
        color: #ffffff;
        font-size: 32px;
        font-weight: 700;
    }

    .album__item-full .album__item-text { 
        position: absolute;
        bottom: 30px;
        left: 30px;

    }

    .album__item-row .album__item-text { 
        position: absolute;
        bottom: 30px;
        right: 30px;
    }


}

@media screen and ( min-width: 300px) and (max-width: 1199px) {
    .album__container { 
        padding: 0px;
    }

    .album__item-full { 
        display: flex;

    }

    .album__item-wrapper { 
        position: relative;
        overflow: hidden;
    }

    .album__item-wrapper img { 
        transition: all ease 0.5s;
    }

    .album__item-wrapper:hover img { 
        scale: 1.1;
    }

    .album__item-row { 
        display: flex;
    }

    .album__item-text { 
        color: #ffffff;
        font-size: 24px;
        font-weight: 700;
    }

    .album__item-full .album__item-text { 
        position: absolute;
        bottom: 30px;
        left: 30px;

    }

    .album__item-row .album__item-text { 
        position: absolute;
        bottom: 30px;
        right: 30px;
    }


}

/* 8️⃣ PARTNERS */

@media screen and (min-width: 1200px) {
    .partners__container { 
        padding: 60px 0px 120px 30px;
        margin-top: 120px;
        border-top: 1px solid #E4E4E4;
        border-bottom: 1px solid #E4E4E4;
    }

    .partners__block { 
        display: flex;
        justify-content: space-between;
        align-items: end;
        width: 100%;
        padding: 0px 50px 0px 0px;
    }

    .partners__container h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .partners__text-subtitle { 
        font-size: 21px;
        color: #8C8C8C;
        font-weight: 400;
        max-width: calc(100vw / 4);
        margin-top: 10px;
    }

    .partners__text-subtitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .partners__button { 
        padding: 12px 13px;
        background-color: #F0C693;
        margin-bottom: 10px;
    }

    .partners__list { 
        display: flex;
        margin-top: 70px;
        gap: 54px;
        width: 100%;
        overflow-x: scroll;
    }

    .partners__item { 
        min-width: 305px;
    }

    .partners__item:last-child { 
        margin-right: 30px;
    }
}

@media screen and ( min-width: 300px) and (max-width: 1199px) {
    .partners__container { 
        padding: 60px 0px 120px 30px;
        margin-top: 120px;
        border-top: 1px solid #E4E4E4;
        border-bottom: 1px solid #E4E4E4;
    }

    .partners__block { 
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 20px;
        width: 100%;
        padding: 0px 50px 0px 0px;
    }

    .partners__container h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .partners__text-subtitle { 
        font-size: 21px;
        color: #8C8C8C;
        font-weight: 400;
        
        margin-top: 10px;
    }

    .partners__text-subtitle span { 
        font-weight: 600;
        color: #F0C693;
    }

    .partners__button { 
        padding: 12px 13px;
        background-color: #F0C693;
        margin-bottom: 10px;
        min-width: 43px;
    }

    .partners__list { 
        display: flex;
        margin-top: 70px;
        gap: 54px;
        width: 100%;
        overflow-x: scroll;
    }

    .partners__item { 
        min-width: 305px;
    }

    .partners__item:last-child { 
        margin-right: 30px;
    }
}

/* 9️⃣ REVIEWS */

@media screen and (min-width: 1200px) {
    .reviews__container { 
        padding: 120px 0px 120px 30px;
    }

    .reviews__block { 
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: end;
    }

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

    .reviews__text h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .reviews__subtitle { 
        font-size: 21px;
        font-weight: 400;
        color: #8C8C8C;
        max-width: calc(100vw / 4);
    }

    .reviews__subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .reviews__buttons { 
        display: flex;
        gap: 70px;
        padding: 0px 70px 10px 0px;

    }

    .reviews__button-1 {      
        background-color: #505050;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reviews__button-2 { 
        background-color: #F0C693;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reviews__list-wrapper { 
        overflow: hidden;
    }

    .reviews__list { 
        display: flex;
        gap: calc(100vw / 15.36);
        padding-top: 124px;
        transition: transform 0.5s ease;
        scroll-behavior: smooth;
        will-change: transform;
    }

    .reviews__item { 
        padding: 71px 39px 21px ;
        display: flex;
        flex-direction: column;
        gap: 108px;
        width: 100%;
        min-width: 476px;
        position: relative;
        z-index: 10;
    }

    .reviews__item:last-child { 
        margin-right: 30px;
    }

    .reviews__item-disc { 
        font-weight: 500;
        color: #000;
        font-size: 21px;
        line-height: 140%;
    }

    .reviews__item-bio { 
        display: flex;
        gap: 20px;
    }

    .reviews__item-bio-text { 
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }

    .reviews__item-title { 
        font-size: 21px;
        color: #111111;
        font-weight: 700;

    }

    .reviews__item-subtitle { 
        font-size: 16px;
        color: #000;

    }

    .reviews__corner-1 { 
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 50px;
        border-top: 1px solid #000000;
        border-left: 1px solid #000000;
        z-index: 9;
    }

    .reviews__corner-2 { 
        position: absolute;
        top: 0px;
        right: 0px;
        width: 180px;
        height: 180px;
        border-top: 1px solid #000000;
        border-right: 1px solid #000000;
        z-index: 9;
    }

    .reviews__corner-3 { 
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 50px;
        height: 50px;
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
        z-index: 9;
    }

    .reviews__corner-4 { 
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 180px;
        height: 180px;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
        z-index: 9;
    }

    .reviews__star-container { 
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 13px;
        right: 0px;
        top: 202px;
        transform: translateX(50%);
    }

    .reviews__point-wrapper { 
        display: flex;
        gap: 13px;
        position: absolute;
        top: 0px;
        left: 114px;
        transform: translateY(-50%);
    }
}

@media screen and ( min-width: 300px) and (max-width: 1199px) {
    .reviews__container { 
        padding: 120px 0px 120px 30px;
    }

    .reviews__block { 
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 100%;
        gap: 30px;
    }

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

    .reviews__text h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .reviews__subtitle { 
        font-size: 21px;
        font-weight: 400;
        color: #8C8C8C;
       
    }

    .reviews__subtitle span { 
        color: #F0C693;
        font-weight: 600;
    }

    .reviews__buttons { 
        display: flex;
        gap: 70px;
        padding: 0px 70px 10px 10px;

    }

    .reviews__button-1 {      
        background-color: #505050;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reviews__button-2 { 
        background-color: #F0C693;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reviews__list-wrapper { 
        overflow: hidden;
    }

    .reviews__list { 
        display: flex;
        gap: calc(100vw / 15.36);
        padding-top: 124px;
        transition: transform 0.5s ease;
        scroll-behavior: smooth;
        will-change: transform;
    }

    .reviews__item { 
        padding: 71px 39px 21px ;
        display: flex;
        flex-direction: column;
        gap: 108px;
        width: 100%;
        min-width: 316px;
        position: relative;
        z-index: 10;
    }

    .reviews__item:last-child { 
        margin-right: 30px;
    }

    .reviews__item-disc { 
        font-weight: 500;
        color: #000;
        font-size: 21px;
        line-height: 140%;
    }

    .reviews__item-bio { 
        display: flex;
        gap: 20px;
    }

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

    .reviews__item-bio-text { 
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }

    .reviews__item-title { 
        font-size: 16px;
        color: #111111;
        font-weight: 700;

    }

    .reviews__item-subtitle { 
        font-size: 16px;
        color: #000;

    }

    .reviews__corner-1 { 
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 50px;
        border-top: 1px solid #000000;
        border-left: 1px solid #000000;
        z-index: 9;
    }

    .reviews__corner-2 { 
        position: absolute;
        top: 0px;
        right: 0px;
        width: 180px;
        height: 180px;
        border-top: 1px solid #000000;
        border-right: 1px solid #000000;
        z-index: 9;
    }

    .reviews__corner-3 { 
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 50px;
        height: 50px;
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
        z-index: 9;
    }

    .reviews__corner-4 { 
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 180px;
        height: 180px;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
        z-index: 9;
    }

    .reviews__star-container { 
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 13px;
        right: 0px;
        top: 202px;
        transform: translateX(50%);
    }

    .reviews__point-wrapper { 
        display: flex;
        gap: 5px;
        position: absolute;
        top: 0px;
        left: 56px;
        transform: translateY(-50%);
    }

    .reviews__point-wrapper img { 
        width: 100%;
        max-width: 35px;
    }
}


/* 1️⃣0️⃣ TEAM */

@media screen and (min-width: 1200px) {
    .team__container { 
        padding: 60px 0px 200px 30px;
        border-top: 1px solid #E4E4E4;
    }

    .team__block { 
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: end;
        padding-bottom: 70px;
    }

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

    .team__text-wrapper h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .team__text-subtitle { 
        font-size: 21px;
        color: #8C8C8C;
        max-width: calc(100vw / 4);
    }

    .team__buttons { 
        display: flex;
        gap: 70px;
        padding: 0px 70px 10px 0px;
    }

    .team__button-1 {      
        background-color: #505050;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .team__button-2 { 
        background-color: #F0C693;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .team__list-wrapper { 
        overflow: hidden;
    }

    .team__list { 
        display: flex;
        gap: 120px;
        transition: all ease 0.3s;
    }

    .team__item { 
        padding: 44px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: relative;
        max-width: 410px;
        min-width: 410px;
    }

    .team__item-title { 
        font-size: 28px;
        font-weight: 700;
        color: #0d0d0d;
    }

    .team__item-subtitle { 
        font-size: 18px;
        color: #F0C693;
        font-weight: 500;
    }

    .team__corner-1 { 
        position: absolute;
        top: 0px;
        left: 0px;
        width: 70px;
        height: 70px;
        border-top: 1px solid #F0C693;
        border-left: 1px solid #F0C693;
    }

    .team__corner-2 { 
        position: absolute;
        top: 0px;
        right: 0px;
        width: 70px;
        height: 70px;
        border-top: 1px solid #F0C693;
        border-right: 1px solid #F0C693;
    }

    .team__corner-3 { 
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 70px;
        height: 70px;
        border-bottom: 1px solid #F0C693;
        border-right: 1px solid #F0C693;
    }

    .team__corner-4 { 
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 70px;
        height: 70px;
        border-bottom: 1px solid #F0C693;
        border-left: 1px solid #F0C693;
    }

    .team__item-square { 
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #F0C693;
        bottom: 45px;
        right: 45px;
    }
}

@media screen and ( min-width: 300px) and (max-width: 1199px) {
    .team__container { 
        padding: 60px 0px 200px 30px;
        border-top: 1px solid #E4E4E4;
    }

    .team__block { 
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 100%;
        gap: 30px;
        padding-bottom: 70px;
    }

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

    .team__text-wrapper h3 { 
        font-size: 32px;
        font-weight: 700;
        color: #000;

    }

    .team__text-subtitle { 
        font-size: 21px;
        color: #8C8C8C;
      
    }

    .team__buttons { 
        display: flex;
        gap: 70px;
        padding: 0px 70px 10px 10px;
    }

    .team__button-1 {      
        background-color: #505050;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .team__button-2 { 
        background-color: #F0C693;
        width: 53px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .team__list-wrapper { 
        overflow: hidden;
    }

    .team__list { 
        display: flex;
        gap: 120px;
        transition: all ease 0.3s;
    }

    .team__item { 
        padding: 44px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: relative;
        max-width: 410px;
        min-width: 310px;
    }

    .team__item-title { 
        font-size: 28px;
        font-weight: 700;
        color: #0d0d0d;
    }

    .team__item-subtitle { 
        font-size: 18px;
        color: #F0C693;
        font-weight: 500;
    }

    .team__corner-1 { 
        position: absolute;
        top: 0px;
        left: 0px;
        width: 70px;
        height: 70px;
        border-top: 1px solid #F0C693;
        border-left: 1px solid #F0C693;
    }

    .team__corner-2 { 
        position: absolute;
        top: 0px;
        right: 0px;
        width: 70px;
        height: 70px;
        border-top: 1px solid #F0C693;
        border-right: 1px solid #F0C693;
    }

    .team__corner-3 { 
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 70px;
        height: 70px;
        border-bottom: 1px solid #F0C693;
        border-right: 1px solid #F0C693;
    }

    .team__corner-4 { 
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 70px;
        height: 70px;
        border-bottom: 1px solid #F0C693;
        border-left: 1px solid #F0C693;
    }

    .team__item-square { 
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #F0C693;
        bottom: 45px;
        right: 45px;
    }
}

/* 1️⃣1️⃣ CONTACT */

@media screen and (min-width: 1400px) {
    .contact__container { 
        padding: 80px calc(100vw / 12.549) 0px 90px;
        background-color: #131313;
        border: 1px solid #585858;
    }

    .contact__wrapper { 
        display: flex;
        gap: 180px;
        margin-bottom: 100px;
    }

    .contact__container h4  { 
        color: #fff;
        font-size: 40px;
        font-weight: 700;

    }

    .contact__subtitle { 
        color: #8B8B8B;
        margin-top: 10px;
        font-size: 19px;
        font-weight: 400;
        max-width: calc(100vw / 3.1067);
    }

    .contact__subtitle span { 
        color: #ECECEC;
        font-weight: 500;
    }

    .contact__info-wrapper { 
        display: flex;
        flex-direction: column;

    }

    .contact__links-wrapper { 
        display: flex;
        justify-content: space-between;
        margin-top: 125px;
        gap: 180px;
    }

    .contact__links-block { 
        display: flex;
        flex-direction: column;
        gap: 60px;
        position: relative;
    }

    .contact__links-block::after { 
        content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        top: 0px;
        right: -90px;
        background-color: #2A2A2A;
    }

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

    .contact__links-item-title { 
        font-size: 28px;
        font-family: "Inter";
        color: #fff;
        font-weight: 500;
    }

    .contact__links-list { 
        display: flex;
        gap: 30px;
        align-items: center;

    }

    .contact__links-list-item { 
        position: relative;
        font-size: 21px;
        font-weight: 300;
        color: #8B8B8B;

    }

    .contact__links-list-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 0px;
        right: -15px;
        height: 100%;
        width: 1px;
        background-color: #8B8B8B;
    }

    .contact__links-address { 
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .contact__links-address-item { 
        margin-bottom: 24px;
        font-size: 21px;
        font-weight: 300;
        color: #8B8B8B;

    }

    .contact__form-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .contact__form-list { 
        display: flex;
        gap: 50px;

    }

    .contact__form-item  { 
        display: flex;
        flex-direction: column;
        gap: 24px;

    }

    .contact__form-item-title { 
        font-family: "Raleway";
        font-size: 21px;
        font-weight: 400;
        color: #8A8A8A;
    }

    .contact__form-input-wrapper { 
        position: relative;
    }

    .contact__form-input { 
        padding: 5px 10px;
        background-color: #EEBC7F;
        position: relative;
        height: 53px;
        font-size: 21px;
        font-family: "Raleway";
        font-weight: 500;
        color: #000;
        width: 100%;
    }

    /* segsepgosepgojsekgposejgposejgpoejgpoegjepojg */

    .contact__input-line-1 { 
        position: absolute;
        top: -9px;
        left: -9px;
        border-top: 1px solid #585858;
        border-left: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-2 { 
        position: absolute;
        top: -9px;
        right: -9px;
        border-top: 1px solid #585858;
        border-right: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-3 { 
        position: absolute;
        bottom: -9px;
        right: -9px;
        border-bottom: 1px solid #585858;
        border-right: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-4 { 
        position: absolute;
        bottom: -9px;
        left: -9px;
        border-bottom: 1px solid #585858;
        border-left: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__form-button { 
        width: 100%;
        height: 53px;
        background-color: #C0C0C0;
        border: 1px solid #000000;
        position: relative;
        font-size: 21px;
        margin-top: 21px;

        font-weight: 700;
    }

    .contact__form-button::before { 
        content: "";
        position: absolute;
        top: -30px;
        left: 0px;
        height: 1px;
        width: 100%;
        background-image: repeating-linear-gradient(
            to right,
            #333333,
            #333333 12px,
            transparent 12px,
            transparent 24px
        );
    }

    /* FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOTER */
    .footer { 
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 30px 0px ;
        position: relative;

    }

    .footer::before { 
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #2A2A2A;
        top: 0px;
        left: 0px;
    }

    .footer p { 
        font-family: "Raleway";
        color: #989898;
    }

    .footer a { 
        color: #989898;
        text-decoration: underline;
    }
}

@media screen and (max-width: 1399px) and (min-width: 1000px) {
    .contact__container { 
        padding: 80px calc(100vw / 12.549) 0px 90px;
        background-color: #131313;
        border: 1px solid #585858;
    }

    .contact__wrapper { 
        display: flex;
        flex-direction: column-reverse;
        
        gap: 180px;
        margin-bottom: 100px;
    }

    .contact__container h4  { 
        color: #fff;
        font-size: 40px;
        font-weight: 700;

    }

    .contact__subtitle { 
        color: #8B8B8B;
        margin-top: 10px;
        font-size: 19px;
        font-weight: 400;
        max-width: calc(100vw / 3.1067);
    }

    .contact__subtitle span { 
        color: #ECECEC;
        font-weight: 500;
    }

    .contact__info-wrapper { 
        display: flex;
        flex-direction: column;

    }

    .contact__links-wrapper { 
        display: flex;
        justify-content: space-between;
        margin-top: 125px;
        gap: 180px;
    }

    .contact__links-block { 
        display: flex;
        flex-direction: column;
        gap: 60px;
        position: relative;
    }

    .contact__links-block::after { 
        content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        top: 0px;
        right: -90px;
        background-color: #2A2A2A;
    }

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

    .contact__links-item-title { 
        font-size: 28px;
        font-family: "Inter";
        color: #fff;
        font-weight: 500;
    }

    .contact__links-list { 
        display: flex;
        gap: 30px;
        align-items: center;

    }

    .contact__links-list-item { 
        position: relative;
        font-size: 21px;
        font-weight: 300;
        color: #8B8B8B;

    }

    .contact__links-list-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 0px;
        right: -15px;
        height: 100%;
        width: 1px;
        background-color: #8B8B8B;
    }

    .contact__links-address { 
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .contact__links-address-item { 
        margin-bottom: 24px;
        font-size: 21px;
        font-weight: 300;
        color: #8B8B8B;

    }

    .contact__form-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 40px;
        max-width: 500px;
        
    }

    .contact__form-list { 
        display: flex;
        gap: 50px;

    }

    .contact__form-item  { 
        display: flex;
        flex-direction: column;
        gap: 24px;

    }

    .contact__form-item-title { 
        font-family: "Raleway";
        font-size: 21px;
        font-weight: 400;
        color: #8A8A8A;
    }

    .contact__form-input-wrapper { 
        position: relative;
    }

    .contact__form-input { 
        padding: 5px 10px;
        background-color: #EEBC7F;
        position: relative;
        height: 53px;
        font-size: 21px;
        font-family: "Raleway";
        font-weight: 500;
        color: #000;
        width: 100%;
    }

    /* segsepgosepgojsekgposejgposejgpoejgpoegjepojg */

    .contact__input-line-1 { 
        position: absolute;
        top: -9px;
        left: -9px;
        border-top: 1px solid #585858;
        border-left: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-2 { 
        position: absolute;
        top: -9px;
        right: -9px;
        border-top: 1px solid #585858;
        border-right: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-3 { 
        position: absolute;
        bottom: -9px;
        right: -9px;
        border-bottom: 1px solid #585858;
        border-right: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-4 { 
        position: absolute;
        bottom: -9px;
        left: -9px;
        border-bottom: 1px solid #585858;
        border-left: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__form-button { 
        width: 100%;
        height: 53px;
        background-color: #C0C0C0;
        border: 1px solid #000000;
        position: relative;
        font-size: 21px;
        margin-top: 21px;

        font-weight: 700;
    }

    .contact__form-button::before { 
        content: "";
        position: absolute;
        top: -30px;
        left: 0px;
        height: 1px;
        width: 100%;
        background-image: repeating-linear-gradient(
            to right,
            #333333,
            #333333 12px,
            transparent 12px,
            transparent 24px
        );
    }

    /* FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOTER */
    .footer { 
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 30px 0px ;
        position: relative;

    }

    .footer::before { 
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #2A2A2A;
        top: 0px;
        left: 0px;
    }

    .footer p { 
        font-family: "Raleway";
        color: #989898;
    }

    .footer a { 
        color: #989898;
        text-decoration: underline;
    }
}

@media screen and  ( min-width: 300px) and (max-width: 999px) {
    .contact__container { 
        padding: 80px 30px 0px 30px;
        background-color: #131313;
        border: 1px solid #585858;
    }

    .contact__wrapper { 
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        margin-bottom: 100px;
    }

    .contact__container h4  { 
        color: #fff;
        font-size: 40px;
        font-weight: 700;

    }

    .contact__subtitle { 
        color: #8B8B8B;
        margin-top: 10px;
        font-size: 19px;
        font-weight: 400;
        
    }

    .contact__subtitle span { 
        color: #ECECEC;
        font-weight: 500;
    }

    .contact__info-wrapper { 
        display: flex;
        flex-direction: column;

    }

    .contact__links-wrapper { 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 65px;
        gap: 20px;
    }

    .contact__links-block { 
        display: flex;
        flex-direction: column;
        gap: 60px;
        position: relative;
    }

    

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

    .contact__links-item-title { 
        font-size: 28px;
        font-family: "Inter";
        color: #fff;
        font-weight: 500;
    }

    .contact__links-list { 
        display: flex;
        gap: 30px;
        align-items: center;

        flex-wrap: wrap;
    }

    .contact__links-list-item { 
        position: relative;
        font-size: 21px;
        font-weight: 300;
        color: #8B8B8B;

    }

    .contact__links-list-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 0px;
        right: -15px;
        height: 100%;
        width: 1px;
        background-color: #8B8B8B;
    }

    .contact__links-address { 
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .contact__links-address-item { 
        margin-bottom: 24px;
        font-size: 21px;
        font-weight: 300;
        color: #8B8B8B;

    }

    .contact__form-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .contact__form-list { 
        display: flex;
        gap: 50px;

    }

    .contact__form-item  { 
        display: flex;
        flex-direction: column;
        gap: 24px;

    }

    .contact__form-item-title { 
        font-family: "Raleway";
        font-size: 21px;
        font-weight: 400;
        color: #8A8A8A;
    }

    .contact__form-input-wrapper { 
        position: relative;
    }

    .contact__form-input { 
        padding: 5px 10px;
        background-color: #EEBC7F;
        position: relative;
        height: 53px;
        font-size: 21px;
        font-family: "Raleway";
        font-weight: 500;
        color: #000;
        width: 100%;
    }

    /* segsepgosepgojsekgposejgposejgpoejgpoegjepojg */

    .contact__input-line-1 { 
        position: absolute;
        top: -9px;
        left: -9px;
        border-top: 1px solid #585858;
        border-left: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-2 { 
        position: absolute;
        top: -9px;
        right: -9px;
        border-top: 1px solid #585858;
        border-right: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-3 { 
        position: absolute;
        bottom: -9px;
        right: -9px;
        border-bottom: 1px solid #585858;
        border-right: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__input-line-4 { 
        position: absolute;
        bottom: -9px;
        left: -9px;
        border-bottom: 1px solid #585858;
        border-left: 1px solid #585858;
        width: 15px;
        height: 15px;
    }

    .contact__form-button { 
        width: 100%;
        height: 53px;
        background-color: #C0C0C0;
        border: 1px solid #000000;
        position: relative;
        font-size: 21px;
        margin-top: 21px;

        font-weight: 700;
    }

    .contact__form-button::before { 
        content: "";
        position: absolute;
        top: -30px;
        left: 0px;
        height: 1px;
        width: 100%;
        background-image: repeating-linear-gradient(
            to right,
            #333333,
            #333333 12px,
            transparent 12px,
            transparent 24px
        );
    }

    /* FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOTER */
    .footer { 
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 30px 0px ;
        position: relative;

    }

    .footer::before { 
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #2A2A2A;
        top: 0px;
        left: 0px;
    }

    .footer p { 
        font-family: "Raleway";
        color: #989898;
    }

    .footer a { 
        color: #989898;
        text-decoration: underline;
    }
}