/* Общие стили (можно настроить) */
body {
    margin: 0; /* Убираем стандартные отступы body */
    font-family: sans-serif;
    overflow-x: hidden
}

/* Контейнер Grid */

/* Элементы Grid */
.hero-index3 {
    display: grid;
    grid-template-columns: 4% 0.8fr 5% 5% 1fr 1fr 1fr 1fr 5% 1fr 1fr 1fr; /*   8 колонок */
    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 1fr 0.5fr 1fr; /*  Определяем расположение в Grid */
    height: 120vh;
    background-image: url(img/fon3.svg);
    /* background-position: bottom center;  Выравниваем по низу и центру */
    background-repeat: no-repeat;
    background-size: cover; /* Покрываем всю область, сохраняя пропорции */
    width: 100%;
    
}
.text1{ /*Customized*/
    grid-area: 1 / 2 / 3 / 5;
    color: white;
    z-index: 2;
    margin-top: 6%;
    margin-left: 15%;
}
.text2{ /*Customized*/
    grid-area: 1 / 4 / 3 / 6;
    color: white;
    z-index: 2;
    margin-top: 6%;
    margin-left: 10%;
}
.text3{ /*Customized*/
    grid-area: 1 / 10 / 3 / 12;
    color: white;
    z-index: 2;
    margin-top: 5.5%;
    margin-left: 20%;
    font-size: 12px;
}
.text4{ /*Customized*/
    grid-area: 2 / 3 / 3 / 11;
    color: white;
    margin-top: 5%;
    z-index: 2;
    color: #4D4343;
}
.text5{ /*Customized*/
    grid-area: 3 / 3 / 5 / 8;
    color: white;
    z-index: 2;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    margin: 0 0 18px 0;
}
.bottom1{
    grid-area: 5 / 3 / 5 / 12;
    overflow: hidden;
}

.Ellipse2 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 100%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}


.logo{
    grid-area: 1 / 1 / 2 / 13;
    overflow: hidden;
}
.logo img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 100%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}

.main-index3{
    display: grid;
    grid-template-columns: 5% 1fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 5%; /*   8 колонок */
    grid-template-rows: 1% 0.8fr 5% 0.5fr 0.8fr 0.5fr 0.5fr 0.5fr  1fr 1fr ; /*  Определяем расположение в Grid */
    
    color: rgb(255, 255, 255);
}

.text6{
    grid-area: 2 / 2 / 4 / 4;
    color: #4D4343;
    z-index: 2;
}
.text66{
    grid-area: 2 / 2 / 4 / 4;
    color: #4D4343;
    z-index: 2;
    margin-top: 15%;
}


.text7{
    grid-area: 2 / 6 / 5 / 8;
    color: #4D4343;
    z-index: 2;
}
.text77{
    grid-area: 3 / 4 / 3 / 11;
    color: #4D4343;
    margin-top: -10%;
    margin-left: 3%;
    z-index: 2;
}
.text8{
    grid-area: 4 / 2 / 5 / 8;
    color: #4D4343;
    z-index: 2;
}
.text9{
    grid-area: 4 / 4 / 5 / 7;
    color: #4D4343;
    margin-left: -20%;
    justify-self: center;
    z-index: 2;
}
.text10{
    grid-area: 4 / 6 / 5 / 10;
    color: #4D4343;
    justify-self: center;
    z-index: 2;
}
.text11{
    grid-area: 4 / 9 / 5 / 13;
    color: #4D4343;
    justify-self: center;
    z-index: 2;
}
.text12{
    grid-area: 5 / 2 / 5 / 4;
    color: #4D4343;
    z-index: 2;
}
.text13{
    grid-area: 5 / 4 / 5 / 6;
    color: #4D4343;
    z-index: 2;
    justify-self: center;
}
.text13{
    grid-area: 5 / 4 / 5 / 6;
    color: #4D4343;
    z-index: 2;
    justify-self: center;
}
.text14{
    grid-area: 6 / 4 / 6 / 6;
    color: #4D4343;
    z-index: 2;
    margin-top: -130px;
    margin-left: 30px;
    height: 50px;
}
@media (min-resolution: 120dpi) {
  .text14 {
    margin-top: -110px;
  }
}

.text15{
    grid-area: 6 / 4 / 6 / 7;
    color: #4D4343;
    z-index: 2;
    height: 50px;
    margin-left: 30px;
    margin-top: -30px;
}
.text16{
    grid-area: 6 / 4 / 7 / 7;
    color: #4D4343;
    z-index: 4;
    margin-left: 30px;
    align-self: center;
    margin-top: -30px;
}
.text17{
    grid-area: 7 / 4 / 7 / 7;
    color: #4D4343;
    z-index: 2;
    margin-left: 30px;
    margin-top: -50px;

}
.text14:hover h4,
.text15:hover h4,
.text16:hover h4,
.text17:hover h4 {
    color: #ECA351; /* Новый цвет при наведении */
    cursor: pointer; /* Меняет курсор на "указатель" (опционально) */
}
.linei{
    grid-area: 7 / 2 / 8 / 11;
    align-self: center;
}
.linei img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 100%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.text18{
    grid-area: 8 / 2 / 8 / 4;
    color: #4D4343;
    z-index: 2;
}
.text19{
    grid-area: 8 / 3 / 8 / 8;
    color: #4D4343;
    margin-left: 10%;
    z-index: 2;
    
}


.bottom2{
    grid-area: 2 / 2 / 4 / 8;
    align-self: center;
    z-index: 5;
}


