/*====== Campion Lab Website Design By- HIfzur Rahman ======*/
body { font-family: 'Roboto'; font-size: 15px; background: #fff; }

* { box-sizing: border-box; }
.grid { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 { font-family: 'Reem Kufi', sans-serif; }

/* ==== Header section start ==== */

.header-top { background: #5c3b9f; }
.top-contact { color: #fff; padding: 12px 0; }
.top-contact span { margin-right: 20px; }
.top-contact span:last-child { margin-right: 0; }
.top-contact span a { color: #fff; font-size: 14px; }

.top-social-link { display: table; float: right; }
.top-social-link a { color: #fff; float: left; display: inline-block; height: 100%; width: 40px; text-align: center; padding: 12px 0; border-left: 1px solid #452b79; }
.top-social-link a:hover { background: #452b79; }
.top-social-link a:last-child { border-right: 1px solid #452b79; }

.header-main { background: #fff; box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.3); }
.logoBox { padding: 22px 0; }
.logoBox img { width: 250px; height: auto; }

.main-navSec { margin-bottom: 0px; }
.mainnavSec { padding: 0; }
.navbar-toggle .icon-bar { display: block; width: 35px; height: 5px; border-radius: 1px; background: #5c3b9f; }
.mainNav { float: right; margin-top: 32px; }
.mainNav li { margin-left: 50px; }
.mainNav li a { padding: 5px; color: #000; font-size: 14px; font-weight: bold; text-transform: uppercase; }
.mainNav li a:hover, .nav-active a { background: transparent;  }

.mainNav li a:before { content: "";  position: absolute; width: 0; background : #000; left: 45%; height: 2px; bottom: 0; transition: all .3s; opacity: 0.7; }
.mainNav li a:hover:before { width: 100%; left:0; }

/* ==== Header section end ==== */

.head-title { font-size: 30px; color: #000; text-transform: uppercase; font-family: 'Reem Kufi', sans-serif; text-align: center; font-weight: 500; margin-bottom: 20px; }


.main-banner { overflow: hidden; width: 100%; height: 525px; position: relative; background-image: url('../images/bg-1.jpg'); background-repeat: no-repeat; background-size: 100% 100%; } 
.bannerText { padding-top: 100px; }
.bannerText h1 { font-size: 60px; font-family: 'Reem Kufi', sans-serif; color: #191919; font-weight: 600;  }
.bannerLink { border: 3px solid #5c3b9f; color: #5c3b9f !important; border-radius: 0; font-size: 16px; font-weight: 600; min-width: 285px; padding: 12px 15px; position: relative; overflow: hidden; transition: all .6s; }
.bannerLink:hover { color: #fff !important; transition: all .6s; box-shadow: inset 295px 0px 0px 0pc #5c3b9f;  }

.techno-detailBox { position: relative; padding: 0; background: #5c3b9f; }
.techno-detail-content { height: 425px; background-image: url('../images/contentBox-bg-1.png'); background-repeat: no-repeat; background-size: 100% 100%; padding: 75px 75px 75px 100px; overflow: hidden; }

.techno-detailBox2 { position: relative; padding: 0; background: #0eb6f3; }
.techno-detail-content2 { height: 425px; background-image: url('../images/contentBox-bg-2.png'); background-repeat: no-repeat; background-size: 100% 100%; overflow: hidden; padding: 75px 100px 75px 75px;  }

.tech-contHed { font-size: 30px; font-family: 'Reem Kufi', sans-serif; color: #fff; font-weight: 500; text-align: center; text-transform: uppercase;  }
.tech-contText { color: #fff !important; font-size: 22px; text-align: center; }

.tech-contBtn-box { text-align: center; margin-top: 20px; }
.tech-contBtn { background: transparent; border: 3px solid #fff; color: #fff; border-radius: 0; font-weight: 600; font-size: 16px; min-width: 175px; padding: 8px 15px; }
.tech-contBtn:hover, .tech-contBtn:focus, .tech-contBtn:active { background: transparent; color: #fff; }


.featuredSec { padding: 50px 0; }
.feature-projectBox { border: 1px solid #e7e7e7; height: 380px; padding: 10px; }
.featProj-img { height: 175px; overflow: hidden;  }
.featProj-img img { width: 100%; height: 100%; }
.featProj-hed { font-size: 16px; color: #000; margin: 20px 0 10px; }
.featProj-text { font-size: 14px; color: #909090; line-height: 1.6em; }
.featProj-link { border: 1px solid #5c3b9f; color: #5c3b9f !important; border-radius: 0; font-size: 13px; font-weight: 600; min-width: 125px; padding: 8px 10px; position: relative; overflow: hidden; transition: all .6s; text-transform: uppercase; margin: 20px 0 0; }
.featProj-link:hover { color: #fff !important; transition: all .6s; box-shadow: inset 125px 0px 0px 0pc #5c3b9f; }


.offerSec { background: #0eb6f3; padding: 50px 0; }
.offerSec .head-title { color: #fff; }
.offerSub-hed { color: #fff; font-size: 18px; text-align: center; padding: 0 50px; font-style: italic; margin-bottom: 25px; }

.offerBox { height: 170px; background: #fff; border-radius: 5px; padding: 20px 15px;  }
.offer-hed { font-size: 18px; color: #000; position: relative; font-family: 'Reem Kufi', sans-serif; display: table; width: 100%; padding-top: 8px; padding-right: 35px; }
.offer-hed img { width: 40px; height: auto; position: absolute; right: 0; top: 2px; }
.offer-text { font-size: 14px; color: #909090; padding-top: 30px; line-height: 1.6em; }


.how-it-work { padding: 50px 0; }
.requir-logo { background: #9b59b6; width: 170px; height: 170px; border-radius: 50%; text-align: center; padding-top: 38px; margin: 0 auto; }
.requir-logo img { width: 65px; height: auto; }

.analysis-logo { background: #41c3ac; width: 170px; height: 170px; border-radius: 50%; text-align: center; padding-top: 50px; margin: 0 auto; }
.analysis-logo img { width: 70px; height: auto; }

.analysisBox { position: relative; }
.analysisBox:after { content: url(../images/repeat.png); top: 40%; position: absolute; left: -25px; }
.analysisBox:before { content: url(../images/repeat.png); top: 40%; position: absolute; right: -25px; }

  
.implementation-logo { background: #3498db; width: 170px; height: 170px; border-radius: 50%; text-align: center; padding-top: 45px; margin: 0 auto; }
.implementation-logo img { width: 70px; height: auto; }

.howWork-box h5 { font-size: 14px; text-align: center; text-transform: uppercase; padding: 10px 0; }
.requirTxt { color: #9b59b6; }
.analysisTxt { color: #41c3ac }
.implementationTxt { color: #3498db; }


.index-blogSec { padding: 25px 0 50px; }
.ind-blog-box { height: 225px; border: 1px solid #e7e7e7; padding: 10px; }
.indBlog-img { overflow: hidden; height: 205px; /*padding-right: 0;*/ }
.indBlog-img img { width: 100%; height: 100%; }
.indBlog-contrnt {  }
.blog-post-time span { color: #909090; font-size: 14px;font-style: italic; font-weight: 600; }
.blog-post-time span:last-child { margin-left: 25px; }
.blog-post-time i { color: #0eb6f3; font-size: 18px; vertical-align: middle; margin-right: 5px; }
.indBlog-hed { font-size: 16px; font-family: 'Reem Kufi', sans-serif; color: #000; padding: 12px 0; font-weight: 600; }
.indBlog-text { font-size: 14px; color: #909090; line-height: 1.6em; font-weight: 600; } 
.indBlog-btn-box {  }
.indBlog-btn { border: 1px solid #5c3b9f; color: #5c3b9f !important; border-radius: 0; font-size: 13px; font-weight: 600; min-width: 125px; padding: 8px 10px;
    position: relative; overflow: hidden; transition: all .6s; text-transform: uppercase; margin: 20px 0 0; }
.indBlog-btn:hover { color: #fff !important; transition: all .6s; box-shadow: inset 125px 0px 0px 0pc #5c3b9f; }




/* ====== Footer Section Start ====== */
.subscribe-sec { background: #5c3b9f; padding: 30px 0 25px; }
.subscribeText { font-size: 37px; color: #fff; font-family: 'Reem Kufi', sans-serif; margin: 0;  }
.subscribe-form { padding-top: 5px; }
.subscribe-form input { background: transparent; border: 1px solid #fff; color: #fff; border-radius: 0px; padding: 5px 15px; height: 42px; font-size: 13px; width: 390px !important; margin-right: 10px; }
.subscribe-form input:focus { border: 1px solid #fff; color: #fff; box-shadow: none; }
.subscribe-form input::-webkit-input-placeholder { color: #fff; }
.subscribe-form input::-moz-placeholder { color: #fff; }
.subscribe-form input:-ms-input-placeholder { color: #fff; }
.subscribe-form input::-moz-placeholder { color: #fff; }
.subscribe-form button { background: #fff; color: #5c3b9f !important; font-size: 13px; font-weight: 600; text-transform: uppercase; border-radius: 0px !important; min-width: 140px; padding: 11px; }
/* --- bottom footer --- */
footer { background: #292b33; padding: 45px 0 30px; color: #fff; }
.footer-logoSec {  }
.footer-logo {   }
.footer-logo img { width: 150px; height: auto; }
.footer-socialLink { padding: 25px 0 10px; }
.footer-socialLink span { margin-right: 15px; }
.footer-socialLink span i { font-size: 20px; color: #fff; }
.copyRight { font-size: 12px; padding: 10px 0 0; }
.footerHed { font-size: 18px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; }
.footerLink { padding: 0; margin: 0;  }
.footerLink li { list-style: none; margin-bottom: 10px; padding: 0; }
.footerLink li a { color: #fff; font-size: 14px; }

.contact-list { padding: 0; margin: 0; }
.contact-list li { list-style: none; margin-bottom: 10px; padding: 0; font-size: 20px; position: relative; word-break: break-all; padding-left: 30px; }
.contact-list li a { text-decoration: none; color: #fff; word-break: break-all; }
.contact-list li i, .contact-list li a i { position: absolute; left: 0; top: 6px; }

/* ====== Footer Section end ====== */



/* ====---- technology.html page -start- ----==== */
.content-sec { padding: 50px 0; }
.technologyBox { height: 380px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.25); padding: 10px; display: inline-block; }
.technologyBox:hover { text-decoration: none; }
.techno-img { height: 230px; }
.techno-img img { width: 100%; height: 100%; }
.techno-hed { font-size: 16px; color: #000; font-family: 'Reem Kufi', sans-serif; text-align: center; padding: 20px 0 10px; }
.techno-text { color: #909090; font-size: 14px; text-align: center; line-height: 1.6em; }

.static-sec { padding: 50px 0; background: #292929; }
.static-sec .head-title { color: #fff; }

.staticBox { height: 110px; background: #fff; border-radius: 5px; padding: 20px 15px;  }
.staticBox-hed { font-size: 18px; color: #000; position: relative; font-family: 'Reem Kufi', sans-serif; display: table; width: 100%; padding-top: 8px; }
.staticBox-hed img { width: 40px; height: auto; position: absolute; right: 0; top: 10px; }
.staticBox-text { font-size: 28px; color: #292929; font-weight: 600; }
.otherText { color: #1e1e1e; font-size: 18px; text-align: center; padding: 0 50px; font-style: italic; margin-bottom: 25px; }
    
/* ====---- technology.html page -end- ----==== */


/* ====---- project.html page -start- ----==== */
.latest-project-sec { padding-bottom: 0; }
.latest-piectBox { display: inline-block; margin-bottom: 15px; }
.latest-piectBox:hover { text-decoration: none; }
.latest-pro-img { height: 195px; }
.latest-pro-img img { width: 100%; height: 100%; }
.latest-pro-hed { background: #3498db; height: 64px; position: relative; font-size: 22px; color: #fff; padding: 17px 14px; font-weight: 600; transition: .6s; }
.latest-pro-hed:before { content: ""; position: absolute; top: -22px; left: 45%; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom: 12px solid #3498db; border-top: 10px solid transparent; transition: .6s; }
.latest-pro-text { height: 95px; font-size: 14px; color: #909090; text-align: justify; line-height: 1.7em; padding: 10px 0; overflow: hidden; }

.latest-piectBox:hover .latest-pro-hed { background: #5c3b9f; transition: .6s; }
.latest-piectBox:hover .latest-pro-hed:before { border-bottom-color: #5c3b9f; transition: .6s; }

.allProject-sec { padding: 20px 0; }
.allProject-box { display: inline-block; height: 120px; padding: 10px; border: 1px solid #e7e7e7; width: 100%; margin-bottom: 30px; }
.allProject-box:hover { text-decoration: none; }   
.allProject-img { height: 98px; padding-right: 0; }
.allProject-img img { width: 100%; height: 100%; }
.allProject-hed { font-size: 16px; color: #000; font-weight: 600; }
.allProject-text { font-size: 14px; line-height: 1.7em; color: #909090; padding-top: 5px; }
.allProject-box:hover .allProject-hed { color: #5c3b9f; }

/* ====---- project.html page -end- ----==== */


/* ====---- about.html page -start- ----==== */
.about-sec
.about-imgBox { background: #ededed; }
.about-imgBox img { width: 100%; height: auto; }
.about-textSec { padding-left: 0px; }
.about-hed { color: #000; font-size: 22px; font-weight: 600;  font-family: 'Reem Kufi', sans-serif;  }
.about-textBox { font-size: 14px; color: #909090; line-height: 1.6em; margin-top: 10px; }
.about-textBox p { margin-bottom: 5px; }
.about-textBox p:first-child { margin-bottom: 25px; }

/* ====---- about.html page -end- ----==== */


/* ====---- blog.html page -start- ----==== */
.ind-blog-boxMain { height: 225px !important; margin-bottom: 30px; }
.ind-blog-boxMain .indBlog-hed { padding: 8px 0; }
.ind-blog-boxMain .indBlog-text { font-weight: 500; }
.ind-blog-boxMain .indBlog-btn { margin-top: 15px; }
/*pagination start*/
.pagination { border-radius: 0px; margin: 0; float: right; }
.pagination li a { color: #a8a8a8; padding: 4px 10px; }
.pagination li a:first-child { border-radius: 0px; }
.pagination li a:last-child { border-radius: 0px; }
.pagination li a:hover { background: #5c3b9f; color: #fff; }
/*pagination end*/
.blog-search { width: 100%; }
.blog-search input { background: #ededed; border: none; color: #787878; border-radius: 0px; padding: 6px; font-size: 13px; width: 82% !important; margin-right: 10px; box-shadow: none; margin: 0 !important; height: 40px; }
.blog-search input:focus { box-shadow: none;  }
.blog-search button { padding: 10px 6px 6px; border-radius: 0; height: 40px; width: 40px; background: #5c3b9f; color: #fff; margin-left: -4px; }
.blog-search button:hover { background: #5c3b9f; color: #fff; }

.sidebar-hed { color: #161616; font-size: 24px; font-family: 'Reem Kufi', sans-serif; padding: 15px 0; }

.blog-sideBar-list { padding: 0; margin: 0; }
.blog-sideBar-list li { padding: 0; margin: 0 0 15px; list-style: none; }
.blog-sideBar-list li a { color: #777777; font-size: 16px; font-weight: 600; }
.blog-sideBar-list li a:hover { color: #5c3b9f; text-decoration: none; }
.blog-sideBar-list li a i { font-size: 12px; margin-right: 8px; }

.bolog-tab-sec { padding: 15px 0 0; }

.blogTab { border: none; }
.blogTab li { width: 50%; padding: 5px 10px; padding: 0; border-radius: 0; }
.blogTab li a { border-radius: 0; background: #ededed; color: #000; margin-right: 0; border: none; font-size: 22px; font-weight: 600; padding: 5px 15px; font-family: 'Reem Kufi', sans-serif; }
.blogTab>li.active>a, .blogTab>li.active>a:focus, .blogTab>li.active>a:hover { background: #5c3b9f; color: #fff; border: none; }

.blogTab-content { padding: 15px 0; }
.blog-tabContentBox { height: 90px; padding-bottom: 20px; margin-bottom: 10px; display: inline-block; border-bottom: 1px solid #e7e7e7; }
.blogTab-img { height: 75px; padding-right: 0; }
.blogTab-img img { width: 100%; height: 100%; }
.blogTab-hed { font-size: 16px; color: #000; font-weight: 600; font-family: 'Reem Kufi', sans-serif; }
.blogTab-date { font-size: 14px; color: #000; font-style: italic; font-weight: 600; padding: 6px 0 4px; }

.twitter-feed {  } 
.twitter-feedBox { display: inline-block; margin-bottom: 15px; }
.twitter-feedBox:hover { text-decoration: none; }
.twit-ico { width: 50px; height: 50px; border: 1px solid #e0e0e0; background: #f9f6f5; color: #c5c5c5; border-radius: 50%; margin: 0 auto; text-align: center; font-size: 22px; padding-top: 9px; margin-top: 5px;  }
.twitter-feedBox:hover .twit-ico { color: #fff; background: #5c3b9f; }
.twitter-feedText { font-size: 14px; color: #8a8a8a; font-weight: 600; }
.twitter-feedText span { color: #5c3b9f;  }

.tasBtn { display: inline-block; padding: 3px 15px; text-align: center; border: 1px solid #a3a3a3; color: #989898; margin-bottom: 10px; margin-right: 2px; }
.tasBtn:hover { text-decoration: none; background: #5c3b9f; color: #fff;  }

/* ====---- blog.html page -end- ----==== */


/* ====---- contact.html page -start- ----==== */

.contact-subHed { color: #3498db; font-size: 24px; margin-bottom: 15px; }
.address-hed { color: #404040; font-size: 18px; font-weight: 600; }
.address-detail { font-size: 25px; color: #727272; line-height: 1.2em; padding: 5px 0; }
.address-box { margin-bottom: 15px; }
.contactInput-box { position: relative; }
.contactInput-box input, .contactInput-box textarea  { border-radius: 0px; height: 45px; box-shadow: none; border: 1px solid #dfdfdf; padding-right: 30px; font-size: 14px; color: #999999; }

.contactInput-box textarea { height: 85px; resize: none; }
.contactInput-box input:focus, .contactInput-box textarea:focus   { box-shadow: none; border: 1px solid #dfdfdf; }
.contactInput-box span { position: absolute; right: 13px; top: 13px; }
.contactInput-box span i { font-size: 20px; color: #cfcfcf; }
.contact-btn { color: #5c3b9f !important; border: 1px solid #5c3b9f; border-radius: 0px; background: transparent; min-width: 105px; height: 40px; font-size: 13px; text-transform: uppercase; font-weight: 600; }
.contact-btn:focus, .contact-btn:active, .contact-btn:hover { box-shadow: none; outline: none; border: 1px solid #5c3b9f;  }


/* ====---- contact.html page -end- ----==== */