@font-face {
    font-family: 'NotoSansArabic-Regular';
    src: url('https://ksaimg0.b8cdn.com/images/templates/masar/fonts/NotoSansArabic-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal-Regular';
    src: url('https://ksaimg0.b8cdn.com/images/templates/masar/fonts/Tajawal-Regular.woff2') format('woff2');
}
@font-face {
    font-family: '29LTZaridDisplay-Regular';
    src: url('https://ksaimg0.b8cdn.com/images/templates/masar/fonts/29LTZaridDisplay-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'NeueJune-Roman';
    src: url('https://ksaimg0.b8cdn.com/images/templates/masar/fonts/NeueJune-Roman.woff2') format('woff2');
}
/* Temp  */
.grid-3 { width: 30% ;}

.main-color,
.btn_main,
.jobs_widgets_home_mod .wg_list li a,
.jobs_widgets_home_mod .wg_item_num,
.quote-before-box:before,
.jobs_widgets_home_mod .wg_footer a,
.register_options li a:hover,
#nav .on a,
#nav .opptab.on a,
#nav .opptab.on a:hover,
#nav .hover .sub-nav a:hover,
#nav .on span:after {
  color: #00444c!important
}

.fancy-04 .fancy-font-xxs {
  font-size: clamp(1.143rem, 0.8vw, 3rem) !important; /* ensures min = 16px */
}

.fancy-04 .fancy-lineheight-xs {
  line-height: clamp(1.143rem, 0.8vw, 4rem) !important; /* ensures min = 16px */
}
/* General */

#en.fancy-04 #masthead-wrapper,
#en.fancy-04 #footer-wrapper,
#fr.fancy-04 #masthead-wrapper,
#fr.fancy-04 #footer-wrapper,
#en.fancy-04 #masthead-wrapper h1,
#en.fancy-04 #masthead-wrapper .h1,
#en.fancy-04 #masthead-wrapper h2,
#en.fancy-04 #masthead-wrapper .h2,
#en.fancy-04 #footer-wrapper h1,
#en.fancy-04 #footer-wrapper .h1,
#en.fancy-04 #footer-wrapper h2,
#en.fancy-04 #footer-wrapper .h2 {
  font-family: 'NeueJune-Roman', sans_regular, arial, freesans, sans-serif !important; 
}

#ar.fancy-04 #masthead-wrapper,
#ar.fancy-04 #masthead-wrapper h1,
#ar.fancy-04 #masthead-wrapper .h1,
#ar.fancy-04 #masthead-wrapper h2,
#ar.fancy-04 #masthead-wrapper .h2,
#ar.fancy-04 #footer-wrapper,
#ar.fancy-04 #footer-wrapper h1,
#ar.fancy-04 #footer-wrapper .h1,
#ar.fancy-04 #footer-wrapper h2,
#ar.fancy-04 #footer-wrapper .h2 ,
#ar.fancy-04 .font-tajwal {
  font-family: 'Tajawal-Regular', arial, sans-serif !important;
}

#ar.fancy-04 h1, #ar.fancy-04 .h1, #ar.fancy-04 h2, #ar.fancy-04 .h2,
#ar.fancy-04 #masthead-wrapper li span, #ar.fancy-04 .lang_top_logout span,
#ar.fancy-04 .register_options li, #ar.fancy-04 .lang_top_logout_list .toplink-lang-ar {
    font-family: '29LTZaridDisplay-Regular', arial, sans-serif !important;
}

