/*######################################*/

/*RESET ################################*/

/*######################################*/



body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
p,
blockquote,
hr,
th,
td {

    margin: 0;

    padding: 0;

}



body:after {

    background: black;

    opacity: 0;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    position: absolute;

    z-index: -1;

    content: "";

}



/*######################################*/

/*TYPOGRAPHY ###########################*/

/*######################################*/



html {

    -webkit-font-smoothing: antialiased;

}



html>body {

    font-size: 16px;

}



p {

    font-size: 50%;

    line-height: 1.625em;

    font-family: 'Tajawal', sans-serif;

    font-weight: 300;

}



a {
    font-size: 1em;
    line-height: 1.625em;
    font-family: 'Tajawal', sans-serif;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
}



a:hover {
    text-decoration: none;
    opacity: 0.8;
}



h1,
h2,
h3.h4,
h5 {

    font-family: 'Tajawal', sans-serif;

}



h3 {
    font-size: 2rem;
    line-height: 2em;
    margin-bottom: 1.1125em;
    color: #fff;
    font-weight: 300;
    font-family: 'Tajawal', sans-serif;
}



h5 {

    font-size: 150%;

    color: #fff;

    text-transform: uppercase;

    line-height: 3em;

    font-weight: 600;

}



ul {

    list-style: none
}



li {

    margin-top: 1.625em;



}



li a {

    display: inline;

}



hr {

    margin-top: 4.568em;

    margin-bottom: 4.568em;

}

.divContainer {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-evenly;
}

.cont {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
    margin: 20px;
}

.btn {
    color: #565656;
    border-radius: 16px;
    background-color: #fff;
    font-size: 1.5rem;
    width: 100%;
    text-align: right;
    position: relative;
    margin-top: 15px;
    padding: 10px 15px;
}

.btn img {
    width: 100px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
}

.logo-img {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-img img {
    width: 400px;
}


/*######################################*/

/*PRELOADER ############################*/

/*######################################*/



#preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    z-index: 9999;
    /* makes sure it stays on top */

}



#status {

    width: 200px;

    height: 200px;

    position: absolute;

    left: 50%;
    /* centers the loading animation horizontally one the screen */

    top: 50%;
    /* centers the loading animation vertically one the screen */

    background-repeat: no-repeat;

    background-position: center;

    margin: -100px 0 0 -100px;
    /* is width and height divided by two */

}



/* Loading animation: */



.spinner {

    margin: 100px auto 0;

    width: 70px;

    text-align: center;

}



.spinner>div {

    width: 18px;

    height: 18px;
    border-radius: 100%;

    display: inline-block;

    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

    animation: bouncedelay 1.4s infinite ease-in-out;

    /* Prevent first frame from flickering when animation starts */

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}



.spinner .bounce1 {

    -webkit-animation-delay: -0.32s;

    animation-delay: -0.32s;

}



.spinner .bounce2 {

    -webkit-animation-delay: -0.16s;

    animation-delay: -0.16s;

}



@-webkit-keyframes bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0.0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }

}



@keyframes bouncedelay {

    0%,
    80%,
    100% {

        transform: scale(0.0);

        -webkit-transform: scale(0.0);

    }

    40% {

        transform: scale(1.0);

        -webkit-transform: scale(1.0);

    }

}



#logo_header,
#counter_box,
#slogan,
#newsletter_form {

    opacity: 0;

    -webkit-transition: opacity 700ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

    -moz-transition: opacity 700ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

    -o-transition: opacity 700ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

    transition: opacity 700ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

}







/*#######################################*/





/* Template styles */





/*######################################*/

/*HOME #################################*/

/*######################################*/









#home_content {

    text-align: center;

    position: fixed;

    top: 50%;

    left: 50%;

    margin-top: -18em;

    margin-left: -390px;

    height: 36em;

    width: 780px;

}



#logo {

    margin-bottom: 0em;



    -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

}



#logo_header {

    margin-bottom: 4.568em
}





/* Counter */



#counter_box {

    width: 28.75em;

    height: auto;

    margin-left: auto;

    margin-right: auto;

    border: solid 0.3125em #a38231;

    margin-bottom: 1em;

}



