@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@font-face {
    font-family: 'Onder';
    src: url('/fonts/Onder-Regular.woff2') format('woff2'),
        url('/fonts/Onder-Regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-praimary-blue: #6044FF;
    --color-button-blue: #2400F1;
    --color-secondary-blue: #9E8DFF;
    --color-hf-grey: #4E4E4E;
    --color-secondary-grey:#343434;
    --color-praimary-black: #000000;
    --color-praimary-white: #FFFFFF;
    --offer-text-black: #3B3B3B;
    --gradient:linear-gradient(
        90deg,  
        #6044FF 1%,      
        #1E00C6 80%  );
}
body {
    margin: 0;
}
h3 {
    font-family: 'Roboto Flex';
}
p {
    font-family: 'Roboto Flex';
    font-size: 24px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
}
ul {
    list-style-type: none;
}
.link {
    text-decoration: none;
    color: var(--color-praimary-white);

}
.link:hover {
    color: var(--color-praimary-blue)
}
.link-header {
   color: var(--color-secondary-gre);
}
a {
    display: inline-block;
    font-family: 'Roboto Flex';
}
.section-title {
    font-family: 'Oswald';
    font-weight: 300;
    font-size: 96px;
}
.container {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
}
.paddingofcontainer {
    padding-top: 80px;
    padding-bottom: 80px;
}

.header {
    background:#f0f0f0;
    height: 60px;
   
    
}
.header-container {
    display: flex;
    justify-content: center;
    
    
}
.header-menu {
    display: flex;
    gap: 70px;
    font-size: 24px;
    font-weight: 400;
   
}
.header-menu li a {       /* или .header-menu a, если <li> не нужны */
    line-height: 60px;  
    color: var(--color-secondary-grey);
 }

.lowersection-button {
    text-decoration: none;
    font-size: 32px;
    font-weight: 400;
    font-family: 'Roboto Flex';
    border-radius: 40px;
    border: none;
    width: 340px;
    height: 88px;
    color: var(--color-praimary-white);
    background: linear-gradient(180deg, rgba(36, 0, 241, 1),rgba(30, 0, 198, 0.8));
    cursor: pointer;
    margin: 0 auto;
    display: block;
    box-shadow: 2px 4px  black;
}
.lowersection-button:hover {
    background: var(--color-secondary-blue);
}
.lowersection-button:active {
    background-color: var(--color-secondary-blue);
    box-shadow: none ;
    padding-top: 2px;
    padding-left: 2px;
}
button {
    padding: 0;
}

/*offer*/

.offer-section {
    
    background-color: #f0f0f0;
    background-image: url('/images/offerfigure1.png'),
    url('/images/offerfigure2.png');
    background-repeat: no-repeat, no-repeat;
    background-position: right    center,
                       left 0px bottom 0;

                       
}

.offer-container{
    display: flex;
    position: relative; 
  
   
}

.offer-texts {
    color: var(--offer-text-black);
    width: 724px;
}
.offer-title1, .offer-title2 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'Onder';
    font-weight: 500 ;
    font-size: 48px;
    height: 100px;
}
.offer-title1 {
  color: var(--color-praimary-blue);
  
  background: linear-gradient(90deg,
              rgba(96, 68, 255, 1) 0%,
              rgba(30, 0, 198, 0.8) 100%);

  
  -webkit-background-clip: text;  
  background-clip: text;           

  -webkit-text-fill-color: transparent; 
  color: transparent;
}

.offer-title2 {
    color: var(--color-secondary-blue);   /* или любой нужный */
  background: none;
  -webkit-text-fill-color: initial;
    margin-left: 274px;
}
.offer-title {
    width: 619px;
    height: 180px;
    margin-bottom: 40px;
}
.offer-undertitle {
    display: flex;
    flex-direction: column;
   align-items: center;
   text-align: center;
}
.offer-text {
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 400;
}
.offertext-accent {
    color: var(--color-praimary-blue);
    font-weight: 600;
    
}
.offertext-accent2 {
    font-style: italic;
}
.offer-text1 {
    font-weight: 600;
    font-size: 36px; 
    width: 100%;
    max-width: 658px;
    
    
}
.offer-text2 {  
    width: 100%;
    max-width: 530px;
    background-color: rgba(158, 141, 255, 0.15);
    
}
.singup-box {
    display: flex;
    gap: 23px;
    
}

.offer-text3 {
    align-self: center;
    margin-bottom: 0
}
.offersection-button {
    text-decoration: none ;
    font-size: 32px;
    font-weight: 400;
    font-family: 'Roboto Flex';
    border-radius: 40px;
    border: none;
    width: 340px;
    height: 88px;
    color: var(--color-praimary-white);
    background: linear-gradient(180deg, rgba(36, 0, 241, 1),rgba(30, 0, 198, 0.8));
    cursor: pointer;
    display: block;
    box-shadow: 2px 4px  black
}
.offersection-button:hover {
    background: var(--color-secondary-blue);
}
.offersection-button:active {
    background-color: var(--color-secondary-blue);
    box-shadow: none ;
    padding-top: 2px;
    padding-left: 2px;
}

.offer-img {
    position: absolute;
    left: 670px;
    top: 50px;
}




/*forwohmcourse-section*/
.forwhomcourse-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 60px;
}
.forwhomcourse-list {
    display: flex;
    gap: 32px;
    padding: 0;
    margin: 0;
}
.forwhomcourse-item {
    flex-basis: calc((100%-20px)/4);
}
.forwhomcourse-card1 {
    border: 1px solid var(--color-praimary-blue);
    border-top-left-radius: 40px ;
    border-top-right-radius: 40px;
    background: linear-gradient(90deg, rgba(96, 68, 255, 1),rgba(30, 0, 198, 0.8));
    width: 280px;
    height: 80px;
   

    /* центрування */
    display: flex;
    flex-direction: column;   /* елементи — у стовпчик */
    align-items: center;      /* горизонтальне центрування */  /* вертикальне центрування */
    justify-content: center;
    text-align: center;       /* вирівняти текст усередині елементів */
    gap: 12px;                /* відступ між <h3> і <p>, за бажанням */           /* щоб текст не прилипав до бордера */
}
.forwhomcourse-card2 {
    border: 1px solid var(--color-praimary-blue);
    border-bottom-left-radius: 40px ;
    border-bottom-right-radius: 40px;
    width: 280px;
    height: 200px;;
    display: flex;
    flex-direction: column;   /* елементи — у стовпчик */
    align-items: center;      /* горизонтальне центрування */
    text-align: center;       /* вирівняти текст усередині елементів */
    gap: 12px;   
    text-align: left;   
    padding-top: 20px;  
            /* відступ між <h3> і <p>, за бажанням */           /* щоб текст не прилипав до бордера */
  }
