body {
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
    color: #22343d;
}
a {
    text-decoration: none;
    color: currentColor;
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

button {
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

address {
    font-style: normal;
}

img {
    display: border-box;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* Common  */
.container {
    max-width: 411px;
    margin: 0 auto;
    padding: 0 24px;
}

@media screen and (min-width: 1150px) {
    .container {
    max-width: 1150px;
    padding: 0 20px;
    }
}

/* Header */
.header-nav, .header-button-item
 {
    display: none;
}
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 30px;
    line-height: 0.93333;
    color: #173a56;

}
.header-container {
    padding-top: 21px;
    padding-bottom: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
}
.burger-btn {
            padding: 0; 
            border: none;
            background-color: transparent; 
    
        }
    
.burger-icon {
            display: block;
            fill: #173A56;
        } 
@media screen and (min-width: 1150px) {
    .header-container {
        padding-top: 26px;
        padding-bottom: 26px;
    }
    .burger-btn {
            display: none;
        }
        .mobile-menu {
            display: none;
        }
        .logo {
            margin-right: 237px;
            }
    .header-nav,
    .header-button-item {
            display: flex;
        }
    .header-nav-list {
    display: flex;
    gap: 30px;
                }
        
    .header-nav-item {
    display: block;
    padding: 26px 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: #22343d;
                }
    
   .header-nav-item:first-child {
            font-weight: 600;
        } 
        .header-button-list {
            display: flex;
            gap: 20px;
            margin-left: auto;
        }
.header-button {
                    border: 1px solid #bcd0e5;
                    border-radius: 4px;
                    min-width: 105px;
                    height: 42px;
                    font-weight: 600;
                    text-align: center;
                    color: #173a56;
                }
.header-button-sign {
    color: #fff;
    background-color: #02897a;
        border-radius: 4px;
        min-width: 105px;
        height: 42px;
        border: 1px solid #bcd0e5;
}
.header-button-sign:hover,
.header-button-sign:focus {
border: none;
color: #173a56;
background-color: #bcd0e5;
}
        
.header-button:hover,
.header-button:focus {
border: none;
color: #fff;
background-color: #02897a;
                }
}
/* Mobile menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-container {
    position: relative;
    padding-top: 72px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
        border 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e7e9fc;
}

.mobile-close-icon {
    fill: #2e2f42;
}
.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.mobile-nav-item {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.75;
    color: #22343d;
}

.mobile-nav-item:first-child {
    font-weight: 700;
    color: #02897a;
}

.mobile-button-list {
  display: flex;  
  gap: 20px;
}

.mobile-button {
    border: 1px solid #bcd0e5;
    border-radius: 4px;
    min-width: 105px;
    height: 42px;
    font-weight: 600;
    text-align: center;
    color: #173a56;
}

.mobile-button-sign {
    color: #fff;
    background-color: #02897a;
    border-radius: 4px;
    min-width: 105px;
    height: 42px;
    border: 1px solid #bcd0e5;
    margin-bottom: 20px;
}
 /* HERO SECTION */
 .hero {
    padding-top: 29px;
    padding-bottom: 50px;
    background-color: transparent;
 }
 .hero .container {
display: flex;
flex-direction: column;
align-items: center;
    justify-content: space-between;
 }
  .hero-image {
      order: -1;
      margin-bottom: 20px;
      max-width: 80%;
  }
  .hero-title {
      font-weight: 700;
      font-size: 36px;
      line-height: 1.7;
      color: #22343d;
      max-width: 369px;
      margin-bottom: 16px;
      text-align: center;
  }
  .hero-description {
    font-weight: 400;
        font-size: 18px;
        line-height: 1.55556;
        text-align: center;
        color: #22343d;
        margin-bottom: 32px;
        max-width: 326px;
  }
   .hero-buttons {
       display: flex;
       gap: 30px;
       align-items: center;
   }

   .button-get-started {
       font-weight: 700;
       font-size: 16px;
       color: #fff;
       background-color: #02897A;
       border: none;
       border-radius: 4px;
       width: 142px;
       height: 53px;
   }

   .button-watch-the-video {
       font-family: "Poppins", sans-serif;
       font-weight: 600;
       font-size: 16px;
       text-decoration: underline;
       text-decoration-skip-ink: none;
       color: #02897a;
       background-color: #FFFFFF;
       border: none;
       width: 165px;
       height: 23px;
       display: flex;
       gap: 2px;
   }
   @media screen and (min-width: 1150px) {
       .hero {
        padding-top: 39px;
        padding-bottom: 86px;
       }
       .hero .container {
        flex-direction: row;
       }
    .hero-image {
    order: 1;
    width: 610px;
    height: 554px;
                    
                }
.hero-title {
    font-size: 44px;
    line-height: 1.5;
    max-width: 452px;
    margin-bottom: 18px;
    margin-top: 112px;
    text-align: start;
}
.hero-description {
    max-width: 465px;
    text-align: start;
        margin: 18px 35px 45px 0px
    }
  .button-get-started {
    width: 178px;}
   .button-watch-the-video {
    margin-right: 128px;
   }
.button-get-started:hover,
.button-get-started:focus {
    color: #404bbf;
}

.button-watch-the-video:hover,
.button-watch-the-video:focus {
    color: #404bbf;
}
}
/* PRODUCT SECTION */
.product-section .container {
    padding-right: 0;
    padding-left: 0;}
.product-section {
    padding-bottom: 50px;
    padding-top: 50px;
    background-color: #FFFFFF;
}
.product-title {
    font-size: 32px;
    line-height: 1.5;
    color: #22343d;
    text-align: center;
    min-width: 331px;
    margin-bottom: 50px;
}
.product-item {
    display: flex;
    flex-direction: column;
justify-content: space-between;
    align-items: center;
    gap: 32px;
    text-align: center;
}
.product-list {
max-width: 240px; 
}
.product-test {
    font-size: 22px;
    color: #22343d;
    margin-top: 18px;
    margin-bottom: 13px;
}
.product-description {
    font-size: 16px;
    line-height: 1.625;
    color: #22343d;
}
.product-button {
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    background-color: #02897A;
    text-align: center;
    width: 175px;
    height: 53px;
    text-transform: uppercase;
    border-radius: 4px;
    border: none;
    display: block;
    margin: 32px auto 38px;
}
@media screen and (min-width: 1150px) {
    .product-srction {
    padding-bottom: 50px;
    }
    .product-title {
        max-width: 539px;
        display: block;
        margin: 0 auto;
        margin-bottom: 50px;
    }
   .product-item {
    flex-direction: row;
   } 
   .product-list {
       width: calc((100% - 90px) / 4);
   }
   .product-button {
    margin-top: 50px;
    margin-bottom: 50px;
   }
  .product-button:hover,
  .product-button:focus {
      background-color: #404bbf;
      color: #fff;
  }
}
/* SERVICES SECTION */
.services-section .container{
    padding: 50px 30px;
    
}
.service-items {
    display: flex;
        flex-direction: column-reverse;
        align-items: center;

}
.text-block {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.service-name {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #22343d;
}

.service-heading {
    font-weight: 700;
    font-size: 32px;

}

.service-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.625;
}

.service-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.625;
    padding-bottom: 12px;
   }
   .service-items-second {
    display: flex;
        flex-direction: column;
        align-items: center;
    
    }
    .service-list-second {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        row-gap: 16px;
    }
        .service-image-list {
            display: flex;
                  gap: 30px;
        }
        .service-items:not(:last-child) {
            margin-bottom: 100px;
        }
    
        .service-box {
            border-radius: 6px;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
    
        .features-icon {
            fill: #fff;
        }
    
        .service-image-list:nth-child(1) .service-box {
            background-color: #FF9900;
        }
    
        .service-image-list:nth-child(2) .service-box {
            background-color: #F03E3D;
        }
    
        .service-image-list:nth-child(3) .service-box {
            background-color: #4D8DFF;
        }
@media screen and (min-width: 1150px) {
    .services-section {
            background-color: #FFFFFF;
           padding-bottom: 50px;}
            .service-list {
                display: flex;
            }
        .service-items, .service-items-second {
            display: flex;
            flex-direction: row;
            gap: 84px;
            align-items: center;          
        }
    .service-image {
        width: 540px;
        height: 500px;
    }
        .service-items:not(:last-child) {
            /* margin-bottom: 100px; */
        }
    }
    /* EASY PROCESSING */
    .easy-processing .container {
        padding: 90px 32px 50px 32px;
           }
        .easy-heading {
            font-weight: 700;
            font-size: 30px;
            text-align: center;
            color: #22343d;
            max-width: 348px;
            margin-bottom: 8px;
        }
.easy-description {
font-weight: 500;
font-size: 16px;
line-height: 1.625;
text-align: center;
color: #22343d;
max-width: 338px;
margin-bottom: 40px;
                }
.team-members {
    display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
}                
.easy-list {
    display: flex;
    flex-direction: column;
    gap: 32px; 
}

.easy-items {
    display: flex; 
    align-items: center;
    gap: 14px;
}
.easy-meaning {
        font-weight: 500;
        font-size: 16px;
        color: #2f281e;
        width: 236px;
       display: block;
        text-align: center;
}
.contact-our-expert {
    background-color: #02897A;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    width: 216px;
    height: 53px;
    border: none;
    display: block;
    margin: 32px auto 0;
}
@media screen and (min-width: 1150px) {
    .easy-processing { 
        padding-top: 60px;
        padding-bottom: 90px;
        }
    .easy-processing .container {
    max-width: 916px;
    padding-left: 0;
    padding-right: 0;
    }
    .easy-heading {
        max-width: 348px;
        display: block;
       margin: 0 auto 25px;

    }
   .easy-description {
    max-width: 542px;
    display: block;
    margin: 0 auto 40px;
   }
   .easy-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 50px;
   }
   .contact-our-expert:hover,
   .contact-our-expert:focus {
       background-color: #404bbf;
       color: #fff;
       box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
   }
}
/* CONTENT */
.contents-strategies .container {
    padding: 50px 32px 61px 32px;
}
.contents-heaing {
    font-weight: 700;
    font-size: 32px;
    color: #22343d;
    display: block;
    max-width: 349px;
    margin: 0 auto 8px;
}
.contents-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.625;
    color: #22343d;
    margin-bottom: 40px;
    max-width: 349px;
}
.contents-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.contest-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.75;
    color: #22343d;
}
.date {
    font-weight: 400;
    margin-top: 24px;
 margin-bottom: 12px;
}
.profession {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.66667;
    color: #22343d;
   max-width: 294px;
}
.profession-green {
    color: #02897a;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.66667;
}
@media screen and (min-width: 1150px) {
.contents-strategies .container {
        padding-top: 60px;
        padding-bottom: 100px;}

.contents-heaing {
margin: 0 0 10px;
}
.contents-description {
    max-width: 465px;
    }
.contents-list {
    flex-direction: row;
    gap: 30px;
}
.date, .profession, .profession-green {
    padding-left: 27px;
}
.content-photo {
width: 350px;
height: 185px;
}
}
/* PRICE SECTION */
.price-section {
    font-family: "Montserrat", sans-serif;
    padding-bottom: 50px;
}
.price-heading {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: #22343d;
    text-align: center;
    margin-bottom: 8px;
}
.price-subtitle {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #22343d;
    text-align: center;
    margin-bottom: 74px;
}
.price-list {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 32px;
}
.price-item {
    width: 322px;
    height: 456px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
}
.free-heading {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.66667;
    color: #22343d;
    text-align: center;
    margin-top: 32px;
    margin-bottom: 8px;
}
.price-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 2.5;
    color: #22343d;
    text-align: center;
    margin-bottom: 16px;
}
.price {
    display: flex;
    justify-self: center;
    align-items: center;
    
}
.price-dollar {
    display: flex;
    flex-direction: column;
}
.price-zero {
    font-weight: 700;
    font-size: 76px;
    line-height: 1.31579;
    letter-spacing: 0em;
    color: #02897a;
    text-align: center;
    margin-right: 8px;
}
.dollar {
    fill: #02897a;
}
.month {
    font-weight: 400;
        font-size: 16px;
        line-height: 1.1875;
        letter-spacing: 0.01em;
        color: #afafaf;
        text-align: center;
}
.price-features {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.375;
    letter-spacing: 0.01em;
    color: #22343d;
    text-align: center;
    margin-top: 16px;
}

