html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    margin: 0 auto;
    max-width: 1600px;
    font-family: 'Poppins', sans-serif;
}

.container {
    max-width: 1340px;
    width: 100%;
    margin: 0 auto;
}

/* Header menu */

.haeder__menu_box {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-top: 70px;
}

.header__menu_ul {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 0;
}
.header__menu_li {
    list-style: none;
}
.header__menu_a {
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    color: #263238;
}
.header__menu_a:hover {
    text-decoration: underline;
    color: #354249;
}

.header__btn {
    width: 220px;
    height: 70px;
    border-color: #263238;
    border-radius: 5px;
    font-size: 24px;
    color: #000000;
}
.header__btn:hover {
    width: 220px;
    height: 70px;
    border:none;
    border-radius: 5px;
    font-size: 24px;
    background-color: #263238;
    color: #ffffff;
}

/* Header text */
.header__text {
}
.header__text_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 75px;
}
.header__text_left {
    margin-top: 43px;
}
.header__text_h1 {
    font-size: 64px;
    line-height: 80px;
}
.header__text_p {
    color: #8F95A5;
    font-size: 24px;
    margin-bottom: 61px;
}
.header__text_btn {
    width: 438px;
    height: 118px;
    background-color: #263238;
    color: #ffffff;
    font-size: 36px;
    border-radius: 15PX;
}
.header__text_btn:hover {
    background-color: #ffffff;
    color: #263238;
    border: thin solid;
    border-color: #263238;
}

.header__text_right {
    margin-top: 35px;
}

/* Skills grid */


.skills_h2 {
    font-size: 48px;
    text-align: center;
    line-height: 80px;
    font-weight: 600;
}
.skills__grid_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2,1fr);
    align-items: start;
    justify-content: center;
}

/* Item1 */
.skills__grid_item-1 {
    grid-column: 1 / 2; 
    grid-row: 1 / 3;
    width: 435px;
    height: 894px;
}
.grid_item_img-1 {
    margin-top: 113px;
    margin-left: 21px;
}
.grid_item-h3-1 {
    color: #263238;
    font-size: 30px;
    font-weight: 500;
    line-height: 80px;
    margin: 0 0 0 41px;
}
.grid_item-p-1 {
    color: #8F95A5;
    font-size: 16px;
    margin: 0;
    margin-bottom: 21px;
    padding-left: 43px;
}
.grid_item-p-1-1 {
    color: #8F95A5;
    font-size: 16px;
    margin-left: 40px;
}
.grid_item_btn_1 {
    width: 230px;
    height: 60px;
    background-color: #263238;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
    margin-top: 18px;
    margin-left: 42px;
    letter-spacing: 0.5%;
}
.grid_item_btn_1:hover {
    background-color: #ffffff;
    color: #263238;
    border: thin solid;
    border-color: #263238;
}

/* Item 2 */

.skills__grid_item-2 {
    grid-column: 2 / 3; 
    grid-row: 1 / 2;
    width: 434px;
    height: 531px;
}

.grid_item_img-2 {
    margin-top: 31px;
    margin-left: 126px;
    width: 293px;
    height: 293px;
}
.grid_item-h3-2 {
    color: #263238;
    font-size: 30px;
    font-weight: 500;
    line-height: 80px;
    margin-left: 47px;
    margin-top: 0;
    margin-bottom: 0;
}
.grid_item-p-2 {
    color: #8F95A5;
    font-size: 16px;
    margin: 0 0 0 45px;
}
.grid_item_btn-2 {
    width: 218px;
    height: 60px;
    background-color: #263238;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
    margin-top: 16px;
    margin-left: 43px;
    letter-spacing: 0.5%;
}
.grid_item_btn-2:hover {
    background-color: #ffffff;
    color: #263238;
    border: thin solid;
    border-color: #263238;
}

/* Item 3 */

.skills__grid_item-3 {
    grid-column: 3 / 4; 
    grid-row: 1 / 2;
    width: 435px;
    height: 532px;
}

.grid_item_img-3 {
    margin-top: 86px;
    margin-left: 9px;
}
.grid_item-h3-3 {
    color: #263238;
    font-size: 30px;
    font-weight: 500;
    margin: 10px 0 0 47px;
}
.grid_item-p-3 {
    color: #8F95A5;
    font-size: 16px;
    margin-left: 50px;
    margin-top: 12px;
}
.grid_item_btn-3 {
    width: 218px;
    height: 60px;
    background-color: #263238;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
    margin: 5px 0 0 51px;
    letter-spacing: 0.5%;
}
.grid_item_btn-3:hover {
    background-color: #ffffff;
    color: #263238;
    border: thin solid;
    border-color: #263238;
}

