@charset "utf-8";
@font-face {
    font-family: 'Gill Sans Nova Bold';
    src: url('../fonts/GillSansNova-Bold.eot');
    src: url('../fonts/GillSansNova-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GillSansNova-Bold.woff2') format('woff2'),
        url('../fonts/GillSansNova-Bold.woff') format('woff'),
        url('../fonts/GillSansNova-Bold.ttf') format('truetype'),
        url('../fonts/GillSansNova-Bold.svg#GillSansNova-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gill Sans Nova';
    src: url('../fonts/GillSansNova-Medium.eot');
    src: url('../fonts/GillSansNova-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GillSansNova-Medium.woff2') format('woff2'),
        url('../fonts/GillSansNova-Medium.woff') format('woff'),
        url('../fonts/GillSansNova-Medium.ttf') format('truetype'),
        url('../fonts/GillSansNova-Medium.svg#GillSansNova-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif Ethiopic Bold';
    src: url('../fonts/NotoSerifEthiopic-Bold.eot');
    src: url('../fonts/NotoSerifEthiopic-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NotoSerifEthiopic-Bold.woff2') format('woff2'),
        url('../fonts/NotoSerifEthiopic-Bold.woff') format('woff'),
        url('../fonts/NotoSerifEthiopic-Bold.ttf') format('truetype'),
        url('../fonts/NotoSerifEthiopic-Bold.svg#NotoSerifEthiopic-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif Ethiopic';
    src: url('../fonts/NotoSerifEthiopic-Medium.eot');
    src: url('../fonts/NotoSerifEthiopic-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NotoSerifEthiopic-Medium.woff2') format('woff2'),
        url('../fonts/NotoSerifEthiopic-Medium.woff') format('woff'),
        url('../fonts/NotoSerifEthiopic-Medium.ttf') format('truetype'),
        url('../fonts/NotoSerifEthiopic-Medium.svg#NotoSerifEthiopic-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif Ethiopic Light';
    src: url('../fonts/NotoSerifEthiopic-Light.eot');
    src: url('../fonts/NotoSerifEthiopic-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NotoSerifEthiopic-Light.woff2') format('woff2'),
        url('../fonts/NotoSerifEthiopic-Light.woff') format('woff'),
        url('../fonts/NotoSerifEthiopic-Light.ttf') format('truetype'),
        url('../fonts/NotoSerifEthiopic-Light.svg#NotoSerifEthiopic-Light') format('svg');
    font-weight: lighter;
    font-style: normal;
    font-display: swap;
}

html, body {min-height:100%; max-height:100%;}
body {font-weight: normal;color:#000;margin:0;padding:0; background: #fff;font-family: 'Gill Sans Nova';overflow-x: hidden;}
html[lang="am"] body {font-family: 'Noto Serif Ethiopic';}

.saleme-left {background: #01387b;}
.about {background-color: #01387b; min-height: 100vh;color: #fff;padding: 60px 0 60px 60px;}
.aboutWomanPic {display: flex;align-items: center;height: 100%;position: relative;}
.aboutWomanPic img{width: 370px;position: absolute;right: 0;top: 0;}
.aboutTitle {background: #5191cd;width: max-content;padding: 0px 36px 20px 30px;font-size: 92px;font-weight: 900;position: relative;font-family: 'Gill Sans Nova Bold';margin-left: 55px;}
.aboutTitle span{display: block;font-weight: 500;font-size: 37px;font-family: 'Gill Sans Nova';margin-top: -34px;margin-left: 2px;}

html[lang="so"] .aboutTitle {font-size:72px;}
html[lang="so"] .aboutTitle span {font-size:30px;}

html[lang="am"] .aboutTitle {font-family: 'Noto Serif Ethiopic Bold';}
html[lang="am"] .aboutTitle span {font-family: 'Noto Serif Ethiopic';}

.aboutTitle img.q{position: absolute; right: -32px;height: 32px;bottom: 42px;}
.aboutText {font-size: 24px;line-height: 48px;padding: 0px 0px 20px 0px;margin-left: 55px;width: 100%;}
.aboutText p{padding-left: 30px;}
img.helloIMG {width: 100%;margin-bottom: 30px;}

.aboutLogos {overflow: hidden; text-align: center; padding-left: 30px;}
.aboutLogos a{background: #fff;display: inline-block;padding: 10px 20px;text-align: center;letter-spacing: 1px;position: relative;line-height: 10px;}
.aboutLogos a span{color: #666;font-size: 12px;}
.aboutLogos a img{height: 40px;display: block;margin: 10px auto 10px auto;}
.aboutLogos a:last-child{position:relative; left:-5px;}

.aboutLogosMobile {display: none;}
.aboutLogosMobile a{background: #fff;display: inline-block;padding: 10px 20px 10px 20px;text-align: center;line-height: 10px;}
.aboutLogosMobile a span{color: #666;font-size: 12px;letter-spacing: 1px;}
.aboutLogosMobile a img{height: 32px;display: block;margin: 10px auto 10px auto;}
.aboutLogosMobile a img[alt="ukaid"]{height: 40px;}
.aboutLogosMobile a img[alt="iom"]{margin-top: 15px;}


.saleme-right {background: #ffcb56;}
.lang {position: absolute;top: 8px;right: 45px;color: #fff;font-size: 18px; font-family: 'Gill Sans Nova';}
.lang a{color: #fff; padding: 15px;}


.langM {display: none; position: absolute;z-index: 99;top: 0;right: 15px;width: 34px;text-align: center;}
.langM a{display: block;border-bottom: 1px solid #fff;}
.langM img{height: 22px;margin: 5px;}
.langM span{font-size: 10px;position: absolute;margin-top: 28px;margin-left: -21px;}
.langM div{display: none;margin-top: 10px;}
.langM:hover div{display: block;border: 1px solid #fff;border-bottom: 0;}


.video {background-color:#5789C6; height: 60vh;padding: 60px;display: flex;align-items: center;justify-content: center;}
.video video {width: 100%;height: 100%;border: 10px solid #fff;border-radius: 10px;}
.video .videoContainer {width: 100%;border: 16px solid #fff;border-radius: 10px; display: block;}
.video .videoContainer img{width: 100%;}

.contact {background-color: #ffcb56; min-height: 40vh;color: #01387b;padding: 20px 30px;}
.contactTitle {font-size: 30px;text-transform: uppercase;font-weight: bold; font-family: 'Gill Sans Nova Bold';line-height: 30px;}
html[lang="am"] .contactTitle {font-family: 'Noto Serif Ethiopic';}
html[lang="so"] .contactTitle {font-size: 24px;}

.contactLogo {float: right;margin-top: 25px;}
.contactLogo img{width: 100%;}
.contactText {font-size: 22px;margin: 15px 0 20px 0;font-weight: 500;line-height: 35px;}
.contactTextMobile {display: none;}
.contactLinks {}
.contactLinks a{background: #01387b;color: #fff;text-align: center;overflow: hidden;display: block;float: left;border-radius: 5px;text-align: center;width: 100%;height: 100%;padding: 20px 20px 10px 20px;}
.contactLinks a img{height: 24px;display: block;margin: 0 auto 8px auto;}
.contactLinks a img.iconweb {margin-top: 2px;}
.contactLinks a span{font-weight: bold;font-family: 'Gill Sans Nova Bold';}
html[lang="am"] .contactLinks a span {font-family: 'Noto Serif Ethiopic Bold';}
.contactLinks a span.phone{font-size: 18px;}
.contactLinks a span.web{font-size: 18px;}
.contactLinks a span.map{font-size: 18px;}
.contactLinks a small{font-size: 8px; display: none;}

.contactLinks a span.phoneM{display: none;font-size: 18px;}
.contactLinks a span.webM{display: none;font-size: 18px;}
.contactLinks a span.mapM{display: none;font-size: 18px;}


html[lang="so"] .contactLinks a span.phoneM{font-size: 12px;margin-top: 2px;}
html[lang="so"] .contactLinks a span.webM{font-size: 12px;margin-top: 2px;}
html[lang="so"] .contactLinks a span.mapM{font-size: 12px;margin-top: 2px;}



@media screen and (max-width:1680px) {
    .about {padding: 60px 0;}
}


@media screen and (max-width:1600px) {
    .video .videoContainer {max-width: 640px;}
    .contactTitle {font-size: 28px;}
    html[lang="so"] .contactTitle {font-size: 22px;}
}

@media screen and (max-width:1440px) {
    .video .videoContainer {max-width: 100%;}
    .aboutText {font-size: 22px; line-height: 38px;/* width: 106%; */margin-left: 0;}
    .contactTitle {font-size: 22px;}
    html[lang="so"] .contactTitle {font-size: 20px;}
    .contactText {line-height: 20px;font-size: 20px;}
    .contactLinks a{padding: 10px 10px 5px 10px;}
    .aboutWomanPic img{/* width: 300px; */}
    .about {padding: 30px 0 30px 30px;}
    .aboutTitle {margin-left: 0;}
    
}

@media screen and (max-width:1366px) {
    .about {padding: 15px 0 15px 15px;}
    .aboutWomanPic img {/* width: 300px; */}
    .lang {top:0;}
    
    html[lang="so"] .contactText {line-height: 18px;}
    .aboutLogos {padding-left: 0;}
    .aboutLogos a {padding: 10px;}
    .aboutLogos a img {height: 32px;}
}
@media screen and (max-width:1280px) {
.aboutText {font-size: 20px; line-height: 30px;}
     .contactTitle {font-size: 18px;}
     html[lang="so"] .contactTitle {font-size: 14px;}
    .aboutWomanPic img { width: 300px; }
    .aboutTitle {font-size: 64px;padding: 0px 28px 15px 15px;}
    html[lang="so"] .aboutTitle {font-size: 64px;padding: 0px 28px 15px 15px;}
    .aboutTitle img.q {right: -20px; height: 20px; bottom: 20px;}

    
    
    .contactLinks a span.phoneM{display: block;}
    .contactLinks a span.phone{display: none;}

    .contactLinks a span.webM{display: block;}
    .contactLinks a span.web{display: none;}

    .contactLinks a span.mapM{display: block;}
    .contactLinks a span.map{display: none;}
}

@media screen and (max-width: 1200px) {
    .aboutTitle {font-size: 63px;padding: 0px 28px 15px 15px;}
    .aboutTitle span {font-size: 24px;margin-top: -28px;}
    html[lang="so"] .aboutTitle {font-size: 58px;padding: 0px 28px 15px 15px;}
    html[lang="so"] .aboutTitle span {font-size: 22px;margin-top: -20px;}
    .aboutTitle img.q {right: -20px; height: 20px; bottom: 20px;}
}

@media screen and (max-width: 1024px) {
    
    
    .aboutWomanPic img {position: absolute;}
    .aboutText p {padding-left: 15px;}
    .video .videoContainer img {max-height: inherit;}
    
    
}

@media screen and (max-width: 991px) {
    .lang {display: none;}
    .langM {display: block;}
    .video {height: auto; padding: 20px;}
    .video video {border: 5px solid #fff;}
    
    .video .videoContainer {border: 9px solid #fff;}
    .aboutLogos {display:none;}
    .about {overflow: hidden;min-height: 626px;}
    .aboutWomanPic img {position: absolute;}
    .aboutText {/* font-size: 24px; */ /* line-height: 44px; */padding: 20px;margin-left: 0; padding: 0px 40px 40px 0px;}

    .contactTitle {font-size: 18px;margin-bottom: 15px;line-height: 22px;text-align: center;}
    .contactText {line-height: 20px;width: 100%;order: 2;text-align: center;font-size: 16px;}
    .contactLinks {width: 100%;}
    .contactLinks a{padding: 10px 10px 5px 10px;}
    .contactLinks .col-4 {padding: 5px;}

    .contactText {display: none;}
    .contactTextMobile {display: block;text-align: left;line-height: 23px;}
    .contact {min-height: auto;padding: 20px;}
    .contactFlex {display: flex;flex-wrap: wrap;}
    .contactLogo {text-align:center;width: 100%;margin-top: 15px;}
    .contactLogo img {height: 120px; margin: 0 0 0 10px;width: auto;float: right;}
    .aboutLogosMobile {display: block;text-align: center;background: #fff;}

    
    .contactLinks {}
    .contactLinks a{}
    .contactLinks a img{float: left;margin: 0;height: 20px;}
    .contactLinks a span {position: relative;top: -4px;}

    .about .col-7 {position: relative; top: 30px; left: 90px;}
    .about .col-5 {position: relative; right: 100px;}

}

@media screen and (max-width: 800px) {
    .about .col-7 {position: relative; top: 30px; left: 20px;}
    .about .col-5 {position: relative; right: 40px;}
}

@media screen and (max-width: 680px) {
    
    img.helloIMG {margin-bottom: 15px;}
    .about .col-7 {position: relative; top: 0px; left: 0px;}
    .about .col-5 {position: relative; right: 0px;}
    
    
}

@media screen and (max-width: 540px) {
    .about {min-height: 480px;}
    .aboutWomanPic img {width: 230px;}
    .aboutTitle { font-weight: 600; padding: 0px 28px 15px 15px;margin-left: 0;margin-top: 0px;}
    html[lang="so"] .aboutTitle { font-size: 54px;font-weight: 600; padding: 0px 28px 15px 15px;margin-left: 0;margin-top: 0px;}
    .aboutTitle img.q{ /* right: -12px; */  /* height: 12px; */ /* bottom: 12px; */}
    .aboutText {/* font-size: 20px; */ line-height: 28px;/* padding: 10px 30px 10px 0px; */margin-left: 0;}
}

@media screen and (max-width: 480px) {
    
    .aboutTitle { font-size: 54px; font-weight: 600;line-height: 28px;padding: 15px 28px 11px 15px;margin-left: 0;margin-top: 0px;}
    .aboutTitle span{ font-size: 18px !important;  margin-top: 10px !important;}
    html[lang="so"] .aboutTitle { font-size: 42px; font-weight: 600;line-height: 28px;padding: 15px 28px 11px 15px;margin-left: 0;margin-top: 0px;}
    html[lang="so"] .aboutTitle span{ font-size: 16px !important;  margin-top: 3px !important;}
    .aboutTitle img.q{ right: -12px;  height: 12px; bottom: 12px;}
   .aboutText {font-size: 16px; line-height: 22px;padding: 10px 30px 10px 0px;margin-left: 0;}
    html[lang="so"] .aboutText {font-size: 17px; line-height: 23px;padding: 10px 30px 10px 0px;margin-left: 0;}
}

@media screen and (max-width: 360px) {
    .about {min-height: 440px;}
    .aboutWomanPic img {width: 180px;}
    .aboutTitle { font-size: 32px; font-weight: 600;line-height: 28px;padding: 6px 10px 4px 5px;margin-left: 0;margin-top: 0px;}
    .aboutTitle span{ font-size: 18px !important;  margin-top: -3px !important;}
    html[lang="so"] .aboutTitle { font-size: 32px; font-weight: 600;line-height: 28px;padding: 6px 10px 4px 5px;margin-left: 0;margin-top: 0px;}
    html[lang="so"] .aboutTitle span{ font-size: 18px !important;  margin-top: -3px !important;}
    .aboutTitle img.q{ right: -12px;  height: 12px; bottom: 12px;}
    .aboutText {font-size: 18px; line-height: 22px;padding: 10px 20px 10px 0px;margin-left: 0;}
}

@media screen and (max-width: 320px) {
     .aboutText {font-size: 14px; line-height: 18px;padding: 10px 20px 10px 0px;margin-left: 0;}
    
}