.forwhomcourse-card-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 100%;
    color: var(--color-praimary-white);
    margin: 0;
}
.forwhomcourse-card-title2 {
    width: 100%;
    max-width: 150px;
}
.forwhomcourse-card-title3 {
    width: 100%;
   max-width: 188px;
}
.forwohmcourse-text {
    width: 100%;
    max-width: 246px;
}


/*aftercourse-section*/
.aftercourse-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 60px;
}
.aftercourse-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3-ри однакові колонки */
    gap: 32px;                              /* і міжрядковий, і міжколонковий відступ */
    padding: 0;
    margin: 0;
    
}

.aftercourse-card {
    display: flex;
    gap: 10px;
}
.aftercourse-texts {
    width: 340px;
    height: 140px;
}

.aftercourse-card img{
    align-self: flex-start;
}


/*contentofcourse-section*/
.contentofcourse-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 60px;
}
.contentofcourse-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    margin: 0;
    gap: 32px;
}
.contentofcourse-card1 {
    border: 1px solid var(--color-praimary-blue);
    border-top-left-radius: 40px ;
    border-top-right-radius: 40px;
    background: linear-gradient(90deg, rgba(96, 68, 255, 1),rgba(30, 0, 198, 0.8));
    width: 592px;
    height: 120px;

    display: flex;
    flex-direction: column;   
    align-items: center;      
    justify-content: center;
    text-align: center;       
    gap: 12px;

}
.contentofcourse-card2 {
    border: 1px solid var(--color-praimary-blue);
    border-bottom-left-radius: 40px ;
    border-bottom-right-radius: 40px;
    width: 592px;
    height: 420px;;
    display: flex;
    flex-direction: column;   /* елементи — у стовпчик */
    align-items: center;      /* горизонтальне центрування */
    text-align: center;       /* вирівняти текст усередині елементів */
    gap: 12px;   
    text-align: left;   
}
.contentofcourse-card-title {
    color: var(--color-praimary-white);
    font-weight: 500;
    font-size: 32px
}
.contentofcourse-text {
    font-weight: 500;
    font-size: 24px;
    padding: 38px 20px;
}
.contentofcourse-card-title2 {
    width: 540px;
}
.contentofcourse-card-title3 {
    width: 540px;
}
.contentofcourse-item:nth-child(5) {
    grid-column: 1 / -1;   
    justify-self: center;  
  }