/* Item 4 */

.skills__grid_item-4 {
    grid-column: 2 / 4; 
    grid-row: 2 / 3;
    width: 885px;
    height: 343px;
}
.grid_item-4-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 135px;
    margin-left: 8px;
}
.grid_item-4-text {
    height: 232px;
    margin-left: 43px;
}


.grid_item-4-img-block {
    margin: 0;
    width: 382px;
    height: 255px;
}
.grid_item-4-img-4 {
    margin-left: 0px;
    margin-top: 6px;
    margin-right: 22px;
}
.grid_item-h3-4 {
    color: #263238;
    font-size: 30px;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 0;
}
.grid_item-p-4 {
    color: #8F95A5;
    font-size: 16px;
}

.grid_item_btn-4 {
    width: 218px;
    height: 60px;
    background-color: #263238;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5%;
}
.grid_item_btn-4:hover {
    background-color: #ffffff;
    color: #263238;
    border: thin solid;
    border-color: #263238;
}

/* About Us block */

.about_flex-box {
    display: flex;
    margin-top: 150px;
}

.about_left-h2 {
    font-size: 48px;
    line-height: 80px;
    margin-bottom: 0;
}
.about_left-p {
    width: 635px;
    height: 240px;
    font-size: 20px;
    color: #8F95A5;
    font-weight: 400;
    margin-right: 194px;
    margin-bottom: 0;
}
.about_left_flex-box {
    display: flex;
    justify-content: left;
    gap: 50px;
}
.about_left_flex_item1 {
    text-align: center;
    margin-right: 92px;
}
.about_item1-p1 {
    font-size: 48px;
    line-height: 80px;
    color: #2A3246;
    font-weight: 600;
    margin: 0;
}
.about_item1-p2 {
    margin: 0;
    color: #8F95A5;
    font-size: 20px;
    font-weight: 400;
}
.about_left_flex_item2 {
    text-align: center;
    margin-right: 43px;
}
.about_item1-p3 {
    font-size: 48px;
    line-height: 80px;
    color: #2A3246;
    font-weight: 600;
    margin: 0;
}
.about_item1-p4 {
    margin: 0;
    color: #8F95A5;
    font-size: 20px;
    font-weight: 400;
}

.about_left_flex_item3 {
    text-align: center;
}
.about_item1-p5 {
    font-size: 48px;
    line-height: 80px;
    color: #2A3246;
    font-weight: 600;
    margin: 0;
}
.about_item1-p6 {
    margin: 0;
    color: #8F95A5;
    font-size: 20px;
    font-weight: 400;
}

/* Pricing block */

.pricing__h2 {
    font-size: 48px;
    text-align: center;
    line-height: 80px;
    font-weight: 600;
    margin-top: 193px;
}
.pricing_items_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
}
.pricing__item1 {
    margin-top: 15px;
}

.pricing__item-h3-1 {
    font-size: 30px;
    line-height: 48px;
    color: #263238;
    font-weight: 600;
}
.pricing__item-p-1 {
    font-size: 20px;
    color: #8F95A5;
    font-weight: 400;
}
.pricing__item_price1_p {
    font-size: 18px;
    color: #546269;
    font-weight: 400;
    background-color: #EEEEEE;
    width: 240px;
    height: 45px;
    text-align: center;
}

.pricing__item-img-2 {
    margin-top: 50px;
}
.pricing__item-h3-2 {
    font-size: 30px;
    line-height: 48px;
    color: #263238;
    font-weight: 600;
    margin-bottom: 18px;
}
.pricing__item-p-2 {
    font-size: 20px;
    color: #8F95A5;
    font-weight: 400;
    margin-bottom: 60px;
}
.pricing__item_price2_p {
    font-size: 18px;
    color: #546269;
    font-weight: 400;
    background-color: #EEEEEE;
    width: 240px;
    height: 45px;
    margin-left: 7px;
    text-align: center;
}

