@import "tailwindcss";

@layer base {
    /* begin manrope*/
    @font-face {
        font-family: 'Manrope';
        src: url('/fonts/manrope/Manrope-ExtraLight.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('/fonts/manrope/Manrope-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('/fonts/manrope/Manrope-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('/fonts/manrope/Manrope-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('/fonts/manrope/Manrope-SemiBold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('/fonts/manrope/Manrope-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('/fonts/manrope/Manrope-ExtraBold.ttf') format('truetype');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }
    /*end manrope*/

    /* begin oxanium*/
    @font-face {
        font-family: 'Oxanium';
        src: url('/fonts/oxanium/Oxanium-ExtraLight.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Oxanium';
        src: url('/fonts/oxanium/Oxanium-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Oxanium';
        src: url('/fonts/oxanium/Oxanium-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Oxanium';
        src: url('/fonts/oxanium/Oxanium-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Oxanium';
        src: url('/fonts/oxanium/Oxanium-SemiBold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Oxanium';
        src: url('/fonts/oxanium/Oxanium-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Oxanium';
        src: url('/fonts/oxanium/Oxanium-ExtraBold.ttf') format('truetype');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }
    /*end oxanium*/
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: #FFF5E9;
}

header {
    background-color: #FFF5E9;
}

.text-oxanium {
    font-family: 'Oxanium', sans-serif !important;
}

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

.container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 15px;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #F6A21C;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.text-golden {
    color: #F6A21C !important;
}

.overflow-hidden {
    overflow: hidden;
}


/*begin header*/
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown.show .dropdown-toggle{
    transform: rotate(180deg);
}

.dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: 0.3s ease-in-out;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
    z-index: 1000;
}

.dropdown-menu button {
    background: none;
    border: none;
    text-align: left;
    padding: 8px 15px;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}

.dropdown-menu button:hover {
    background-color: #f0f0f0;
}

.dropdown.show .dropdown-menu {
    display: block;
}
/*end header*/

/*start main page*/
.intro__section {
    border-radius: 0 0 300px 300px;
    overflow: hidden !important;
}

.main__title {
    font-size: 90px;
}

.main-title__bottom{
    font-size: 90px;
    margin-top: -70px;
    padding-left: 190px;
}

.main-title__absolute {
    position: absolute;
    top: 130px;
    max-width: 150px;
    text-align: end;
}

.main-title__box{
    margin-top: 150px;
    margin-left: 150px;
}

.main-block__content{
    max-width: 350px;
    text-align: center;
    margin: 20px auto 0 auto;
}

.white__button{
    margin: 30px auto 0 auto;
    display: flex;
    align-items: center;
    border-radius: 30px;
    border: 1px solid #ffffff;
    padding: 15px 45px;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.dot-grid {
    top: -100px;
    left: -200px;
}

.main__subtitle {
    font-weight: bold;
    font-size: 45px;
    line-height: 35px;
    margin-bottom: 40px;
}

.about__left{
    width: 60%;
}
.about__right{
    width: 60%;
}

.about-img{
    position: absolute;
    top: -100px;
    right: -100px;
    z-index: -1;
}

.service__item {
    height: 220px; /* фиксированная высота */
    padding: 30px;
    position: relative;
    transition: background-color 0.3s ease;
    background-color: transparent;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.service__item .flex {
    transition: transform 0.4s ease;
    transform: translateY(25%);
}

.service__item:hover .flex {
    transform: translateY(0);
}

.service__item:not(:last-child){
    border-right: 1px solid #ffffff;
}

/* картинка */
.service__item img {
    width: 80px;
}

/* описание — скрыто по умолчанию */
.service__description {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    color: white;
    font-size: 16px;
    margin-top: auto;
}

/* при наведении — фон и появление текста */
.service__item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.service__item:hover .service__description {
    opacity: 1;
    transform: translateY(0);
}

.team__block img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.yellow__button{
    margin: 30px auto 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 30px;
    border: 1px solid #F6A21C;
    padding: 15px 45px;
    cursor: pointer;
}

.abilities__block {
    border:  1px solid #F6A21C;
    border-radius: 30px;
    background-color: white;
    padding: 50px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
}
.abilities__block:hover {
    border:  1px solid #F6A21C;
    background-color: #F6A21C;
    color: white !important;
}
.number {
    transition: all 0.3s ease-in-out;
    font-size: 96px;
    height: 120px;
}
.abilities__block:hover .number{
    color: white !important;
}

.leading-main {
    line-height: 105%;
}

.services__slide {
    height: 100%;
    min-height: 380px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    border: 1px solid #F6A21C;
    border-radius: 30px;
    padding: 30px;
    background-color: white;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.services__slide img{
    border-radius: 30px;
}

.services__button {
    flex-shrink: 0;
    width: 72px !important;
    height: 72px !important;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid #F6A21C;
}

.swiper-button-next:after, .swiper-button-prev:after {
    content: '' !important;
}

.services__button-prev img  {
    transform: rotate(-180deg);
}

.services__button-prev {
    left: 0px !important;
}

.services__button-next {
    right: 0px !important;
}

.map__container {
    border-radius: 30px;
    border: 1px solid #000000;
    padding: 30px;
    margin: 30px;
    background-color: white;
    min-width: 80vw;
}

.zarafshan-block {
    fill: rgba(255, 183, 27, 0.5);
}

.almalik-block {
    fill: rgba(255, 183, 27, 0.2);
}
.tooltip {
    position: absolute;
    background-color: white;
    color: black;
    border: 1px solid gray;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.news__content .main__subtitle {
    width: 700px;
}

.yellow__button.news {
    width: 250px;
}

.news__content {
    padding-bottom: 30px;
    border-bottom: 1px solid #F6A21C;
}

.news__block {
    padding: 25px;
    border: 1px solid #F6A21C;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background-color: white;
}

.news__block .cover {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 20px;
}

.news__icon {
    width: 23px;
    height: 23px;
}

.orange__button {
    border-radius: 30px;
    background-color: #F6A21C;
    color: white;
    padding: 10px 30px;
    font-weight: bolder;
    font-size: 16px;
}

footer {
    border-radius: 0 50px 0 0;
    background-color: #303030;
    padding: 86px 0 40px 0;
}

.text-white {
    color: white;
}

.footer__item {
    padding: 30px;
    border-left: 1px solid rgba(255, 245, 233, 0.2);
    border-bottom: 1px solid rgba(255, 245, 233, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
}

.footer__item:last-child {
    border-right: 1px solid rgba(255, 245, 233, 0.3);
}

.copyright {
    margin-top: 40px;
    color: rgba(255, 245, 233, 0.3);
    text-align: center;
}

.pre-animate {
    opacity: 0;
    transform: translateY(20px); /* можно заменить на X */
}

.header__nav {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.header__nav .active {
    color: #F6A21C;
}

.submenu {
    display: none; /* Hidden by default */
    position: absolute; /* Position it relative to the parent li */
    top: 100%; /* Place it below the parent link */
    left: 0;
    background-color: #fff; /* A background color for the submenu */
    min-width: 150px; /* Minimum width for the submenu */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    z-index: 100; /* Ensure it's on top of other content */
    padding: 10px 0;
    list-style: none; /* Remove bullet points */
    margin: 0;
}

/* Style the submenu links */
.submenu li a {
    padding: 10px 20px;
    display: block; /* Make the entire link clickable */
    color: #333;
    text-decoration: none;
    white-space: nowrap; /* Prevent menu items from wrapping */
}

.submenu li a:hover {
    background-color: #f1f1f1;
}

.has-submenu {
    position: relative;
    cursor: pointer;
}

.has-submenu:hover .submenu {
    display: block;
}

.has-submenu > a::after {
    content: '\25BE'; /* This is the Unicode character for a down-pointing triangle */
    font-size: 20px; /* Adjust size as needed */
    margin-left: 5px; /* Space between text and icon */
    transition: transform 0.3s ease; /* Add a smooth transition for rotation */
    transform: rotate(0deg); /* Initial state */
}

.burger {
    position: relative;
    width: 30px;
    height: 24px;
    cursor: pointer;
    display: none;
}

.burger div,
.burger::before,
.burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 2px;
}

.burger div {
    top: 50%;
    transform: translateY(-50%);
}

.burger::before {
    top: 0;
}

.burger::after {
    bottom: 0;
}

.burger.active div {
    opacity: 0;
}

.burger.active::before {
    transform: translateY(11px) rotate(45deg);
}

.burger.active::after {
    transform: translateY(-11px) rotate(-45deg);
}

.text-xl{
    font-size: 26px !important;
}

.text-4xl {
    font-size: 46px !important;
}
.text-sm {
    font-size: 16px !important;
}

.about__container {
    gap: 50px;
}
.min-w-screen{
    min-width: 100vw;
}

.slider__content{
    padding: 0 50px;
}
.main__title.intro {
    text-align: center !important;
}

.main-title__box.intro {
    margin: 0 !important;
    padding-top: 100px !important;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 5px;
}

.breadcrumbs a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}
.breadcrumbs a:not(:last-child) {
    opacity: 0.5;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* Разделитель / между ссылками */
.breadcrumbs a:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: #999;
}

.contacts__section{
    position: relative;
    z-index: 10000;
    margin-top: -60px;
}

.contacts__block {
    background-color: white;
    border: 1px solid #F6A21C;
    padding: 46px;
    border-radius: 30px;
}

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

.center{
    margin: 0 auto;
    display: flex;
    padding-top: 20px;
    align-items: center;
    justify-content: center;
}

.contacts__title{
    font-size: 23px;
}

.contacts__item-content{
    display: flex;
    align-items: center;
    gap: 20px;
}

.contacts__item-content a{
    font-size: 28px;
    font-weight: 800;
    color: #F6A21C;
}

.contacts__map{
    margin-top: -80px;
}

.services__faq {
    margin-top: 80px;
    border: 1px solid #F6A21C;
    border-radius: 30px;
    padding: 40px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.accordion {
    /*border-bottom: 1px solid #ccc;*/
    margin-bottom: 10px;
}

.accordion-header {
    background: none;
    width: 100%;
    text-align: left;
    padding: 15px;
    font-size: 18px;
    display: flex;
    gap: 30px;
    align-items: center;
    cursor: pointer;
    transition: 0.3s ease;
    border-bottom: 1px solid #F6A21C;
}

/*.accordion-header:hover {*/
/*    color: #2F3EDE;*/
/*}*/

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 15px;
    color: #444;
}

.accordion.open .accordion-content {
    max-height: 300px;
    padding: 15px;
}

.accordion.open .icon {
    content: "-";
    transform: rotate(180deg);
}

.accordion .icon {
    transition: transform 0.3s ease;
    color: #444;
    font-size: 30px;
}

.experience-mission {
    display: flex;
    gap: 50px;
    align-items: stretch; /* растягивает дочерние блоки на одинаковую высоту */
    margin-bottom: 60px;
}

.experience-box {
    background-color: #F6A21C;
    color: white;
    font-weight: bold;
    text-align: center;
    writing-mode: vertical-rl; /* вертикальный текст сверху вниз */
    transform: rotate(180deg); /* чтобы текст шел снизу вверх */
    font-size: 28px;
    padding: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px; /* ширина вертикальной полосы */
}
.mission-box {
    flex: 1; /* чтобы текстовая часть занимала оставшееся место */
}

.step-block {
    width: 100%;
    margin-top: 40px;
}

.step-header {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

.step-number-container {
    position: relative;
    margin-right: 20px;
}

.step-number-bg {
    font-size: 120px;
    font-weight: bolder;
    font-family: Oxanium;
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: -1;
}

.step-number-box {
    width: 40px;
    height: 40px;
    background-color: #ff9900;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 2;
    position: relative;
}

.step-title-line {
    width: 80px;
    height: 3px;
    background-color: #ff9900;
    margin-right: 15px;
}

.step-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
}

.step-description {
    font-size: 18px;
    padding-top: 20px;
    line-height: 118%;
    color: #202020;
    margin: 0;
}
@media (max-width: 1200px){
    .main__title, .main-title__bottom {
        font-size: 76px;
    }
    .burger {
        display: block;
        z-index: 10001;
    }
    .header__nav {
        /* Positioned fixed for better mobile experience */
        position: fixed;
        top: 0;
        right: -10px;
        height: 100vh; /* Take up full viewport height */
        background-color: #FFF5E9; /* Background from your code */
        flex-direction: column;
        align-items: flex-start; /* Align items to the left */
        padding: 80px 30px 20px; /* Top padding for the burger icon area */
        width: 300px; /* A bit wider for better touch targets */
        max-width: 80%; /* Don't get too wide on small screens */
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2); /* Shadow on the left */

        /* Initial state (hidden) */
        transform: translateX(100%); /* Start off-screen to the right */
        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy transition */
        overflow-y: auto; /* Allow scrolling if menu is long */
        z-index: 1000;
        pointer-events: none; /* Block clicks when hidden */
    }

    /* Show state for the menu */
    .header__nav.show {
        transform: translateX(0); /* Slide into view */
        pointer-events: auto; /* Enable clicks */
    }

    /* --- Styling for main menu list items --- */
    .header__nav li {
        width: 100%; /* Full width for each list item */
        margin-bottom: 10px; /* Space between items */
    }

    .header__nav li a {
        display: block; /* Make the whole area clickable */
        padding: 15px; /* Generous padding for touch targets */
        font-size: 20px; /* Larger font size for readability */
        font-weight: 600;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Separator line */
    }

    .header__nav li:last-child a {
        border-bottom: none; /* No border for the last item */
    }

    /* --- Submenu in mobile view --- */
    .has-submenu {
        position: static; /* Override relative positioning */
    }

    /* The submenu itself */
    .submenu {
        position: static; /* Override absolute positioning */
        display: none; /* Hidden by default */
        background-color: transparent; /* No background needed */
        box-shadow: none; /* No shadow */
        padding: 0;
        margin-top: 10px;
        margin-left: 20px; /* Indent the submenu */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.4s ease;
    }

    /* Style for submenu links */
    .submenu li a {
        padding: 10px 15px; /* Adjust padding for submenu links */
        font-size: 18px; /* Slightly smaller font */
        font-weight: normal;
        border: none; /* No border for submenu items */
    }
    .has-submenu.submenu-open .submenu {
        max-height: 500px; /* Достаточно большое значение */
        opacity: 1;
    }

    .has-submenu > a {
        display: flex;
        justify-content: space-between; /* Push icon to the right */
        align-items: center;
        width: 100%;
    }

    .has-submenu > a::after {
        font-size: 16px;
        margin-left: 0;
        transition: transform 0.3s ease;
    }

    .has-submenu.submenu-open > a::after {
        transform: rotate(180deg);
    }
    .about__section {
        height: fit-content !important;
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service__item{
        border: none !important;
    }
    .service__item:nth-child(1){
        border-right: 1px solid #ffffff !important;
        border-bottom: 1px solid #ffffff !important;
    }
    .service__item:nth-child(2){
        border-bottom: 1px solid #ffffff !important;
    }
    .service__item:nth-child(3){
        border-right: 1px solid #ffffff !important;
    }
    .intro__section {
        border-radius: 0 0 60px 60px;
    }
    .about__right {
        width: 100%;
    }
    .news__content-block{
        grid-template-columns: repeat(2, 1fr);
    }
    .services__slide {
        padding: 20px !important;
        min-height: fit-content;
    }
    .slider__text{
        font-size: 16px !important;
    }
    .\!py-20 {
        padding: 40px 0 !important;
    }
    .step__content {
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
    }
}

@media (max-width: 1100px){
    .main__title, .main-title__bottom {
        font-size: 66px;
    }
    .main-title__bottom {
        margin-top: -50px;
    }
    .main-title__box {
        margin-left: 0;
        text-align: center;
    }
    .main-title__absolute{
        display: none;
    }
    .about__container{
        flex-direction: column;
        gap: 50px;
    }
    .about__left {
        width: 100%;
    }
    .service__container {
         padding: 0 !important;
    }
    .service__description{
        font-size: 16px !important;
    }
    .team__block {
        gap: 10px !important;
    }
    .team__block:not(:first-child){
        margin-top: 0px !important;
    }
    .abilities__content{
        grid-template-columns: repeat(1, 1fr);
    }
    .news__content .main__subtitle {
        width: 100%;
    }
    .news__content {
        flex-direction: column;
        align-items: start;
    }
    .footer__content {
        grid-template-columns: repeat(2, 1fr);
    }
    .contacts__block{
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }
    .contacts__grid{
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 810px){
    .main__title, .main-title__bottom {
        font-size: 56px !important;
    }
}

@media (max-width: 768px){
    .service__text {
        font-size: 20px !important;
    }
    .services__grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .service__item {
        border-bottom: 1px solid white !important;
    }
    .team__block {
        display: flex !important;
        flex-direction: column !important;
    }
    .map__title{
        width: 100%;
    }
    .news__content-block{
        grid-template-columns: repeat(1, 1fr);
    }
    .footer__content {
        grid-template-columns: repeat(1, 1fr);
    }
    .footer__contacts {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer__item {
        border: 1px solid rgba(255, 245, 233, 0.2);
    }
    .breadcrumbs {
        padding-bottom: 50px;
    }
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services__faq {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 686px){
    .main__title, .main-title__bottom {
        font-size: 46px !important;
    }
    .main-title__bottom {
        padding-left: 0 !important;
        margin-top: -30px;
    }

    .main__subtitle {
        font-size: 35px;
    }
    .slider__content {
        padding: 0 !important;
    }
    .services__button {
        width: 34px !important;
        height: 34px !important;
    }
    .services__button img{
        width: 14px !important;
        height: 14px !important;
    }
}
@media (max-width: 566px){
    .main__title, .main-title__bottom {
        font-size: 32px !important;
    }
    .main-title__bottom {
        margin-top: -20px;
    }
    .header__text {
        display: none;
    }
    .header__link img{
        width: 44px !important;
        height: 44px !important;
    }
    .main__subtitle {
        font-size: 25px;
    }
    .footer__contacts {
        grid-template-columns: repeat(1, 1fr);
    }
    .contacts__item-content a {
        font-size: 18px !important;
    }
    .contacts__item-content img {
        width: 30px;
    }
    .contacts__block{
        padding: 20px;
    }
    .contacts__title {
        text-align: center;
    }
    .contacts__item-content {
        flex-direction: column;
        text-align: center;
    }
    .services__grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .experience-mission {
        gap: 20px;
    }
    .experience-box{
        min-width: 50px
    }
    .step-title {
        font-size: 19px !important;
    }
    .step-description {
        font-size: 16px !important;
    }
}
@media (max-width: 400px){
    .main-title__bottom {
        margin-top: 0;
    }
    .team__subtitle {
        text-align: center !important;
    }
    .abilities__block {
        padding: 30px !important;
    }
}

/*end main page*/