:root{
    --main-color : #0F2E93;
    --main-color2 : #F42D18;
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.top-img{
    margin-top: 120px;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 50px;
    
}
.order-building{
    font-family: 'Tajawal', sans-serif;
    border-radius: 20px;
    margin: 0 auto;
    background: -moz-linear-gradient(left, transparent  0%, var(--main-color) 0%) ;
    background: -webkit-linear-gradient(left, transparent  0%, var(--main-color) 0%) ;
    background: linear-gradient(to right, transparent  0%, var(--main-color)  0%) ;
}
.order{
    text-align: center;
    margin: 20px auto;
    -webkit-transition: all 0.75s;
    transition: all 0.75s;
}
.order:hover{
    transform: scale(1.2);
}
#arrowAnim {
        width: 10px;
        height: 10px;
        display: inline-block;
        justify-content: center;
        align-items: center;
        margin: auto 10px;
    }
    
    .arrow {
        width: 10px;
        height: 10px;
        border: 3px solid;
        border-color: #fff transparent transparent #fff;
        transform: rotate(-45deg);
    }
    
    
    .arrowSliding {
        position: absolute;
        -webkit-animation: slide 4s linear infinite; 
                animation: slide 4s linear infinite;
    }
    
    .delay1 {
        -webkit-animation-delay: 1s; 
        animation-delay: 1s;
    }
    .delay2 {
        -webkit-animation-delay: 2s; 
        animation-delay: 2s;
    }
    .delay3 {
        -webkit-animation-delay: 3s; 
        animation-delay: 3s;
    }
    
    @-webkit-keyframes slide {
        0% { opacity:0; transform: translateX(15px); }  
        20% { opacity:1; transform: translateX(9px); } 
        80% { opacity:1; transform: translateX(-9px); }  
        100% { opacity:0; transform: translateX(-15px); } 
    }
    @keyframes slide {
        0% { opacity:0; transform: translateX(15px); }  
        20% { opacity:1; transform: translateX(9px); } 
        80% { opacity:1; transform: translateX(-9px); }  
        100% { opacity:0; transform: translateX(-15px); } 
    }