.button {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.375;
    letter-spacing: 0.01em;
    color: #fff;
    background-color: #02897a;
    text-align: center;
    margin: 30px auto 32px;
    border-radius: 8px;
    width: 139px;
    height: 44px;
    border: none;
}
.price-item:nth-child(2) {
background-color: #02897A;
    color: #fff;
}
.green {
    color: #fff;
}
.dollar-green {
    fill: #fff;}
.button-green {
    font-weight: 600;
    font-size: 18px;
    color: #02897a;
    background-color: #fff;
    text-align: center;
    margin: 30px auto 32px;
    border-radius: 8px;
    width: 139px;
    height: 44px;
    border: none;
}
@media screen and (min-width: 1150px) {
    .price-section {
        padding-top: 100px;
        padding-bottom: 90px;
    }
  .price-heading {
    margin-bottom: 10px;
  }
  .price-subtitle {
    margin-bottom: 40px;
  }
  .price-list {
    flex-direction: row;
    gap: 72px;
}
.button:hover,
.button:focus {
background-color: #404bbf;
}
.button-green:hover,
.button-green:focus {
    background-color:#404bbf;
}
}
/* FEEDBACK SECTION */
.feedback-section {
    font-family: "Poppins", sans-serif;
    padding-top: 50px;
    padding-bottom: 100px;
}
.feedback-heading {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.78125;
    letter-spacing: 0.01em;
    color: #22343d;
    text-align: center;
    margin: 0 auto 8px;
    max-width: 302px;
}

.feedback-subtitle {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    text-align: center;
    color: #22343d;
    max-width: 323px;
    margin: 0 auto 32px;
}
.feedback-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
}
.stars {
    fill: #F3CD03;
}
.feedback-item {
    border-radius: 12px;
    padding: 24px;
    max-width: 327px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    text-align: left;
}
.feedback-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: #737373;
    margin: 16px 0;
}
.author-box {
    display: flex;
    align-items: center;
    gap: 16px;
}
.author-info {
    display: flex;
    flex-direction: column;
}
.name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #02897a;
}
.profession-name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.71429;
    letter-spacing: 0.01em;
    color: #252b42;
}
@media screen and (min-width: 1150px) {
    .feedback-section {
        padding-bottom: 100px; }
    .feedback-heading {
        margin-bottom: 10px;
            min-width: 284px;
    }
.feedback-subtitle {
    max-width: 537px;
}
.feedback-list {
    flex-direction: row;
    gap: 64px;
}
}
/* JOIN SECTION */
.join-section .container {
    border-radius: 32px;
    background-color: #02897a;
    max-width: 419px;
    }