body.home {
    background: linear-gradient(to right, rgb(2, 82, 89), rgb(15, 111, 112));
}
.home.fancy-04 #content-frame #content div section.fancy-gray-section {
    background: transparent !important;
}
#content .golden-color {
    color: #e2cc98 !important;
}
/* Header & Banner */
.home #masthead-wrapper:not(.fixed-header) #logo img {
    filter: brightness(0) invert(1);
}
.home .banner_overlay:before {
    background: linear-gradient(180deg, rgba(1, 59, 67, .64) 1.29%, rgba(1, 59, 67, 0) 82.48%);
}
.home .banner_overlay:after {
    background: linear-gradient(85deg, rgba(1, 59, 67, .9) 20.76%, rgba(1, 59, 67, 0) 77.52%);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#ar .banner_overlay:after  {
    background: linear-gradient(275deg, rgba(1, 59, 67, .9) 20.76%, rgba(1, 59, 67, 0) 77.52%);
}
.fancy-04.home #masthead-wrapper:not(.fixed-header) li > a span span:after,
.fancy-04.home #masthead-wrapper:not(.fixed-header) #nav > li:hover > a > span > span ,
.fancy-04.home #masthead-wrapper:not(.fixed-header) #masthead li.hover > a span span::after{
    color: #fff !important;
}
/* CTA button */
.cta {
    letter-spacing: 1.6px;
    padding-bottom: 24px;
    padding-top: 24px;
    transform-origin: 0 50%;
}
.accelerate-text {
    padding-right: clamp(116px, 6.042vw, 150px);;
}
#ar .accelerate-text {
    padding-right: 0;
    padding-left: clamp(116px, 6.042vw, 150px);;
}
.cta.hover_border:before {
    background: #e2cc98;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transform-origin: 0 50%;
    width: 100%;
}
.icon-overflow {
    transform: translateX(-15px);
}
.icon-overflow:before {
    backface-visibility: hidden;
    background: #00454f;
    content: '';
    height: 24px;
    left: 0;
    margin-left: -14px;
    margin-top: -11px;
    opacity: .15;
    position: absolute;
    top: 50%;
    transform: translateX(35px) rotate(45deg);
    transition: transform 1.1s cubic-bezier(.165, .84, .44, 1);
    width: 24px;
}
.cta span {
    display: inline-block;
    position: relative;
    transition: transform 1.1s cubic-bezier(.165, .84, .44, 1);
    vertical-align: text-bottom;
}
.cta .bl, .cta .br {
    height: 100%;
    transform: scaleY(0);
    width: 1px;
}
.cta .bl {
    transform-origin: 0 100%;
}
.cta .br, .cta .bt {
    transform-origin: 0 0;
}
.cta .bt {
    height: 1px;
    transform: scaleX(0);
}
.cta .bl, .cta .br, .cta .bt {
    background:  #e2cc98;
    transition: transform 1.1s cubic-bezier(.165, .84, .44, 1);
}
.cta:hover > span:first-of-type {
    transform: translateX(25px);
}
.cta:hover > span:last-of-type:not(:first-of-type) {
    transform: translateX(-25px);
}
.cta:hover .icon-overflow:before {
    transform: translateX(0) rotate(45deg);
}
.cta:hover .bl, .cta:hover .br {
    transform: scaleY(1);
}
.cta:hover .bt {
    transform: scaleX(1);
}
.arrow {
    height: 8px;
}
/* --- CTA Arabic Specific Overrides --- */
#ar .cta {
    transform-origin: 100% 50%;
}
#ar .cta.hover_border:before {
    left: auto;
    right: 0;
    transform-origin: 100% 50%;
}
#ar .icon-overflow {
    transform: translateX(15px);
}
#ar .icon-overflow:before {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -14px;
    transform: translateX(-35px) rotate(45deg);
}
#ar .cta .bl {
    transform-origin: 100% 100%;
}
#ar .cta .br, 
#ar .cta .bt {
    transform-origin: 100% 0;
}
#ar .cta:hover > span:first-of-type {
    transform: translateX(-25px);
}
#ar .cta:hover > span:last-of-type:not(:first-of-type) {
    transform: translateX(25px);
}
#ar .cta:hover .icon-overflow:before {
    transform: translateX(0) rotate(45deg);
}
/* Footer */
.fancy-04 #footer .footerIcons {
    border-radius: 100%;
    border: 1px solid #e2cc98;
    background: #e2cc98;
    padding: 5px;
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    transition: background .2s linear, color .2s linear;
    margin-right: 20px !important;
}
.fancy-04 #footer .footerIcons:hover,
.fancy-04 #footer .footerIcons:focus {
    background: transparent;
}
.fancy-04 #footer .footerIcons:hover i,
.fancy-04 #footer .footerIcons:focus i {
    color: #e2cc98 !important;
}
.bottom-footer {
    border-top: 1px solid #8585854d;
    margin-top: 60px !important;
    padding-top: 30px;
}
.footer-logo {
    height: 80px;
    width: 100px;
}
.powered_by_box_js {
    border: 1px solid #e1e1e1;
}
@media(max-width:767px){
    .footer-right-container {
        align-items:normal !important;
    }
    .fancy-04 .masthead-container #mobileLogo img {
        max-width: 9vh;
    }
}