/* Переменные */


:root {
  
  --border-color: rgba(0, 0, 0, 0.6);
  --bg: transparent;
  --color-green: #1750ad; /* хоть и написано что цвет зеленый, на деле он синий...*/
  --color-text:#484848 ;
  --color-gray: #9e9e9e;
  --color-black:#262626;
  --backround-grey: rgb(225, 225, 225, .3);
  /** Media points **/
--breakpoint-l: 1200px;
--breakpoint-m: 992px;
--breakpoint-s: 768px;
  
}




*:not(.icon){
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  
}

/* Общие стили */
a.link {
  color: var(--color-green);
  fill:var(--color-green);
  text-decoration: none;
  transition: opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease;
  
}

.active{
  
  color: var(--color-green);
}

.second-title{
  position: relative;
  font-size: 45px;
  text-align: center;
  margin-bottom: 80px;
  
  
  
  
}
.second-title:after{
  
  
  content: "";
  display: inline-block;
  width: 90px;
  height: 3px;
  background: var(--color-green);
  position: absolute;
  bottom: -12px;
  left: calc(50% - 80px/2)
  
  
}




a.link:hover {
  opacity: 0.7;
  
  
  
  
}

ul {
  list-style: none; /* Убирает маркеры */
  padding-left: 0;
}

/* Важный элемент центрирования */
.block-center{
display: flex;
align-items: center;
justify-content: center;

}

/* HEADER */

.header {
  position: relative;
  height: 110vh;
  bottom: 80px;
  margin-top: -16px;
  background: url(../img/phone5.webp) no-repeat center;
  background-size: cover;
  clip-path: polygon(100% 0, 100% 80%, 50% 91%, 0 80%, 0 0);
}

.header__backround {
  position: absolute;
  height: inherit;
  width: 100%;
  background: black;
  opacity: 0.3;
  z-index: 1;
  
}
/* Верхнее меню ps: сразу скажу, изначально пытался подогнать вручную элементы, но так как ПОЛНОЕ центрирование требовалось в дургих секциях сделал общий элемент класс block-center он указан во всех классах где по моему мнению требуется центрирование. С классом header немного намутил, так как есть одновременно центрирование с помощью block-center и ручное, но убрав ручное немного ломается, как говрится не трогай, то что рабоатет и не важно как */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  top: 0;

  padding-top: 10px;
  height: 80px;
  background: rgb(0, 0, 0, 69%);

  color: white;
  
  z-index: 9999999;
  position: sticky;
}

.header-top a.link {
  color: #ffff;
  

}
.header-top a.link:hover:not(.logo){
  color: var(--color-green)
  
  
  
  
}

.header-top a.link.active {
  color: var(--color-green); 
  
}



.logo {
  font-size: 30px;
  
  margin-left: -105px;
}




/* Настройка кнопки номера в глав меню */
.num{
  display: flex;
  flex-direction: column;
  margin-right: -32px;
  
  
}

.switcher {
  margin-left: -100px;
  margin-right: -93px;
  background: none; /* Убираем фон */
  border: none;     /* Убираем рамку */
  padding: 0;
  color: #ffff;
  
}

.switcher:hover {
  opacity: 0.7;
  transition: opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease;
  color: var(--color-green);
  
}

.switcher-2 {
  margin-left: -100px;
  margin-right: -93px;
  background: none; /* Убираем фон */
  border: none;     /* Убираем рамку */
  padding: 0;
  color: #ffff;
  
}

.switcher-2:hover {
  opacity: 0.7;
  transition: opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease;
  color: var(--color-green);
  
}



/* КОНЕЦ настройки кнопки номера в глав меню ps:Требуется добавить при нажатии копирвоание телефона */

.menu {
  margin: 0 35px 0 -51px

}

.menu-element{
  margin-right: 33px;
  font-size: 22px;
  
}
.menu-element:last-child {
  
  margin-right: 0;
  
  
}
.menu-element__link.home svg{
  width: 24px;
  height: 24px;

  
}


.header-center {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 658px;
  
  color: #ffff;
  
    position: relative;
    z-index: 2;
  
}

