body {
   margin: 0;
   font-family: Arial, sans-serif;
   background: linear-gradient(135deg, #140330 0%, #140330 41%, #d11d83 100%);
   color: white;
 }

 /* Блок с фоном */
 .blocks-1 {
   background: url("../img/7328_1.jpg") no-repeat center center;
   background-size: cover;
   /* картинка занимает всю ширину и высоту */
   width: 100%;
   height: 100vh;
   /* весь экран по высоте */
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 /* Контент внутри */
 .content {
   background: rgba(0, 0, 0, 0.562);
   /* затемнение, чтобы текст был читаемым */
   padding: 40px 20px;
   border-radius: 12px;
   max-width: 650px;
 }

 .content h1 {
   font-size: 48px;
   margin-bottom: 20px;
 }

 .content p {
   font-size: 20px;
   color: #ddd;
   margin-bottom: 30px;
   line-height: 1.6;
 }

 .btn {
   padding: 12px 28px;
   font-size: 18px;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   background: #fff;
   color: #140330;
   transition: background 0.3s;
 }

 .btn:hover {
   background: #f1c40f;
 }

 /* Второй блок  */
 .section-2 {
   padding: 80px 0;
 }





 .section-2 .text-block {
   color: rgb(255, 255, 255);
 }

 .btn.btn-light {
   margin-top: 50px;
   margin-bottom: 50px;
   color: rgb(22, 22, 22) !important;
 }

 .btn.btn-light:hover {
   background: #f1c40f !important;
 }

 .button-1 {
   font-size: 20px;
   padding: 12px 28px;
   margin-top: 50px;
   margin-bottom: 50px;
   border: none;
   border-radius: 28px;
   color: rgb(22, 22, 22) !important;
 }

 .button-1:hover {
   background: #f1c40f !important;
 }

 .section-2 .img-block {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   /* ширина блока (можно задать в %, px или vw) */
   max-width: 400px;
   /* ограничение по ширине */
   height: 550px;
   /* высота блока */
   border-radius: 10px;
   margin: 0 auto;
   /* центрирование */
 }

 .section-2 img {
   width: 80px;
   height: auto;
 }




 /* <!-- 3 блок --> */
 .container-3 {
   display: flex;
   justify-content: center;
   /* выравнивание по центру */
   align-items: center;
   text-align: center;
   padding: 50px 0;
   gap: 80px;
   /* расстояние между карточками */
 }

 .card {
   max-width: 250px;
   background: none;
   box-shadow: none;
 }

 .card img {
   width: 150px;
   height: 150px;
   object-fit: cover;
   border-radius: 50%;
   border: 3px solid rgba(255, 255, 255, 0.8);
   margin: 0 auto;
   /* чтобы аватарка была точно по центру */
   display: block;
 }

 .card h3 {
   margin: 15px 0 10px;
   font-size: 20px;
   font-weight: bold;
   color: #fff;
 }

 .card p {
   font-size: 14px;
   line-height: 1.5;
   color: #ffffff;
 }

 /* --- адаптив --- */
 .container-3 {
   display: flex;
   flex-wrap: wrap;
   /* перенос строк */
   justify-content: center;
   gap: 40px;
   padding: 50px 20px;
   text-align: center;
 }

 .card {
   flex: 1 1 calc(25% - 40px);
   /* по 4 в ряд */
   max-width: 250px;
 }

 /* планшет */
 @media (max-width: 992px) {
   .card {
     flex: 1 1 calc(50% - 40px);
     /* по 2 в ряд */
   }
 }

 /* телефон */
 @media (max-width: 568px) {
   .card {
     flex: 1 1 100%;
     /* одна в ряд */
   }
 }

 /* 4 Блок  */
 .clearfix {
   padding-left: 50px;
   padding-right: 50px;
 }

 .blocks-3 {
   margin-bottom: 50px;
 }

 .blocks-5 {
   margin-top: 50px;
   margin-bottom: 50px;
 }

 .Блок-5 {
   margin-top: 40px;
   margin-bottom: 40px;
 }


 .h2-22 {
   margin-top: 90px;
   margin-bottom: 90px;
   text-align: center;
 }

 .h2-23 {
   margin-top: 30px;
   margin-bottom: 30px;

 }

 /* Блок 6 */

 .container-6 {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 50px 20px;
   gap: 40px;
   flex-wrap: wrap;
 }

 .text-block-6 {
   max-width: 250px;
 }

 .text-block-6 h3 {
   font-size: 20px;
   margin-bottom: 10px;
 }

 .text-block-6 p {
   font-size: 14px;
   line-height: 1.5;
   color: #ffffff;
 }

 .image-block-6 {
   background: linear-gradient(135deg, #140330 12%, #d11d83 50%, #140330 94%);
   padding: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 250px;
   min-height: 350px;
 }

 .image-block-6 img {
   width: 50px;
   height: auto;
 }



 /* Блок 7 */
 .wrapper {
   min-height: 100vh;
   /* растягиваем на весь экран */
   display: flex;
   justify-content: center;
   /* по центру по горизонтали */
   align-items: center;
   /* по центру по вертикали */
   /* background: black;             фон как на картинке */
 }

 .block {
   text-align: center;
   max-width: 550px;
   color: white;
   font-family: Arial, sans-serif;
 }

 .block h1 {
   font-size: 2em;
   font-weight: bold;
   margin-bottom: 15px;
 }

 .block p {
   font-size: 1em;
   color: #fffefe;
   margin-bottom: 30px;
 }

 .block button {
   background: rgb(250, 250, 250);
   /* color: black; */
   border: none;
   padding: 12px 28px;
   font-size: 20px;
   font-weight: bold;
   border-radius: 28px;
   cursor: pointer;
   transition: 0.3s;
 }


 .block button:hover {
   background: #fdda0f;
 }


footer {
      background: linear-gradient(135deg, #140330 12%, #d11d83 50%, #140330 94%);
      color: white;
      text-align: center;
      padding: 20px 0;
      font-family: Arial, sans-serif;
    }

    footer a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      font-weight: bold;
    }

    footer a:hover {
      text-decoration: underline;
    }

/* Розділ Послуги */


    section.services {
      padding: 60px 20px;
      background: #f9f9f900;
      text-align: center;
    }
    section.services h2 {
      font-size: 45px;
      margin-bottom: 30px;
    }
    .services-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      max-width: 1000px;
      margin: 0 auto;
    }
    .service-card {
      background: linear-gradient(135deg, #20064b 12%, #d11d83 50%, #20064b 94%);
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
      transition: transform 0.3s ease;
    }
    .service-card:hover {
      transform: translateY(-5px);
    }
    .service-card h3 {
      font-size: 32px;
      margin-bottom: 10px;
    }
    .service-card p {
      font-size: 20px;
      color: #ffffff;
    }

.call-anim {
    animation: call 2s ease 0s infinite normal forwards;
}

@keyframes call {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(-6deg);
	}

	30% {
		transform: translateX(15px) rotate(6deg);
	}

	45% {
		transform: translateX(-15px) rotate(-3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(-1.2deg);
	}
}