/*costofthecourse-section*/
.costofthecourse-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 60px;
}
.costofthecourse-list {
    display: grid;
    grid-template-columns: repeat(2, 592px);
    padding: 0;
    margin: 0;
    gap: 32px;
}

.costofthecourse-item {
  width:592px;    
  height:325px;    
  border:1px solid var(--color-praimary-blue);
  border-radius:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
    
    
}
.description-of-cost {
    display: flex;
}
.costofthecourse-item:nth-child(3) {
   
    grid-column:1 / span 2;
    
    width:calc(592px * 2 + 32px);
    height: 210px;
    
}
.costofthecourse-card {
    margin-top: 32px;
    font-weight: 400;
    font-size: 24px;
    max-width: 415px;
    max-height: 255px;
}
.costofthecourse-card-title {
    font-family: 'Roboto Flex';
    font-size: 36px;
    margin-bottom: 40px;
    
}
.cost-of-course {
    font-family: 'Roboto Flex';
    margin-bottom: 40px;
    font-size: 64px;
    color: var(--color-praimary-blue);
    margin-top: 0;
}
.costofthecourse-card3 {
    max-width: 1166px;
    
    gap: 32px;
}
.description-of-cost:nth-child(1) {
    margin-bottom: 32px;
}
.description-of-cost {
    gap: 10px;
  font-size: 24px;
}
  
/*format-section*/
.format-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 60px;
}
.format-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 32px;                              
    padding: 0;
    margin: 0;
}

.format-card {
    display: flex;
    gap: 20px;
    padding: 25px 20px;
    border: 1px solid var(--color-praimary-blue);
    border-radius: 40px;
}
.format-card img {
    align-self: flex-start;
}
.format-card-title {
    margin: 0;
    font-weight: 500;
    font-size: 32px;
    width: 237px;
    margin-bottom: 11px;

}
.format-text {
    font-weight: 400px;
    font-size: 24px;
    
}
/*відгуки — фото целиком (без обрезки), центр по горизонтали и вертикали*/
.reviews-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:60px;
  margin-bottom:60px;
}

/* Контейнер слайдера */
#reviewsSwiper.swiper{
  position:relative;
  width:100%;
  max-width:560px;
  height:380px;                 /* фиксируем “окно просмотра” */
  border-radius:40px;
}

/* Стрелки */
#reviewsSwiper .swiper-button-prev,
#reviewsSwiper .swiper-button-next{
  color:var(--color-praimary-blue);
  width:38px; height:38px;
}

/* Слайды: центрируем контент */
#reviewsSwiper .swiper-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;              /* цвет полей вокруг фото */
}

/* Картинка: показываем ПОЛНОСТЬЮ, без кропа */
#reviewsSwiper .swiper-slide img{
  display:block;

  /* ключевые переопределения */
  object-fit:contain !important;
  object-position:center !important;

  /* вписываемся в окно, не растягивая */
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;

  /* защита от размытия */
  transform:none !important;
  backface-visibility:hidden;
}

/* Подпись под слайдером */
.swiper-caption{
  margin-top:1px;
  text-align:center;
  font:300 38px/1.35 "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--color-secondary-grey);
}
.swiper-caption::before{
  content:"";
  display:block;
  width:560px;
  height:2px;
  margin:0;
  background:linear-gradient(90deg, #6044FF 0%, rgba(30,0,198,0.8) 100%);
  border-radius:999px;
}

/* Адаптив */
@media (max-width:387px){
    
  #reviewsSwiper.swiper{
    width:340px;
    height:400px;              /* при необходимости подстрой под свои пропорции */
    border-radius:20px;
  }
  .swiper-caption{ font-size:30px; }
  .swiper-caption::before{ width:340px; height:2px; }
}







/*author-section*/
.author-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 60px;
}
.author-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-auto-rows: 1fr;
    gap: 60px;                              
    padding: 0;
    margin: 0;
}
.author-list img {
    object-fit: cover;
    width: 570px;
    height: 440px;
    border-radius: 40px;
}
.author-item {
    border: 1px solid var(--color-praimary-blue);
    border-radius: 40px;
    color: var(--color-secondary-grey);
    width: 570px;
    height: 440px;
    
    
}

.author-item:nth-child(2) {
    border: none;
   
  }
