:root {
    --orange_color: rgb(255, 146, 44);
    --yellow_color: rgb(255, 225, 58);
    --black_color: rgb(49, 49, 49);
    --orange_color_opasity_9: rgba(255, 146, 44, 0.9);
    --yellow_color_opasity_9: rgba(255, 225, 58, 0.9);
    --black_color_opasity_9: rgba(49, 49, 49, 0.9);
}

body {
    font-family: 'Raleway', sans-serif;
    font-size: calc(20px*var(--size));
    letter-spacing: calc(1.5px*var(--size));
    line-height: calc(30px*var(--size));
    word-spacing: calc(3px*var(--size));
}

a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
}

a:hover {
    cursor: pointer;
}


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


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

#greating_background {
    content: url("Images/greating_background.jpg");
    filter: brightness(0.85);
    margin-left: -0.6%;
    margin-top: -3%;
    position: absolute;
    width: 100%;
    object-fit: cover;
    height: calc(750px*var(--size));
}

#phone_line_background {
    content: url("Images/phone_line-background.jpg");
    position: absolute;
    margin-left: -0.6%;
    margin-top: 0%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
    filter: saturate(130%) blur(calc(1.4px*var(--size)));
}

#ending_background {
    content: url("Images/ending-background.jpg");
    position: absolute;
    margin-left: -0.6%;
    margin-top: 10%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
}


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


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

.header {
    position: fixed;
    top: 0;
    width: 80%;
    margin-left: 52%;
    height: calc(70px*var(--size));
    white-space: nowrap;
    z-index: 40;
    color: #fff;
}

.header a {
    display: inline-block;
    background-color: var(--orange_color_opasity_9);
    border-radius: calc(2px*var(--size));
    font-size: 60%;
    padding: 0.2% 2%;
    margin-top: 1%;
}

.header a:hover {
    background-color: var(--yellow_color_opasity_9);
}


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


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

.title {
    position: relative;
    margin-top: 3%;
    margin-left: 10%;
    font-size: 200%;
    color: var(--orange_color);
}

.title img {
    position: absolute;
    filter: hue-rotate(230deg) blur(calc(0.4px*var(--size)));
    width: 8.5%;
    margin-top: -0.75%;
}

.title article {
    margin-left: 10%;
}

.title h6 {
    letter-spacing: calc(8px*var(--size));
    font-size: 26%;
}

.title h1 {
    letter-spacing: calc(3px*var(--size));
    margin-top: -2.25%;
}

.title h5 {
    letter-spacing: calc(9px*var(--size));
    font-size: 32%;
    margin-top: -4.5%;
}


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


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

.language {
    position: absolute;
    z-index: 20;
    margin-left: 85%;
    margin-top: -30%;
    width: 15%;
}

.language a {
    width: 35%;
}

.language img {
    width: 85%;
}


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


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

.greating {
    margin-top: 10%;
    margin-left: 15%;
}

.greating article {
    position: relative;
    width: 42%;
}

.greating h1 {
    font-size: 180%;
    line-height: calc(55px*var(--size));
}

.greating a {
    font-size: 130%;
    padding: 1.5% 5%;
    border-radius: calc(2px*var(--size));
    background-color: var(--orange_color);
}

.greating a:hover {
    background-color: var(--yellow_color);
}


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


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

.assortment {
    position: relative;
    margin-left: 11.25%;
    margin-right: 2.5%;
    margin-top: 4%;
    width: 90%;
    z-index: 10;
}

.assortment section {
    display: inline-block;
    width: 40%;
    background-color: #fff;
    border-style: none;
    border-width: calc(10px*var(--size));
    border-radius: calc(2px*var(--size));
    box-shadow: 0 0 calc(20px*var(--size)) rgba(83, 83, 83, 0.5);
    padding: 1% 1%;
    margin-right: 1.5%;
    margin-bottom: 3%;
}

.assortment h1 {
    text-align: center;
    font-size: 160%;
    margin-bottom: 5%;
    margin-left: -12.25%;
    letter-spacing: calc(3px*var(--size));
}

.assortment img {
    border-radius: calc(2px*var(--size));
    width: 100%;
}

.assortment h3 {
    background: linear-gradient(45deg, var(--orange_color), var(--yellow_color));
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 0%;
    margin-left: 5%;
    font-size: 95%;
}

.assortment a {
    background-color: var(--orange_color_opasity_9);
    border-radius: calc(2px*var(--size));
    font-size: 90%;
    padding: 1% 5%;
    margin-top: 0%;
    margin-left: 5%;
    margin-bottom: 2%;
    color: #fff;
}

.assortment a:hover {
    background-color: var(--yellow_color_opasity_9);
}


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


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

.ending {
    margin-left: -0.6%;
    margin-top: 5%;
    color: #fff;
    position: relative;
    z-index: 10;
}

.ending h2 {
    margin-left: 15%;
    padding: 4% 0;
}

.ending h3 {
    position: absolute;
    width: 30%;
    font-size: 150%;
    margin-left: 15%;
    padding: 1% 0;
    display: inline-block;
}


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


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

.ending section {
    margin-top: 3.5%;
    margin-left: 15%;
}

.ending article {
    margin-left: 20%;
    margin-top: -0.5%;
    white-space: nowrap;
}

.ending article img {
    position: absolute;
    width: 4%;
    border-radius: calc(2px*var(--size));
    display: inline-block;
    -webkit-filter: invert(1);
    filter: invert(1);
}

.ending article h4 {
    margin-left: 8%;
    margin-top: 1%;
    font-size: 100%;
    display: inline-block;
    width: 30%;
}