* {
    margin: 0px;
    padding: 0px;
}

/* HEADER */

header {
    /* width: 100%; */
    height: 300px;
    background-color: #0074E4;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.headerBody {
    padding: 0px 180px;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    padding: 0 180px;
}

.spacer {
    flex: 1;
}

.logoHeader {
    display: flex;
    justify-content: center;
    flex: 1;
}

.logoAnimation {
    max-width: 360px;
}

.numberHeader {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.numberHeader p {
    text-align: center;
    color: white;
    font-size: 24px;
    font-family: Helvetica Neue;
    font-weight: 400;
}

.phoneIcon {
    margin-right: 15px;
    height: 30px;
}


/* SLOGAN */
.slogan {
    padding: 120px;
}

h1 {
    text-align: center;
    color: #4E4E4E;
    font-size: 48px;
    font-family: Helvetica Neue;
    font-weight: 500;
    letter-spacing: 1.44px;
    word-wrap: break-word;
}

h2 {
    text-align: center;
    color: #4E4E4E;
    font-size: 18px;
    font-family: Helvetica Neue;
    font-weight: 500;
    letter-spacing: 0.54px;
    word-wrap: break-word;
    margin: 20px;
}

/* FEATURES */

.image-block {
    display: none;
}

.background {
    background-image: url(img/business-partners-meeting-city-early-morning.jpg);
    width: 100%;
    top: 0px;
    height: 795px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 {
    text-align: center;
    color: white;
    font-size: 12px;
    font-family: Helvetica Neue;
    font-weight: 500;
    letter-spacing: 0.36px;
    word-wrap: break-word;
    padding: 40px 0 10px;
}

h4 {
    text-align: center;
    color: white;
    font-size: 36px;
    font-family: Helvetica Neue;
    font-weight: 500;
    letter-spacing: 1.08px;
    word-wrap: break-word;
}


.features {
    background-image: url(img/dark\ background\ transp.png);
    display: flex;
    align-items: center;
    width: 1157px;
    height: 794px;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;

}

.titleFeatures {
    margin: 17px 0 10px;
}

.cardsFeatures {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 60px;
    display: flex;
}

.featureCard {
    width: 460px;
    height: 150px;
    background: rgba(255, 255, 255, 0.80);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    display: inline-flex
}

.iconsFeature {
    height: 60px;
}

.inline {
    justify-content: center;
    align-items: center;
    gap: 30px;
    display: inline-flex;
}

.textFeature {
    gap: 20px;
}

.featureTitle {
    color: #4E4E4E;
    font-size: 20px;
    font-family: Helvetica Neue;
    font-weight: 700;
    letter-spacing: 0.60px;
    word-wrap: break-word;
    text-align: center;
    padding: 10px;

}

.featureCardText {
    width: 300px;
    color: #4E4E4E;
    font-size: 16px;
    font-family: Helvetica Neue;
    font-weight: 400;
    letter-spacing: 0.48px;
    word-wrap: break-word;
    text-align: center;

}

.text {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: inline-flex;
}



/* EQUIPMENT */

.greenBackground {
    background-color: #00A887;
    width: 100%;
    top: 0px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.equipment {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 110px;
    display: inline-flex;
    margin: 60px 20px;
}

.equipmentCards {
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    display: inline-flex;
}

.equipmentCard {
    width: 212px;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.equipmentCardText {
    width: 212px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Helvetica Neue;
    font-weight: 400;
    letter-spacing: 0.60px;
}

.andOther {
    width: 150px;
    height: 258px;
    padding: 10px 20px;
    background: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.andOtherText {
    width: 132px;
    text-align: right;
}

.andOtherText span {
    color: #148A69;
    font-size: 24px;
    font-family: Helvetica Neue;
    font-weight: 400;
    letter-spacing: 0.72px;
    word-wrap: break-word;
}

.equipmentImage {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.spanBold {
    color: #00A887;
    font-size: 24px;
    font-family: Helvetica Neue;
    font-weight: 700;
    letter-spacing: 0.72px;
    word-wrap: break-word;
}

/* VIDEO */

.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.videoContainer {
    height: 700px;
    width: 100%;
    overflow: hidden;
}

/* STRENGTH */

.strengthsBlock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin: 60px;
}

.strengthTitle {
    color: #4E4E4E;
    font-size: 36px;
    font-family: Helvetica Neue;
    font-weight: 700;
    word-wrap: break-word;
    text-align: center;
    padding: 20px 20px 40px;
}

.cardBodyStrength {
    height: 70px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.strengthsCards {
    width: 757px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    display: flex;
}

.strengthRow {
    height: 355px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 257px;
    display: inline-flex;
}

.strengthCard {
    display: inline-flex;
    width: 250px;
    height: 344px;
    padding-bottom: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.strengthImg {
    /* width: 250px; */
    width: auto;
    height: 250px;
    position: relative;
    margin-bottom: 8px;
    object-fit: contain;
}

.strengthBody {
    text-align: center;
    height: 89px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.strengthCardTitle {
    color: #4E4E4E;
    font-size: 20px;
    font-family: Helvetica Neue;
    font-weight: 700;
    letter-spacing: 0.60px;
    word-wrap: break-word;
}

.strenthCardText {
    width: 250px;
    text-align: center;
    color: #4E4E4E;
    font-size: 16px;
    font-family: Helvetica Neue;
    font-weight: 400;
    letter-spacing: 0.48px;
    word-wrap: break-word;
}

/* FAQ */

.faq {
    background-color: #0074E4;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faqBody {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 950px;
    margin: 80px;
    color: white;
}

.faqLeftText {
    max-width: 290px;
}

.faqText {
    font-size: 18px;
    font-family: Helvetica Neue;
    font-weight: 700;
    letter-spacing: 0.54px;
}

.faqTitle {
    width: 268px;
    font-size: 36px;
    font-family: Helvetica Neue;
    font-weight: 700;
}

.faqComment {
    max-width: 294px;
    font-size: 18px;
    font-family: Helvetica Neue;
    font-weight: 500;
}

.faqQuestions {
    max-width: 598px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    display: inline-flex;
}

.questionCard {
    gap: 15px;
    width: 580px;
}


.faqQuestion {
    font-size: 20px;
    font-family: Helvetica Neue;
    font-weight: 700;
}

.faqAnswer {
    font-size: 16px;
    font-family: Helvetica Neue;
    font-weight: 500;
    padding: 10px 0;
}

/* FOOTER */

footer {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.footerBody {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    padding: 0px 180px;
}

.logoContainer {
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex: 1;
}

.logoFooter {
    max-width: 350px;
}


.pFooter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: #0074E4;
    font-size: 18px;
    font-family: Helvetica Neue;
    font-weight: 500;
    gap: 10px;
    flex: 1;
}

.numberLineFooter {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    padding: 5px;
}

.emailLineFooter {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    padding: 5px;
}

.iconFooter {
    max-width: 20px;
    margin: 1px 5px;
}

.Contacts {
    text-align: left;
    font-size: 24px;
    font-weight: 700;
    padding: 10px;
}







@media (max-width:1920px) {

    /* Header */
    header {
        height: 200px;
    }

    .logoAnimation {
        max-width: 300px;
    }

    .numberHeader {
        right: 80px;
    }

    .numberHeader p {
        font-size: 18px;
    }

    .phoneIcon {
        margin-right: 10px;
        max-height: 20px;
    }

    /* SLogan */

    .slogan {
        padding: 60px;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 16px;
    }

    /* Features */

    .background {
        max-height: 650px;
    }

    .features {
        max-height: 650px;
        gap: 30px;
    }

    h3 {
        font-size: 12px;
    }

    h4 {
        font-size: 32px;
    }

    .cardsFeatures {
        gap: 40px;
    }

    .featureCard {
        max-width: 380px;
        max-height: 120px;
    }

    .inline {
        gap: 10px;
    }

    .iconsFeature {
        max-height: 45px;
    }

    .featureTitle {
        font-size: 16px;
    }

    .featureCardText {
        font-size: 12px;
        max-width: 250px;
    }

    /* FOOTER */

    .footerBody{
        padding: 0 80px;
    }

}




@media (max-width:1280px) {

    /* HEADER */
    header {
        height: 150px;
    }

    .logoAnimation {
        max-width: 200px;
    }

    .numberHeader {
        right: 40px;
    }

    .numberHeader p {
        font-size: 16px;
    }

    /* SLogan */

    .slogan {
        padding: 40px 60px;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 14px;
    }

    h4 {
        margin: 0 20px;
    }

    /* Equipment */

    .equipment {
        gap: 60px;
    }

    .equipmentCards {
        flex-wrap: wrap;
        gap: 80px;
        margin: 20px;
    }

    .andOther {
        height: 200px;
        padding: 0px 10px;
    }

    .spanBold {
        font-size: 20px;
    }

    .andOtherText span {
        font-size: 20px;
    }

    .equipmentImage {
        height: 120px
    }

    .equipmentCardText {
        font-size: 16px;
        max-width: 140px;
    }

    .videoContainer {
        height: 400px;
    }

    /* STRENGTH */
    .strengthTitle {
        font-size: 32px;
    }

    .strengthsBlock {
        gap: 30px;
    }

    .strengthCardTitle {
        font-size: 16px;
    }

    .strenthCardText {
        font-size: 14px;
    }

    /* FAQ */
    .faqLeftText {
        gap: 20px;
    }

    .faqText {
        font-size: 15px;
        font-weight: 600;
    }

    .faqTitle {
        font-size: 32px;
        padding: 10px 0 20px;
        font-weight: 600;
    }

    .faqComment {
        font-size: 14px;
        font-weight: 400;
    }

    .faq {
        height: 700px;
    }

    .faqQuestions {
        max-width: 400px;
    }

    .questionCard {
        max-width: 400px;
    }

    .faqQuestion {
        font-weight: 600;
    }

    .faqAnswer {
        font-weight: 400;
    }

    /* FOOTER */
    footer {
        height: 150px;
        padding: 20px 0;

    }

    .logoFooter {
        max-width: 200px;
        padding: 0;
    }

    .footerBody {
        padding: 0 40px;
    }

    .pFooter {
        font-size: 14px;
    }

    .Contacts {
        font-size: 18px;
    }

}

@media (max-width: 1000px) {
    header {
        height: 250px;
    }

    .headerBody {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    .logoHeader {
        position: none;
    }

    .logoAnimation {
        max-width: 250px;
    }

    .equipment {
        margin: 40px 20px;
    }

    .strengthRow {
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: auto;
    }

    .strengthsCards {
        width: auto;
    }

    .faq {
        height: 800px;
    }

    .faqBody {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 10px;
        align-items: center;
    }

    .faqLeftText {
        text-align: center;
    }

    footer {
        height: 300px;
    }

    .pFooter{
        align-items: center;
    }

    .Contacts{
        text-align: center;
    }

    .footerBody {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footerBody {
        padding: 0;
    }
}

@media (max-width: 480px) {

    /* HEADER */
    .logoAnimation {
        max-width: 250px;
    }

    .phoneIcon {
        max-height: 18px;
    }

    .numberHeader p {
        font-size: 14px;
    }

    /* SLOGAN */
    .slogan{
        padding: 30px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 10px;
    }

    /* FEATURES */

    .background {
        background-image: none;
        height: auto;
        max-height: 1000px;
    }

    .features {
        height: auto;
        max-height: 1000px;
        gap: 10px;
    }

    .image-block {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-position: center;
        object-fit: contain;
        overflow: hidden;
    }

    .image-block img {
        width: 140%;
        max-height: 250px;
        
    }

    .cardsFeatures{
        margin: 20px 10px 50px;
        gap: 30px;
    }

    .featureCard {
        width: auto;
        max-height: 250px;
        padding: 5px 15px 10px;
    }

    .inline {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .featureCardText {
        max-width: 200px;
    }

    .featureTitle{
        margin-bottom: 5px;
    }

    /* EQUIPMENT */
    h3 {
        padding: 20px 0;
    }

    h4 {
        font-size: 24px;
    }

    .equipmentImage{
        height: 100px;
    }

    .equipmentCardText{
        font-size: 14px;
    }

    .andOtherText{
        padding: 0 10px;
        width: auto;
    }

    .andOther{
        height: 150px;
        width: 120px;
    }

    .andOtherText span{
        font-size: 16px;
    }

    .spanBold{
        font-size: 16px;
    }

    /* VIDEO */
    .videoContainer{
        height: 300px;
    }

    /* STRENGTH */

    .strengthsBlock{
        margin: 40px 10px;
    }

    .strengthTitle{
        font-size: 24px;
        padding: 10px 10px 30px;
    }

    .strengthBody{
        height: auto;
    }

    .strengthCard{
        height: auto;
    }

    .strengthCardTitle{
        font-size: 14px;
    }

    .strenthCardText{
        width: 180px;
        font-size: 12px;
    }

    .strengthImg{
        height: 180px;
    }

    /* FAQ */
    .faq {
        height: 750px;
    }

    .faqQuestions {
        max-width: 300px;
        gap: 30px;
    }

    .questionCard {
        max-width: 280px;
    }

    .faqQuestion {
        font-size: 16px;
    }

    .faqAnswer {
        font-size: 14px;
    }

    .faqText{
        font-size: 12px;
    }

    .faqTitle{
        font-size: 24px;
        width: auto;
    }

    .faqLeftText{
        max-width: 220px;
    }

    .faqComment{
        font-size: 12px;
        letter-spacing: 0.40px;
    }

    .faqQuestions{
        max-width: 250px;
    }

    .questionCard{
        max-width: 250px;
    }

    .faqQuestion{
        font-size: 16px;
        letter-spacing: 0.60px;
    }

    .faqAnswer{
        letter-spacing: 0.50px;
    }

    /* FOOTER */
    footer{
        height: 360px;
    }

    .footerBody{
        gap: 30px;
    }

    .pFooter{
        padding: 10px;
    }

    .logoFooter{
        max-width: 250px;
    }

}