.countdown {

    font-family: 'Tajawal', sans-serif;

    font-size: 300%;

    color: #9663AC;

    text-transform: uppercase;

    font-weight: 600;

    line-height: 1.8em;

    padding-bottom: 0.1em;

}

.countdown strong {

    font-family: 'Tajawal', sans-serif;

    font-size: 100%;

    color: #a38231;

    text-transform: uppercase;

    font-weight: 600;

    line-height: 1.8em;

    padding-bottom: 0.1em;

    opacity: 0.3;

}

#slogan {

    color: #02a6c2;

}





/* Newsletter Form */

#newsletter_form {

    margin-top: 1em;

    height: 3.25em;

}

.subscribe-form {

    margin-left: auto;

    margin-right: auto;

    width: 28.75em;

    position: relative;

    z-index: 10;

}



.subscribe-input {
    float: left;
    direction: rtl;
    padding-left: 1.2em;
    padding-top: 0.1em;
    width: 21.875em;
    height: 3.25em;
    font-family: 'Tajawal', sans-serif;
    font-weight: 400;
    text-align: center;
    color: #02a6c2;
    background: white;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
}



.subscribe-input:focus {
    outline: 0;
}

.subscribe-submit {
    padding-top: 0.1em;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 400;
    height: 3.25em;
    width: 6.875em;
    border: none;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    color: white;
    outline: 0;
    -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}



.subscribe-submit:active {

    outline: 0;

}



.subscribe-submit:hover {

    opacity: 0.8
}



#preview {

    width: 28.75em;

    height: 3.25em;

    border-radius: 10px;

    border: none;

    margin-left: auto;

    margin-right: auto;

    margin-top: -3.25em;

    padding: 1.1em;



    z-index: 5;

    -webkit-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -moz-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -o-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);



}



#preview p {

    margin: 0;

    line-height: 1em;

    font-weight: 600;

    color: #332A3F;

}



footer {
    width: 100%;
    margin-top: 2rem;
    padding: 1.5rem 0;
    text-align: center;
    background-color: #073641;
}



footer a {
    margin: 2em;
    line-height: 1em;
    font-weight: 400;
    color: #20afcf;
    font-size: 1rem;
}



/* Arrow */



#arrow {

    margin-top: 2.4em;

    margin-left: auto;

    margin-right: auto;

    width: 2.5em;

    height: 2.5em;

    padding: 0.55em;

    border-radius: 30px;





    -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);







}



#arrow:hover {

    cursor: pointer;

    width: 3em;

    height: 3em;

    margin-top: 2.15em;

}



/*######################################*/

/*CONTACT ##############################*/

/*######################################*/



#contact {

    position: relative;

    z-index: 100;

    background-color: white;

    padding-top: 4.568em;

    padding-bottom: 4.568em;

    opacity: 0;

}



.contact_info {

    margin-top: 1.625em;

    margin-bottom: 0px;

}



#about {

    padding-right: 3em;

}



#phone_icon {

    vertical-align: middle;

    width: 1.5em;

    height: 1.5em;

    margin-right: 1em;

    margin-top: -0.1em;

}



#mail_icon {

    vertical-align: middle;

    width: 1.5em;

    height: 1.5em;

    margin-right: 1em;

    margin-top: -0.1em;

}



/* Social icons */



#social_icons {

    text-align: center;

}



#social_icons li {

    display: inline;

    padding-left: 0.4em;

    padding-right: 0.4em;

}



#fb_icon,
#tw_icon,
#in_icon,
#g_icon,
#pin_icon,
#fli_icon {

    width: 2.5em;

    height: 2.5em;



    -webkit-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -moz-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -o-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

}



#fb_icon:hover,
#tw_icon:hover,
#in_icon:hover,
#g_icon:hover,
#pin_icon:hover,
#fli_icon:hover {

    cursor: pointer;

}



/* Arrow-back */



#arrow_back {

    margin-top: -2em;

    margin-left: auto;

    margin-right: auto;

    width: 2.5em;

    height: 2.5em;

    padding: 0.5em;

    border-radius: 30px;



    -webkit-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -moz-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    -o-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

    transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

}



#arrow_back:hover {

    cursor: pointer;

    width: 3.1em;

    height: 3.1em;

    margin-top: -2.1em;

}