.author-item:nth-child(3) {
    background: linear-gradient(90deg, rgba(96, 68, 255, 1),rgba(30, 0, 198, 0.8));
    color: var(--color-praimary-white);
    

  }
  
.author-item:nth-child(5) {
    grid-column: 1 / -1;   
    justify-self: center;  
    border: none;
  }
.author-card {
    padding: 40px;
    font-weight: 400;
    font-size: 24px;
    
}
.author-card-title {
    font-weight: 500;
    font-size: 36px;
    margin-bottom: 32px;
    margin-top: 0;
}
/*slider*/
    .swiper {
        max-width: 560px;
      width: 100%;
         max-height: 380px;
      height: 100%;
      border-radius: 40px;
      
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }




  
    
  

/*footer*/
footer {
    background-color: var(--color-hf-grey);
    font-weight: 400;
    color: var(--color-praimary-white);
}
.footer-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100p;
    font-size: 24px;
    

}

.footer-nav-list {
    padding: 0;
    margin-top: 40px;
    margin-bottom: 100px;
    
}
.footer-link {
    margin-bottom: 20px;
}
.address-contact {
    margin-top: 40px;
    font-style: normal;
}
.contact-box1 {
    margin-bottom: 20px;
}
.contact-img {
    margin-right: 20px;
}
.contact-title {
    margin-bottom: 10px;
}
.address-copyright {
    font-size: 20px;
    margin-bottom: 47px;
    
    
}

/*burger-menu*/

