body {
    font-family: 'Arimo', sans-serif;
    direction: rtl;
    margin:0; /* remove default margin */
    padding:0; /* remove default padding */
    width:100%; /* take full browser width */
    height:100%; /* take full browser height*/
}

section {
    width: 100%;
}

.screen-size-section {
    height: 100vh;
}

/* ------------------------------------------------------------- */
/* ------------------------INTRO SECTION------------------------ */
/* ------------------------------------------------------------- */

.intro-section {
    background-image: url("../images/intro_bg.png");
    background-position: top;
    background-size: cover;
}

header {
    width: 100%;
    direction: ltr;
    font-size: 2rem;
    line-height: 2.25rem;
    padding-top: 2vh;
}

header .head-part-wrap {
    height: 2.25rem;
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

header nav ul li {
    display: inline;
    letter-spacing: 2px;
}

header nav ul li a {
    color: black;
    text-decoration: none;
}

header nav ul li a:hover,
header nav ul li a:active {
    color: black;
    text-decoration: underline;
    cursor: pointer;
}

header .logo-img {
    height: 1.2rem;
    vertical-align: baseline;
}

.intro-section-main-header {
    padding-top: 18vh;
}

.intro-section h1 {
    font-size: 10rem;
    letter-spacing: 0.2rem;
    margin-bottom: 0;
}

.intro-section-sub-header {
    padding-bottom: 7vh;
    margin-bottom: 0;
}

.intro-section h3 {
    font-size: 3.5rem;
    letter-spacing: 9px;
}

.intro-section-go-to-form-btn {
    background-color: #66ccff;
    color: rgb(34,34,34);
}

.intro-section-go-to-form-btn:hover {
    background-color: #44aadd;
}

/* ------------------------------------------------------------- */
/* -----------------------FEATURE SECTION----------------------- */
/* ------------------------------------------------------------- */

.feature-section {
    background-image: url("../images/feature_bg.png");
    background-position: center;
    background-size: cover;
}

.feature-container {
    height: 100%;
}

.feature-header {
    height: 20%;
}

.feature-header h2 {
    font-size: 3.75rem;
    letter-spacing: 9px;
    color: rgb(34,34,34);
    margin: 50px 0;
}

.big-feature-subsection {
    height: 45%;
}

.big-feature-subsection .item-wrap {
    max-width: fit-content;
}

.big-feature-subsection img {
    height: 14rem;
}

.big-feature-subsection p {
    font-size: 2.1rem;
    letter-spacing: 4px;
    color: rgb(34,34,34);
    text-align: center;

    margin-bottom: 0;
    margin-top: 1.5rem;
}

.small-feature-subsection {
    height: 35%;
}

.small-feature-subsection img {
    height: 5rem;
    margin-left: 1.5rem;
}

.small-feature-subsection p {
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: 0.15rem;
    color: rgb(34,34,34);

    margin-bottom: 0;
}

/* ------------------------------------------------------------- */
/* -----------------------REQUEST SECTION----------------------- */
/* ------------------------------------------------------------- */

.request-wrapper {
    height: 77%;
    min-height: 560px;
}

.request-header {
    height: 20%;
}

.request-header h2 {
    font-size: 3.75rem;
    letter-spacing: 8px;
    color: rgb(34,34,34);
}

.request-form {
    height: 80%;
}

.request-form form {
    max-width: 700px;
    width: 35vw;
    min-width: 500px;
    height: 100%;
}

.request-form .inputs-wrap {
    min-height: 360px;
    height: 360px;
    width: 100%;
}

.request-form .input-wrap {
    height: 25%;
    max-height: 90px;
}

.request-form .submit-btn-wrap {
    width: 100%;
    height: 30%;
    min-height: 100px;
}

.request-section-submit-btn {
    background-color: #004bb7;
    color: white;
}

.request-section-submit-btn:hover {
    background-color: #0042a1;
}

/* ------------------------------------------------------------- */
/* ----------------------------FOOTER--------------------------- */
/* ------------------------------------------------------------- */

 footer {
    height: 23%;
    width: 100%;
    background-color: #eeeef1;
}

footer p {
    font-size: 1.4rem;
    letter-spacing: 0.15rem;
    margin-bottom: 0.4rem;
    line-height: 100%;
}

footer .fax-email p:last-child {
    padding-left: 1rem; 
    width: 5rem;
    text-align: right;
}


footer p.fax-info {
    letter-spacing: 0.35rem;
}

footer .hi-world-logo {
    height: 1.5rem;
    margin-top: -0.25rem;
}


.scroll-btn-down-wrap {
    margin-top: 11vh;
}

/* ------------------------------------------------------------- */
/* ------------------------MEDIA QUERIES------------------------ */
/* ------------------------------------------------------------- */

/* Large desktops */
@media (min-width: 1600px) {
    html {
        font-size: 20px;
    }

    .container {
        width: 1300px;
        max-width: 1300px;
    }

    .container.container-big {
        width: 1600px;
        max-width: 1600px;
    }
}

/* Desktops and laptops */
@media (min-width: 1200px) and (max-width: 1599px) {
    html {
        font-size: 14px;
    }

    .container {
        max-width: 1300px;
    }

    .intro-section-main-header {
        padding-top: 22vh;
    }
}

/* Desktops and laptops */
@media (min-width: 1200px) {
    .section-content-wrap {
        width: 70%;
        max-width: 1300px;
    }
}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    html {
        font-size: 13px;
    }

    .section-content-wrap {
        width: 80%;
    }

    .intro-section-main-header {
        padding-top: 20vh;
    }

    footer p {
        font-size: 1.2rem;
        height: 1.2rem;
        letter-spacing: 0.15rem;
        margin-bottom: 0.4rem;
        line-height: 100%;
    }
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    html {
        font-size: 11px;
    }

    .section-content-wrap {
        width: inherit;
    }

    .intro-section-main-header {
        padding-top: 24vh;
    }

    footer p {
        font-size: 1.2rem;
        height: 1.2rem;
        letter-spacing: 0.15rem;
        margin-bottom: 0.4rem;
        line-height: 100%;
    }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    html {
        font-size: 12px;
    }

    .container {
        max-width: 95%;
    }

    .intro-section header {
        direction: ltr;
        font-size: 5vw;
        padding-top: 2vh;
    }

    header .head-part-wrap {
        height: 9vw;
    }

    header .logo-img {
        height: 3vw;
        vertical-align: baseline;
    }

    .intro-section h1 {
        margin-bottom: 0;
        font-size: 16vw;
    }

    .intro-section h3 {
        font-size: 6vw;
        letter-spacing: 0.3rem;
    }

    .intro-section-main-header {
        padding-top: 20vh;
    }

    .small-feature-subsection {
        display: none !important;
    }

    .feature-section {
        min-height: 100vh;
    }

    .feature-header {
        height: 20vw;
        max-height: 20vw;
    }

    .feature-header h2 {
        font-size: 9vw;
        margin-bottom: 0;
        margin-top: 0;
    }

    .big-feature-subsection {
        height: calc(100% - 20vw);
    }

    .big-feature-subsection img {
        height: 28vw;
    }

    .big-feature-subsection p {
        font-size: 7vw;
    }

    .big-feature-wrap {
        padding-top: 60px;
        padding-bottom: 60px;
        height: 33.33333%;
    }

    .request-header {
        height: 20vw;
    }

    .request-header h2 {
        font-size: 9vw;
        letter-spacing: 0.2rem;
        margin-bottom: 0;
    }
    
    .request-form {
        height: calc(100% - 20vw);
    }

    .request-form form {
        min-width: 90%;
    }

    .request-form .inputs-wrap {
        min-height: 360px;
        height: 360px;
        width: 100%;
    }

    footer {
        padding-top: 20px;
        padding-bottom: 20px;
        width: 100%;
        background-color: #eeeef1;
    }

    footer .ft-sect-wrap {
        margin-bottom: 2vh;
    }

    footer .ft-sect-wrap:last-child {
        margin-bottom: 0;
    }

    footer p {
        font-size: 4vw;
        letter-spacing: 0.3vw;
    }

    footer p.fax-info {
        letter-spacing: 0.35rem;
    }

    footer .hi-world-logo {
        float: left;
        padding-right: 1vw;
        height: 5vw;
    }

    footer .copyright p,
    footer .fax-email p {
        font-size: 4vw;
    }

    #successOverlay > h2,
    #errorOverlay > h2 {
        width: 70%;
    }
}

/* Landscape phones and smaller */
@media (max-width: 480px) {
    html {
        font-size: 16px;
    }

    .section-content-wrap {
        width: inherit;
    }

    .intro-section-sub-header {
        padding-bottom: 10vh;
        margin-bottom: 0;
    }

    /* ----------------------------- */

    .feature-header h2 {
        letter-spacing: 0.2rem;
        color: rgb(34,34,34);
    }

    .big-feature-subsection p {
        /*font-size: 1.5rem;*/
        letter-spacing: 0.2rem;

        margin-bottom: 0;
        margin-top: 1.5rem;
    }

    /* ----------------------------- */

    .request-wrapper {
        height: 100%;
    }

    .request-form form {
        width: 100%;
    }

    /* ------------------------------- */

    footer p {
        font-size: 5vw;
        letter-spacing: 0.3vw;
    }

    #successOverlay > h2,
    #errorOverlay > h2 {
        width: 90%;
    }

}

/* Landscape phones and smaller */
@media (max-width: 400px) {
    html {
        font-size: 12px;
    }

}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    html {
        font-size: 12px;
    }

    .section-content-wrap {
        width: 100%;
    }
}