.header-center__wrapper {
  
   text-align: center;
   font-size: 26px;
  
   background: rgb(0, 0, 0, 69%);
   width: 100%;
   padding: 26px 0;
  
   
  
   
  
  
}

.name {
 line-height: 72px;
 
  
}

.description {
  display: inline-block;
  width: 1300px;
  font-size: 25px;
  
  font-family: cursier, monospace;
  line-height: 1.4em;
  white-space: nowrap;
  
  overflow: hidden;
  
  border-right: 3px solid  transparent;
  
  animation: cursor 0.75s 8, print-text 5s steps(97);
}

@keyframes cursor {
  0%{
    
    border-color: transparent;
  }
  50%{
    border-color: #fff;
  }
  100%{
    
    border-color: transparent;
  
}
}



@keyframes print-text{
  from{
    width: 0;
    
  }
  
  
}
  
/* О НАС */
.about_me {
  align-items: center;
  
  display: flex;
  padding-bottom: 100px;
  
}

.about-me__title{
  font-size: 30px;
  
}
.gray{
  color: var(--color-gray)!important;
  
}
.about-me__discraption{
  font-size: 20px;
  color: var(--color-text);
  margin-bottom: 15px;
  padding-right: 400px;
}




.about_me .left {
  flex: 1 1 30%;
  padding-right: 40px;
  
  
  
  
}


.about_me .right {
  flex: 1 1 60%;
  
  
  
  
  
}

.about-me__image{
  width: 371px;
  height: 546px; 
  margin-left: auto;
  border-radius: 10px;
  filter: drop-shadow(10px 10px 10px rgb(0, 0, 0, 69%));
  
  
  
}


.about-me__extra-element{
  display: flex;
  margin-bottom: 10px;
  
}

.about-me__extra-element:last-of-type{
margin-bottom: 0;

  
}


ul.about-me__extra{
  color: var(--color-text);
  font-size: 18px;
  margin-top: 20px;
  align-items: center;
  
}
.about-me__icon{
  
width: 24px;
height: 24px;

}
.about-me__icon svg{
  color: var(--color-green)
  

}
.number{
  width: 24px;
height: 24px;
 
   margin-left: 2px;
    margin-right: 1px;
  
}

.obr{

  
}


.block{
  width: 100%;
  
  
}




.bold{
  color: var(--color-black);
  padding-right: 5px;
  padding-left: 10px; 
  font-weight: bold;
 
  
}












* {
  box-sizing: border-box;
}



/* сетка карточек */
.card-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  
  
  
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 201px;
  padding: 29px;
  
}



/* карточки с контуром и прозрачным фоном ps: Желательно как-то это оптимизировать(сократить и разбить на подклассы что-ли, но не факт),чтобы возможно в будущем добавить анимацию, но не придумал как, да и много анимаций тоже такое себе. Так что отказался от этой затеи с анимецией и принебрег с классами и их характеристиками*/
.m-text{
  margin-bottom: 900px;
  
}
.outline-card {
  width: 362px;
  height: 300px;
  
  border: 1px solid var(--border-color);
  background: var(--bg);
  padding: 14px;
  
  border-radius: 36px;
  display: flex;
  
  background-color: #d4edffff;
  flex-direction: column;
  min-height: 120px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  
}

.outline-content{
  margin:19px 0 50px 0;
}

.outline-icon svg{
  width: 50px;
  height: 50px;
  color: var(--color-green);

  display: block;
  
  margin-bottom: -3px;
  margin-left: auto;
  margin-right: auto;
          

  
  
  
  
  
  
}