/* ===== Базове меню на десктопі ===== */
.header-menu {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* ===== Бургер-кнопка ===== */
  .burger {
    display: none;                 /* сховано на десктопі */
    width: 32px;
    flex-direction: column;
    justify-content: space-between;
    height: 22px;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .burger span {
    display: block;
    height: 3px;
    background: var(--color-secondary-grey);
    border-radius: 2px;
    transition: all 0.3s;
  }
  .menu-close {
    display: none;
  }
  
  /* ===== Мобільний режим ===== */
  @media (max-width: 768px) {
    .burger { display: flex; }
  
    /* панель-меню (праворуч, вище всіх) */
    .header-menu {
      position: fixed;
      top: 0;
      right: 0;
      height: 100dvh;
      width: 260px;
      padding: 80px 24px 24px;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      background: #fff;
      box-shadow: -4px 0 12px rgba(0,0,0,0.1);
      transform: translateX(100%);
      transition: transform 0.35s ease-in-out;
      z-index: 999;
    }
    /* коли відкрито */
    .header-menu.is-open { transform: translateX(0); }
  
    /* приховуємо фонове меню з контентом під ним */
    body.no-scroll {
      overflow: hidden;
      touch-action: none;
    }
  }
  
  /* ===== Анімація бургер → хрестик ===== */
  .burger.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .burger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .burger.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }


/*центр*/

  


  

  








/* ===== МОБІЛЬНИЙ АДАПТИВ (телефон ≤480 px) ============================== */
@media (max-width:480px){

/* ——— бургер ——— */
    .menu-close {
        display: none;          /* по умолчанию прячем */
        position: absolute;
        top: 18px;              /* подберите под свой дизайн */
        right: 18px;
        font-size: 32px;        /* размер крестика */
        line-height: 1;
        color: #fff;            /* или ваша переменная */
        cursor: pointer;
        background: none;
        border: none;
        z-index: 1001;          /* поверх всего в меню */
      }
    
      /* Показать крестик, когда меню открыто */
      .header-menu.is-open .menu-close {
        display: block;
      }
    /* ——— header ——— */
   .burger {
    margin-left: 350px;
    margin-top: 15px;
   }
    /* ——— OFFER-SECTION ——— */
    
   .paddingofcontainer1 {
    padding-top: 0;
   }
   .offer-container {
    align-items: center;
   }
   .offer-section      { 
    background-image:none;
 }
 .offer-text {
    margin-bottom: 20px;
 }
 .offer-text3 {
    font-size: 26px;
    margin-top: 20px;
    margin-bottom:0 ;
 }
.offer-texts {
    padding: 0 10px;
    padding-top: 20px;
    
}
 
  .offer-container    { 
    display:flex; 
    flex-direction:column; 
    
}
.offer-title {
    width: 100%;
    max-width: 400px;
   text-align: center;
    height: 100px;
    margin-bottom: 20px;
    
}
  .offer-title1, .offer-title2 {
    font-size: 25px;
    font-family: 'Onder';
  }
  .offer-title2 {
    margin-left: 150px;
  }
  .bg-img-offer {
    background-image: url(/images/offerfigure3.png);
    height: 380px;
    width: 100%;
    max-width: 430px;
    
  }
.bg-img-offer img {
    width: 240px;
    height: 240px;
    margin-left: 60px;
    margin-top: 30px;
}
    .offer-texts {
        width: 100%;
        max-width: 400px;
    }
    .offer-text1 {
       font-size: 20px;
       width: 100%;
       max-width: 400px;
    }
  .offer-text2 {
    font-size: 20px;
    width: 100%;
    max-width: 360px;
  }
  .offer-img          {
        position:static;   
        width:100%;
        max-width:280px;   
        height:auto;
        margin:0;
  }
  .singup-box {
   
      display:flex; 
     flex-direction:column;
    align-items:center;
    width: 100%;
    max-width: 340px;
  }



  /*.singup-box    {
    width:100%; 
    margin-top:0;
     text-align:center; 
   }/
  
  

  
    /* ——— FORWHOMCOURSE-SECTION ——— */
        .forwhomcourse-container {
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .forwohmcourse-title {
            font-size: 48px;
            margin-left: 10px;
        }
      
        .forwhomcourse-list{
          display:grid;
          grid-template-columns:repeat(2, calc(50% - 5px));
          gap: 10px;           
          padding:0 10px;       
          box-sizing:border-box;
        }
      
        
        .forwhomcourse-card1,.forwhomcourse-card2{
            width: 100%;
          max-width: 165px;    
          box-sizing:border-box;
          padding: 10px;
        }
        .forwhomcourse-card1{
            border-top-right-radius:20px ;
            border-top-left-radius:20px ;
            height: 55px;
        }
        .forwhomcourse-card2 {
            border-bottom-left-radius: 20px ;
            border-bottom-right-radius: 20px;
            height: 135px;
        }
        .forwhomcourse-card-title { 
            font-size: 16px;
            line-height: 100%;
        }
        .forwohmcourse-text {
            line-height: 100%;
            height: 100%;
            max-height: 100px;
            width: 100%;
            max-width: 165px;
            font-size:15px;
      }
    /* ——— AFTERCOURSE-SECTION ——— */
    .aftercourse-container {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .aftercourse-title {
        font-size: 48px;
        margin-left: 10px;
    }
    .aftercourse-list{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 15px;
      width:100%;
      padding: 0 10px;
    }
    .aftercourse-card{
        width:100%;
        max-width:340px;
        gap: 5px;
    }
    .aftercourse-card img {
        width:35px;
        height:35px ;
    }
    .aftercourse-texts {
        width: 100%;
        max-width: 320px;
        height: 70px;
    }
    .aftercourse-text {
        font-size: 15px;
    }
  
    /* ——— CONTENTOFCOURSE-SECTION ——— */
    .contentofcourse-container {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .contentofcourse-title {
        font-size: 48px;
        margin-left: 10px;
    }
    
    .contentofcourse-list{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:15px;
      width:100%;
      padding: 0 10px;
    }
    .contentofcourse-card1, .contentofcourse-card2{
        width:100%;
        max-width:340px;
       
    }
    .contentofcourse-card1{
        border-top-right-radius:20px ;
        border-top-left-radius:20px ;
        height: 85px;
    }
    .contentofcourse-card2 {
        height: 250px;
        border-bottom-left-radius: 20px ;
        border-bottom-right-radius: 20px;
    }
    .contentofcourse-card-title {
        font-size: 18px;
        width:100% ;
        max-width: 300px;
    }
  
    .contentofcourse-text p {
        font-size: 15px;
    }
    .contentofcourse-text {
        padding: 10px;
    }
    
   /* ——— COSTTHECOURSE ——— */
   .costofthecourse-container {
    margin-top: 30px;
    margin-bottom: 30px;
}
.costofthecourse-title {
    font-size: 48px;
    margin-left: 10px;
}
.costofthecourse-list{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    width:100%;
    padding: 0 10px;
  }
  .costofthecourse-item {
    width: 100%;
    max-width:340px;    
    height:250px;   
    border-radius:20px; 
  
  }
  .costofthecourse-item:nth-child(3) {
    height: 200px;
    text-align: start;
  }
  .costofthecourse-card {
    width: 100%;
    max-width: 280px;
  }
  
  .costofthecourse-card3 {
    margin: 27px;
    
  }
  .costofthecourse-card-text {
    font-size: 15px;
  }
  .costofthecourse-card-title {
    font-size: 20px;
  }
  .cost-of-course {
    font-size: 40px;
  }

  .description-of-cost p{
    font-size: 15px;
  }
  .description-of-cost img {
    width: 40px;
    height: 40px;
  }
    /* ——— FORMAT-SECTION ——— */
    .format-container {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .format-title {
        font-size: 48px;
        margin-left: 10px;
    }
    .format-list {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
        width:100%;
        padding: 0 10px;     
    }
    .format-item {
        max-width: 340px;
        width: 100%;
        
    }
    .format-card{
        height: 100px;
        gap: 5px;
        padding: 15px 10px;
        border-radius:20px; 
        
    }
    .format-card img {
        width: 40px ;
        height: 40px;
    }
    .format-card-title {
        font-size: 18px;
    }
    .format-card-text {
        font-size: 15px;
    }
    .format-card1, 
    .format-card2,
    .format-card3,
    .format-card4 {
      height: 75px;
    }
    /* ——— AUTHOR-SECTION ——— */ 
    /* залишаємо як було, але гарантуємо не-вихід за екран */

    .author-container{
        margin-top: 30px;
        margin-bottom: 30px;}
    .author-title {
        font-size: 48px;
        margin-left: 10px;
    }

    .author-list {
        gap: 10px;
        padding: 0 10px;
    }
    .author-list img {
        object-fit: cover;
        width: 200px;
        height: 243px;
        border-radius: 20px;
    }
    .author-card-title{   
        font-size:18px;
        margin-bottom: 7px;
    }
    .author-item {
        width: 100%;
        max-width: 200px;
        height: 240px;
        border-radius: 20px;
    }
   .author-card  {
    padding: 15px;
   }
   .author-card p {
     font-size: 14px;
   }
   /* ——— footer ——— */
   .address-contact {
    margin-top: 45px;
   }
   .footer-container {
    padding: 0 10px;
   }
   .comunication-box, .socialmedia-box {
    display: flex;
    gap: 10px;
   
   }
   .socialmedia-box img,.comunication-box img {
    margin: 0;
   }
   .footer-nav-list a {
    font-size: 18px;
    margin-bottom: 10px;
   }
   .footer-nav-list {
    margin-bottom: 60px;
   }
   .footer-nav p {
    font-size: 15px;
   }
   footer p {
       font-size: 18px;
   }
   footer img {
    width: 30px;
    height: 30px;
   }

    /* ——— БАЗОВІ ОБМЕЖЕННЯ ——— */
    .lowersection-button {
        padding: 0px;
        width: 100%;
        max-width: 340px;
        
       
    }
    .section-title {
        margin-top: 15px;
        margin-bottom: 0;
    }
    body{font-size:20px;}               /* мінімальна типографіка */
    img,video,svg{max-width:100%;height:auto;display:block;}
    html,body{max-width:100%;overflow-x:hidden;}  /* страховка від скролу */
    /*slider*/
    .swiper {
        width: 340px;
        height: 250px;
        border-radius: 20px;
    }
  }

  @media (max-width:378px){
    .offer-title2 {
         margin-left: 130px;
    }
    .offer-undertitle {
        align-items: center;
    }
    .offer-text {
        width: 300px;
    }
    .offersection-button {
        width: 290px;
        height: 70px;
        font-size: 26px;
    } 
    .burger {
        margin-left: 270px;
        margin-top: 15px;
       }
    .lowersection-button {
      width: 100%;
      max-width: 300px;
      height: 70px;
      font-size: 26px;
    }
    .costofthecourse-item {
        width: 100%;
        max-width:300px;    
        height:240px;    
      
      }
      .costofthecourse-card3 {
        margin: 30px;
        
      }
      .author-card p {
        font-size: 12px;
      }
      .swiper {
        width: 300px;
        height: 220px;
        border-radius: 20px;
    }
    .comunication-box, .socialmedia-box {
        display: flex;
        gap: 5px;
       
       }
}
/* {
    outline: 1px solid rgba(255,0,0,0.6);   /* полупрозрачная, чтобы не слепило */
    /* border: 1px solid red;              ← если нужен именно border */

@media (max-width:321px){
    .header-menu {
        width: 220px;}
    .offer-title {
        height: 75px;
    }
   .offer-title1, .offer-title2 {
    font-size: 19px;
   }
   .offer-text1, .offer-text2 {
    font-size: 18px;
   }
   .offer-text3 {
    font-size: 23px;
   }
}