/*
Theme Name: Color Press Pakistan
Version: 1.0
Tags: blue, yellow, gray, google fonts, theme options, custom header, responsive
The CSS, XHTML and design is released under GPL
*/
html{scroll-behavior: smooth;}
body{font: normal 16px/1.5 'Lexend'; font-weight: 300; overflow-x: hidden; position: relative;} 
img{max-width: 100%; height: auto;}
a{text-decoration: none; color: #00ADEF;}
a:hover,a:focus{text-decoration: none;}
a,.btn{outline: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.ul-none,.topbar ul,.site-footer ul{list-style: none; margin: 0; padding: 0;}

/*Format*/
h1,h2,h3,h4,h5{margin-bottom: 20px; font-weight: 700;}
h1{font-size: 50px;}
h2{font-size: 40px;}
h3{font-size: 33px;}
h4{font-size: 24px;}
h5{font-size: 18px;}
p{margin-bottom: 25px;}
.ul-col-2{column-count: 2;}
.double-headings .uvc-main-heading{letter-spacing: 10px;}
.double-headings .uvc-sub-heading p:first-child{display: none;}
.cform .form-control{border-radius: 0; padding: 8px 15px;}
.cform label{margin-bottom: 5px;}
.cform .captcha-image{border-color: #e1e1e1; width: 100%;}
.cform .captcha-image svg{width: 40px; height: 40px;}

/*Buttons*/
.btn{padding: 12px 25px; font-size: 14px; font-weight: 600; border-radius: 0; text-transform: uppercase; text-align: center;}
.btn i{margin-left: 8px;}
.btn-primary{background-color: #21B9F7; color: #fff; border: 1px solid #21B9F7;}
.btn-primary:hover,.btn-primary:focus{background-color: #fff; color: #21B9F7; border-color: #21B9F7;}
.btn-secondary{background-color: #FFF102; color: #000; border: 1px solid transparent;}
.btn-secondary:hover,.btn-secondary:focus{background-color: #fff; color: #FFF102;}
.btn-outline{border: 1px solid #1F1D1E; color: #1F1D1E; background-color: transparent;}
.btn-outline:hover,.btn-outline:focus{color: #fff; background-color: #1F1D1E;}
.btn-outline.text-white{border-color: #fff;}
.btn-outline.text-white:hover,.btn-outline.text-white:focus{background-color: #fff; color: #000 !important;}
.btn-white{background-color: #fff; color: #000; border: 1px solid #fff;}
.btn-white:hover,.btn-white:focus{background-color: transparent; color: #fff; border-color: #fff;}

/*Section*/
.section{padding-top: 120px !important; padding-bottom: 120px !important;}
.md-section{padding-top: 90px !important; padding-bottom: 90px !important;}
.sm-section{padding-top: 70px !important; padding-bottom: 70px !important;}

/*Header*/
.site-header{background-color: #fff; z-index: 999; position: sticky; top: 0; transition: .3s ease; box-shadow: 0 0 8px rgba(0, 0, 0, .1);}
.topbar{background-color: #00ADEF; font-size: 14px; position: relative; overflow: hidden;}
.topbar::before{position: absolute; content: ''; left: -20px; top: 0; height: 100%; width: 440px; background-color: #fff; transform: skew(-20deg);}
.topbar ul{display: flex; justify-content: flex-end;}
.topbar ul li, .topbar ul li a{display: inline-block; color: #fff;}
.topbar ul li a{padding: 10px 15px; display: flex; align-items: center;}
.topbar ul li a:hover{background-color: #1294C6;}
.topbar ul li a .ico{font-size: 18px; margin-right: 7px;}
.topbar ul li a .ico.Defaults-envelope{font-size: 15px;}
.navbar-brand{max-width: 300px; left: 20px; top: -25px; position: absolute;}
.navbar-expand-lg .navbar-nav{position: relative;}
.navbar-expand-lg .navbar-nav > li.nav-item{text-transform: uppercase; margin-left: 3px;}
.navbar-expand-lg .navbar-nav .nav-link{color: #2B2F33; padding: 14px 11px; text-align: center; font-weight: 400; position: relative;}
.navbar-expand-lg .navbar-nav .nav-btn a.nav-link{padding-left: 25px; padding-right: 25px; background-color: #FFF102; color: #000;}
.navbar-expand-lg .navbar-nav > li:not(.dropdown) > .nav-link::before{background-color: #ec008b; content: ''; height: 2px; width: 0; position: absolute; bottom: 0; left: 0; transition: .3s ease; left: 50%; transform: translate(-50%);}
.navbar-expand-lg .navbar-nav > li.nav-item.current-menu-item .nav-link::before,
.navbar-expand-lg .navbar-nav > li:not(.dropdown) > .nav-link:hover::before{width: 100%;}

/*Mega Menu*/
.navbar-expand-lg .navbar-nav li.mega-menu{position: initial;}
.navbar-expand-lg .navbar-nav li.mega-menu .dropdown-menu{width: 98%;}
.navbar-expand-lg .navbar-nav li.mega-menu .dropdown-menu li{width: 49%; display: inline-block; vertical-align: top;}

/*DropDown*/
.dropdown .dropdown-menu a{white-space: normal; text-transform: capitalize;}
@media only screen and (min-width : 990px) {
	.navbar-nav > li > .dropdown-menu{display: block; padding: 15px; background-color: #00ADEF; transition: ease-out 0.30s; margin-left: 10px; left: 0;  opacity: 0; visibility: hidden; width: 250px; border: 0; border-radius: 0; box-shadow: 0 0 10px rgba(0,0,0,.15);}
	.navbar-nav > li.dropdown:hover > a::before{width: 10px !important; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #00ADEF; content: ''; left: calc(50% - 10px); bottom: -2px; position: absolute;}
	.dropdown:hover .dropdown-menu{margin-left: 0; opacity: 1; visibility: visible;}
	.dropdown .dropdown-menu li:not(:last-child){border-bottom: 1px solid rgba(255,255,255,.3);}
	.dropdown .dropdown-menu a{color: #fff; padding: 8px 12px; font-size: 15px;}
	.dropdown .dropdown-menu .current-menu-item a,
	.dropdown .dropdown-menu a:hover{color: #000; background-color: #FFF102;}
}

/*Side Menu*/
.nav-toggler{color: #1F1D1E; display: none !important; font-size: 25px; padding: 10px 15px; background-color: #FFF102;}
.nav-toggler span{font-size: 16px; display: inline-block; margin-right: 8px;}
.sidenav{height: 100%; width: 250px; position: fixed; z-index: 9999; top: 0; right: -270px; opacity: 0; background-color: #fff; overflow-x: hidden; transition: 0.5s; box-shadow: 0 0 30px rgba(0,0,0,.2);}
.sidenav .closebtn{position: absolute; z-index: 44; width: 30px; text-align: center; top: 0; right: 18px; font-size: 36px; line-height: normal; color: #1F3566;}
.the_menu{padding: 20px; font-size: 15px;}
.the_menu h4.hd{font-size: 18px; margin-bottom: 30px; letter-spacing: 3px;}
.the_menu > ul > li{border-bottom: 1px solid #000;}
.the_menu li > a{padding: 12px 0; display: block; color: #2B2F33; font-weight: 400;}
.the_menu li > a:hover,
.the_menu li.current-menu-item > a.nav-link,
.the_menu li.current-menu-item > a.dropdown-item{color: #ec008b;}
.sidenav h4{color: #1F3566;}

/*Smaller*/
.site-header.smaller{box-shadow: 0 0 15px rgba(0,0,0,.1); padding: 5px 0;}

/*Footer*/
.site-footer{background-color: #1F1D1E; font-size: 14px; font-weight: 300; color: #C2C2C2;}
.site-footer a:not(.btn){color: #C2C2C2;}
.site-footer a:not(.btn):hover{color: #fff;}
.site-footer h4{font-weight: 500; font-size: 19px; text-transform: uppercase; color: #fff;}
.site-footer ul li{margin-bottom: 10px;}
.cinfo li a{display: flex; align-items: center;}
.cinfo li .ico{color: #00ADEF; margin-right: 7px; font-size: 18px;}
.cinfo li .ico.Defaults-envelope{font-size: 15px;}

.foot2{border-top: 1px solid #5B5B5B; padding: 30px 0;}
.flogo{max-width: 250px; display: inline-block;}

.site-footer .social-media a{display: inline-flex; align-items: center; justify-content: center; margin: 0 0 10px 8px; background-color: #000; width: 45px; height: 45px; color: #fff; border-radius: 50px; font-size: 22px;}
.site-footer .social-media a.fb{background-color: #3761cf;}
.site-footer .social-media a.ins{background-color: #ba24aa; background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.site-footer .social-media a.tw{background-color: #0e97e3;}
.site-footer .social-media a.yt{background-color: #e33232;}
.site-footer .social-media a.in{background-color: #3a6ca2;}
.site-footer .social-media a:hover{background: #fff; color: #000;}

.mfoot{background-color: #01AEEC; color: #fff; padding: 35px 0; position: relative;}
.mfoot::before{content: ''; position: absolute; left: -40px; top: 0; height: 100%; width: 250px; background-color: #1F1D1E; transform: skew(-20deg);}

.whatsapp_btn{position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; color: #fff; background-color: #26D367; border-radius: 100px; font-size: 42px; display: flex; align-items: center; justify-content: center; z-index: 888;}
.whatsapp_btn .ico{margin-right: -7px;}

.services-section, .services-section .wpb_wrapper{position: relative;}
.services-section .wpb_wrapper{z-index: 33;}
.services-section::before{content: ''; position: absolute; left: -140px; top: 0; height: 400px; width: 200px; background-color: #fff102; transform: skew(-20deg);}
.services-section::after{content: ''; position: absolute; right: -25%; top: 0; height: 100%; width: 65%; background-color: #00ADEF; transform: skew(-20deg);}

.services-slider .wpb_content_element{height: 450px; display: flex; align-items: flex-end; position: relative;}
.services-slider .wpb_content_element::before{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.52+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.52) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.services-slider .wpb_content_element .wpb_wrapper{padding: 25px; color: #fff; position: relative; z-index: 11; height: 128px; transition: .3s ease; width: 100%;}
.services-slider .wpb_content_element h3{font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.services-slider .wpb_content_element .wpb_wrapper .btn{opacity: 0;}
.services-slider .wpb_content_element:hover .wpb_wrapper{height: 280px; background-color: #000;}
.services-slider .wpb_content_element:hover h3{display: block;}
.services-slider .wpb_content_element:hover .btn{opacity: 1;}
.services-slider .slick-slider{padding-bottom: 60px; margin: 0 -16px;}
.services-slider .slick-slider button.default.slick-arrow{left: 5px; bottom: 0; top: inherit;}
.services-slider .slick-slider button.default.slick-next{left: 35px;}

.testimonials-section{position: relative;}
.testimonials-section::after{content: ''; position: absolute; right: -8%; top: 0; height: 100%; width: 20%; background-color: #1F1D1E; transform: skew(-20deg);}
.testimonials-section .slick-slider .slick-slide .wpb_text_column{max-width: 800px; margin: auto; text-align: center; position: relative;}
.testimonials-section .slick-slider .slick-slide .wpb_text_column::before{content: '\f10e'; font-family: "Font Awesome 6 Free"; font-weight: 700; font-size: 35px; margin-bottom: 25px;}
.testimonials-section .slick-slider .slick-slide p:first-child{font: italic normal 32px 'Georgia';}
.testimonials-section .slick-slider button.default.slick-arrow{top: 24%; left: 5px;}
.testimonials-section .slick-slider button.default.slick-arrow.slick-next{top: inherit; bottom: 24%;}
.testimonials-section .slick-slider button.default.slick-arrow.slick-disabled{opacity: .6;}

/*Page*/
.page-title{background: #666 url(/wp-content/uploads/2023/09/mainslider_img1.jpg) center center no-repeat; background-size: cover; padding: 45px 0; position: relative;}
.page-title::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: .6;}
.page-title .container{position: relative; z-index: 33;}

/*Jobs*/
.job-list{margin: 0 -40px; text-align: center;}
.job-card{background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); padding: 20px; width: 100%; display: inline-block; max-width: 370px; margin: 20px; text-align: left;}
.job-card:hover{box-shadow: 0 0 20px rgba(0,0,0,.2);}
.job-card h4{color: #000; font-weight: 500;}

/*Responsive*/
@media (max-width:1200px){
	.navbar-brand{max-width: 240px;}
	.navbar-expand-lg .navbar-nav .nav-link{padding-left: 10px; padding-right: 10px;}
	.topbar::before{width: 340px;}
}
@media (max-width:991px){
	.section{padding-top: 90px !important; padding-bottom: 90px !important;}
	.md-section{padding-top: 60px !important; padding-bottom: 60px !important;} 
	.sm-section{padding-top: 40px !important; padding-bottom: 40px !important;}

	h1{font-size: 42px;}
	h2{font-size: 35px;}
	h3{font-size: 28px;}
	h4{font-size: 22px;}
	h5{font-size: 18px;}

	.navbar-brand{margin-right: 0;}
	.nav-toggler{display: inline-flex !important; align-items: center;}
	.topbar ul li span{display: none;}
	.topbar ul li a{padding: 6px 13px;}

	/*Mobile Menu*/
	.navbar-toggler{padding: 0; border: 0; outline: none; box-shadow: none !important; color: #21B9F7; font-size: 22px; width: 30px; text-align: right;}
	.navbar-toggler.collapsed{color: #2B2F33;}
	.navbar-toggler .fa-xmark,
	.navbar-toggler.collapsed .fa-bars{display: block;}
	.navbar-toggler.collapsed .fa-xmark,
	.navbar-toggler .fa-bars{display: none;}
	.navbarMain .navbar-nav{position: relative; padding: 20px 0 10px; margin-top: 10px;}
	.navbarMain .navbar-nav::before{width: 100%; height: 2px; background-color: #21B9F7; content: ''; position: absolute; left: 0; top: 0;}
	.navbar-expand-lg .navbar-nav .nav-link{text-align: left;}
	.navbar-nav > li > .dropdown-menu{border: 0; padding: 10px; margin-bottom: 10px !important; position: relative !important; transform: none !important; background-color: #f0f0f0; border-radius: 0;}
	.navbar-nav .nav-link.show{color: #21B9F7;}
	.dropdown .dropdown-menu a{padding: 8px 6px; font-size: 15px; position: relative !important; transform: none !important;}
	.dropdown .dropdown-menu li:not(:last-child){border-bottom: 1px solid #d0d0d0;}

	.foot2 .cl{margin-bottom: 25px;}
	.mfoot::before{width: 120px}
}
	
@media (max-width:767px){
	.section{padding-top: 60px !important; padding-bottom: 60px !important;}
	.md-section{padding-top: 40px !important; padding-bottom: 40px !important;}
	.sm-section{padding-top: 30px !important; padding-bottom: 30px !important;}

	h1{font-size: 36px;}
	h2{font-size: 28px;}
	h3{font-size: 24px;}
	h4{font-size: 21px;}
	h5{font-size: 18px;}

	.topbar::before{width: 250px;}
	.navbar-brand{max-width: 200px; top: -15px; left: 10px;}

	.site-footer .cl{margin-bottom: 20px;}
	.mfoot::before,
	.testimonials-section::after{display: none;}
	
	.testimonials-section .slick-slider .slick-slide p:first-child{font-size: 20px;}
	
	.whatsapp_btn{width: 50px; height: 50px; font-size: 36px;}
	.whatsapp_btn .ico{margin-right: -6px;}
}