* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

@media screen and (max-width: 1179px) {
    .container {
        margin: 0 auto;
        width: 95%;
    }

    .header_leftDiv {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .header__phoneContent {
        display: flex;
        align-items: center;
    }
    .header__phone {
        margin-left: 9px;
        color: white;
        text-decoration: none;
    }

    .header__emailContent {
        display: flex;
        align-items: center;
        margin-top: 13px;
    }
    .header__email {
        margin-left: 9px;
        color: white;
        text-decoration: none;
    }

    header {
        background-image: url('../img/headerBackgroundMobile.png');
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 100px;
    }

    .header_rightDiv {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #D9D9D9;
        width: 100%;
        height: 100%;
        align-items: center;
    }
    .header_rightDiv a{
        padding: 20px;
    }

    .header_middle {
        display: flex;
        flex-direction: column;
    }

    .header__hello {
        color: white;
        font-size: 36px;
        margin-top:24px;
    }

    .header__webdesigner {
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        /* для Firefox */
        color: transparent;
        font-size: 45px;
        margin-top: 8px;
    }

    .header__typingImg {
        display: none;
    }

    .header__profileContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:-60px;
    }

    .header__text {
        display: none;
    }

    .header__profileImg {
        background-image: url('../img/profileImgMobile.png');
        width: 372px;
        height: 414px;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .contactMeButton {
        all: unset;
        cursor: pointer;
        color: white;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 24px;

    }
    .header__burgerMobile {
        position: fixed;
        top:0;
        right: 0;
        background-image: url('../img/burgerMobile.png');
        width: 50px;
        height: 50px;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #D9D9D9;
    }
    .header__crossMobile {
        position: fixed;
        display: none;
        top:0;
        right: 0;
        background-image: url('../img/crossIcoMobile.png');
        width: 45px;
        height: 40px;
        background-size: cover;
        background-repeat: no-repeat;
    }


    .main_aboutMeSection {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .main_aboutMeSection h2 {
        text-align: center;
        font-size: 40px;
    }

    .main__aboutMeText {
        font-size: 20px;
        margin-top: 20px;
    }


    .main_mySkillsSection {
        margin-top: 20px;
    }

    .main_mySkillsList {
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items:center;
        margin-top: 20px;
    }

    .main_mySkillsSection h2 {
        text-align: center;
        font-size: 40px;
    }

    .main__mySkillsItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 370px;
        height: 323px;
        background-color: #D9D9D9;
        border-radius: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .main__mySkillsTitle {
        font-size: 36px;
        font-weight: bold;
    }

    .main__mySkillsText {
        font-size: 20px;
        text-align: center;
    }

    .main_servicesAndPrices {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .main_servicesAndPrices h2 {
        text-align: center;
        font-size: 40px;
    }

    .main__servicesText {
        font-size: 20px;
    }

    .main__servicesList {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    .main__servicesItem {
        background-color: #D9D9D9;
        width: 350px;
        height: 585px;
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }

    .main__servicesItemActive {
        background-color: #00FFAE;
        width: 350px;
        height: 757px;
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }

    .main__servicesTitle {
        font-size: 40px;
        font-weight: bold;
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .main__servicesPrice {
        font-size: 40px;
        font-weight: bold;
        padding-top: 20px;
        padding-bottom: 20px;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 100%;
        text-align: center;
        color: white;
    }

    .main__servicesBenefit {
        margin-top: 32px;
        font-size: 30px;
    }

    .main__servicesButton {
        all: unset;
        cursor: pointer;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 105px;
        color: white;
    }

    .main__servicesButtonActive {
        all: unset;
        cursor: pointer;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 275px;
        color: white;
    }

    .main_portfolioSection {
        margin-top: 20px;
    }

    .main_portfolioSection h2 {
        font-size: 40px;
        text-align: center;
    }

    .main__potfolioList {
        display: flex;
        flex-direction:column;
        color: white;
        margin-top: 20px;
        justify-content:center;
        align-items:center;
    }

    .main__portfolioItem {
        text-decoration: none;
        color: white;
        background: linear-gradient(135deg, #00c6ff, #0072ff);
        width: 350px;
        height: 250px;
        text-align: center;
        margin-bottom:5px;
    }
    .main__portfolioItem:hover {
        text-decoration: underline;
        color: white;
    }

    .portfolio1 {
        background-image: url('/resources/img/portfolio1.png');
    }
    
    .portfolio2 {
        background-image: url('/resources/img/portfolio2.png');
    }

    .main__portfolioTitle {
        padding-top: 32px;
    }

    .main__portfolioText {
        font-size: 25px;
        padding-top: 27px;
    }
    .main_reviews {
        margin-top: 20px;
    }

    .main_reviews h2 {
        font-size: 40px;
        text-align: center;
    }

    .main__reviewsList {
        display: flex;
        margin-top: 20px;
        justify-content: center;
        align-items: center;
    }

    .main__reviewsItem {
        background-color: #D9D9D9;
        padding-top: 60px;
        padding-left: 10px;
        padding-bottom: 60px;
        padding-right: 10px;
    }

    .main__reviewUser {
        display: flex;
    }

    .main__reviewText {
        font-size: 20px;
    }

    .main__reviewUserName {
        margin-left: 10px;
        font-size: 38px;
        font-weight: bold;
    }

    .main__reviewStar {
        margin-right: 5px;
    }


    .main_questions {
        margin-top: 20px;
    }

    .main_questions h2 {
        font-size: 40px;
    }

    .main__questionsList {
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        border-radius: 30px;
        margin-top: 20px;
    }

    .main__questionContent {
        display: flex;
        flex-direction: column;
    }

    .main__questionsQuestion {
        font-size: 20px;
        font-weight: bold;
        color: white;
        padding-left: 28px;
        padding-top: 28px;
        padding-bottom: 28px;
        width: 1150px;
    }

    .main__questionsArrow {
        margin-top: 25px;
        margin-left: 25px;
    }

    .main__questionsAnswer {
        background-color: #D9D9D9;
        font-size: 20px;
        padding-right: 100px;
        padding-left: 37px;
        padding-right: 37px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .main__questionsItem {
        display: flex;
        flex-direction: column;
    }

    .main__questionLeftSIde {
        display: flex;
    }
    
    footer {
        background-image: url('/resources/img/footerBackgroundMobile.png');
        height: 900px;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 50px;
        color: white;
    }

    .footer_contactSales h2 {
        font-size: 40px;
        text-align: center;
    }

    .footer__contactForm {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer__contactForm input {
        padding: 10px;
        width: 300px;
    }

    .footer__contactForm textarea {
        height: 300px;
        width: 300px;
    }

    .footer__contactForm span {
        margin-top: 20px;
        font-weight: bold;
    }

    .footer__contactSubmit {
        all: unset;
        cursor: pointer;
        color: white;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 22px;
    }

    .footer__footerSection {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .footer__contactDetails {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer__contactTopDiv {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer__phoneContent {
        display: flex;
        align-items: center;
    }

    .footer__phone {
        margin-left: 9px;
        text-decoration: none;
        color: white;
    }

    .footer__emailContent {
        display: flex;
        margin-top:5px;
        align-items: center;
    }

    .footer__email {
        margin-left: 9px;
        text-decoration: none;
        color: white;
    }

    .footer__mapContent {
        display: flex;
        align-items: center;
        margin-top:5px;
    }

    .footer__mapIFrame {
        margin-top: 52px;
        display: none;
    }
}

@media screen and (min-width: 1180px) {
    .container {
        width: 1240px;
        margin: 0 auto;
    }

    .header_leftDiv {
        display: flex;
        color: white;
    }

    .header__phoneContent {
        display: flex;
        align-items: center;
    }

    .header__emailContent {
        display: flex;
        align-items: center;
        margin-left: 49px;
    }

    .header__phone {
        margin-left: 9px;
        color: white;
        text-decoration: none;
    }

    .header__email {
        margin-left: 9px;
        color: white;
        text-decoration: none;
    }

    .header_top {
        display: flex;
        padding-top: 20px;
    }

    .header_rightDiv {
        display: flex;
        align-items: center;
        margin-left: 63px;
    }

    .header_rightDiv a {
        margin-right: 30px;
        color: white;
        text-decoration: none;
    }

    .header_rightDiv a:hover {
        text-decoration: underline;
    }

    header {
        background-image: url('../img/headerBackground.png');
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 100px;
    }

    .header_middle {
        color: white;
        font-size: 36px;
        margin-top: 84px;
    }

    .header__hello {
        color: white;
        font-size: 36px;
    }

    .header__webdesigner {
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        /* для Firefox */
        color: transparent;
        font-size: 50px;
        margin-top: 8px;
    }

    .header__text {
        font-size: 20px;
        width: 549px;
        margin-top: 14px;
    }

    .header__typingImg {
        margin-left: 98px;
        border-radius: 30px;
        margin-top: -20px;
    }
    .header__profileImg {
        background-image: url('../img/profileImg.png');
        width: 515px;
        height: 454px;
    }

    .header__images {
        display: flex;
    }

    .header__profileContent {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contactMeButton {
        all: unset;
        cursor: pointer;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 22px;
    }

    .main_aboutMeSection {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .main_aboutMeSection h2 {
        text-align: center;
        font-size: 40px;
    }

    .main__aboutMeText {
        font-size: 20px;
        margin-top: 20px;
    }

    .main_mySkillsSection {
        margin-top: 20px;
    }

    .main_mySkillsList {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .main_mySkillsSection h2 {
        text-align: center;
        font-size: 40px;
    }

    .main__mySkillsItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 610px;
        height: 323px;
        background-color: #D9D9D9;
        border-radius: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .main__mySkillsTitle {
        font-size: 36px;
        font-weight: bold;
    }

    .main__mySkillsText {
        font-size: 20px;
        width: 500px;
        text-align: center;
    }

    .main_servicesAndPrices {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .main_servicesAndPrices h2 {
        text-align: center;
        font-size: 40px;
    }

    .main__servicesText {
        font-size: 20px;
    }

    .main__servicesList {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .main__servicesItem {
        background-color: #D9D9D9;
        width: 400px;
        height: 585px;
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 10px;
    }

    .main__servicesItemActive {
        background-color: #00FFAE;
        width: 400px;
        height: 757px;
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 10px;
    }

    .main__servicesTitle {
        font-size: 40px;
        font-weight: bold;
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .main__servicesPrice {
        font-size: 40px;
        font-weight: bold;
        padding-top: 20px;
        padding-bottom: 20px;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 100%;
        text-align: center;
        color: white;
    }

    .main__servicesBenefit {
        margin-top: 32px;
        font-size: 30px;
    }

    .main__servicesButton {
        all: unset;
        cursor: pointer;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 105px;
        color: white;
    }

    .main__servicesButtonActive {
        all: unset;
        cursor: pointer;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 275px;
        color: white;
    }

    .main_portfolioSection {
        margin-top: 20px;
    }

    .main_portfolioSection h2 {
        font-size: 40px;
        text-align: center;
    }

    .main__potfolioList {
        display: flex;
        color: white;
        margin-top: 20px;
    }

    .main__portfolioItem {
        background: linear-gradient(135deg, #00c6ff, #0072ff);
        width: 615px;
        height: 350px;
        margin-right: 10px;
        text-decoration: none;
        color: white;
    }

    .main__portfolioItem:hover {
        text-decoration:underline;
        color: white;
    }

    .portfolio1 {
        background-image: url('/resources/img/portfolio1.png');
        padding-left: 57px;
    }
    .portfolio2 {
        background-image: url('/resources/img/portfolio2.png');
        padding-left: 57px;
    }

    .main__portfolioTitle {
        padding-top: 62px;
    }

    .main__portfolioText {
        font-size: 40px;
        padding-top: 27px;
    }

    .main_reviews {
        margin-top: 20px;
    }

    .main_reviews h2 {
        font-size: 40px;
        text-align: center;
    }

    .main__reviewsList {
        display: flex;
        margin-top: 20px;
        justify-content: center;
        align-items: center;
    }

    .main__reviewsItem {
        background-color: #D9D9D9;
        padding-top: 60px;
        padding-left: 108px;
        padding-bottom: 60px;
        padding-right: 108px;
    }

    .main__leftArrow {
        background-image: url('/resources/img/leftArrow.png');
        width: 100px;
        height: 100px;
    }

    .main__rightArrow {
        background-image: url('/resources/img/rightArrow.png');
        width: 100px;
        height: 100px;
    }

    .main__reviewUser {
        display: flex;
    }

    .main__reviewText {
        width: 535px;
        font-size: 20px;
    }

    .main__reviewUserName {
        margin-left: 10px;
        font-size: 38px;
        font-weight: bold;
    }

    .main__reviewStar {
        margin-right: 5px;
    }

    .main_questions {
        margin-top: 20px;
    }

    .main_questions h2 {
        font-size: 40px;
    }

    .main__questionsList {
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        border-radius: 30px;
        margin-top: 20px;
    }

    .main__questionContent {
        display: flex;
        flex-direction: column;
    }

    .main__questionsQuestion {
        font-size: 38px;
        font-weight: bold;
        color: white;
        padding-left: 28px;
        padding-top: 28px;
        padding-bottom: 28px;
        width: 1150px;
    }

    .main__questionsArrow {
        margin-top: 25px;
        margin-left: 25px;
    }

    .main__questionsAnswer {
        background-color: #D9D9D9;
        font-size: 20px;
        padding-right: 100px;
        padding-left: 37px;
        padding-right: 37px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .main__questionsItem {
        display: flex;
        flex-direction: column;
    }

    .main__questionLeftSIde {
        display: flex;
    }

    footer {
        background-image: url('/resources/img/footerBackground.png');
        height: 900px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .footer_contactSales h2 {
        padding-top: 159px;
        font-size: 40px;
        text-align: center;
    }

    .footer__contactForm {
        display: flex;
        flex-direction: column;
    }

    .footer__contactForm input {
        width: 400px;
        padding: 10px;
    }

    .footer__contactForm textarea {
        width: 500px;
        height: 400px;
    }

    .footer__contactForm span {
        margin-top: 20px;
        font-weight: bold;
    }

    .footer__contactSubmit {
        all: unset;
        cursor: pointer;
        color: white;
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        width: 295px;
        height: 63px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        border-radius: 30px;
        margin-top: 22px;
    }

    .footer__footerSection {
        display: flex;
    }

    .footer__contactDetails {
        display: flex;
        flex-direction: column;
        margin-left: 100px;
    }

    .footer__contactTopDiv {
        display: flex;
    }

    .footer__phoneContent {
        display: flex;
        align-items: center;
    }

    .footer__phone {
        margin-left: 9px;
        text-decoration: none;
        color: black;
    }

    .footer__emailContent {
        display: flex;
        align-items: center;
        margin-left: 49px;
    }

    .footer__email {
        margin-left: 9px;
        text-decoration: none;
        color: black;
    }

    .footer__mapContent {
        display: flex;
        align-items: center;
        margin-top: 39px;
    }

    .footer__mapIFrame {
        margin-top: 52px;
    }
}