@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
*{box-sizing: border-box;font-family: "Roboto Condensed", sans-serif;}
body{margin:0;padding:0;box-sizing: border-box;width: 100%;overflow-x: hidden;min-height: 100vh;background-color:#fff;}
html{margin:0;padding:0;box-sizing: border-box;width: 100%;overflow-x: hidden;min-height: 100vh;}
a{text-decoration: none;color:#222;cursor:pointer;}
/* #104776 */
header{float:left;width: 100%;position:relative;height:140px;}
.logoArea{float:left;width: 280px;height:140px;background:linear-gradient(120deg, #082d4d 0%, #0a3b65 50%, #104776 100%);display: flex;align-items: center;justify-content: center;position:absolute;left:0;top:0;border-radius: 0 0 100px 0;box-shadow: 0 0 10px -2px #333;}
.logoArea a{float:left;width:65%;}
.logoArea a p{float: left;width: 100%;margin:5px 0 0;text-align: center;color:#fff;font-weight: 500;font-size:14px;}
.logoArea img{float:left;width:100%;}
.topMenu{float:left;width: 100%;padding:10px 10px 10px 300px;background-color:#5d6872;}
.tmSocial{float:left;max-width: 200px;}
.tmSocial a{float:left;width: auto;height: 20px;margin:5px 8px;}
.tmSocial a img{float:left;width: 100%;height: 100%;object-fit: contain;filter:invert(1);}
.tmContact{float:right;width: calc(100% - 200px);}
.tmContact a{float:right;width: auto;height: 20px;margin:5px 10px;line-height: 20px;color:#fff;}
.tmContact a img{float:left;width: 20px;height: 20px;object-fit: contain;margin:0 5px;filter:invert(1);}
.bottomMenu{float:right;width: auto;padding:8px 10px 8px 300px;}
.bottomMenu li{float:left;text-decoration: none;list-style: none;margin:5px 5px 0;padding:5px 10px 20px;font-weight: 400;font-size:16px;position:relative;}
.bottomMenu .menuService{color:#104776;font-weight: 500;}
.subMenu{float:left;position:absolute;left:0px;top:40px;width: 200px;background-color:#ffffff;box-shadow: 0 0 10px -2px #333;z-index:3;padding: 10px 20px;border-radius: 5px;display: none;}
.subMenu a{float:left;width: 100%;font-size:16px!important;margin:3px 0;}
.teklifAlBtn{float:left;padding:10px 20px;background-color: #104776;color:#fff;margin:0 5px 0 30px;letter-spacing: 0.6px;box-shadow: 0 0 7px -2px #555;transition:0.6s;}
.teklifAlBtn:hover{box-shadow: 0 0 10px 0 #444;}
.slideArea{float:left;width: 100%;height:calc(100vh - 140px);}
.slick-next:before, .slick-prev:before{font-size:40px;}
.slick-next{right:50px;z-index:3}
.slick-prev{left:50px;z-index:3;}
.slide{float:left;width: 100%;height:100%;position:relative;display: flex!important;align-items: center;}
.slideCover{float:left;width: 100%;height: 100%;position:absolute;left:0;top:0;background-color: #10477640;z-index:2;}
.slide img{float:left;position:absolute;left:0;top:0;width: 100%;height: 100%;object-fit: cover;}
.slide video{float:left;position:absolute;left:0;top:0;width: 100%;height: 100%;object-fit: cover;}
.slideContent{float:left;width: 45%;position: absolute;bottom:15%;z-index:3;color:#fff;margin:0 5%}
.slideContent h5{float:left;width:100%;font-size:48px;margin:10px 0;font-family: "Kalam", cursive;}
.slideContent p{float:left;width: 100%;font-size:32px;margin:10px 0;font-family: "Kalam", cursive;}
.slideContent a{float:left;padding:15px 30px;background-color: #104776;color:#fff;margin:20px 0 0;font-family: "Kalam", cursive;}
.serviceArea{float:left;width: 100%;display: flex;align-items: center;justify-content: center;padding:3% 5%;}
.saServices{float:left;width: 25%;height:250px;padding:2%;}
.saService{float:left;width: 100%;height: 100%;box-shadow: 0 0 10px -2px #444;position:relative;border-radius: 10px;overflow: hidden;transition:0.6s;}
.saServiceh3{float:left;width: 100%;position:absolute;bottom:20px;left:0;text-align: center;color:#fff;margin:0;z-index: 3;transition:0.6s;}
.sasCover{float:left;width:100%;height:100%;position:absolute;left:0;top:0;background: linear-gradient(0deg, #104776 0%, #10477660 20%, #10477640 66%, #10477620 100%);z-index: 2;}
.sasImage{float:left;width: 100%;height: 100%;position: absolute;left:0;top:0;object-fit: cover;}
.sasContent{float:left;position:absolute;left:0;top:0;width:100%;height:100%;padding:10px;background-color: #104776bb;z-index: 4;opacity: 0;transition:0.6s;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;}
.sasContent h4{float:left;width: 100%;color:#fff;font-size: 16px;font-weight: 600;text-align: center;margin:5px 0;}
.sasContent p{float:left;width: 100%;color:#fff;font-size: 14px;font-weight: 500;text-align: center;}
.saService:hover{box-shadow: 0 0 10px 0 #333;}
.saService:hover .sasContent{opacity: 1;}
.saService:hover .saServiceh3{opacity: 0;}

.aboutArea{float:left;width: 100%;padding:5% 0;position:relative;background-position: center;background-size:cover;background-attachment: fixed;}
.aaCover{float:left;width: 100%;height: 100%;position:absolute;left:0;top:0;background-color: #104776;filter:opacity(0.6);z-index:2;}
.aaContent{float:left;width: 100%;position: relative;z-index:3;}
.aacLeft{float:left;width: 45%;height:600px}
.aacLeft img{float:left;width: 100%;height: 100%;object-fit: cover;border-radius: 0 30px 30px 0;}
.aacRight{float:left;width: 54%;margin:0 0 0 1%;height: 600px;background-color: #ffffffbe;padding:5%;border-radius: 30px 0 0 30px;display: flex;justify-content: center;flex-direction: column;}
.aacRight span{float:left;width: 100%;color:#104776;font-weight: 600;font-size:20px;margin:10px 0 5px 0;}
.aacRight h1{float:left;width: 100%;margin:10px 0 20px;color:#222;font-weight: 600;letter-spacing: 1px;}
.aacRight p{float:left;width:100%;font-size:15px;margin:0 0 10px;}
.aacRight a{float:left;width:140px;padding:15px 0;background-color: #104776;color:#fff;margin:30px 0 0;text-align: center;}

.blogArea{float:left;width:100%;padding:3% 0;}
.blogArea span{float:left;width: 100%;text-align: center;color:#104776;font-size:20px;font-weight: 500;}
.blogArea h2{float:left;width: 100%;text-align: center;color:#222;font-size:42px;font-weight: 600;margin:10px 0 20px;}
.baBlogs{float:left;width: 33.3%;padding:1%;}
.baBlog{float:left;width: 100%;height:450px;position:relative;box-shadow: 0 0 10px -2px #444;transition: 0.6s;border-radius: 5px;overflow: hidden;}
.baBlog:hover{box-shadow: 0 0 10px 0 #222;transform: scale(1.02);}
.babCover{float:left;width: 100%;height:100%;background: linear-gradient(0deg, #104776aa 0%, #10477640 20%, #10477620 66%, #10477610 100%);position:absolute;left:0;top:0;z-index:2;}
.baBlogImg{float:left;width: 100%;height: 100%;position:absolute;left:0;top:0;object-fit: cover;}
.blogDate{float:left;position:absolute;right:10px;top:10px;background-color: #104776;padding:6px 10px 5px;border-radius: 10px;}
.blogDate img{float:left;width: 18px;height: 18px;object-fit: contain;filter:invert(1);}
.blogDate span{float:right;color:#fff;font-size:14px;margin:0;width: calc(100% - 28px);margin:0 0 0 10px;line-height: 20px;}
.blogContent{float:left;width: 100%;position:absolute;left:0;bottom:10px;color:#fff;padding:10px 20px;z-index: 3;}
.blogContent h3{float:left;width: 100%;margin:0 0 15px;}
.blogContent a{float:left;padding:8px 15px;background-color:#fff;border-radius: 5px;font-weight: 500;}

footer{float:left;width: 100%;padding:5%;background: linear-gradient(90deg, #082d4d 0%, #0a3b65 50%, #104776 100%);}
.footerLeft{float:left;width: 20%;color:#fff;}
.footerLeft p{float: left;width: 100%;font-size:14px;margin:20px 0 30px;}
.footerLogo{float:left;width: 200px;}
.flSocial{float: left;width: 100%;}
.flSocial a{float:left;width: 20px;height: 20px;margin:7px;}
.flSocial a img{float: left;width: 100%;height: 100%;object-fit: contain;filter:invert(1);}
.footerTabs{float:left;width: 45%;margin:0 7.5%;}
.footerTab{float:left;width: 23%;margin:0 5%}
.footerTab h5{float:left;width: 100%;color:#fff;font-size:16px;margin: 0 0 10px 0;font-weight: 600;letter-spacing: 1px;}
.footerTab a{float:left;width: 100%;color:#fff;font-size:15px;margin:3px 0;}
.footerContact{float:left;width: 20%;}
.footerContact h5{float:left;width: 100%;color:#fff;font-size:16px;margin: 0 0 10px 0;font-weight: 600;letter-spacing: 1px;}
.footerContact a{float:left;width: 100%;color:#fff;line-height: 19px;margin:5px 0;font-size:15px; }.footerContact a img{float:left;width: 18px;height: 18px;object-fit: contain;filter:invert(1);margin:0 7px 0 0;}

.pagesArea{float:left;width: 100%;padding:2% 5%;}
.pagesArea span{float:left;width: 100%;text-align: center;color:#104776;font-size:20px;font-weight: 500;}
.pagesArea h2{float:left;width: 100%;text-align: center;color:#222;font-size:42px;font-weight: 600;margin:10px 0 20px;}
.breadCrump{float:left;width: 100%;height:200px;padding:10px 5%;position:relative;background-size:cover;background-position: center;display: flex;align-items: center;justify-content: center;}
.breadCrump h1{float:left;width: 100%;position:relative;z-index:2;color:#fff;text-align: center;}
.bcCover{float:left;width: 100%;height:100%;position:absolute;left:0;top:0;background: linear-gradient(90deg, #4f575f90 0%, #10477690 100%);}
.bcContent{float:left;width: 90%;position:absolute;left:5%;bottom:10px;display: flex;align-self: center;justify-content: center;}
.breadCrump a{float:left;padding:5px 0;margin:0 5px;font-size:15px;font-weight: 400;line-height: 16px;color:#fff;}
.breadCrump span{float:left;padding:5px 0;margin:1px 5px;font-size:14px;font-weight: 500;line-height: 16px;color:#fff;}
.paPages{float:left;width: 25%;padding:1%;}
.paPage{float:left;width: 100%;height:300px;position:relative;box-shadow: 0 0 10px -2px #444;transition: 0.6s;border-radius: 5px;overflow: hidden;}
.paPage:hover{box-shadow: 0 0 10px 0 #222;transform: scale(1.02);}
.papCover{float:left;width: 100%;height:100%;background: linear-gradient(0deg, #104776aa 0%, #10477640 20%, #10477620 66%, #10477610 100%);position:absolute;left:0;top:0;z-index:2;}
.paPageImg{float:left;width: 100%;height: 100%;position:absolute;left:0;top:0;object-fit: cover;}
.pageContent{float:left;width: 100%;position:absolute;left:0;bottom:10px;color:#fff;padding:10px 20px;z-index: 3;}
.pageContent h3{float:left;width: 100%;margin:0 0 15px;}
.pageContent a{float:left;padding:8px 15px;background-color:#fff;border-radius: 5px;font-weight: 500;}

.pagesContent{float:left;width: 100%;margin:10px 0;}
.pagesContent h2{float:left;width: 100%;font-weight: 500;font-size:24px;text-align: center;margin:10px 0 20px;}
.pcPageImg{float:left;width: 1000px;margin:10px calc(50% - 500px);height:500px;object-fit: cover;border-radius: 10px;box-shadow: 0 0 10px -2px #444;transition: 0.6s;}
.pcPageImg:hover{box-shadow: 0 0 10px 0 #333;}
.pcContent{float:left;width: 84%;margin:-10% 8% 20px;background-color:#ffffffaa;box-shadow: 0 0 10px -2px #333;padding:10px 2%;border-radius: 10px;transition:0.6s;position:relative;}
.pcContent:hover{box-shadow: 0 0 10px 0 #222;}
.pcSpan{float:right;width:auto!important;position:absolute;right:20px;top:20px;font-size:16px!important;font-weight: 700!important;}

.servicesArea{float:left;width: 100%;padding:2% 5%;}
.servicesArea span{float:left;width: 100%;text-align: center;color:#104776;font-size:20px;font-weight: 500;}
.servicesArea h2{float:left;width: 100%;text-align: center;color:#222;font-size:42px;font-weight: 600;margin:10px 0 20px;}

.servicesContent{float:left;width: 100%;margin:10px 0;}
.servicesContent h2{float:left;width: 100%;font-weight: 500;font-size:24px;text-align: center;margin:10px 0 20px;}
.scPageImg{float:left;width: 1000px;margin:10px calc(50% - 500px);max-height:500px;object-fit: cover;border-radius: 10px;box-shadow: 0 0 10px -2px #444;transition: 0.6s;}
.scPageImg:hover{box-shadow: 0 0 10px 0 #333;}
.scContent{float:left;width: 94%;margin:10px 3%; background-color:#ffffffaa;box-shadow: 0 0 5px -2px #777;padding:10px 2%;border-radius: 10px;transition:0.6s;position:relative;}
.scContent:hover{box-shadow: 0 0 5px 0 #888;}
.scSpan{float:right;width:auto!important;position:absolute;right:20px;top:20px;font-size:16px!important;font-weight: 700!important;}
.serviceSlide{float:left;width: 100%;margin:10px 0;padding:10px;}
.sSlide{float:left;width: 100%;margin:5px;height: 220px;padding:10px;}
.sSlide img{float:left;width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}

.contactArea{float:left;width: 100%;padding: 3% 5%;}
.ctTabs{float:left;width: 100%;margin:0 0% 20px;}
.ctTab{float:left;width: 23%;margin:0;}
.ctTab img{float:left;width: 24px;height: 24px;object-fit: contain;margin:0 calc(50% - 12px);}
.ctTab p{float:left;width: 100%;text-align: center;font-weight: 500;}
.ctSocial{float:left;width: 31%;display: flex;align-self: center;justify-content: center;}
.ctSocial a{float:left;width: auto;height: 25px;margin:0 8px;}
.ctSocial a img{float:left;width: 100%;height: 100%;object-fit: contain;}
.ctFull{float:left;width: 90%;padding:2% 3%;margin:20px 5%;box-shadow: 0 0 10px -2px #999;border-radius: 10px;transition: 0.6s;}
.ctFull:hover{box-shadow: 0 0 10px 0 #888;}
.ctFull h2{float:left;width: 100%;text-align: center;font-weight: 500;font-size:28px;margin:0 0 30px;color:#104776;}
.ctForm{float:left;width: 48%;margin:0 2% 0 0;padding:10px 20px;border-radius:10px;box-shadow: 0 0 10px -2px #888;transition: 0.6s;height: 450px;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.ctForm:hover{box-shadow: 0 0 10px 0 #777;}
.ctForm h3{float:left;width: 100%;text-align: center;font-weight: 500;font-size:20px;color:#082d4d;}
.ctfArea{float:left;width: 46%;margin:2%;}
.ctfArea p{float:left;width: 100%;font-weight: 500;margin:0 0 5px;color:#0a3b65;}
.ctfArea input{float:left;width: 100%;padding:7px 10px;border:1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px -2px #ccc;transition: 0.6s;}
.ctfArea input:hover{box-shadow: 0 0 5px -2px #222;}
.ctfAreaFull{float:left;width: 96%;margin:2%;}
.ctfAreaFull p{float:left;width: 100%;font-weight: 500;margin:0 0 5px;color:#0a3b65;}
.ctfAreaFull textarea{float:left;width: 100%;padding:7px 10px;border:1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px -2px #ccc;transition: 0.6s;}
.ctfAreaFull textarea:hover{box-shadow: 0 0 5px -2px #222;}
.ctForm a{float:left;width:120px;padding:8px 0;background-color: #082d4d;color:#fff;border-radius: 5px;margin:15px calc(50% - 60px) 15px;text-align: center;}
.ctMap{float:left;width: 50%;height: 450px;box-shadow: 0 0 10px -2px #999;transition:0.6s;overflow:hidden;border-radius:10px;}.ctMap iframe{border-radius: 10px;}
.ctMap:hover{box-shadow: 0 0 10px 0 #777;}

.mobilMenu{float:left;position: fixed;width:350px;height:100vh;right:0px;top:0;background-color: #fff;box-shadow: 0 0 5px 1px #00000090;z-index:999;transition: 0.6s;}
.mobilMenu span{float:left;font-size:24px;position: absolute;left:20px;top:15px;font-weight: 600;cursor: pointer;}
.mmLogo{float:left;width:100%;padding:20% 80px 10% 80px;margin:10px 0 30px!important;}
.mmLogo img{float:left;width:100%;}
.mobilMenu a{float:left;width: 100%;text-align: center;margin:5px 0 10px 0;font-weight: 400;}
.mobilMenu .menuService{color:#104776;font-weight: 500;}
.mobilContact{float:left;width:100%;padding:10px 50px;margin:30px 0 0;}
.mobilContact a{float: left;width: 100%;margin: 10px 0 5px;font-size: 14px; font-weight: 500;line-height: 20px;}
.mobilContact a img{float:left;width: 20px;margin:0 calc(50% - 10px) 5px;}
.mobilMenuBtn{display:none;float:right;width:40px;height:40px;margin:5px 5px 0 15px;}.mobilMenuBtn a{padding:0!important;margin:0!important;}.mobilMenuBtn img{float:left;width: 100%;}
.mobilSocial{float:left;width: 100%;display: flex;align-items: center;justify-content: center;margin:20px 0 0;}
.mobilSocial a{float:left;width: 100%;width:20px;height: 20px;margin:5px 8px;}
.mobilSocial a img{float:left;width: 100%;height: 100%;object-fit: contain;filter:invert(0);}


.galleryArea{float:left;width: 100%;padding:3% 5%;}
.galleryItems{float:left;width:20%;padding:2%;height:250px;}
.galleryItem{float:left;width:100%;height:100%;position:relative;display: flex;align-items: center;justify-content: center;}
.galleryItem img{float:left;width: 100%;height: 100%;object-fit: contain;}
.galleryItem p{float:left;width:100%;position:absolute;bottom:0;left:0;padding:10px 0;text-align: center;background-color: #0f4776cc;margin:0;color:#fff;border-radius: 10px 10px 0 0;}

@media screen and (max-width:1400px) {
    .bottomMenu li{font-size:15px;margin:5px 5px 0;padding:5px 5px 20px;font-weight: 400;}
}
@media screen and (max-width:1200px) {
    .pagesArea{padding:2%;}
    .paPages{width: 33.33%;}
    .pcContent{width: 92%;margin:-10% 4% 20px;}
    .pcPageImg{width: 100%;margin:10px 0;}
    .baBlogs{width: 50%;}
    .ctFull{width: 100%;padding:1% 2%;margin:20px 0;}
    .slideContent{width: 45%;}
    .galleryItems{width:25%;}
    .bottomMenu li{font-size:14px;margin:5px 3px 0;padding:5px 4px 20px;}
    .slideContent p{font-size:28px;}
}
@media screen and (max-width:1100px) {
    .scPageImg{width: 96%;margin:10px 2%;height:auto;}
    .scContent{width: 100%;margin:10px 0;height:auto;}
    .bottomMenu li{display: none;}
    .mobilMenuBtn{display: block;}
}
@media screen and (max-width:1000px) {
    .bottomMenu li{font-size:15px;margin:5px 7px 0;padding:5px 7px 20px;}
}
@media screen and (max-width:950px) {
    .bottomMenu li{font-size:15px;margin:5px 5px 0;padding:5px 5px 20px;}
}
@media screen and (max-width:900px) {
    .paPages{width: 50%;}
    .pcContent{width: 96%;margin:-10% 2% 20px;}
    .baBlogs{width: 90%;margin:10px 5%;}
    .ctTab{width: 50%;}
    .ctSocial{width: 50%;padding:30px 0;}
    .ctFull h2{margin:15px 0;}
    .ctForm{height: auto;display: block;width: 96%;margin:0 2% 20px 2%;}
    .ctMap{height: 400px;width: 96%;margin:0 2% 10px;}
    .slideContent{width: 55%;}
    .slick-next:before, .slick-prev:before{font-size:30px;}
    .slick-next{right:30px;z-index:3}
    .slick-prev{left:30px;z-index:3;}
    .serviceArea{display: block;}
    .saServices{width: 80%;margin:10px 10%;height: 400px;}
    .bottomMenu li{display: none;}
    .mobilMenuBtn{display: block;}
    .tmSocial a{margin:5px;}
    .tmContact a{font-size:0px;margin:5px 3px}
    .footerLeft{width: 320px;margin:20px calc(50% - 160px);}
    .footerLogo{width: 160px;margin:10px calc(50% - 80px);}
    .footerLeft p{margin:15px 0;}
    .flSocial{display: flex;align-items: center;justify-content: center;}
    .footerTabs{float:left;width: 70%;margin:10px 15%;display: flex;align-items: center;justify-content: center;}
    .footerTab{width: 100;}.footerTab:first-child{margin:0 5% 0 0;}.footerTab:last-child{margin:0 0 0 5%;}
    .footerContact{width: 240px;margin:30px calc(50% - 120px) 20px;}
    .galleryItems{width:33.3%;}
    .slideContent p{font-size:24px;}
}
@media screen and (max-width:620px) {
    .paPages{width: 100%;}
    .baBlog{height: 350px;}
    .ctTab{width: 90%;margin:10px 5%;}
    .ctSocial{width: 90%;margin:10px 5%;padding:10px 0;}
    .ctMap{height: 350px;}
    .slideArea{height: calc(60vh - 140px);}
    .slideContent{width: 90%;margin:0 5%;}
    .saServices{width: 96%;margin:10px 2%;height: 300px;}
    header{height: 80px;}
    .logoArea{width:180px;height: 80px;display: block;padding:20px 10px;border-radius: 0 0 50px 0;}
    .logoArea a{width: 90%;margin:0 5%}.logoArea a p{font-size:10px;}
    .topMenu{padding:3px 3px 3px 185px}
    .bottomMenu{padding:3px 3px 3px 165px;}
    .tmSocial a{height: 17px;}
    .tmContact{width:calc(100% - 140px);}
    .bottomMenu{margin:0;}
    .teklifAlBtn{padding:5px 10px;margin:4px 5px;border-radius: 5px;}
    .mobilMenuBtn{width: 32px;height: 32px;margin:7.5px;}
    .footerTabs{display: none;}
    .footerContact{display: none;}
    .ctFull h2{font-size:24px;}
    .ctfArea{width:96%;}
    .slick-next:before, .slick-prev:before{font-size:30px;}
    .slick-next{right:14px;z-index:3}
    .slick-prev{left:4px;z-index:3;}
    .galleryItems{width:50%;}
    .slideContent p{font-size:20px;font-weight: 600;}
    .aacLeft{width:97.5%;height:250px;margin-right:2.5%;}
    .aacRight{width:97.5%;height:auto;margin:20px 0 20px 2.5%;}
}

@media screen and (max-width:450px) {
    .tmSocial a{height: 15px;margin:6px 4px;}
    .tmContact a{height: 16px;margin:5px 5px 0;}.tmContact a img{width:18px;height: 18px;margin:0;}
    .galleryItems{width:100%;height:200px;}
}
@media screen and (max-width:410px) {
    .tmSocial{display: none;}
    .tmContact{width: 100%;}
    .tmContact a{height: 20px;margin:5px 8px;}.tmContact a img{width:20px;height: 20px;margin:0;}
    .ctMap{height: 300px;}
    .galleryItems{height:230px;}
}
@media screen and (max-width:380px) {
    .galleryItems{height:250px;}
}