.Rectangle14{
    place-items: center;
    grid-area: 1 / 2 / 3 / 11;
    margin-left: 5%;
}
.Rectangle14 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 100%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.Rectangle15{
    place-items: center;
    grid-area: 5 / 3 / 8 / 13;
    margin-top: 5%;
    margin-left: 14%;
    
}
.Rectangle15 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 90%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}

.Rectangle16{
    place-items: center;
    grid-area: 9 / 2 / 9 / 13;
    
}
.Rectangle16 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 90%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.Rectangle17{
    place-items: center;
    grid-area: 10 / 1 / 10 / 13;
    margin-top: 5%;
    
}
.Rectangle17 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 90%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.main2-index3{
    display: grid;
    grid-template-columns: 5% 1fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 5%; /*   8 колонок */
    grid-template-rows: 1% 0.8fr 0.5fr 0.5fr 0.5fr 0.5fr 1fr 1fr 1fr 1fr 1fr ; /*  Определяем расположение в Grid */
    color: rgb(255, 255, 255);
}
.Rectangle18{
    place-items: center;
    grid-area: 1 / 1 / 10 / 13;
    margin-top: -5%;
    
}
.Rectangle18 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 90%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.Rectangle19{
    place-items: center;
    grid-area: 3 / 1 / 6 / 13;
    margin-top: 5%;
    
}
.Rectangle19 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 90%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.photo7{
    place-items: center;
    grid-area: 6 / 2 / 10 / 11;
    margin-top: 4%;
    
}
.photo7 img { /*  Применяем стили к тегу <img> внутри .logo */
    max-width: 90%; /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.Rectangle20 {
    grid-area: 8 / 2 / 12 / 11;
    margin-top: 4%;
    align-self: center;
    position: relative; /* Для абсолютного позиционирования дочерних элементов */
}
.input-container textarea {
    resize: none; /* Запрет изменения размера */
    width: 8%; /* Фиксированная ширина */
    height: 80px;
    max-width: 300px; /* Фиксированная высота */
    min-height: 80px; /* Запрет уменьшения */
    max-height: 100px; /* Запрет увеличения */
}
/* Стиль для контейнера с полями ввода */
.input-container {
    resize: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 31%; /* Настройте под ваше изображение */
    top: 30%; /* Позиционирование по вертикали */
    left: 7%; /* Позиционирование по горизонтали */
}
@media (min-resolution: 120dpi) {
  .input-container  {
    gap: 50px;
  }
}
/* Стиль для отдельных полей ввода */
.input-field {
    font-family: 'Sarabun', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    background-color: transparent;
    border: none;
    outline: none;         
    box-shadow: none;

}

/* Стиль для иконки-кнопки */
#botton4 {
    position: absolute;
    top: 85%; /* Позиция по вертикали */
    left: 14%; /* Центрирование по горизонтали */
    transform: translateX(-50%);
    cursor: pointer;
}


/* Стиль для изображения-фона */
.Rectangle20 img {
    width: 100%;
    height: auto;
    display: block;
}



.bottom3{
    place-items: center;
    grid-area: 9 / 3 / 9 / 13;
    align-self: center;
    margin-left: -1.5%;
}
.bottom4{
    place-items: center;
    grid-area: 9 / 6 / 9 / 13;
    margin-left: 4%;
    margin-top: 13%;
}
/* Заголовки */
h1 {
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 70px;
    margin: 0 0 20px 0;
}

h2 {
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    margin: 0 0 18px 0;
}

h3 {
    font-weight: 700;
    font-size: 36px;
    line-height: 45px;
    margin: 0 0 16px 0;
}

h4 {
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    margin: 0 0 14px 0;
}

h5 {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    margin: 0 0 12px 0;
}

/* Кнопки */
.buttons {
    font-family: 'Sarabun', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
}

/* Параграфы (если нужно отдельный класс) */
.p1 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

/* Или для всех параграфов */
p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 10px 0;
}


.main-end{
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 0.5fr; /*   8 колонок */
    grid-template-rows: 8% 1fr 1fr 1fr 10%;/*  Определяем расположение в Grid */
    background-color: #4D4343;
}
.testtext10{
    grid-area: 2 / 2 / 4 / 6;
    color:#ffffff;
    
}
.cccs{
    color: #ECA351;
}
.testtext11{
    grid-area: 2 / 7 / 4 / 11;
    
    color:#ffffff;
    
}
.testtext12{
    grid-area: 4 / 7 / 4 / 11;
    color:#ffffff;
    align-self: center;
    line-height: 25px;
    z-index: 10;
}
.testtext13{
    grid-area: 4 / 9 / 4 / 11;
    color:#ffffff;
    align-self: center;
    line-height: 25px;
    z-index: 10;
}
.Rectangle23{
    
    z-index: 4;
    grid-area: 4 / 2 / 5 / 12;
}
.Rectangle23 img { /*  Применяем стили к тегу <img> внутри .logo */
   /*  Изображение не может быть шире, чем .logo */
    height: auto;    /*  Сохраняет пропорции */
    display: block; /* Убирает небольшое пространство снизу, которое иногда появляется у изображений */
}
.bottom15{
    grid-area: 3 / 2 / 4 / 8;
}
.swaper-wrapper {
    grid-area: 3 / 7 / 4 / 8;
    justify-self: center;
    margin-left: -22%;
    margin-top: 10%;
}
.swaper-link {
    position: absolute;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 59;
    text-decoration: none;
}

.swaper {
    transition: all 0.3s ease;
    display: block;
    width: auto; /* Укажите нужный размер */
    height: auto;
    filter: none;
}

/* Эффекты при наведении */
.swaper:hover {
    filter: url(#orangeFilter);
    cursor: pointer;
    transform: scale(1.1); /* Опциональная анимация */
}