.join-box  {

display: flex;
flex-direction: column;
align-items: center;}
.join-heading {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.514;
    color: #fff;
    max-width: 328px;
    text-align: center;
    display: block;
   margin: 17px auto 104px;
}
.join-button {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #02897a;
    background-color: #fff;
    border-radius: 8px;
    width: 150px;
    height: 50px;
    border: none;
    display: block;
    margin: 0 auto 3px ;
}
@media screen and (min-width: 1150px) {
.join-section .container {
max-width: 968px;
}
.join-box {
    flex-direction: row;
    justify-content: space-between;
}
.join-heading {
    max-width: 510px;
   text-align: start;
   margin-top: 42px;
   margin-left: 61px;
   margin-bottom: 53px;
}
.join-button {
    margin-left: 61px;
    margin-bottom: 56px;
}
.join-button:hover,
.join-button:focus {
background-color: #404bbf;
}
.photo {
    width: 351px;
height: 331px;
}
}
/* FOOTER SECTION */
.footer {
    padding-top: 100px;
    padding-bottom: 40px;
}
.footer-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    
}
.logo-footer {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 30px;
line-height: 0.93333;
color: #173a56;
}
.footer-socials {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 32px;
}
.footer-titles {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    color: #22343d;
    max-width: 280px;
    display: block;
    text-align: center;
    margin: 8px auto;
    
}
.footer-links {
    font-weight: 400;
    font-size: 16px;
    line-height: 2.1875;
    color: #22343d;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}
.footer-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.footer-input-box {
    position: relative;
    margin-bottom: 25px;
    margin-top: 30px;
}
.footer-input {
    width: 325px;
    height: 40px;
    border: 1px solid #bcd0e5;
    border-radius: 4px;
    background-color: #fff;
    padding-left: 38px;
    outline: transparent;
    transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-mobile {
display: none;
} 
.footer-button {
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    width: 131px;
    height: 39px;
    background-color: #02897a;
    border: none;
    margin-bottom: 44px;
}
.author-text {
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.875;
    color: #22343d;
    margin: 0 auto;
    max-width: 100%;
}
@media screen and (min-width: 1150px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        max-width: 1110px;
    } 
.footer-links {
 align-items: flex-start;
 margin: 8px 0;
}
.footer-titles {
    text-align: left;
    margin: 0;
}
.footer-wraper {
    align-items: flex-start;
}
.footer-form {
    align-items: flex-start;
}

.footer-input:focus {
    border-color: #02897a;
}

.footer-input::placeholder {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: #02897a;
}

.footer-mobile {
    position: absolute;
    display: flex;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-button {
    margin-bottom: 0;
}
.author-text {
    margin-top: 16px;
}
}