.pricing__item-img-3 {
    margin-top: 15px;
    padding-left: 46px;

}
.pricing__item-h3-3 {
    font-size: 30px;
    line-height: 48px;
    color: #263238;
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 19px;
}
.pricing__item-p-3 {
    font-size: 20px;
    color: #8F95A5;
    font-weight: 400;
    margin-bottom: 56px;
}
.pricing__item_price3_p {
    font-size: 18px;
    color: #546269;
    font-weight: 400;
    background-color: #EEEEEE;
    width: 240px;
    height: 45px;
    text-align: center;
}
span {
    font-size: 30px;
    color: #263238;
}

/* Contact Us */

.contact__box {
    display: flex;
    justify-content: left;
    margin-bottom: 130px;
}
.contact__box_left {
    margin-top: 70px;
    margin-left: 114px;
    
}
.contact__box_right {
}
.contact_h2 {
    font-size: 48px;
    text-align: center;
    line-height: 80px;
    font-weight: 600;
    text-align: left;
}
.contact_p {
    width: 776px;
    height: 60px;
    font-size: 20px;
    color:#8F95A5;
}
.contact_input {

}
input {
    width: 450px;
    height: 80px;
    border: thin solid #8F95A5;
    border-radius: 10px;
    color: #8F95A5;
    font-size: 16px;
    font-weight: 400;
    padding-left: 20px;
    margin-right: 10px;
}
.contact_btn {
    width: 264px;
    height: 80px;
    background-color: #263238;
    border-radius: 10px;
    color: #ffffff;
    font-size: 20px;
}
.contact_btn:hover {
    background-color: #ffffff;
    color: #263238;
    border: thin solid;
    border-color: #263238;
}

/* Footer Links */

.footer__links_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: #C4C4C4 1px solid;
}
.footer__links_left {
}
.footer__links_right {
}
.footer__links_ul {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    text-decoration: none;
}
.footer__links_li {
    color: #8F95A5;
}
.footer__links_li:first-child {
    list-style: none;
}
.footer__links_a {
    text-decoration: none;
    font-size: 24px;
    color: #8F95A5;
}
.footer__links_a:hover {
    text-decoration: underline;
    color: #354249;
}

/* Media запросы */

@media screen and (max-width:575px) {
    .skills__grid_box {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2,1fr);
    align-items: start;
    justify-content: center;
    gap: 30px;
    }
    .skills__grid_item-1 {
    grid-column: 1 / 2; 
    grid-row: 1 / 2;
    width: 240px;
    height: 543px;
    }
    .skills__grid_item-2 {
    grid-column: 2 / 3; 
    grid-row: 1 / 2;
    width: 240px;
    height: 534px;
    margin-top: 80px;
    }
    .skills__grid_item-3 {
    grid-column: 1 / 2; 
    grid-row: 2 / 3;
    width: 240px;
    height: 534px;
    margin-top: 45px
    }
    .skills__grid_item-4 {
    grid-column: 2 / 3; 
    grid-row: 2 / 3;
    width: 240px;
    height: 534px;
    }
    .grid_item-4-box {
    display: flex;
    flex-direction: column-reverse;
    
    }
    .grid_item-h3-1, .grid_item-h3-2, .grid_item-h3-3, .grid_item-h3-4 {
    font-size: 18px;
    }
    .grid_item_img-1 {
    width: 185px;
    height: 185px;
    margin-bottom: 34px;
    }
    .grid_item_img-2 {
    width: 182px;
    height: 182px;
    margin: 70px 0 3px 0;
    }
    .grid_item_img-3 {
    width: 198px;
    height: 132px;
    }
    .grid_item-4-img-block {
    width: 198px;
    height: 137px;
    }
    .grid_item-4-text {

    }
    .grid_item_img-4 {
    width: 206px;
    height: 137px;
    }
    .grid_item_btn_1, .grid_item_btn-2, .grid_item_btn-3, .grid_item_btn-4  {
    width: 200px;
    height: 50px;
    background-color: #263238;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 18px;
    margin-left: 42px;
    letter-spacing: 0.5%;
    }
    .grid_item_btn-4  {
    margin: 53px 0 0 0;
    }
    .grid_item_btn-2 {
    margin: 170px 0 0 0;
    }
    .grid_item-p-1, .grid_item-p-1-1, .grid_item-p-2, .grid_item-p-3, .grid_item-p-4 {
    font-size: 12px;
    }
    .grid_item-h3-2, .grid_item-4-text {
    margin: 0;
    }
    .grid_item-p-2 {
    margin-left: 0;
    }
}