@import url("https://fonts.googleapis.com/css?family=Shadows+Into+Light|Source+Sans+Pro:400,700");

@font-face { font-family:'DINProRegular'; src:url('../fonts/dinpro-webfont.eot');      src:local('☺'), url('../fonts/dinpro-webfont.woff')      format('woff'), url('../fonts/dinpro-webfont.ttf')      format('truetype'), url('../fonts/dinpro-webfont.svg#webfont8N8iSRG0')      format('svg'); font-weight:normal; font-style:normal; }
@font-face { font-family:'DINProBold';    src:url('../fonts/dinpro-bold-webfont.eot'); src:local('☺'), url('../fonts/dinpro-bold-webfont.woff') format('woff'), url('../fonts/dinpro-bold-webfont.ttf') format('truetype'), url('../fonts/dinpro-bold-webfont.svg#webfontqVxltZhH') format('svg'); font-weight:normal; font-style:normal; }


html { overflow-x: hidden; }

body { background:#F8F8F8; font-size:16px; font-weight:400; font-family:"Source Sans Pro", sans-serif; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:subpixel-antialiased; color:#444444; line-height:130%; -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow-x: hidden; }

h1, h2, h3, h4 { font-weight:700; font-family:"Source Sans Pro", sans-serif; }
h1 { font-size:32px; }
h2 { font-size:28px; }
h3 { font-size:24px; }
h4 { font-size:20px; }

.script-font { font-family:'Shadows Into Light', cursive; }

a { -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
a:hover { text-decoration:none; }
a a:focus { outline:none; }

p { font-weight:400; font-family:"Source Sans Pro",sans-serif; margin:0px; font-size:20px; line-height:130%; }

ul, ol { list-style: outside none none; margin: 0; padding: 0;}
ul li, ol li { list-style: none;}

ul.pers { padding-left:1rem; margin-left:0; list-style:square; font-size:17px; }
ul.pers li { list-style:square; font-size:17px; }

.hero-heading { font-size: 48px; font-weight: 700; color: #FFFFFF; text-transform: capitalize; line-height: 70px; letter-spacing: 0.1rem;}
.hero-sub-heading { font-size: 20px; font-weight: 400; color: #e6e6e6; line-height: 45px; letter-spacing: 0.1rem;}
.section-titile-bg { display: inline; font-size: 115px; font-weight: 700; height: 100%; left: -173px; opacity: 0.1; position: absolute; top: -14px; width: 100%; text-align: center;}
.section-title-header p { text: center; font-weight: 400; line-height: 26px; padding-bottom: 36px;}
.section-title { color: #252525; font-size:38px; text-align:center; line-height:120%; margin-bottom:32px; padding: 0 10px; position: relative;}
.btn { font-size:16px; padding:10px 30px; border-radius:0px; cursor:pointer; font-weight: 400; color: #FFFFFF; border-radius: 4px; text-transform: uppercase; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; display: inline-block;}
.btn:focus, .btn:active { box-shadow: none; outline: none; color: #FFFFFF;}
.btn-common { background-color: #00b4d9; position: relative; z-index: 1;}
.btn-common:hover { color: #FFFFFF; background-color: #21cff3; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;}
.btn-danger:hover { background-color: #f55262; border-color: #f55262; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;}
.btn-border { color: #FFFFFF; background-color: transparent; border: 1px solid #FFFFFF;}
.btn-border:hover { border: 1px solid #FFFFFF; color: #FFFFFF; background-color: rgba(255, 255, 255, 0.2);}
.btn-lg { padding: 14px 33px; text-transform: uppercase; font-size: 18px;}
.btn-rm { padding: 7px 10px; text-transform: capitalize;}
button:focus { outline: none !important;}
.icon-close, .icon-check { color: #00b4d9;}
.social-icon li { display: inline-block;}
.social-icon li a { color: #000; background: #FFFFFF; width: 35px; height: 35px; line-height: 38px; display: block; text-align: center; border-radius: 100%; font-size: 18px; margin: 15px 6px 12px 6px; transition: all 0.3s ease-in-out 0s; -moz-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;}
.social-icon li a:hover { color: #FFFFFF;}
.social-icon li .facebook:hover { background: #3b5999;}
.social-icon li .twitter:hover { background: #4A9CEC;}
.social-icon li .instagram:hover { background: #D6274D;}
.social-icon li .linkedin:hover { background: #1260A2;}
.social-icon li .google:hover { background: #CE332A;}

/* ScrollToTop */
a.back-to-top { display: none; position: fixed; bottom: 18px; right: 15px; text-decoration: none;}
a.back-to-top i { display: block; font-size: 22px; width: 40px; height: 40px; line-height: 40px; color: #FFFFFF; background: #00b4d9; border-radius: 2px; text-align: center; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);}
a.back-to-top:hover, a.back-to-top:focus { text-decoration: none;}
#loader { position: fixed; background: #FFFFFF; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999999;}
.square-spin { position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px;}
.square-spin img { max-width: 64px;}
.section-padding { padding:60px 0; }
.section-padding-footer { padding:20px 0 20px 0; }
#about .img-thumb img { border: 8px solid #FFFFFF; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);}

.profile-wrapper { padding: 45px 0;}
.profile-wrapper .btn { margin: 10px 10px 0px 0px;}
.profile-wrapper .btn i { vertical-align: middle; margin-right: 5px;}
.about-profile { position: relative; margin: 20px 0 20px 0;}
.about-profile .pro-title { font-weight:700; color:#040404; position:relative; width:120px; display:inline-block; margin-bottom:5px; }
.about-profile .pro-title:after { content: ':'; color:#040404; left:3px; }
.about-profile .admin-sign { position:absolute; right:45px; bottom:10px;}

.counter-section { background: url(../img/background/bg-1.jpg); overflow: hidden; position: relative;}
.counter-section:before { content: ''; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
.counter-section .counter { padding: 30px 0;}
.counter-section .counter .icon { margin-bottom: 30px;}
.counter-section .counter .icon i { font-size: 48px; color: #00b4d9;}
.counter-section .counter p { font-size: 18px; text-transform: uppercase; color: #FFFFFF; font-weight: 400; letter-spacing: 1px; margin: 30px 0;}
.counter-section .counter .counterUp { color: #FFFFFF; font-size: 42px; margin-top: 15px; font-weight: 700;}

/* Resume */
.timeline { position: relative;}
.timeline .timelin-title { font-size: 20px; text-transform: uppercase; margin-left: 25px;}
.timeline li { padding: 0 20px 20px 30px; list-style: none; border-left: 2px solid #f1f1f1;}
.timeline li .content-text { background: #f2f2f2; padding: 20px;}
.timeline li .line-title { font-size: 16px; line-height: 6px;}
.timeline li span { font-size: 12px; padding: 9px 0; display: block;}
.timeline li .line-text { color: #888; line-height: 18px;}
.timeline li:first-child:before { border: 0; background: none; position: relative;}
.timeline li:last-child { padding: 0 20px 0px 30px;}
.timeline li:before { content: ""; border: solid 2px; width: 8px; height: 8px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; font-size: 8px; margin-left: -35px; font-weight: 400; background: #FFFFFF; display: block; position: absolute; margin-top: 18px; border-color: #00b4d9 !important;}
.timeline li:first-child i { font-size: 20px; float: left; margin-left: -30px; line-height: 50px; border-radius: 30px; margin: -12px -55px; background: #00b4d9; color: #FFFFFF; width: 50px; height: 50px; text-align: center;}

.navbar-header { min-height:50px; }
.navbar-brand { position:relative; padding:0px; display:flex; justify-content:start; gap:10px; align-items:center; color:#000000; font-family:DINProRegular, sans-serif; font-size:1.5rem; }
.navbar-brand:hover { color:#000000; }
.navbar-brand img { aspect-ratio:692/285; max-height:58px; }
.navbar-brand .brand-text { margin-left:5px; }
.top-nav-collapse { background:#FFFFFF; z-index:999999; top:0px !important; min-height:58px; box-shadow:0px 3px 6px 3px rgba(0, 0, 0, 0.06); -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:fadeInDown; animation-name:fadeInDown; background:#FFFFFF !important; }
.top-nav-collapse .navbar-brand { top:0px; }
.top-nav-collapse .navbar-brand img { width:65%; min-width:45px; }
.top-nav-collapse .navbar-nav .nav-link { color:#333 !important; margin-top:0px !important; margin-bottom:0px !important; }
.top-nav-collapse .navbar-nav .nav-link:hover { cursor:pointer; color:#00b4d9 !important; }
.top-nav-collapse .navbar-nav li.active a.nav-link { color:#00b4d9 !important; }
.top-nav-collapse .navbar-brand img { max-height:45px; }

.indigo { background:#FFFFFF; }
.menu-bg { background:transparent; }

.navbar-expand-lg .navbar-nav .nav-link i { font-size:28px; color:#00b4d9; vertical-align:middle; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.navbar-expand-lg .navbar-nav .nav-link i:hover { color:#21cff3; }
.navbar-expand-lg .navbar-nav .nav-link { color:#333333; font-weight:700; padding:0 17px; margin-top:15px; margin-bottom:15px; line-height:40px; text-transform:uppercase; cursor:pointer; background:transparent; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.navbar-expand-lg .navbar-nav li a:hover, .navbar-expand-lg .navbar-nav li .active > a, .navbar-expand-lg .navbar-nav li a:focus { color:#00b4d9; outline:none; }
.navbar { padding:0; }
.navbar li.active a.nav-link { color:#00b4d9; }
.dropdown-toggle::after { display:none; }

.dropdown-menu { margin: 0; padding: 0; display: none; position: absolute; z-index: 99; min-width: 210px; background-color: #FFFFFF; white-space: nowrap; border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); animation: fadeIn 0.4s; -webkit-animation: fadeIn 0.4s; -moz-animation: fadeIn 0.4s; -o-animation: fadeIn 0.4s; -ms-animation: fadeIn 0.4s;}
.dropdown-menu:before { content: ""; display: inline-block; position: absolute; bottom: 100%; left: 20%; margin-left: -5px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #FFFFFF;}
.dropdown:hover .dropdown-menu { display: block; position: absolute; text-align: left; top: 100%; border: none; animation: fadeIn 0.4s; -webkit-animation: fadeIn 0.4s; -moz-animation: fadeIn 0.4s; -o-animation: fadeIn 0.4s; -ms-animation: fadeIn 0.4s;}
.dropdown .dropdown-menu .dropdown-item { width: 100%; padding: 12px 20px; font-size: 16px; color: #333; border-bottom: 1px solid #f1f1f1; text-decoration: none; display: inline-block; float: left; clear: both; position: relative; outline: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;}
.dropdown .dropdown-menu .dropdown-item:last-child { border-bottom: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
.dropdown .dropdown-menu .dropdown-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px;}
.dropdown .dropdown-item:focus, .dropdown .dropdown-item:hover, .dropdown .dropdown-item.active { color: #00b4d9;}
.dropdown-item.active, .dropdown-item:active { background: transparent;}
.fadeInUpMenu { -webkit-animation-name: fadeInUpMenu; animation-name: fadeInUpMenu;}
.slicknav_btn { border-color: #00b4d9;}
.slicknav_menu .slicknav_icon-bar { background: #00b4d9;}

/* only small tablets */
@media (min-width: 768px) and (max-width: 991px)
	{
	#nav-main li a.nav-link { padding-top:18px; }
	p { font-size:18px; }
	h1 { font-size:30px; }
	h2 { font-size:26px; }
	h3 { font-size:22px; }
	h4 { font-size:18px; }
	}

.navbar-toggler { display:none; }
.mobile-menu { display:none; }
.slicknav_menu { display:none; }

@media screen and (max-width: 768px)
	{
	p { font-size:16px; }
	h1 { font-size:28px; }
	h2 { font-size:24px; }
	h3 { font-size:21px; }
	h4 { font-size:17px; }
	.navbar-header { width:100%; }
	.navbar-brand { position:absolute; padding:0px 15px; top:0; font-size:1.1rem; }
	.navbar-brand img { height:40px; }
	.navbar-brand .brand-text { margin-left:3px; }
	.section-title { font-size:36px; }
	#mobile-menu { display:none; }
	.slicknav_menu { display:block; }
	.slicknav_nav .active a { background:#E91E63; color:#FFFFFF; }
	.slicknav_nav a:hover, .slicknav_nav a:focus, .slicknav_nav .active { color:#00b4d9; outline:none; background:#f8f9fa; }
	}

/* ==========================================================================
  Hero Area
  ========================================================================== */
.hero-area-bg { background:url(../images/head-area.jpg) no-repeat; background-size:cover; }
#hero-area { color:#FFFFFF; overflow:hidden; position:relative; }
#hero-area .overlay { position:absolute; width:100%; height:100%; top:0px; left:0px; background:#0c0808; opacity:0.6; }
#hero-area .contents { padding:175px 0px 120px; }

#hero-area .contents h5 { font-size:32px; }
#hero-area .contents .head-title { font-family:DINProBold; color:#FFFFFF; font-size:50px; /* letter-spacing:10px; */ text-transform:uppercase; font-weight:700; }
#hero-area .contents p {  font-size:30px; color:#FFFFFF; font-weight:400; line-height:30px; margin-bottom:25px; }
#hero-area .contents .btn { margin: 25px 0px; text-transform:uppercase; }
#hero-area .banner_bottom_btn { margin-top:40px; }
#hero-area .banner_bottom_btn i { color:#FFFFFF; font-size:48px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition: all 0.2s linear; }
#hero-area .banner_bottom_btn i:hover { color:#DDDDDD;}

/* ========================================================================== Portfolio Section  ========================================================================== */
#portfolios { background: #f2f2f2;}
#portfolios .mix { padding: 10px;}
#portfolios .portfolio-item .shot-item { margin: 0px;}
#portfolio .mix { display: none;}

.controls { text-align: center; padding: 0px 0px 20px;}
.controls .active { color: #00b4d9 !important; border-color: #00b4d9; background: transparent;}
.controls .btn { text-transform: uppercase; margin: 2px; color: #FFFFFF;}
.controls:hover { cursor: pointer;}
.portfolio-img { overflow: hidden; display: block; position: relative;}
.portfolio-img img { width: 100%;}
.shot-item { margin-right: 15px; border-radius: 4px; background: #FFFFFF; position: relative;}
.shot-item img { width: 100%;}
.shot-item .overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 180, 217, 0.6); opacity: 0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.shot-item:hover .overlay { opacity: 1;}
.overlay { opacity: 0;}
.overlay .icons i { height: 42px; width: 42px; line-height: 42px; color: #00b4d9; left: 50%; margin-left: -24px; margin-top: -24px; top: 50%; position: absolute; z-index: 2; cursor: pointer; text-align: center; font-size: 20px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: #FFFFFF; border-radius: 4px;}
.overlay .preview { position: absolute; left: 45%; top: 50%; color: #FFFFFF;}
.overlay .link { position: absolute; left: 60%; margin-left: 10px; top: 50%; color: #FFFFFF;}
.shot-item:hover .overlay { opacity: 1;}

a:not([href]):not([tabindex]) { color: #FFFFFF;}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: #FFFFFF;}

/* Services Item */
.services { background: #F0F0F0;}
.services-item { background: #FFFFFF; border-radius: 4px; min-height:100%; padding: 48px 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); text-align: center; transition: all 0.3s ease-in-out 0s; -moz-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;}
.services-item .icon i { font-size: 42px; margin-bottom: 15px; text-align: center; width: 48px; display: block; margin: 0 auto; height: 48px; color: #00b4d9;}
.services-item .services-content h3 { margin-top: 10px; margin-bottom: 10px;}
.services-item .services-content h3 a { font-size: 18px; text-transform: uppercase; color: #666;}
.services-item .services-content h3 a:hover { color: #00b4d9;}
.services-item .services-content p { line-height: 22px;}
.services-item:hover { box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);}

.form-control { width: 100%; margin-bottom: 20px; font-size: 16px; border-radius: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; padding: 8px 10px; border: 1px solid #e1e1e1;}
.form-control:focus { box-shadow: none; outline: none;}

.btn.disabled, .btn:disabled { opacity:1; }

.contact-form-area { background:#FFFFFF; box-shadow:0 0 30px #EDEDED; padding:60px 40px; }
.contact-form-area h2 { font-size:20px; text-transform:uppercase; }

.footer-right-contact { display:flex; flex-direction:column; justify-content:space-between; align-items:start; padding:10px; font-size:16px; }
.footer-right-contact .single-contact { display:grid; grid-template-columns:55px 1fr; gap:10px; width:100%; color:#333333; align-items:center; min-height:80px; }
.footer-right-contact .single-contact a { color: #333333; }
.footer-right-contact .contact-icon { background:#00B4D9; color:#FFFFFF; border-radius:50%; font-size:20px; width:40px; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; }

#contact { position: relative; overflow: hidden; }
#contact #contactForm { margin-top:30px; }

.text-danger { font-size: 14px; margin-top: 10px;}
.list-unstyled li { color: #d9534f;}

#conatiner-map { margin-top: 30px; text-align: center; background-color: #FFFFFF; height: 370px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; z-index: 101; width: 100%;}

/* Footer Area Start */
.footer-area { background: #1C1C20;}
.footer-area .footer-text p { font-size: 14px; margin-top: 0; color: #FFFFFF;}
.footer-area .footer-text p a { color: #00b4d9;}
.footer-area .footer-text .nav-inline .nav-link { padding: 11px 7px; color: #888;}
.footer-area .footer-text .nav-inline .nav-link:hover { color: #00b4d9;}
.footer-2 { background: #252525;}
.footer-2 img { margin-top: -8px;}
.footer-2 h3 { font-size: 20px; color: #FFFFFF; font-weight: 700; padding-bottom: 10px; letter-spacing: 0.5px;}
.footer-2 p { font-size: 14px; color: #FFFFFF; line-height: 20px; margin: 0; padding-right: 50px;}
.footer-2 ul li a { color: #FFFFFF; font-size: 13px; font-weight: 400;}
.footer-2 ul li a:hover { color: #00b4d9;}
#copyright { background: #333;}
#copyright p { line-height: 42px; color: #FFFFFF; margin: 0;}
#copyright p a { color: #FFFFFF;}
#copyright p a:hover { color: #00b4d9;}