@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {font-family: 'aeonikregular'; width:100%; height:100%;}
ol, ul {list-style: none;}
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
h6,h5,h4,h3,h2,h1{ margin:0; font-family: 'aeonikbold'; font-weight:normal;}
img{ border:none;}
div{display:flow-root; box-sizing: border-box;}
.clear{ clear:both;}
.container{position:relative; margin:0 auto; width:1200px;}
:root{--text-color:#f5f5f5; --default-fontsize:16px; --footer-textcolor:#b7b7b7; --white-color:#ffffff; --red-color:#ec2327; --heading-color:#191919; --bold-font:font-family:'aeonikbold'; --btn-hover:#e5585b;}


/*------Header Section-------*/
header{  position: absolute; left: 0; top: 0; width: 100%; z-index: 500;  }
header .container{display: flex; flex-direction: row; justify-content:space-between; align-items: center; }
#logo{ width:181px; height:82px;  margin:29px 0;}
#logo img, figure img{ width: 100%; height: 100%;}
.topicon-box{  font-size:14px;  margin:41px 0; display: flex; flex-direction: row; justify-content: space-between; color: var(--white-color); align-items: center; }
.topicon-box i{ font-size: 23px; margin-right: 10px;}
.topicon-box h2 a{ font-size:20px; color: var(--white-color); font-family: var(--bold-font); }
#talk-btn{ background-color: var(--red-color); color: var(--white-color); text-align: center; padding: 10px 20px; font-size: 14px; box-sizing: border-box; border-radius: 5px; align-items: center;}
#talk-btn:hover{ background:var(--btn-hover);}
nav{display: flex;justify-content: flex-end;align-items: center;}
.links-container{height: 100%;width: 100%;display: flex;flex-direction: row;align-items: center;  margin-right: 90px;}
nav a{display: flex;align-items: center;font-size: 17px; color: var(--white-color); margin: 0 17px; padding: 10px 0;}
nav a:hover{text-decoration: underline;}
nav .home-link{margin-right: auto;}
nav svg{fill: var(--text-color);}
#sidebar-active{display: none;}
.open-sidebar-button, .close-sidebar-button{display: none;}
.textline{ border-bottom: var(--white-color) solid thin;}
/*------Header Section End-----*/


/*banner section*/
#banner{ position:relative;}
.rslides {position: relative;list-style: none;overflow: hidden;width: 100%; padding: 0;margin: 0 0 100px 0;z-index: 0;}
.rslides li {position: relative;display: none;width: 100%;left: 0;top: 0;}
.rslides img {display: block; height: 100%;width: auto;border: 0;width: 100%;}
.bannercaption {width: 45%; box-sizing: border-box;font-size: 20px;position: absolute;color: var(--text-color); bottom: 10%; left: 5%;}
.bannercaption h1{ font-size: 72px;  color: var(--white-color); line-height: 68px; text-transform: capitalize;}
.bannercaption p{font-size: 21px; margin: 30px 0 0 0; }
/*banner section end*/

/*content part*/
#about-cnt{ width: 880px; margin: 0 auto; text-align: center; font-size: 3.3vw; line-height: 58px;}
#about-cnt span{ color: var(--red-color);}
#service{ background: #fff7f7; padding: 120px 0; text-align: center; margin: 108px 0 0 0;}
#service-list{ display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
#service h1{ color:#fbe3e3; font-size: 131px; margin: 0 0 -20px 0; line-height: 100px;}
#service p{ font-size: 24px; color: #935d5d;}
#service-slide{ width: 100% !important;}
#service-slide li{ float: left; margin: 0 28px 0 0;}
.next{ width:19px; height:31px; position: absolute; right:-30px; top: 65%; }
.prev{  width:19px; height:31px; position: absolute;  left: -35px; top: 65%;}
.next i, .prev i{ font-size: 26px; color: #484848;}
.next i:hover, .prev i:hover{ color: var(--red-color);}
figure{ width: 380px; height: 343px; border-radius: 8px; overflow: hidden; position: relative; margin: 62px 0 0 0;}
figure img{-webkit-transition: 0.6s;-moz-transition: 0.6s;-o-transition: 0.6s;-ms-transition: 0.6s;transition: 0.6s; width:100%; height:100%;}
figure:hover img{ transform:scale(1.1) rotate(5deg);}
figcaption{ position: absolute; display: flex; flex-direction: column; left: 0; top: 153px; background: url(../images/bg.png) repeat; width: 100%; color: var(--white-color); height: 800px; box-sizing: border-box; padding: 148px 60px 0 60px; align-items: center; line-height: 23px; transition: 0.6s;}
figcaption h2{ font-size: 21px; margin: 0 0 26px 0;}
figcaption a{ background: var(--red-color); color: var(--white-color); padding: 9px 26px; font-size: 14px; box-sizing: border-box; border-radius: 8px; margin: 27px 0 0 0;}
figcaption a:hover{ background: var(--btn-hover);}
figure:hover figcaption{ top: -50px;}
#welcome{background: #d41c1f url(../images/techlines.png) no-repeat left top; padding: 117px 0; }
#welcome .container{display: flex; justify-content: space-between; flex-direction: row;}
#welcome-headingcover{  width:892px; display: flex; flex-direction: column; color: #ffffff; font-size:19px;}
#welcome-headingcover p a{ font-size:43px;  margin:53px 0; color: var(--white-color); display: block;}
#welcome-headingcover p a:hover{ text-decoration: underline;}
#welcome-headingcover span{ font-size: 24px; }
#about-img { margin-bottom: 47px;}
#about-img img{ width: 100%;}
#welcome-headingcover p#cnt{ font-size: 20px; line-height: 34px; margin: 0;}
#couts{ border-left:#db4043 solid thin; padding-left: 50px; color: var(--white-color); padding-right: 20px;}
#couts div{ border-bottom: #db4b4e solid thin; text-align:center; padding: 0 0 70px 0; margin-bottom: 70px; font-size: 18px; line-height: 56px;}
#couts h1{ font-size:71px;}
#couts div:last-child{ border: none; margin-bottom: 0; padding-bottom: 0;}
#location{ margin: 117px 0 0 0;}
#location-mrgn{ margin-top: 71px;}
#location h1{ font-size: 54px;}
#location-map{ width: 732px; height: 500px; margin: 60px 0 0 0;}
#location-map iframe{ width: 100%; height: 100%;}
#qater{ position: absolute; right: -47px; top: 0;}
#enquiry{ background:url(../images/repair.jpg) no-repeat left top #ffefef; background-size: 50% auto; margin: 146px 0 0 0;}
#enquiry .container div{ float: right; display: flex; flex-direction: column; margin: 0 30px; width: 452px; align-items: flex-start; justify-content: center; height: 668px;}
#enquiry h1{ font-size: 45px;}
#call{ color: var(--red-color); font-size: 36px; text-decoration: underline;   font-family: 'aeonikbold'; margin: 58px 0 0 0;}
#enquiry span{ margin: 30px 0; font-size: 17px; text-transform: uppercase;}
#contact-btn{ background-color: var(--red-color); color: var(--white-color); text-align: center; padding: 19px 30px; font-size: 14px; box-sizing: border-box; border-radius: 8px; text-transform: uppercase; }
#contact-btn:hover{ background: var(--btn-hover);}
/*content part end*/

/*innerpage content*/
#page-title {padding: 222px 0 96px 0; width: 100%;margin: 0 0 137px 0;background: url(../images/pagetitlebg.jpg) no-repeat top center;box-sizing: border-box;background-size:contain; display:flex; justify-content: center; background-attachment: fixed; color: var(--white-color); text-align: center; font-size: 18px;}
#page-title h1 {color: #FFFFFF;font-size: 50px;;text-align: center; margin: 0 0 14px 0; text-transform: capitalize;}
#content-cover{ font-size: 17px; color:#2e2e2e; margin: 136px 0 100px 0; line-height: 30px;}
#about-desc{ display: flex; flex-direction: column; align-items: center; padding: 0 35px; font-size: 18px; text-align: center; }
#about-desc span{ font-size: 24px; color: var(--red-color); text-align: center;}
#about-desc h2{ font-size: 35px; margin: 44px 0; line-height: 42px; text-align: center;}
#about-desc #couts{ background: #e3e3e3; display: flex; flex-direction: row; padding: 44px 30px; border:none; width: 100%; justify-content:space-around; border-radius: 20px; margin: 63px 0 0 0; color: var(--heading-color);}
#about-desc #couts div{ border: none; padding: 20px 0; margin-bottom: 0; display: flex; margin: 16px 0 0 0;  flex-direction: column; padding: 0;}
#about-desc p{ margin: 20px 0;}
#about-desc img{ width: 100%;}
#content-cover #service-list{ justify-content: center;}
#content-cover #service { background: none; margin: 0; padding: 0;}
#content-cover figure:hover figcaption{ top: 281px;}
#content-cover figure{ height: 341px; margin: 0 5px 67px 5px;}
#content-cover figcaption{ background: var(--white-color); position: absolute; left: 0; top: 272px; padding: 20px 32px; color:var(--red-color); height: 63px; align-items: flex-start;  text-align: center; box-sizing: border-box; width: auto;}
#content-cover figcaption h2{ margin-bottom: 0; font-size: 18px;}
#service-head{font-size: 34px; text-align: center; margin: 42px 0 45px 0; color: var(--red-color);}
#getin{ text-align:center; font-size:21px; color:#172b3a; line-height:56px;}
#getin h2{ font-size:34px;}
.contact-frm{ color:#dedede; width:830px; margin:38px auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-frm span{ color:#F00; font-size:14px;}
.contact-frm input{ width:100%; border:none; font-family: 'aeonikregular'; padding:20px 22px; box-sizing:border-box; outline:none; color:#364954;font-size:14px; border:#c1c1c1 solid thin; border-radius: 9px;}
.contact-frm textarea{ width:100%; border:none;padding:12px 23px; box-sizing:border-box; outline:none;  color:#364954; height:140px; margin:0px 0 39px 0; overflow:hidden; resize:none; font-size:14px;  font-family: 'aeonikregular'; border:#c1c1c1 solid thin; border-radius: 9px;}
.contactfrm-cover{ width:395px; height:88px; text-align:left; display: flex; flex-direction: column; justify-content: space-between;}
.contact-frm input.captha{ width: 150px;}
.contact-frm .frmsubmit{margin-top:0; background:var(--red-color); color:#FFF; padding:18px 0; cursor:pointer; font-size:14px; border-bottom:none; font-weight: bold; letter-spacing: 2px; border: none;}
.contact-frm .frmsubmit:hover{background:var(--btn-hover);}
#mapcnt{ width:100%; height:430px; clear:both;}
#mapcnt iframe{ width:100%; height:100%;}
#contactmain-cover{  text-align:center;padding:68px 0;background:var(--heading-color);  color: var(--white-color);}
#contactmain-cover .container{ display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;}
.contact-detailmain{ line-height:32px;  color:#FFF; font-size:17px;}
.contact-detailmain a{ color:#FFF;}
.contact-detailmain span{ display:block; color:#c9c9c9; font-size:16px; margin:5px 0;}
.contact-detailmain i{ font-size: 31px; color: #666666;}
.contact-detailmain:nth-child(even){ border-left: #424242 solid thin; border-right: #424242 solid thin; padding: 0 79px;}
#mobilesrvs{ display: flex; flex-direction: row; justify-content: space-between; margin: 60px 0 0 0;}
#mobilesrvs h1{ font-size: 28px; color: var(--red-color);}
#mobilesrvs div{ width: 893px; display: flex; flex-direction: column;}
#servicemaincnt{  display: flex; flex-direction: column;}
#servicemaincnt strong, #visacnt strong{ margin: 34px 0 17px 0; font-size: 17px;}
#servicemaincnt ul li,  #visacnt ul li{ position: relative; padding: 0 0 0 27px;}
#servicemaincnt ul li::after, #visacnt ul li::after{ position: absolute; left: 0; top: -15px; color: var(--red-color);  content: "."; font-size: 49px;}
#servicemaincnt ul{ margin: 0 0 30px 0;}
#computerhd{ font-size: 28px; margin: 30px 0; color: var(--red-color);}
#aone-visaimg{ float: left; line-height: 0; }
#aone-visacnt{ background: #f1f1f1; padding: 50px; display: flex; flex-direction: column; float: left; width: 810px;}
#aone-visacnt h1{ font-size: 24px; margin: 0 0 20px 0; color: var(--red-color);}
#visacnt{  display: flex; flex-direction: row; margin-bottom: 113px;}
#dubai-visit{ background: url(../images/dubaivisit.jpg) no-repeat; background-size: cover; height: 400px; display: flex; align-items: flex-end; color: var(--white-color); line-height: 26px; margin: 113px 0; }
#dubai-visit div{ background:rgba(255, 255, 255, 0.7); width: 100%; padding: 23px 42px; color: #000000; backdrop-filter: blur(2px);}
#dubai-visit h1{ font-size:24px; margin-bottom: 17px; color: var(--red-color); }
#oman-visit{ background: url(../images/omanvisa.jpg) no-repeat; background-size: cover; height: 400px; display: flex; align-items: flex-end; color: var(--white-color);  line-height: 26px; margin-bottom: 113px;}
#oman-visit h1{ font-size:24px; margin-bottom: 17px; color: var(--red-color); }
#oman-visit div{ background: rgba(255, 255, 255, 0.8); padding: 28px 47px; width: 100%; color: #000000; backdrop-filter: blur(2px);}
#sertificate-img{ display: flex; flex-direction: row-reverse;  background: url(../images/certificate-attestation.jpg) no-repeat; height: 289px; background-size: cover; color: var(--white-color); margin-bottom: 113px;}
#sertificate-img div{ width: 417px; padding: 60px 25px; color: #000000;}
#sertificate-img div h1{ font-size: 24px; margin-bottom: 20px; color: var(--red-color);}
#typingcall{ background: var(--red-color); padding: 20px 30px; color: var(--white-color); display: flex; flex-direction: column; float: right; text-align: center; font-size: 21px; border-radius: 8px; margin: 0 0 0 20px;}
#typingcall span{ font-size: 17px; margin: 3px 0; }
#typingcall a{ color: var(--white-color);}
#typingcall i{ margin-bottom: 5px;}
/*innerpage content end*/

/*footer section*/
footer{ background:#1e1d1d; padding:91px 0 39px 0;   color:var(--footer-textcolor); position: relative; line-height: 28px; overflow: hidden;}
footer::after{ content: "Unipro"; position: absolute; right: -65px; color: #141313; font-size: 227px; text-transform: uppercase;   font-family: 'aeonikbold'; bottom: 38px;}
#footertop{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
#footertop p{ font-size: 27px; width: 323px; color: #FFF; margin: 0 50px 0 0; line-height:42px;}
#line{ width:100%; height:1px; background:#4a4a4a; margin:58px 0; z-index: 300; position: relative;}
.bottom-contact{ display: flex; flex-direction: column;  font-size: 15px;}
.bottom-contact h4{ color:#ffffff; font-size:19px; margin-bottom: 28px;}
#social-top{ display: flex; flex-direction: row;}
#social-top a{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: #645c5c solid thin; border-radius: 100%; margin: 0 8px 0 0; transition: 0.5s; color: var(--white-color);}
.mail{ text-decoration: underline; color:#a4a4a4; margin-top: 32px;}
#facebook:hover{background: #0065f7;}
#insta:hover{background: linear-gradient(90deg,rgba(253, 0, 154, 1) 0%, rgba(254, 81, 5, 1) 50%, rgba(255, 191, 1, 1) 100%);}
#ticktok:hover{background: #000000;}
.call{ color: #FFF; font-size: 20px; margin: 12px 0 0 0;}
ul.botomlinks{ list-style:none; padding:0; position:relative; }
ul.botomlinks li a{  color:#a4a4a4; font-size:15px; display: block; margin: 0 0 6px 0;}
ul.botomlinks li a:hover{ color:#8d8d8d;}
#copyrt{font-size:15px;  float:left;}
#address{ width: 210px;}
#powerd{ float: right; position: relative; z-index: 500;}
#powerd a{ color: var(--white-color); }
/*footer section end*/

@media (max-width:1200px){
.container{ width:992px;}
#about-cnt, #location-map, #footertop p{ width: 100%;}
#qater, footer::after{ display: none;}
figure{ width: 319px; height: 284px;}
figcaption{ padding: 148px 20px 0 20px; top: 90px;}
figure:hover figcaption{ top: -100px;}
#welcome-headingcover{ width: 692px;}
#enquiry .container div{ width: 362px;}
#footertop p{ margin: 0 0 50px 0;}
#page-title{ padding: 201px 0 80px 0;}
#content-cover figure{ height: 285px;}
#content-cover figcaption{ top: 219px;}
#content-cover figure:hover figcaption{ top: 226px;}
#other-service{ width: 229px; padding: 37px 30px;}
#mobilesrvs div{ width: 833px;}
#service-slide li{ margin: 0 18px 0 0;}
}



@media (max-width:992px){
.container{ width:768px;}
#talk-btn{display: none;}
#contactmain-cover .container, #visacnt{ flex-direction: column;}
.contact-frm, #servicemaincnt, #other-service, #other-service a, #aone-visacnt, #visacnt, .bannercaption{ width: 100%;}
.links-container{  flex-direction: column;align-items: flex-start;position: fixed;top: 0;right: -100%;z-index: 10;width: 250px;
margin-right: 0;background-color: var(--red-color);box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);transition: 0.75s ease-out;}
nav a{box-sizing: border-box;height: auto;width: 100%;padding: 13px 30px;justify-content: flex-start;}
.open-sidebar-button, .close-sidebar-button{padding: 20px;display: block; cursor: pointer; color: var(--white-color); font-size: 23px;}
#sidebar-active:checked ~ .links-container{right: 0;}
#sidebar-active:checked ~ #overlay{height: 100%;width: 100%;position: fixed;top: 0;left: 0;z-index: 9;}
.open-sidebar-button{ margin-left: 260px; padding: 0;  }
.bannercaption, #enquiry .container div{ line-height: 25px;}
figure{ width: 355px; height: 316px;}
figcaption{ top: 120px;}
#couts{ padding-right: 0;}
#welcome-headingcover{ width: 505px;}
#enquiry{ background-image: none;}
#enquiry .container div{ margin: 0; height: auto; align-items: center; text-align: center; padding: 80px 0; width: 100%;}
#enquiry h1{ line-height: 57px;}
#page-title{ background-attachment:scroll; background-size: cover;}
#content-cover figure.service-large{ width: 718px; height: 481px;}
#content-cover .service-large  figcaption{ top: 410px;}
#content-cover figure:hover.service-large figcaption{ top: 416px;}
.contactfrm-cover{ width: 369px;}
.contact-detailmain:nth-child(2n){ border-top: #424242 solid thin; border-bottom: #424242 solid thin; border-left: none; border-right: none; margin: 50px 0; padding: 50px 0;}
#other-service{ margin: 80px 0 0 0;}
#mobilesrvs div{ width: 613px;}
#service-slide li{ margin: 0 30px 0 0;}
.bannercaption h1{ font-size: 50px; line-height: 50px;}
}



@media (max-width:768px){
.container{ width:448px;}
#welcome .container, #footertop, #about-desc #couts, .contact-frm, #mobilesrvs{ flex-direction: column;}
#welcome-headingcover, #address, .contactfrm-cover, #mobilesrvs div, #aone-visaimg img, #typingcall{ width: 100%;}
.topicon-box{ display: none;}
.open-sidebar-button{ margin-left: 0;}
#logo{ width: 150px; height: 68px;}
.bannercaption{  text-align: center; left: 0;}
.bannercaption p{ margin-top: 6px;}
#about-cnt{ font-size: 28px; line-height: 46px;}
#service h1{ font-size: 90px;}
figure{ width: 448px; height: 400px;}
figcaption{ top: 210px;}
figure:hover figcaption{ top: -50px;}
#welcome .container{ text-align: center;}
#couts{ padding: 0; border: none;}
#couts div{ margin: 50px 0 0 0; padding-bottom: 50px;}
#location-mrgn{ margin-top: 0;}
#location h1{font-size: 8vw; text-align: center;}
#enquiry h1{ font-size: 40px;}
.bottom-contact{ margin: 29px 0;}
#powerd{ float: left;}
.bottom-contact h4{ margin-bottom: 15px;}
#line{ margin: 38px 0;}
#page-title h1{ font-size: 43px;}
#page-title{ padding: 161px 0 50px 0;}
#about-desc #couts div, #mobilesrvs h1{ margin: 20px 0;}
#about-desc h2{ font-size: 29px;}
#couts h1{ font-size: 62px;}
#about-desc{ padding: 0;}
#typingcall{ margin-bottom: 38px;}
#content-cover figure.service-large{ width: 448px; height: 263px;}
#content-cover .service-large  figcaption{ top: 196px;}
#content-cover figure:hover.service-large figcaption{ top: 200px;}
#content-cover figure{ height: 399px;}
#content-cover figcaption{ top: 328px;}
#content-cover figure:hover figcaption{ top: 340px;}
#sertificate-img{ background-position: -360px;}
.bannercaption h1{ font-size: 32px;}
}



@media (max-width:448px){
.container{ width:300px;}
#logo{ margin: 9px 0; height: 57px; width: 126px;}
nav a{ font-size: 15px;}
.links-container{ width: 190px;}
.bannercaption p{ font-size: 13px;}
.bannercaption{ bottom: 27px; }
#about-cnt{ font-size: 22px; line-height: 39px;}
#service h1{ font-size: 64px; line-height: 74px;}
#service p{ font-size: 18px;}
figure{ width: 300px; height: 267px;}
figure:hover figcaption{ top: -100px;}
#service{ padding: 80px 0;}
#welcome-headingcover p a{ font-size: 34px;}
#couts h1{ font-size: 54px;}
#location-map{ height: 300px;}
#enquiry h1, #page-title h1{ font-size: 30px;}
#call{ font-size: 28px;}
#content-cover figure.service-large{ width: 300px; height: 176px;}
#content-cover .service-large  figcaption{ top: 119px;}
#content-cover figure:hover.service-large figcaption{ top: 121px;}
#content-cover figure{ height: 267px;}
#content-cover figcaption{ top: 210px; padding: 16px 18px; height: 54px;}
#content-cover figure:hover figcaption{ top: 220px;}
#content-cover figcaption h2{ font-size: 17px;}
#mobilesrvs, #aone-visaimg{ margin: 0;}
#mobilesrvs h1, #computerhd{ font-size: 24px;}
#aone-visacnt{ padding: 37px;}
#servicemaincnt ul li, #visacnt ul li{ line-height: 24px; margin-bottom: 10px;}
#sertificate-img{ height: auto;}
#sertificate-img{ background-position: -620px;}
.bannercaption h1{ font-size: 23px;}
.bannercaption p{ font-size: 15px;}
.bannercaption{ line-height: 0;}
#service h1{ margin-bottom: 0;}
#getin{ line-height: 35px;}
#getin h2{ margin-bottom: 30px;}
}