@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&family=Montserrat:wght@400;500;600&display=swap');
*,*::before,*::after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
html, body{ height: 100%;padding:0; margin:0} 
body{color: #000!important; font-weight:400; background-color:#fff!important;font-family: 'Montserrat', sans-serif!important;font-size:16px!important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} 

.x{border:1px solid #000!important}
a{color:#000;outline:none!important; border: none!important; text-decoration:none}
a:hover{text-decoration:none!important; color:#2fac66;outline:none!important; border: none!important}
::-moz-selection { background-color:#2fac66; color:#fff}
::selection {background-color:#2fac66; color:#fff}
a:focus{outline:none!important; border:none!important;text-decoration:none!important}
*:focus{outline:none!important;text-decoration:none!important}

.relative,.line{position:relative!important}
.tc, .tc p{text-align:center!important}
.top-number-en svg{display:none!important}
.arabic, .page-id-12 .box, .page-id-12 .email-link{font-family: 'Tajawal', sans-serif;}
.page-id-12 .address{font-family: 'Tajawal', sans-serif; font-weight:400; text-align: right; font-size: 20px; direction: rtl}

.en-number{font-family: 'Montserrat', sans-serif!important; direction: ltr!important; display: inline-block!important}
.smooth, a{-webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear}
.bold300{font-weight:300!important}.bold400{font-weight:400!important}.bold500{font-weight:500!important}.bold600{font-weight:600!important}.clear{clear: both;line-height: 0px;height: 0;font-size: 0}
.font20{font-size:20px!important}.font26{font-size:26px!important; font-weight: 700!important;}
.arabic-image{text-align: right}
.adjust{margin:  0 auto!important}
/* ------------------- IDS and Classes------------------------ */
#page-container{overflow-x: hidden!important}
.header{padding:10px 0 10px 0}
.ar-logo{float: right}
.page-id-12 .f-logo{text-align: right; margin: 0!important}
.top-banner{min-height:400px}
.line{padding-top: 30px}
.line:before{content: ''; position: absolute; top:0; left: 0; width: 100%; height: 8px; display: inline-block; background-color: #2fac66; max-width: 400px}
.page-id-12 .line:before{left:auto; right: 0}
.footer-banner{margin-top: 50px}
/* ------------------- Text & Colors------------------------ */
h1{font-size:30px!important; text-transform: uppercase; text-align: center; font-weight: 500}
.page-id-12 h1{font-weight:700}
h2{font-size:30px!important; color: #fff; text-align: center;text-shadow: 10px 10px 12px rgba(0, 0, 0, 0.9); font-weight: 600}
.page-id-12 h2{font-weight:700}
.page-id-12 .email-link{text-align: right; direction: rtl; font-weight: 400!important;}
.white, .white p, .white h1{color: #fff!important}
.box{text-align: center; font-size: 18px; font-weight: 600; color: #fff;}
.page-id-12 .box{font-weight:500;}
/* ------------------- Links ------------------------ */
#totopbutton {position: fixed; bottom:0; right:0; opacity: 0;visibility: hidden; z-index: 9999999999;display:inline-block;width:40px;height:40px;background: linear-gradient(to bottom, #2fac66 50%, #2a193d 50%);  background-size: 100% 200%;line-height:40px;text-align:center;border:0!important;cursor: pointer } 
#totopbutton:after{content: "";  background:url('../img/arrow.svg') center no-repeat; width: 20px; height: 27px; display: inline-block;background-size:20px 27px; margin-top:7px} 
#totopbutton:hover{background-position: 0 100%} #totopbutton.show { opacity: 1; visibility: visible }

.page-id-12 .link-text{direction: rtl; text-align: right; display: inline-block} 

.top-number-en, .top-number-ar{display:inline-block!important;padding: 5px 10px;border:0;background-size: 200% 200%!important; background-position:bottom right!important;text-align:center;font-size:16px; margin: 0;background-image:linear-gradient(120deg, #3777bb 0%, #3777bb 50%, #2fac66 50%)!important;color:#fff;float: right; font-weight: 500}
.top-b1, .top-b2{float: right}
.page-id-12 .top-b1, .page-id-12 .top-b2{float:left}
 .language{display:inline-block!important;padding: 5px 10px;border:0;background-size: 200% 200%!important; background-position:bottom right!important;text-align:center;font-size:16px; margin: 0 0 0 10px;background-image:linear-gradient(120deg, #2fac66 0%, #2fac66 50%, #3777bb 50%)!important;color:#fff;float: right; font-weight: 500}
.page-id-12  .language{margin: 0 10px 0 0px;}
.top-number-en:hover{background-position:top left!important; color:#65c7ff}
.language:hover{background-position:top left!important; color:#65c7ff}

@media (min-width: 1400px){
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1200px;
}
}
@media only screen and (max-width:767px) {
body{padding-top:70px}
.reverse-row{ display:flex;flex-direction:column-reverse}   
.header{position:fixed!important;z-index:9999!important;height:70px!important; left:0!important;right:0!important; top:0!important; width:100%!important; padding:5px 0 0 0!important; margin:0!important;background-color: #fff;}    
.link-text,  .page-id-12 .en-number1{display: none!important}
.top-number-en{height: 40px; width: 40px; line-height: 40px!important; text-align: center}
.language{height: 40px;} 
.top-number-en svg{display:block!important; height:20px; width: auto;margin-top: 5px}    
h2{padding-top: 40px; padding-bottom:40px}
.ar-logo{float: left!important;text-align: left!important}  
.logo{max-height:60px; width:auto}   
}

@media only screen and (min-width: 1024px) {
.top-banner{min-height: 500px}
.adj1{margin-top: -100px; margin-bottom: 100px}   
.footer-banner{min-height: 600px;}    
h2{font-size:40px!important}
}

@media only screen and (min-width: 1200px) {

.header{padding:50px 0 50px 0}
.top-banner{min-height:700px}
.logo{max-height: 100px; width:auto}
.top-number-en{padding: 8px 20px}
.language{padding: 8px 20px}
.adj1{margin-top: -200px; margin-bottom:120px}
.box p{padding-left:12%; padding-right:12%; font-size: 24px;}
.page-id-12 .box p{padding-left:12%; padding-right:12%; font-size:32px;}    
h1{max-width:700px; font-size: 40px!important; margin: 0 auto}
.page-id-12 h1{font-size: 60px!important;max-width:800px;}    
h2{font-size:60px!important}
.footer{padding-bottom: 50px}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.adj1{margin-top: -140px; margin-bottom: 100px} 
h2{padding-top: 90px; padding-bottom: 90px}    
}