.outline-card h3 {
  padding-top: 20px; 
  margin: 0 0 17px;
  font-size: 2rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.outline-card p {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.19rem;
  line-height: 1.51;
  padding-right: -7px;
  color: var(--color-text);
  margin: 0 0 6px;
  
}

/* Адаптивность: текст не улетает за границы */
@media (max-width: 150px) {
  .outline-card {
    padding: 10px;
  }
  .outline-card h3 { font-size: 0.95rem; }
  .outline-card p { font-size: 0.825rem; }
}


.section-gray{
  background-color: var(--backround-grey);
  
}

/** Секция достижения ps: используется класс slider**/

.achievements {
  flex-direction: column;
  padding: 50px 0;
  position: relative;
  
}

.achievements:before,
.achievements:after{
  
  content: "";
  position: absolute;
  border: 100px solid transparent;
  
  
  
}
  
.achievements:before{
  border-top: 30px solid #ffff;
  top: 0;
  
  
}
.achievements:after{
  border-top: 40px solid var(--backround-grey);
  bottom: -140px;
  
  
}

/* Секция услуги*/
    .uslugy{
  padding: 60px 0 40px;
}



/*Слайдер изображений (Добавлено на случай если надо будет делать второй сладер с такими же параметрами, изначально планирвоался второй слайдер с другой категорией) */


.slider{
  position: relative;
  display: flex;
  max-width: 100%;
  overflow: hidden;
  margin-top: -30px;
  
  
}

.slider__wrapper{
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  min-width: 100%;
  
}

.slider__link{
  flex: 1 1 33%;
  
}

.slider__image{
  width: 100%;
  max-width: 250px;
  
  
}

/* Радиокнопки (точки-кнопки)*/
.slider__input {
  display: none;
  
}

.slider__controls{
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  
}


.slider__controls-element{
  
  display: inline-block;
  width: 40px;
  height: 8px;
  
  background: rgb(0 0 0 / 10%) ;

  
  cursor: pointer;
  transition: all opacity .25s easy;
}

.slider__controls-element:hover{
  background: color #2226ffff;
  
  
}
.slider__input:first-of-type:checked ~ .slider__wrapper:first-of-type{
  margin-left: 0;
  
  
  
}

.slider__input:nth-last-of-type(2):checked ~ .slider__wrapper:first-of-type{
  margin-left: -100%;
  
  
  
}

.slider__input:nth-last-of-type(3):checked ~ .slider__wrapper:first-of-type{
  margin-left: -200%;
  
  
  
}

.slider__input:nth-last-of-type(4):checked ~ .slider__wrapper:first-of-type{
  margin-left: -300%;
  
  
  
}
.slider__input:nth-last-of-type(5):checked ~ .slider__wrapper:first-of-type{
  margin-left: -400%;
  
  
  
}


/* Услуги */
.uslugy {
  padding: 60px 0 40px;
  
}

.uslugy-filters{
gap: 20px;
font-size: 18px;
margin-bottom: 40px;
  
}

.uslugy-filter{
  cursor: pointer;
  
  
}
.uslugy-filter:hover{
  
  color: var(--color-green);
  transition: color 0.35s easy;
  
}
.uslugy-wrapper{
display: flex;
width: 80%;
margin: 0 auto;
  

}



.uslugy-wrapper .left{
  
  flex: 1 1 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  
  padding-right: 20px;
  flex-direction: column;
  
  
}

.uslugy-wrapper .right {
  flex: 1 1 20%;
  padding: 0 0 20px 12px;
  
  border-left: 1px solid var(--color-gray)
  }


.uslugy-card__name{
  display: flex;
  margin-left: 100px;
  margin-bottom: 20px;
  
}

.uslugy-card__title{
  
  
  
  
}
.uslugy-card__name{
  margin-left: 1px;
}

.uslugy-card__money-precent{
  
  margin-bottom: 13px;
  
  
  
}

.uslugy-card__money-bar{
  background: var(--color-green);
  border-radius: 20px;
  height: 5px;
  width: 100%;
  margin-bottom: 13px;
  
}

.uslugy-card__description{
  
  color: var(--color-text);
  text-align: justify;
  
  
  
}






.uslugy-list__row{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.uslugy-list__element.active { 
  background: var(--color-green);
}
.uslugy-list__element {
  display: flex;
  flex-direction: row;/* горизонтальное разделение: слева цвет, справа текст */
  align-items: stretch;
  flex: 1 1 31%;
  max-width: 31%;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 0.3);
  border-radius: 5px;
  padding: 0;                 /* убираем внутренние паддинги, чтобы элементы занимали ровно оба блока */
  margin-bottom: 15px;
  min-height: 80px;
  overflow: hidden;
  transition: all .1s ease;
  cursor: pointer;
}
.uslugy-list__element:hover{
  outline: 2px solid var(--color-green);
  transform: scale(104%);
  
  
  
}
.uslugy-list__element-color {
  width: 40px;                  
  background: var(--color-green);           
  border-radius: 5px 0 0 5px;
}
.uslugy-list__element-text {
  padding: 10px;
  background: #fff;
  
  display: flex;
  align-items: center;
  /* можно добавить гибкость, чтобы текст занимал оставшееся место */
  flex: 1;
}


.contact-me{
  position: relative;
  padding: 40px 0;
  
}

.form-result {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

/*.blur{
  
  filter: blur(5px);
  
  
}
*/
.form-result__content {
    position: relative;
    z-index: 10000;
    max-width: 500px;
    width: 90%;
    color: #fff;
    font-size: 24px;
    text-align: center;
    padding: 40px 30px;
    background: var(--color-green);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    animation: popIn 0.5s ease-out;
}

.form-result__content p {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
}
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.8) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.form-result {
    animation: fadeIn 0.3s ease-out;
}

/* Иконка успеха */
.form-result__content::before {
    content: "✓";
    display: block;
    font-size: 70px;
    margin-bottom: 25px;
    color: #fff;
    font-weight: bold;
}

/* Эффект при наведении на сообщение */
.form-result__content:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* Стиль для кнопки отправки при загрузке */
.submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


.contact-me__form{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.input-wrapper{
  width: 48%;
  display: inline-block;
}

.input-wrapper left{
  float: left;
  margin-right: 5px;
  
}
.input-wrapper right {
  float: right;
  
}  

.textarea-wrapper{
  margin-top: 20px;
  clear: both;
  
}

.label{
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 20px;
  
  
}
.label:before{
  content: "";
  
  position: relative;
  display: inline-block;
  width: 25px;
  margin-right: 5px;
  height: 25px;
  
  background-repeat: no-repeat;
  background-position: center;
}

.label[for="name"]:before{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231750ad' class='size-6'%3e%3cpath fill-rule='evenodd' d='M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z' clip-rule='evenodd' /%3e%3c/svg%3e ");
}

.label[for="email"]:before{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231750ad' class='size-6'%3e%3cpath d='M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z' /%3e%3cpath d='M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z' /%3e%3c/svg%3e ");
  
}

.label[for="meassage"]:before{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231750ad' class='size-6'%3e%3cpath fill-rule='evenodd' d='M12 2.25c-2.429 0-4.817.178-7.152.521C2.87 3.061 1.5 4.795 1.5 6.741v6.018c0 1.946 1.37 3.68 3.348 3.97.877.129 1.761.234 2.652.316V21a.75.75 0 0 0 1.28.53l4.184-4.183a.39.39 0 0 1 .266-.112c2.006-.05 3.982-.22 5.922-.506 1.978-.29 3.348-2.023 3.348-3.97V6.741c0-1.947-1.37-3.68-3.348-3.97A49.145 49.145 0 0 0 12 2.25ZM8.25 8.625a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Zm2.625 1.125a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z' clip-rule='evenodd' /%3e%3c/svg%3e ");
}

.input{
  width: 93%;
  padding: 5px 5px 5px 20px;
  outline: 1px solid var(--color-gray);
  border: none;
  
  
}



.textarea {
  width: 93%;
  padding: 20px;
  max-width: 93%;
  min-width: 93%;
  min-height: 60px;
}


input.input:focus, .textarea:focus{
  outline: 1px solid var(--color-green);
  
}
.submit{
  display: block;
  height: 45px;
  padding: 10px 20px;
  margin-top: 10px;
  margin-left: auto;
  
  
  border: none;
  border-radius: 5px;
  background: var(--color-green);
  outline: none;
  box-shadow: none;
  color: #ffff;
  
  cursor: pointer;
  opacity: .8;
  transition: opacity .25s ease;
}

.submit:hover{
  opacity: 1;
  
}

/* footer */
.footer{
  padding: 40px 0; 
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.socials{
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  
  
}

.footer-about{
  
  color: var(--color-text);
  
}
.socials{
flex-direction: column; 
  
}
.social-element__link{
  
  display: inline-flex;
  margin-top: -25px;
 
  width: 40px;
  fill: var(--color-green)
  
}