/* laptops and big tablets - 1024px - 1200px */
@media only screen and (max-width: 1200px) {

    html,
    body {
        font-size: 9px;
    }

    header {
        padding: 4rem 5rem 5rem 5rem;
    }

    .btn {
        max-width: 25rem;
    }

    .section {
        padding: 5rem 3rem;
    }

    .hero-container-row {
        gap: 3rem;
    }

    h2 {
        font-size: 5.5rem;
    }

    .hero-buttons .btn-outline,
    .hero-buttons .btn-full {
        max-height: 7.5rem;
    }

    .promo p {
        margin: 8rem auto;
    }

    .features-left {
        margin-bottom: 10rem;
    }

    .delivered-margin-bottom {
        margin-bottom: 10rem;
    }

    .experts-main-row {
        margin-bottom: 8rem;
    }

    .text-center {
        margin-bottom: 8rem;
    }

    .form {
        margin-bottom: 15rem;
    }

    .form img {
        max-width: 3rem;
        max-height: 3rem;
    }

    .footer-connect-service-row {
        max-width: 70rem;
    }
}

/* tablets 768px - 1023px */
@media only screen and (max-width: 1023px) {

    html,
    body {
        font-size: 8px;
    }

    header {
        padding: 4rem 5rem 1rem 5rem;
    }

    h1 {
        font-size: 5rem;
    }

    .section {
        padding: 4rem 3rem;
    }

    .hero-container-row {
        flex-direction: column;
        gap: 5rem;
    }

    .hero-content-col {
        max-width: 80rem;
    }

    .hero-content-col p {
        margin-bottom: 7rem;
    }

    .hero-buttons {
        justify-content: center;
        gap: 7rem;
    }

    .hero-buttons .btn-outline,
    .hero-buttons .btn-full {
        max-height: 8.5rem;
        max-width: 28rem;
    }

    .features-left {
        margin-bottom: 8rem;
    }

    .features-cards-row {
        margin-bottom: 5rem;
    }

    .features-card {
        max-width: 41rem;
        height: 32rem;
    }

    .delivered-margin-bottom {
        margin-bottom: 8rem;
    }

    .experts-main-row {
        margin-bottom: 6rem;
    }

    .experts-card {
        max-height: 45rem;
        flex: 0 0 calc(33% - 2rem);
    }

    .form {
        margin-bottom: 2rem;
    }

    .footer-top {
        flex-direction: column;
        gap: 3rem;
        margin-bottom: 3rem;
    }

    .logo-row {
        align-self: flex-start;
    }

    .footer-contacts {
        gap: 1.5rem;
        margin-left: 3rem;
        align-items: center;
    }

    .footer-connect-service-col {
        margin-left: 3rem;
    }

    h5 {
        font-size: 2.5rem;
    }
}

/* mobile - phones */
@media only screen and (max-width: 767px) {

    html,
    body {
        font-size: 7px;
    }

    .logo-row img {
        width: 7rem;
        height: auto;
    }

    .section {
        padding: 3rem 3rem;
    }

    .section-text {
        color: #7d7878;
        font-weight: 500;
        font-size: 2.2rem;
    }

    .testimonial-div-col {
        padding: 3rem 2rem;
    }

    .features-cards-row {
        gap: 2rem;
    }

    .experts-main-row {
        margin-bottom: 3rem;
    }

    .form textarea {
        margin-bottom: 0rem;
    }

    footer {
        padding: 1rem 3rem;
    }

    .footer-connect-service-col {
        gap: 1.2rem;
    }

}

/* adjustment for features-card-row && testimonial section && avatar size */
@media only screen and (max-width: 666px) {

    header {
        padding: 4rem 3rem 1rem 3rem;
    }

    .testimonial-div-row {
        gap: 3rem;
    }

    .features-card {
        max-width: 100%;
        align-items: center;
        height: fit-content;
        min-height: auto;
    }

    .features-card p {
        text-align: center;
        max-width: 42rem;
    }

    h4 {
        font-size: 2.5rem;
        font-weight: 500;
        text-align: center;
    }

    .avatar {
        width: 11rem;
        height: 11rem;
    }

}

/* adjustment for features-cards & form-element */
@media only screen and (max-width: 550px) {

    .features-cards-row {
        margin-bottom: 3rem;
    }

    .form {
        padding: 2rem;
    }

    .form-element {
        flex-direction: column;
    }

}

/* headings font size change & testimonial row->col & footer-bottom row->col & spacings */
@media only screen and (max-width: 460px) {

    h2 {
        font-size: 4rem;
    }

    h3 {
        font-size: 4rem;
    }

    .testimonial-div-row {
        flex-direction: column;
    }

    .logo-ubrania-1 {
        display: none;
    }

    .features-card {
        gap: 1.5rem;
        padding: 2rem 3rem;
    }

    .text-center {
        margin-bottom: 5rem;
    }

    .footer-connect-service-col {
        margin-bottom: 1rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        color: #ffffffb3;
    }
}

/* small mobile - phones*/
@media only screen and (max-width: 400px) {

    html,
    body {
        font-size: 6px;
    }

    .btn {
        max-width: 22rem;
        max-height: 6rem;
    }

    .section {
        padding: 1.5rem 3rem;
    }

    .hero-content-col p {
        margin-bottom: 4rem;
    }

    .hero-buttons .btn-outline,
    .hero-buttons .btn-full {
        max-height: 7rem;
    }

    .section-container-col {
        gap: 1rem;
    }

    .features-left {
        margin-bottom: 3rem;
    }

    .features-card p {
        font-size: 2.12rem;
    }

    .delivered-margin-bottom {
        margin-bottom: 3rem;
    }

    .experts-main-row {
        margin-bottom: 1rem;
    }

    .experts-card {
        flex: 0 0 calc(33% - 1rem);
    }

    h5 {
        font-size: 2.2rem;
    }

    .text-center {
        margin-bottom: 3rem;
    }
}