@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600,700');
@import 'font-awesome.css';


/* Clear CSS */
.clearfix { }
.clear { clear:both;}
.clearfix:after{ content: "."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}

/* Float CSS */
.moveL { float:left;}
.moveR { float:right;}

/* Break CSS */
.break10 { clear:both; margin:10px 0px; height:1px;}
.break5 { clear:both; margin:5px 0px; height:1px;}
.break { clear:both; margin:2px 0px; height:1px;}

p, body, div, h1, h2, h3, h4, h5, h6, form, input, button, select, label { margin:0px; padding:0px;}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}

img { border:none; outline:none;}
a, input { border:none; outline:none;}

input, button, select, textarea { font-family: 'Poppins', sans-serif;}

* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

.Round { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px;}
.Round5 { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;}

a { transition:all 0.5s ease-in-out 0s; -moz-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s;}
.hover { transition:all 0.5s ease-in-out 0s; -moz-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s;}

/*-----------------------------Common CSS END-----------------------------*/

body { background:#fff; font-family: 'Poppins', sans-serif; font-weight:400; font-size:14px; color:#666; word-wrap:break-word; line-height: 24px;}

.container { width: 1170px; margin: 0 auto; padding: 0;}

#header { position: absolute; z-index: 999; padding: 20px 0; border-bottom: 1px solid #ffad05; width: 100%; top: 0; left: 0}
#header #logo { float: left;}
#header .menu { float: right;}
#header .menu li { list-style: none; float: left; padding: 0 16px;}
#header .menu li a { text-decoration: none; color: #fff; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 72px;}
#header .menu li a:hover { color: #ffad05;}

.Banner { height: 650px;}

.about-con { padding: 70px 0 30px;}
.about-con .about-img { width: 585px; float: left;}
.about-con .about-text { width: 585px; float: right;}

.about-con .frame { padding: 0 0 0 58px; margin: 0; position: relative; overflow: inherit; width: 100%;}
.about-con .frame:before { position: absolute; left: 44px; top: -27px; width: 394px; height: 520px; content: ''; border: 14px solid #ffad05; z-index: -1;}
.about-con .frame img { vertical-align: middle; width: auto; height: auto; display: block;}
.about-con .text-box { margin: 60px 0 0 0;}
.heading-left { width: 100%; position: relative;}
.heading-left strong.title { font: 400 18px/18px 'Poppins', sans-serif; display: block; text-transform: uppercase; padding: 0 0 20px 0; color: #ffad05;}
.heading-left h2 { margin: 0 0 40px 0; position: relative; color: #020d1b; font-size: 34px; font-weight: 400; text-transform: uppercase; font-family: 'Poppins', sans-serif;}
.heading-left h2:before { background: url(../images/heading-left-icon.png) no-repeat left bottom; position: absolute; content: ''; left: 0; bottom: -20px; width: 100%; height: 6px;}
.about-con .text-box p { margin-bottom: 15px;}
a.btn-style { font: 300 16px/16px 'Poppins', sans-serif; color: #fff; text-transform: uppercase; padding: 18px 40px; transition: all 0.3s ease-in; background: #ffad05; text-decoration: none; position: relative; z-index: 11; display: inline-block;}
a.btn-style:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 50%; z-index: -1; opacity: 0; background-color: #222; transition: all 0.5s linear;}
a.btn-style:hover:before { opacity: 1; width: 100%;}

.course { background: url(../images/our-vision-bg.jpg) no-repeat center; padding: 40px 0;}
.heading-center { width: 100%; position: relative; text-align: center;}
.heading-center strong.title { font: 400 18px/18px 'Poppins', sans-serif; display: block; text-transform: uppercase; padding: 0 0 20px 0; color: #ffad05;}
.heading-center h2 { margin: 0 0 40px 0; position: relative; color: #020d1b; font-size: 36px; font-weight: 400; text-transform: uppercase; font-family: 'Poppins', sans-serif;}
.heading-center h2:before { background: url(../images/heading-left-icon.png) no-repeat center bottom; position: absolute; content: ''; left: 0; bottom: -20px; width: 100%; height: 6px;}


.top-form { width:394px;}
.top-form h3 { text-align:center; color:#ffad05; font-weight:700; text-transform:uppercase; font-size:24px; padding:12px 0;}
.top-form form { padding:0 15px;}
.top-form input, .top-form select { width:100%; height:36px; display:block; border:none; box-shadow:none; background:#f2f2f2; color:#111; padding:0 8px; margin-bottom:8px;}

.top-form button { font: 400 14px/14px 'Poppins', sans-serif; color: #fff; text-transform: uppercase; padding: 13px 22px; transition: all 0.3s ease-in; background: #ffad05; text-decoration: none; position: relative; z-index: 11; display: inline-block; border: none; cursor: pointer; width:100%}
.top-form button:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 50%; z-index: -1; opacity: 0; background-color: #222; transition: all 0.5s linear;}
.top-form button:hover:before { opacity: 1; width: 100%;}

.steps { padding:0 15px; text-align:center; margin-top:15px;}
.steps h2 { font-size:24px; font-weight:600; color:#222; margin-bottom:10px;}

.course-box { background: #fff; width: 280px; text-align: center; padding: 10px; border: 1px solid #f0f0f0; float: left;}
.course-box + .course-box { margin-left: 16px;}
.course-box h3 { margin: 20px 0 30px 0; position: relative; font-weight: 300; color: #020d1b; text-transform: uppercase;}
.course-box h3:before { background: #ffad05; width: 45px; height: 2px; position: absolute; content: ''; left: 0; right: 0; bottom: -15px; margin: auto;}
.course-box p { font: 400 14px/24px 'Poppins', sans-serif; color: #777; margin: 0 0 15px 0;}

.parallax-section { background: url(../images/parallax-bg.jpg) no-repeat left top/cover; padding: 50px 0; width: 100%;}
.parallax-section .right-box { float: right; width: 770px;}
.parallax-section .right-box img { float: right; margin: 0 0 20px 0;}
.parallax-section .right-box p.title { font: 300 30px/30px 'Poppins', sans-serif; clear: both; color: #fff; padding: 0 0 15px 0; display: block;}
.parallax-section .right-box a { font: 400 14px/14px 'Poppins', sans-serif; display: block; text-decoration: none; color: #ffad05;}

.content-box { background: #fff; width: 280px; text-align: center; padding: 10px; border: 1px solid #f0f0f0; float: left;}
.content-box + .content-box { margin-left: 16px;}
.content-box h3 { margin: 10px 0 30px 0; position: relative; font-weight: 600; color: #020d1b; text-transform: uppercase;}
.content-box h3:before { background: #ffad05; width: 45px; height: 2px; position: absolute; content: ''; left: 0; right: 0; bottom: -15px; margin: auto;}
.content-box p { font: 400 14px/24px 'Poppins', sans-serif; color: #777; margin: 0 0 15px 0;}

a.btn-style-2 { font: 300 14px/14px 'Poppins', sans-serif; color: #fff; text-transform: uppercase; padding: 16px 24px; transition: all 0.3s ease-in; background: #ffad05; text-decoration: none; position: relative; z-index: 11; display: inline-block;}
a.btn-style-2:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 50%; z-index: -1; opacity: 0; background-color: #222; transition: all 0.5s linear;}
a.btn-style-2:hover:before { opacity: 1; width: 100%;}

#inner-banner { background: url(../images/inner-banner.jpg) left top no-repeat; width: 100%; position: relative; top: 0; left: 0; right: 0; z-index: 9; padding: 180px 0 100px;}
#inner-banner h1 { text-align: center; color: #fff; margin: 40px 0 20px 0; font-size: 48px; font-weight: 700; text-transform: uppercase;}
#inner-banner .breadcrumb { background-color: transparent; text-align: center; margin: 0; padding: 0;}
#inner-banner .breadcrumb li { display: inline-block; color: #fff; font: 300 16px/16px 'Poppins', sans-serif; text-transform: uppercase;}
#inner-banner .breadcrumb li a { text-decoration: none; color: #fff;}
#inner-banner .breadcrumb > li + li::before { content: "\f105"; font-family: FontAwesome; padding: 0 5px; color: #fff;}
#inner-banner .breadcrumb li a:hover { color: #ffad05;}

.text-pages { padding: 30px 0; min-height: 450px;}

h3.d-title { text-align:center;}

ul.download-icon { margin:30px 0; padding:0;}
ul.download-icon li { list-style:none; float:left; width:150px; text-align:center; margin:0 22px;}
ul.download-icon li a { display:block; text-decoration:none; color:#333;}
ul.download-icon li a:hover { opacity:0.5;}

.fcontact-bg { background:#111; width:100%; display:table; text-align:center; padding:30px 0;}
.fcontact-bg h2 { color:#fff; font-size:24px;}
.fcontact-bg ul { margin:0; padding:20px 0 0;}
.fcontact-bg ul li { list-style:none; display:inline-block; color:#fff; text-align:center; width:300px;}
.fcontact-bg ul li h3 { font-weight:600;}

.contact-form { padding-top:30px;}
.contact-form h2 { text-align:center; color:#000; text-transform:uppercase; padding:0 0 20px; font-weight:600;}

.form-group label { display:none;}
.form-group { position:relative; margin-bottom:8px;}
fieldset .required:after { color:#0078bb; content:"*"; font-size:12px; left:-16px; margin:0 0 0 5px; position:absolute; top:8px; font-weight:600;}
.form-group .input-text { background:#fff; display:block; border:1px solid #ccc; color:#000; font-weight:400; padding:1.1rem; width:100%; font-size:13px; box-shadow:none; vertical-align:baseline; outline:none; transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-in-out 0s; -webkit-transition:all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; border-radius: 0; }
.form-group .input-text:hover, .form-group .input-text:focus { border-color:#ffad05; }
.submit-btn { text-align:right;}
.submit-btn button { font: 400 14px/14px 'Poppins', sans-serif; color: #fff; text-transform: uppercase; padding: 13px 22px; transition: all 0.3s ease-in; background: #ffad05; text-decoration: none; position: relative; z-index: 11; display: inline-block; border: none; cursor: pointer;}
.submit-btn button:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 50%; z-index: -1; opacity: 0; background-color: #222; transition: all 0.5s linear;}
.submit-btn button:hover:before { opacity: 1; width: 100%;}

.Thanks { font-size:16px; text-align:center; margin:0; padding:20px 0; font-weight:bold; color:#060;}


.pillars-islam { background: #ffad05; padding: 50px 0; text-align: center; width: 100%; display: table;}
.pillars-islam h2 { color: #fff; text-transform: uppercase; margin: 0 0 100px 0; font-size: 36px; font-weight: 400;}
.pillar-box { width: 200px; display: inline-block; position: relative;}
.shape:before { transform: rotate(30deg);}
.shape::before, .shape::after { background: #fff none repeat scroll 0 0; border-radius: 20px; content: ""; height: 120px; left: 0; position: absolute; top: 0; width: 120px; }
.shape::after {transform: rotate(60deg);}
.shape::before, .shape::after { background: #fff none repeat scroll 0 0; border-radius: 20px; content: ""; height: 120px; left: 0; position: absolute; top: 0; width: 120px; }
.shape {background: #fff none repeat scroll 0 0; border-radius: 20px; height: 120px; left: 0; margin: auto; position: absolute; right: 0; text-align: center; top: -60px; width: 120px; z-index: 9;}
.shape:hover img{ transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); }
.shape img { display: block; position: relative; width: 100%; z-index: 99; transition:all 0.5s ease-in-out 0s; -moz-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; }
.pillar-box h3 { display: block; color: #fff; text-align: center; margin: 90px 0 0 0; font-size: 25px; text-transform: uppercase;}


ul.c-menu { margin: 0; padding: 0;}
ul.c-menu li { list-style: none; float: left; width: 19.6%; margin: 2px}
ul.c-menu li a { display: block; text-align: center; color: #222; background: #f7f7f7; line-height: 40px; text-decoration: none; }
ul.c-menu li a:hover { background: #ffad05;}

ul#lightgallery { margin: 0; padding: 0;}
ul#lightgallery li { list-style: none; float: left; margin: 5px;}
ul#lightgallery li a { display: block; padding: 3px; border: 1px solid #ccc;}


#footer { background: url(../images/footer-bg.jpg) no-repeat left top/cover; width: 100%; display: table;}
.footer-top { padding: 50px 0;}
.footer-box { width: 330px; padding: 0 15px; float: left;}
a.footer-logo { width: 100%; margin: 0 0 20px 0;}
.footer-box p { color: #fff; margin: 0 0 30px 0;}
.footer-box ul.address { margin: 0; padding: 0;}
.footer-box ul.address li { list-style: none; display: block; overflow: hidden; font: 400 14px/14px 'Poppins', sans-serif; color: #fff; padding: 0 0 26px 0;}
.footer-box ul.address li .fa { padding: 0 15px 0 0; font-size: 16px; float: left; color: #ffad05;}
.footer-box ul.address li a { display: block; color: #fff; text-decoration: none;}
.footer-box ul.address li a:hover { color: #ffad05;}

.footer-links { width: 230px; float: left; padding: 0 15px;}
.footer-links h3, .footer-form h3 { font-weight: 300; color: #ffad05; font-size: 25px; margin: 0 0 25px 0; text-transform: uppercase;}
.footer-links ul { margin: 0; padding: 0;}
.footer-links ul li { list-style: none; padding: 0 0 26px 0;}
.footer-links ul li a { font: 400 14px/14px 'Poppins', sans-serif; color: #fff; text-decoration: none; display: block;}
.footer-links ul li a:hover { color: #ffad05;}

.footer-form { width: 330px; padding: 0 15px; float: right}
.footer-form input, .footer-form select { background: none; border: 1px solid #ccc; padding: 0 20px; height: 40px; width: 100%; margin: 0 0 20px 0; font: 400 15px 'Poppins', sans-serif; color: #ffad05; box-sizing: border-box; box-shadow: none;}
.footer-form button { font: 400 14px/14px 'Poppins', sans-serif; color: #fff; text-transform: uppercase; padding: 13px 22px; transition: all 0.3s ease-in; background: #ffad05; text-decoration: none; position: relative; z-index: 11; display: inline-block; border: none; cursor: pointer;}
.footer-form button:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 50%; z-index: -1; opacity: 0; background-color: #222; transition: all 0.5s linear;}
.footer-form button:hover:before { opacity: 1; width: 100%;}

.footer-btm { width: 100%; display: table; border-top: 1px solid #ffad05; padding: 30px 0;}
.footer-btm .copyright { float: left; color: #fff; font: 400 14px/40px 'Poppins', sans-serif;}
.footer-btm .copyright a { text-decoration: none; color: #ffad05;}
.footer-btm .copyright a:hover { text-decoration: underline;}
.footer-btm .social-links { float: right;}
.footer-btm .social-links ul { margin: 0; padding: 0;}
.footer-btm .social-links ul li { list-style: none; float: left; padding: 0 0 0 15px;}
.footer-btm .social-links ul li a { text-decoration: none}
.footer-btm .social-links ul li a i { background: #323232; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #777; border-radius: 50px;}
.footer-btm .social-links ul li a:hover i { background: #ffad05; color: #fff;}