.building-title{
    width: 100%;
    direction: rtl;
    text-align: right;
    margin: 100px auto 50px;
    font-size: 35px;
    color: var(--main-color);
    height: auto;
    padding-bottom: 5px;
    font-family: 'Tajawal', sans-serif;
    /* background: #5543ca;
    background: -moz-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: -webkit-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: linear-gradient(to right,#f4524d  0%,#5543ca  100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important; */
}
.build-list{
    list-style-type: disc;
    direction: rtl;
    text-align: right;
    margin-bottom: 50px;
}
.build-list li{
    font-family: 'Tajawal', sans-serif;
    margin: 15px auto;
    color: #777;
    font-size: 20px;
}
.building-text{
    font-family: 'Cairo', sans-serif;
    text-align: right;
    margin: 25px auto 0;
    font-size: 22px;
    color: #777;
    direction: rtl;
}

    @media only screen and (max-width:  850px) {
        .top-img img{
            width: 100%;
            height: 150px;
            }
            .building-title{
                font-size: 35px;
            }
        }


        #ad{
            margin-top: 25%;
            width: 100%;
            height: auto;
        }
        #regForm {
        background-color: #ffffff;
        margin: 100px auto;
        font-family: Raleway;
        width: 100%;
        min-width: 300px;
        direction: rtl;
        }

        h1 {
        text-align: center;  
        }

        input {
        padding: 10px;
        width: 100%;
        font-size: 17px;
        font-family: Raleway;
        border: 1px solid #aaaaaa;
        }

        /* Mark input boxes that gets an error on validation: */
        input.invalid {
        background-color: #ffdddd;
        }

        /* Hide all steps by default: */
        .tab {
        display: block;
        }

        button {
        /* background-color: #4CAF50; */
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-size: 22px;
        font-family: 'Cairo', sans-serif;
        cursor: pointer;
        }

        button:hover {
        opacity: 0.8;
        }

        #prevBtn {
        background: -moz-linear-gradient(left,#ceb6b5  0%,#373447 100%) ;
        background: -webkit-linear-gradient(left,#ceb6b5  0%,#373447 100%) ;
        background: linear-gradient(to right,#ceb6b5  0%,#373447  100%) ;  }

        /* Make circles that indicate the steps of the form: */
        .step {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbbbbb;
        border: none;  
        border-radius: 50%;
        display: inline-block;
        opacity: 0.5;
        }

        .step.active {
        opacity: 1;
        }

        /* Mark the steps that are finished and valid: */
        .step.finish {
        background-color: #4CAF50;
        }

        /* ********************************************************************************************************** */
        .title {
        text-align: right;
        text-transform: uppercase;
        font-size: 3.2em;
        line-height: 48px;
        padding-bottom: 30px;
        font-size: 40px;
        color: var(--main-color);
        font-family: 'Tajawal', sans-serif;
        /* background: #5543ca;
        background: -moz-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
        background: -webkit-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
        background: linear-gradient(to right,#f4524d  0%,#5543ca  100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important; */
        }
        .contact-form .form-field {
        position: relative;
        margin: 32px 0;
        text-align: center;
        }
        .contact-form .form-control{
        position: relative;
        margin: auto;
        direction: rtl;
        }
        option {
        left: 20px;
        bottom: 11px;
        font-size: 18px;
        line-height: 26px;
        font-weight: 400;
        color: var(--main-color);
        cursor: text;
        }
        select{
        margin-top: 40px;
        color:#000;
        text-shadow:0 1px 0 rgba(0,0,0,0.4);
        }
        option:not(:checked) { 
        background-color: #FFF; 

        }
        .contact-form .submit-btn {
        display: inline-block;
        background-color: var(--main-color);
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 16px;
        padding: 8px 16px;
        border: none;
        width:150px;
        cursor: pointer;
        border-radius: 15px;
        margin-right: 10px;
        font-family: 'Cairo', sans-serif;
        }
        .contact-form .label {
        position: absolute;
        /* left: 20px; */
        right: 20px;
        bottom: 20px;
        font-size: 18px;
        line-height: 26px;
        font-weight: 400;
        color: #5543ca;
        cursor: text;
        font-family: 'Cairo',sans-serif;
        transition: -webkit-transform .2s ease-in-out;
        transition: transform .2s ease-in-out;
        transition: transform .2s ease-in-out, 
        -webkit-transform .2s ease-in-out;
        }
        .contact-form .labelcheck {
        position: absolute;
        /* left: 20px; */
        right: 20px;
        bottom:40px;
        font-size: 18px;
        line-height: 26px;
        font-weight: 400;
        color: #5543ca;
        cursor: text;
        font-family: 'Cairo',sans-serif;
        transition: -webkit-transform .2s ease-in-out;
        transition: transform .2s ease-in-out;
        transition: transform .2s ease-in-out, 
        -webkit-transform .2s ease-in-out;
        }
        .contact-form .input-text {
        display: block;
        width: 100%;
        height: 36px;
        border-width: 0 0 2px 0;
        border-color: #5543ca;
        font-size: 18px;
        line-height: 26px;
        font-weight: 400;
        }
        .contact-form .input-text:focus {
        outline: none;
        }
        .contact-form .input-text:focus + .label,
        .contact-form .input-text.not-empty + .label {
        -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
        }
        .contact-form .whatsapp-btn {
            display: inline;
            background-color: #000;
            background-image: linear-gradient(125deg,#bbb,green);
            color: #fff; 
            text-transform: uppercase;
            font-size: 16px;
            padding: 5px 8px 7px 0;
            border: none;
            width:150px;
            cursor: pointer;
            border-radius: 15px;
            margin-right: 10px;
            font-family: 'Cairo', sans-serif;
            text-align: right;
            
        }
          input[type="file"] {
            display: none;
        }   
        .upload-row{
          text-align: right;
        }
        .custom-file-hr {
            display: inline-block;
            background-color: var(--main-color);
            color: #fff;
            font-family: 'Cairo', sans-serif;
            margin: 15px 0 25px 0;
            padding: 6px 8px;
            cursor: pointer;
            border-radius: 10px;
        }
        #hr-chosen,
        #id-chosen{
            margin-left: 0;
            font-family: 'Tajawal',sans-serif;
            font-size: 10px;
          }
        .error{
          text-align: right;
          font-size: 20px;
          font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
          word-spacing: 3px;
          padding-right: 15px;
        }  
        #whatslink{
        position: relative;
        text-decoration: none

        }
        #contactwhats{
            font-size: 25px;
            color: green;
            display: inline;
            position: absolute;
            margin-top: 10px;
            margin-right: -35px;

        }
        @media only screen and (max-width:  850px) and ( orientation: portrait){
            #ad{
            margin-top: 50px;
            margin-bottom: 0px;
            width: 100%;
            }
            .form-row{
                display: flex;
            }
            .form-row .form-col{
                order: 2;
            }
        }
        @media only screen and (max-width:  850px) and ( orientation: landscape){
            #ad{
            margin-top: 50px;
            margin-bottom: 0px;
            width: 100%;
            height: auto;

            }
            .form-row{
                display: flex;
            }
            .form-row .form-col{
                order: 2;
            }
        }