/*
Template Name:transpak
Author Name: WPEXPERT
*/

/*
Table Of Content

1. Menu Area CSS
2. Banner Area CSS
3. Feature Area CSS
4. About Area CSS
5. Service Area CSS
6. Project Area CSS
7. Why Choose Us Area CSS
8. Faq Area CSS
9. Testimonial Area CSS
10. Pricing Area CSS
11. Blog Area CSS
12. Team Area CSS
13. Portfolio Area CSS
14. Footer Area CSS
15. Breadcamb Area CSS
16. Contact Area CSS
*/

@import url('css2.css');
/* theme css */
:root{
    --light: #ffffff;
    --primary: #f71735;
    --secondary: #0383ff;
    --black: #000000;
    --p-color: #4e4e4e;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    color: #4E4E4E;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    line-height: 1.6;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active{
  transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;	
}
p.form-messege{
    margin-top: 8px;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a  {
    font-family: 'Ubuntu', sans-serif;
    margin-bottom: 8px;
    font-style: normal;
    line-height: 1.2;
    font-weight: 700;
    font-size: 22px;
    color: #222222;
    -webkit-transition: .5s;
    transition: .5s;
}
.btn-primary:focus, select:focus, textarea:focus, input:focus{
    box-shadow: none !important;
}
textarea, input{
    outline:none;
}
a:focus, .btn:focus {
    text-decoration: none;
    outline: none;
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}

.container {
    width: 100%;
    max-width: 1140px;
}
a.btn, a {
    text-decoration: none;
    transition-duration: .5s;
}
a.btn:hover, a:hover {
    text-decoration: none;
    color: var(--primary)
}
.hm {
    font-size: 22px;
    font-weight: 700;
    color: #222222;
    transition-duration: .5s;
    position: relative;
}
a.hm:hover {
    color: var(--primary)
}
p {
    color: var(--p-color);
    transition-duration: .5s;
}
img {
    max-width: 100%;
}
.p-10 {
    padding-right: 10px;
    padding-left: 10px;
}
.bg-gray {
    background: #f9f9f9;
}
/*========================== initial css end ==========================*/
/*========================== button css start ==========================*/
.witr_btn {
    background: #f71735;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    padding: 12px 40px;
    text-align: center;
    position: relative;
    z-index: 2;
    transition: 1s;
	font-weight:700;
    border-radius: 5px;
}
a.witr_btn:hover{
	background:#0383ff;
	color: #fff;	
} 
/*========================== button css end ==========================*/
/*========================== paginations css start ==========================*/
.paginations {
    margin-top: 20px;
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px 0
}
.paginations li {
    display: inline-block;
    margin: 0 5px;
    color: #888;
    font-size: 15px;
    transition-duration: .5s;
    box-shadow: 0 10px 40px 0 rgba(50,65,141,.12);
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #ddd;
}
.paginations li a, .paginations li span {
    border-radius: 5px;
    display: block;
    color: #888;
}
.paginations li.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}
.paginations li.active span {
    color: #fff;
}
.paginations li:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.paginations li:hover a  {
    color: #fff
}
.menu_primary ul li a {
    color: #17161a;
    font-weight: 600;
    display: flex;
    justify-content: left;
    align-items: center;
}
.menu_primary ul li a:hover {
    color: var(--primary);
}
.menu_primary ul li a i {
    color: var(--primary);
    margin-right: 8px;
    font-size: 14px;
}
.move_img {
    margin: 60px 0px 0px 0px;
    animation: move_img 3s linear 2s infinite alternate;
}
.move_img img {
    width: 100%;
}
@keyframes move_img {
    0%{
        transform: translateY(-40px);
     }
    100%{
        transform: translateY(-20px);
    }
}
/*========================== slcik slider btn css ==========================*/
button.slick-prev, button.slick-next {
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: var(--primary);
    border-width: 0;
    outline: 0;
    transition: .5s;
    z-index: 1;
    font-size: 0;
    position: absolute;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.slick-prev:hover, .slick-next:hover {
    background: var(--secondary);
    opacity: 1;
    visibility: visible;
}
.slick-next::before, .slick-prev::before {
    color: #fff;
    font-size: 25px;
    -webkit-transition: .3s;
    transition: .3s;
    font-family: FontAwesome!important;
    line-height: inherit;
}
.slick-prev::before {
    content: "\f177";
}
.slick-next::before {
    content: "\f178";
}
.slick_btn_bottom .slick-prev {
    bottom: -100px;
    left: calc(50% - 60px);
}
.slick_btn_bottom .slick-next {
    bottom: -100px;
    right: calc(50% - 60px);
}
.slick_btn_center .slick-prev {
    top: 50%;
    left: 20px;
    opacity: 0;
}
.slick_btn_center .slick-next {
    top:50%;
    right: 20px;
    opacity: 0;
}
.slick_btn_center:hover .slick-prev, .slick_btn_center:hover .slick-next {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}
.slick_btn_none button.slick-prev, .slick_btn_none button.slick-next {
    display: none;
    opacity: 0;
    visibility: hidden;
}
/*========================== slcik slider btn style ==========================*/
/*========================== section title start ==========================*/
.witr_section_title {
    position: relative;
    padding-bottom: 30px;
}
.witr_section_title_inner {
    position: relative;
    z-index: 1
}
.witr_section_title_inner h1,.witr_section_title_inner h2,.witr_section_title_inner h3 {
    font-size: 40px;
    margin: auto;
    font-weight: 700;
    line-height: 1.2
}

.text-right.witr_section_title_inner h1,.text-right.witr_section_title_inner h2,.text-right.witr_section_title_inner h3 {
    margin-right: 0
}

.text-left.witr_section_title_inner h1,.text-left.witr_section_title_inner h2,.text-left.witr_section_title_inner h3 {
    margin-left: 0
}

.witr_section_title_inner h2 {
    font-size: 17px;
    display: inline-block;
    color: var(--primary)
}

.witr_section_title_inner p {
    margin-top: 10px
}

.witr_section_title_inner.text-center p {
    width: 74%;
    margin-right: auto;
    margin-left: auto
}

.witr_section_title_inner.text-left p {
    width: 74%;
    margin-right: auto;
    margin-left: 0
}
.witr_section_title_inner.text-right p {
    width: 74%;
    margin-right: 0;
    margin-left: auto
}
/*========================== Scroll up area CSS ==========================*/
#scrollUp {
    position: fixed;
    right: 100px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: var(--primary);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    font-size: 30px;
    transition: .5s;
    border: none;
    outline: none;
}
/* ===== 1. Menu Area CSS ===== */
.transpak_nav_area.postfix {
    transition: .3s;
}
.trp_nav_area {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    transition: .5s;
}
.transpak_nav_area .container {
    max-width: 1200px!important;
}
.logo-right,
.logo-left {
    align-items: center;
}
.mobile_menu_logo.text-center {
     padding: 20px 0;
}

/* LOGO CSS */
 .logo a {
     display: inline-block;
}

/* logo sticky */
 .transpak-main-menu .logo a.main_sticky_main_l {
     display: block;
}
 .transpak-main-menu .logo a.main_sticky_l {
     display: none;
}
/* logo pre */
 .transpak-main-menu .prefix .logo a.main_sticky_main_l {
     display: none;
}
 .transpak-main-menu .prefix .logo a.main_sticky_l {
     display: block;
} 
/* MENU text CSS */
 .transpak_menu ul {
     text-align: right;
     list-style: none;
}
 .transpak_menu > ul > li {
     display: inline-block;
     position: relative;
}
.transpak_menu > ul > li > a {
    display: block;
    margin: 38px 15px 38px;
    transition: .5s;
    position: relative;
    font-size: 17px;
    font-weight: 600;
}
.transpak_menu ul .sub-menu li a:hover, .transpak_menu ul .sub-menu li.current-menu-item a, .transpak_menu>ul>li.current-menu-item>a, .transpak_menu>ul>li>a:hover, .transpak_nav_area.prefix .transpak_menu>ul>li.current-menu-item>a, .transpak_nav_area.prefix .transpak_menu>ul>li>a:hover, .hbg2 .transpak_menu>ul>li.current-menu-item>a, .hbg2 .transpak_menu>ul>li>a:hover, .heading_style_2 .transpak_menu>ul>li.current-menu-item>a, .heading_style_2 .transpak_menu>ul>li>a:hover, .heading_style_3 .transpak_menu>ul>li.current-menu-item>a, .heading_style_3 .transpak_menu>ul>li>a:hover, .heading_style_4 .transpak_menu>ul>li.current-menu-item>a, .heading_style_4 .transpak_menu>ul>li>a:hover {
    color: #fff;
}
 .transpak_menu > ul > li > a:before, .transpak_menu > ul > li.current > a:before {
     background: #ffb600 none repeat scroll 0% 0;
     bottom: -7px;
     content: "";
     height: 2px;
     left: 0;
     margin: auto;
     opacity: 0;
     position: absolute;
     right: 0;
     transition: all 0.5s ease 0s;
     width: 15%;
     display:none;
}
 .transpak_menu ul li:last-child a {
     margin-right: 15px !important;
}
.transpak_menu > ul > li.current > a, .transpak_menu > ul > li:hover > a, .creative_header_menu > ul > li:hover > a {
    color: #f71735;
    background-color: transparent;
}
 .transpak_menu > ul > li:hover > a:before, .transpak_menu > ul > li.current > a:before {
     opacity: 1;
}

 .transprent-menu .transpak_nav_area {
     left: 0;
     right: 0;
     top: 0;
     z-index: 9999;
     background-color: transparent;
     padding: 0;
     transition: .5s;
     position: absolute;
}
 .transpak_nav_area.postfix {
     transition: .3s;
}
.transpak_nav_area.prefix {
    background-color: transparent;
}
.hbg2 {
    background-color: #000000 !important;
}

 .transpak_nav_area.prefix .transpak_menu > ul > li > a {
     color:#fff;
}
.transpak_nav_area.prefix .transpak_menu > ul > li.current > a {
    color: #fff;
}
 .search_popup_button, .tx_mmenu_together{
     align-items: center;
     display: flex;
     justify-content: flex-end;
}
 .tx_mmenu_together .donate-btn-header {
     padding: 0;
}
 .prefix .main_menu_header_address_text h3, .prefix .main_menu_header_address_text h4 a, .prefix .main_menu_header_icon i {
     color: #fff;
}

/* sub menu style */
.transpak_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 240px;
    text-align: left;
    background: #fff;
    margin: 0;
    padding: 15px 0;
    z-index: 9999;
    box-shadow: 0 0 30px rgb(0 0 0 / 9%);
    transition: .2s;
    opacity: 0;
    visibility: hidden;
}
 .transpak_menu ul li:hover > .sub-menu {
     transition: .5s;
     opacity: 1;
     visibility: visible;
     top: 100%;
     z-index: 9;
}
 .transpak_menu ul .sub-menu li {
     position: relative;
	 transition:.5s;
}
.transpak_menu ul .sub-menu li a {
    display: block;
    margin: 0;
    margin-bottom: 6px;
    letter-spacing: normal;
    font-size: 18px;
    font-weight: 500;
    transition: .5s;
    color: #272727;
    visibility: inherit !important;
    padding: 4px 20px;
}
 .transpak_menu ul .sub-menu li:hover > a, .transpak_menu ul .sub-menu .sub-menu li:hover > a, .transpak_menu ul .sub-menu .sub-menu .sub-menu li:hover > a, .transpak_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
     color: #f71735;
}
.transpak_menu ul .sub-menu li:before {
    left: -18px;
}
.transpak_menu ul .sub-menu li:hover:before{
	opacity:1;
}
.transpak_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a, .transpak_menu ul .sub-menu .sub-menu .sub-menu li:hover>a, .transpak_menu ul .sub-menu .sub-menu li:hover>a, .transpak_menu ul .sub-menu li:hover:before, .transpak_menu ul .sub-menu li:hover>a {
    color: #f71735;
}
/* sub menu 2 */
.transpak_menu ul .sub-menu .sub-menu {
    left: 100%;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}
 .transpak_menu ul .sub-menu li:hover > .sub-menu {
     opacity: 1;
     visibility: visible;
     top: 0%;
}
/* sub menu 3 */
 .transpak_menu ul .sub-menu .sub-menu li {
     position: relative;
}
 .transpak_menu ul .sub-menu .sub-menu .sub-menu {
     right: 100%;
     left: auto;
     top: 130%;
     opacity: 0;
     visibility: hidden;
}
 .transpak_menu ul .sub-menu .sub-menu li:hover > .sub-menu {
     opacity: 1;
     visibility: visible;
     top: 0%;
}
/* sub menu 4 */
 .transpak_menu ul .sub-menu .sub-menu .sub-menu li {
     position: relative;
}
 .transpak_menu ul .sub-menu .sub-menu .sub-menu li:hover > .sub-menu {
     opacity: 1;
     visibility: visible;
     top: 0%;
}

/* has menu icon */
.transpak-main-menu .menu-item-has-children > a:after {
    margin-left: 8px;
    content: "\f107";
    font-family: FontAwesome !important;
    opacity: 1;
    font-size: 13px;
    opacity: .5;
    font-weight: 600;
}
 .transpak-main-menu .menu-item-has-children .menu-item-has-children> a:after {
     margin-left: 8px;
     content: "\f107";
}

/* quearys area css */
.transpak_menu.main-search-menu > .em-header-quearys, .em-quearys-top.msin-menu-search {
    display: inline-block;
}
.em-top-quearys-area {
    position: relative;
}
.transpak_menu div.em-header-quearys {
    text-align: center;
}

.em-quearys-inner {
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 10000;
    transition: all 0s 0s cubic-bezier(0.32, 0, 0, 1), transform .3s .15s cubic-bezier(0.32, 0, 0, 1), background .3s 0s cubic-bezier(0.32, 0, 0, 1);
    transform: scale(1.1);
    visibility: hidden;
    opacity: 0;
    left: -150%;
    background: rgba(0, 0, 0, 0);
}
.em-s-open {
    visibility: visible;
    opacity: 1;
    left: 0;
    background: #000000e6 !important;
    transform: scale(1);
}
.em-quearys-form {
    width: 100%;
    max-width: 895px;
    margin: auto;
    padding: 30px 0;
}
.top-form-control {
    position: relative;
}
.top-form-control input {
    background: transparent;
    color: #fff;
    font-size: 50px;
    font-weight: 500;
    height: 100px;
    padding: 0 40px 0 15px;
    width: 100%;
    border: none;
    transition: .5s;
    border-bottom: 3px solid #fff;
}
.top-form-control input::placeholder{
	color:#fff;
}
textarea, input {
    outline: none;
}
.top-form-control button.top-quearys-style {
    position: absolute;
    right: 6px;
    top: 50%;
    background: transparent;
    font-size: 45px;
    border: none;
    color: #fff;
    transform: translateY(-50%);
}
.main-search-menu .em-header-quearys .em-quearys-menu i {
    cursor: pointer;
    background: transparent;
    color: #272727;
    padding: 0;
    border-radius: 5px;
    height: inherit;
    width: inherit;
    line-height: inherit;
    display: inline-block;
    margin-left: 5px;
    font-size: 20px;
}
.transpak_nav_area.prefix .main-search-menu .em-header-quearys .em-quearys-menu i {
    color: #fff;
}
.mrt10{
	margin-top:10px;
}
.em-quearys-menu i {
    background: #f71735;
    border-radius: 50px;
    display: inline-block;
    text-align: center;
    height: 36px;
    width: 36px;
    line-height: 36px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.main_menu_address_a {
    display: flex;
    align-items: center;
    position: relative;
}
.main_menu_address_a::before {
    background: #fbfbfb40;
}
.main_menu_address_a:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 107px;
    left: 0;
}
.main_menu_header_icon {
    margin-left: 25px;
    margin-right: 10px;
}
.main_menu_header_icon i {
    color: #f71735;
	font-size: 30px;
}
.main_menu_header_address_text h3, .main_menu_header_address_text h4 a {
    margin: 0;
    font-weight: 600;
	font-size: 18px;
	
}
.main_menu_header_address_text h3{
	color: #f71735;
}
.main_menu_header_address_text h4 {
    margin-bottom: 0;
    color: #030925;
}

/*=======================
#2 transpak mobile menu css
========================*/
.mobile-menu{
 display:none !important;
}
 .mobile_logo_area{
 display:none !important;
}
.mean-container a.meanmenu-reveal {
    display: none !important;
}
.mean-container .mean-nav > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}
.mean-container .mean-bar {
    background: #fff;
    padding: 0;
}
.mean-container .mean-nav ul li {
    border-top: 0px solid #ddd;
}
.mean-container .mean-nav ul li li a,
.mean-container .mean-nav ul li a {
    color: #444;
}
.mean-container .mean-nav ul li li a {
    border-top: 1px solid #ddd;
}
.mean-container .mean-nav ul li a:hover {
    color: #ff4a17;
}
.mobile_p {
    position: fixed;
    right: 0;
    width: 300px;
	padding: 80px 20px 0px;
	overflow-y: scroll;
    top: 0;
    height: 100%;
    z-index: 9999;
    display: block;
    transition: 0.5s all;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);
    transform: translateX(100%);
    background: #ffffff;
}
.tx-s-open {
    transform: translateX(0);
}
.mobile_p .tuetion_theme_widget > div.widget_block {
    padding: 0;
}
.mobile_p .tuetion_theme_widget > div {
    padding: 20px 0px 20px;
    box-shadow: none;
}
.mean-container .mean-nav ul li a {
    border: 0;	
    width: 100%;
    border-top: 1px solid #ddd;	
    font-size: 14px;
    padding: 12px 5px;
    font-weight: 500;
	display: block;
}
.mean-container .mean-nav ul li a.mean-expand {
	width: auto;
}
.mobile_opicon {
    text-align: right;
    padding: 4px 0;
}
.mean-container .mean-nav > ul > li:first-child > a {
    border-top: 0;
}
.mobilemenu_con {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mobile_menu_o  i {
    font-size: 26px;
}
.mobile_menu_content .mobile_menu_logo {
    margin-bottom: 20px;
}
.mobile_cicon {
    position: absolute;
    right: 30px;
    top: 50px;
}
.mobile_overlay {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease-out 0s;
}
.mobile_overlay.mactive {
    opacity: 1;
    visibility: visible;
}
/* menu button */
a.dtbtn {
    border: none;
    display: block;
    font-size: 17px;
    margin-left: 30px;
    font-weight: 700;
    border-radius: 5px;
    padding: 10px 30px 10px;
    color: #fff;
    background: #f71735;
}
a.dtbtn:hover {
    background:#0383ff;
}
/*========================== 2. Banner Area CSS ==========================*/
.banner_area {
    position: relative;
    overflow: hidden;
}
.background-video-area {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    z-index: 1;
}
.background-video-area iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.background-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 50%);
    z-index: 9;
}
.witr_ds_content {
    position: relative;
    z-index: 10;
    height: 970px;
    background-size: cover;
    background-position: center center;
	overflow: hidden;
}
.witr_ds_content:before{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	content:"";
	z-index:-1;
    background: #00000052;
}
.witr_ds_content_inner {
    width: 62%;
    margin: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 100;
}

.witr_ds_content_inner h1{
    font-size: 25px;
    margin-bottom: 15px;
    color: var(--light);
    padding: 50px 0px 0px 0px;
}
.witr_ds_content_inner h2{
    font-size: 70px;
    text-transform: capitalize;
    margin-bottom: 20px;
}
.witr_ds_content_inner h3{
    font-size: 70px;
    text-transform: capitalize;
    margin-bottom: 20px;	
}
.witr_ds_content_inner h1,
.witr_ds_content_inner h2,
.witr_ds_content_inner h3{
    color: var(--light);
    margin: 14px auto 15px 0;
}
.witr_ds_content_inner h1 span,
.witr_ds_content_inner h2 span,
.witr_ds_content_inner h3 span{
	color: #f71735;	
}
.witr_ds_content_inner p {
    width: 62%;
    margin: 15px auto 15px auto;
    font-size: 17px;
    color: #FFFFFF;
    font-size: 23px;
    font-weight: 600;
    width: 56%;
    margin-top: 30px;
    margin-bottom: 0px;
    margin-left: 0;
}
.witr_ds_content .witr_btn {
    border-style: none;
    margin: 0px 20px 70px 0px;
    padding: 15px 35px 15px 35px;
    background: var(--primary);
    color: var(--light);
    border-radius: 5px;
}
.witr_ds_content .witr_btn_sinner {
    margin-top: 45px
}
/*========================== 3. Feature Area CSS ==========================*/
.feature_area {
    margin-top: -200px;
    padding: 60px 0 40px 0;
    position: relative;
    z-index: 110;
}
.op_feature {
    margin-top: 0;
    padding: 85px 0 60px
}
.single_feature {
    margin-bottom: 20px;
}
.s_feature_inner {
    padding: 80px 25px 40px 25px;
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.04);
}
.s_feature_inner h3 {
    line-height: 30px;
    margin: 30px 0px 0px 0px;
}
.s_feature_inner p {
    margin: 20px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
}
/*========================== 4. About Area CSS ==========================*/
.about_area {
    padding: 0 0 80px;
}
.op_about {
    padding: 80px 0;
}
.about_left_side .about_image {
    margin: 60px 0px 0px 0px;
}
.about_image img {
    width: 100%;
}
.about_right .witr_section_title {
    padding-bottom: 0;
}
.about_right .witr_section_title_inner p {
    width: 100%;
}
.about_right h2 {
    padding-bottom: 20px;
}
.about_menu {
    margin-bottom: 20px;
}
.about_menu ul li {
    margin-bottom: 0;
}
.about_right .witr_btn {
    padding: 15px 30px 15px 30px;
    margin: 24px 30px 15px 0px;
    font-weight: 700;
}
.about_progress_bar {
    padding-top: 20px;
}
.witr_single_progress.all_color_bar {
    margin-bottom: 20px;
    overflow: hidden;
}
.witr_title7 span {
    font-size: 20px;
    color: #222;
    font-weight: 600;
}
.progress.witr_progress-style7 {
    position: relative;
    background: transparent;
    overflow: initial;
    height: 10px;
}
.progress-bar.wow.fadeInLeft.animated.animated.animated {
    height: 7px;
    background: var(--primary);
}
span.witr_percent {
    position: absolute;
    top: -32px;
    right: -14px;
    background: var(--primary);
    color: #fff;
    z-index: 100;
    display: inline-block;
    padding: 0px 5px;
    border-radius: 5px;
    font-size: 13px;
}
span.witr_percent::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--primary);
    top: 20px;
    left: 50%;
    transform: rotate(45deg) translateX(-50%);
    border-radius: 2px;
}

/*========================== 5. Service Area CSS ==========================*/
.service_area {
    padding: 90px 0;
    background: #F9FAFB
}
.single_service {
    margin-bottom: 20px;
}
.single_service_inner {
    height: 100%;
}
.service_desc {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 36px 0px;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #F3F3F3;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
    height: 100%
}
.service_desc img {
    width: 100%;
    display: block;
}
.service_desc h3 {
    margin: 26px 0 20px;
    padding: 0 20px;
    line-height: 30px;
}
.service_desc p {
    padding: 0 20px 15px;
}
.service_btn a.btn {
    margin-left: 20px;
    padding: 10px 20px;
    color: var(--primary);
    border-top: 2px solid var(--primary);
    border-radius: 8px;
    font-weight: 700;
}
.service_btn a.btn:hover {
    background: var(--primary);
    color: var(--light);
}
.service_menu {
    padding: 0 20px;
}
/* transpak single service page css */
.transpact_single_service {
    padding: 90px 0 70px;
}
.ts_single_slider {
    margin-bottom: 20px;
}
.ts_single_slider img {
    width: 100%;
    display: block
}
.ts_service_heading {
    margin-bottom: 20px;
    font-size: 30px;
    color: #222222;
}
.ts_service_desc {
    margin-bottom: 20px;
}
.ts_service_menu {
    margin-bottom: 20px;
}
.ts_service_menu ul li a {
    font-weight: 600;
    line-height: 2;
}
.ts_o_image_wrapper {
    padding: 10px;
}
.ts_service_cont2 h2.hm {
    margin-bottom: 20px;
}
.ts_single_right {
    padding-top: 10px;
}
.ts_right_item {
    margin-bottom: 40px;
}
.ts_right_item h2 {
    margin-bottom: 20px;
}
.ts_right_item ul li {
    border-bottom: 1px solid #F2F2F2;
    padding: 10px 15px 10px 20px;
}

/*========================== 6. Project Area CSS ==========================*/
.project_area {
    padding: 84px 0 0
}
.single_project {
    margin-bottom: 20px;
}
.single_project_inner {
    position: relative;
    overflow: hidden;
}
.project_image {
    position: relative;
}
.project_image::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: #00000080;
    transform: scale(0);
    z-index: 1;
    transition: .5s;
}
.single_project_inner:hover .project_image::after {
    transform: scale(1);
}
.project_image img {
    width: 100%;
    display: block;
}
.porject_desc {
    position: absolute;
    padding: 15px 30px 8px 30px;
    background: var(--light);
    bottom: -100%;
    z-index: 1;
    left: 100px;
    right: 100px;
    border-radius: 5px;
    transition: .5s;
    opacity: 0;
}
.single_project_inner:hover .porject_desc {
    bottom: 20px;
    opacity: 1;
}
.porject_desc span {
    color: var(--primary);
}
.project_btn {
    padding: 40px 0 90px;
    text-align: center;
    width: 100%
}

/*========================== 7. Why Choose Us Area CSS ==========================*/
.why_cu_area {
    background: url(https://demo.themexbd.com/html/transpak/assets/images/slider-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 90px 0px 40px 0px;
}
.wcu_bg_overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: #000;
    opacity: .88;
}
.why_cu_area .witr_section_title {
    margin-bottom: 10px;
}
.why_cu_area .witr_section_title_inner * {
    color: var(--light)
}
.why_cu_area .menu_primary ul li a {
    color: var(--light);
}
.why_cu_area .menu_primary ul {
    padding-left: 16px;
}
.why_cu_area .menu_primary ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.wcu_slider_inner {
    margin: 80px 0 25px
}

/*========================== 8. Faq Area CSS ==========================*/
.faq_area {
    padding: 0 0 80px;
}
.op_faq {
    padding: 95px 0 85px
}
.witr_faq {
    padding-top: 30px
}
.single-faq-part {
    border-left: 2px solid var(--primary);
    background-color: #FFFFFF00;
    margin-bottom: 20px;
    box-shadow: 1px 1px 7px -5px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}
.faq_left h2 {
    padding-bottom: 20px;
}
.faq-part-header {
    transition-duration: .5s;
    font-weight: 700;
    position: relative;
    color: #222222;
    display: block;
    font-size: 20px;
    padding: 14px 30px 14px 30px;
    line-height: 1;
}
.faq-part-header:hover {
    color: #222222;
}
.faq-part-header::after {
    color: var(--primary)
}
.faq-part-header.collapsed:after {
    content: '\ea99';
}
.faq-part-header:after {
    font-family: 'Icofont';
    content: '\eaa1';
    font-size: 16px;
    position: absolute;
    top: 18px;
    right: 20px
}
.faq-part-body p {
    margin-bottom: 16px;
    color: #222222;
    padding: 14px 30px 14px 30px;
}
.faq_right img {
    margin-top: 100px;
}

/*========================== 9. Testimonial Area CSS ==========================*/
.testimonial_area {
    padding: 85px 0 50px;
}
.testi_single_slider {
    padding: 60px 15px 0;
    margin-bottom: 30px;
}
.testi_s_slider_inner {
    padding: 30px 17px 20px 30px;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.04);
    background: var(--light);
    text-align: center;
    position: relative
}
.testi_s_icons {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
}
.testi_s_icons li {
    display: inline-block;
    color: var(--primary);
}
.testi_s_slider_inner img {
    position: absolute;
    top: -41px;
    left: 50%;
    transform: translateX(-50%);
    width: 82px;
    height: 82px;
}

/*========================== 10. Pricing Area CSS ==========================*/
.pricing_area {
    padding: 85px 0 80px;
    background: #f9f9f9;
}
.single_price {
    margin-bottom: 20px;
}
.s_price_inner {
    text-align: center;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #F0F0F0;
    border-radius: 2px 2px 2px 2px;
    height: 100%;
}
.s_price_inner:hover {
    border-color: var(--primary);
}
.s_price_inner img {
    padding-top: 50px;
}
.s_price_inner h4 {
    font-size: 30px;
    padding: 26px 0 12px;
    margin: 0;
}
.s_price_inner h5 {
    font-size: 20px;
    padding-bottom: 30px;
}
.s_price_inner h5 span {
    margin-right: 8px;
}
ul.price_list {
    display: inline-block;
    text-align: left;
}
.s_price_inner ul li {
    color: #555555;
    line-height: 40px;
    list-style: none;
}
.price_btn {
    padding: 40px 0;
}
.price_btn a.btn {
    color: var(--primary);
    background: var(--light);
    font-weight: 700;
    border: 2px solid #ececec;
    line-height: 41px;
    font-size: 16px;
    padding: 7px 30px;
    border-radius: 5px;
}
.price_btn a.btn:hover {
    color: var(--light);
    background: var(--primary);
    border-color: var(--primary);
}

/*========================== 11. Blog Area CSS ==========================*/
.blog_area {
    padding: 85px 0 50px;
}
.single_blog {
    margin-bottom: 30px;
}
.s_blog_inner {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    background: var(--light);
}
.s_blog_inner:hover {
    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.05);
}
.blog_thumb {
    position: relative;
    overflow: hidden;
}
.blog_thumb img {
    width: 100%;
    display: block;
    transition: .5s;
}
.blog_thumb::after {
    position:absolute;
	content:'';
	background:rgba(0, 0, 0, 0.5);
	top:0;
	left:0;
	bottom:0;
	right:0;
	transform: scale(0);
	transition:.5s;
	z-index:1;
}
.s_blog_inner:hover .blog_thumb img, .s_blog_inner:hover .blog_thumb::after {
    transform: scale(1.2);
}
.blog_desc {
    padding: 20px 15px 16px;
}
.blog_desc2 {
    padding: 15px 20px;
}
.blog_head {
    margin-bottom: 16px;
}
.blog_desc p {
    font-size: 15px;
    color: #F71735;
    font-weight: 500;
    display: inline-block;
    margin-right: 10px;
}
.blog_desc p a {
    color: var(--primary)
}
.blog_desc p a i {
    margin-right: 5px
}
.blog_desc p.blog_cont {
    color: #4e4e4e;
    font-size: 17px;
}
.read_more_btn a {
    font-weight: 500;
    padding: 8px 5px;
    text-transform: capitalize;
    text-align: center;
    color: #17161a;
    display: inline-block;
}
.read_more_btn a i {
    color: var(--primary);
    margin-left: 4px;
    font-size: 14px;
}
.rm_o_btn a {
    font-size: 16px;
    font-weight: 500;
    padding: 9px 30px;
    border: 1px solid #efefef;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    -webkit-transition: .5s;
    transition: .5s;
    display: inline-block;
}
.rm_o_btn a:hover {
    background: #0383FF;
    color: #fff;;
}
/*===== blog side bar area css =====*/
.sidebar_blog_area {
    padding: 100px 0;
}
.sidebar_blog_area .container {
    max-width: 1200px;
}
.blog-side-inner {
    padding: 15px;
    margin-bottom: 30px;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);
}
.input-field {
    position: relative;
}
.input-field input {
    width: 100%;
    display: block;
    padding: 16px 60px 16px 16px;
    border: none;
    outline: none;
    background: #f7f7f7;
}
.input-field button {
    width: 54px;
    height: 54px;
    line-height: 54px;
    background: #f7f7f7;
    color: #858585;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    border: none;
    outline: none;
    cursor: pointer;
    transition-duration: .5s;
    font-size: 18px;
}
.blog-side-area ul li:before {
    content: "\f105";
    font-family: FontAwesome!important;
    font-size: 18px;
    transition-duration: .5s;
}
.blog-side-area ul li:hover:before {
    color: var(--primary);
}
.blog-side-area .widget-title {
    position: relative;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
}
.blog-side-area .widget-title::before {
    content: '';
    position: absolute;
    top: 3px;
    height: 20px;
    left: -15px;
    width: 2px;
    background: var(--primary);
    
}
.blog-side-area ul li {
    border-bottom: 1px solid rgba(0,0,0,.12);
    margin: 0 0 10px;
    padding-bottom: 10px;
}
.blog-side-area ul li:last-child {
    border-bottom: none;
}
.blog-side-area ul li a {
    color: #454545;
    transition-duration: .5s;
    padding-left: 8px;
}
.blog-side-area ul li a:hover {
    color: var(--primary);
}
.recent-post-item {
    margin-bottom: 10px;
    overflow: hidden;
}
.recent-post-image {
    width: 100px;
    float: left;
    margin-right: 10px;
}
.recent-post-image img {
    width: 100%;
}
.recent-post-text {
    overflow: hidden;
}
.recent-post-text h4 {
    margin-bottom: 0;
    line-height: 1;
    margin-top: 0px;
}
.recent-post-text h4 a {
    font-size: 17px;
    color: #17161a;
    font-weight: 600;
    display: block;
    margin: 0;
    line-height: 1.6;
}
.recent-post-text h4 a:hover {
    color: var(--primary);
}
.recent-post-text span {
    font-size: 14px;
    color: #777
}
.table-bordered thead td, .table-bordered thead th {
    border-bottom: 1px solid #dee2e6;
}
.calender_wrap table thead th, .calender_wrap table tr td {
    color: #777;
    font-size: 13px!important;
    text-align: center;
}
.calender_wrap table tr td.today {
    background: var(--primary);
    color: #fff;
}
.calender_wrap td {
    font-size: 14px;
    font-weight: 500;
}
.month-year span {
    display: block;
    padding: 0 0 10px;
    margin-bottom: 12px;
    color: #6c757d;
    font-size: 14px;
    text-transform: uppercase;
}
.month a {
    color: #454545;
}
.sbrani i {
    font-size: 13px;
}
.sbrani .published-time a:hover *, .sbrani .blogger-info span:hover {
    color: var(--primary)
}
/* blog side */
.transpak-single-blog {
    box-shadow: 0 0 10px 0 rgba(148,146,245,.2);
    margin-bottom: 30px;
    overflow: hidden;
    text-align: left;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}
.em-blog-content-area {
    padding: 15px 15px;
    overflow: hidden
}
.transpak-blog-thumb a {
    display: block;
    position: relative
}
.transpak-blog-thumb {
    overflow: hidden;
}
.transpak-blog-thumb a:before {
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    z-index: 999;
    -webkit-transition: .5s;
    transition: .5s;
    background: rgba(0,0,0,.7);
}
.transpak-single-blog:hover .transpak-blog-thumb a::before {
    opacity: 1;
}
.transpak-blog-thumb img {
    -webkit-transition: .5s;
    transition: .5s;
    display: block;
    width: 100%
}
.transpak-single-blog:hover .transpak-blog-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}
.blog-page-title h2 a:hover {
    color: var(--primary)
}
.transpak-blog-meta-left {
    padding: 0 0 10px
}
.transpak-blog-meta-left a,.transpak-blog-meta-left span {
    font-size: 16px;
    margin-right: 5px;
    -webkit-transition: .3s;
    transition: .3s;
    color: #666;
}
.transpak-blog-meta-left a:hover,.transpak-blog-meta-left span:hover {
    color: var(--primary);
}
.transpak-blog-meta-left i {
    font-size: 13px;
    margin-right: 5px;
    color: var(--primary)
}
.readmore a {
    display: inline-block;
    padding: 8px 25px;
    margin-bottom: 20px;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px solid #ddd;
    color: #444;
}
.readmore a:hover {
    background-color: var(--primary);
    color: var(--light)
}
/* single blog page css */
.transpak-single-blog--thumb {
    padding-bottom: 20px;
}
.transpak-single-blog--thumb img {
    width: 100%;
}
.transpak-single-blog-title h2 {
    font-size: 30px;
}
blockquote {
    padding: 25px 32px 25px;
    margin: 0 0 30px;
    font-size: 17px;
    border-left: 3px solid #f71735;
    font-weight: 400;
    box-shadow: 0 0 15px -9px rgba(224, 184, 184, 0.64);
}
.single-blog-content h2 {
    font-size: 26px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 600;
}
.block-image .aligncenter {
    margin-left: auto;
    margin-right: auto;
}
.block-image figure {
    text-align: center;
    margin-bottom: 0;
}
.block-image img {
    width: 164px;
    height: 164px;
    border-radius: 50%;
}
.block-quote.text_italic p {
    font-size: 26px;
    font-style: italic;
    text-align: center;
}
.block-quote.text_italic cite {
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
}
.transpak-blog-social {
    margin-bottom: 25px;
    margin-top: 25px;
}
.transpak-single-icon-inner {
    display: flex;
    justify-content: center;
}
.transpak-single-icon-inner a {
    background: transparent none repeat scroll 0 0;
    border: 1px solid var(--primary);
    border-radius: 50%;
    color: var(--primary);
    display: inline-block;
    font-size: 18px;
    height: 40px;
    line-height: 38px;
    margin: 0 5px;
    text-align: center;
    width: 40px;
}
.transpak-single-icon-inner a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
/* single blog comment area css */
.comment-respond {
    border: 1px solid #ddd;
    margin-bottom: 30px;
    margin-top: 90px;
    padding: 25px 30px 30px;
    background-color: #ffffff;
}
.commment_title h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    text-transform: capitalize;
}
.commment_title h3:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -9px;
    width: 40px;
    height: 2px;
    background: #f71735;
}
.comment_field {
    overflow: hidden;
}
.comment_field .input-field {
    width: 33.33%;
    float: left;
}
.comment_field .textarea-field label {
    margin-top: 20px;
    margin-bottom: 10px;
}
.comment_field .input-field label, .comment_field .textarea-field label {
    color: #606060;
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 0;
    font-weight: 500;
}
.comment_field .input-field input {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    height: 42px;
    font-size: 16px;
    background: #fff;
}
.comment_field .textarea-field textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    height: 120px;
    padding: 10px;
    color: #555;
}
.transpak_btn {
    border: 1px solid #ddd;
    background: #f71735;
    color: #fff;
    margin-top: 30px;
    padding: 16px 24px;
    cursor: pointer;
    transition: .5s;
}
.transpak_btn:hover {
    background: #0383FF
}

/*========================== 12. Team Area CSS ==========================*/
.team_area {
    padding: 80px 0 70px;
}
.single_team {
    padding-bottom: 20px;
}
.s_team_inner {
    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.05);
    height: 100%;
}
.team_desc {
    padding: 15px 0;
}
.team_desc span {
    font-size: 18px;
}

/*========================== 13. Portfolio Area CSS ==========================*/
.portfolio_area {
    padding: 90px 0 80px;
}
.portfolio_area .witr_section_title {
    margin-bottom: 40px;
}
.single_portfolio {
    margin-bottom: 25px;
}
.s_portfolio_inner {
    position: relative
}
.portfolio-image {
    overflow: hidden;
}
.portfolio-image img{
    width: 100%;
    transition-duration: .5s
}
.single_portfolio:hover .portfolio-image img {
    transform: scale(1.1)
}
.portfolio-cont-area {
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    transition-duration: .5s;
    z-index: 100;
    opacity: 0;
    text-align: center;
}
.portfolio-ca {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    transition-duration: .5s;
    z-index: 100;
}
.single_portfolio:hover .portfolio-cont-area {
    top: 50%;
    transition-delay: .4s;
    opacity: 1;
}
.picon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.picon span {
    background: var(--light);
    color: var(--primary);
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0 5px 10px;
    border-radius: 4px;
    transition-duration: .5s;
}
.picon span:hover {
    background: var(--primary);
    color: var(--light)
}
.picon span i {
    font-size: 20px;
}
.pdesc h2, .pdesc p {
    text-align: center;
    margin-bottom: 0;
}
.pdesc h2 a {
    color: #fff;
    font-weight: 700;
    font-size: 21px;
    transition-duration: .5s;
    text-transform: capitalize;
    margin: 8px 0
}
.pdesc h2 a:hover {
    color: var(--secondary);
}
.pdesc p {
    color: #fff;
}
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    bottom: 0;
    transition-duration: .5s;
    z-index: 1;
}
.s_portfolio_inner:hover .portfolio-overlay {
    background: #f717357a;
    opacity: 1;
}
/* ====== single portfolio page css ====== */
.single_portfolio_area {
    padding: 100px 0 70px;
}
.pimgs img {
    height: 465px;
    width: 100%;
}
.prots-contentg ul {
    margin-left: 0px;
    display: inline-block;
    margin-bottom: 25px;
}
.portfolio-details-box ul li {
    padding-top: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ddd;
    list-style: none;
}
.portfolio-details-box ul li b {
    color: #444;
    font-size: 18px;
    font-weight: 600;
}
.portfolio-details-box ul li span.eright {
    font-weight: 400;
    font-size: 16px;
    margin-left: 5px;
}
.single_portfolio_area .transpak-single-icon-inner {
    display: flex;
    justify-content: left;
}
.pr-title h2 {
    margin-top: 15px;
    margin-bottom: 15px;
}
.prots-contentg ul {
    margin-left: 40px;
    display: inline-block;
    margin-bottom: 25px;
}
.portfolio-details-box .prots-contentg ul {
    margin-left: 0px;
}

/*========================== 14. Footer Area CSS ==========================*/
.footer-middle {
    padding: 65px 0 70px;
    background: #000024;
}
.footer-middle a, .footer-middle p, .footer-middle i, .footer-middle h2 {
    color: #fff;
}
.widget-title {
    font-size: 22px;
    margin: 28px 0;
    font-weight: 700;
}
.footer_logo a img {
    margin: 26px 0;
}
.transpak-description-area p {
    color: #fff;
}
.transpak-description-area .social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #dd1e1d;
    margin: 0 10px 5px 0;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    transition-duration: .5s;
}
.transpak-description-area .social-icons a:hover {
    background: var(--primary)
}
.menu-our-service-container ul li {
    margin-bottom: 10px;
}
.menu-our-service-container ul li a {
    transition-duration: .5s;
}
.menu-our-service-container ul li a:hover {
    color: var(--primary);
}
.footer_s_inner {
    display: flex;
    justify-content: left;
    margin-top: 10px;
}
.footer-sociala-info p {
    margin-bottom: 0;
}
.footer_s_inner .footer-social-icon {
    margin-right: 12px;
}
.footer-middle .mc4form-fields form {
    position: relative;
    line-height: 27px;
    margin-bottom: 22px;
    color: #fff;
}
.footer-middle .mc4form-fields input {
    height: 50px;
    position: relative;
    background: transparent;
    width: 100%;
    line-height: 43px;
    color: #fff;
    border: 1px solid #ffffff66;
    border-radius: 0px;
    padding-left: 10px;
}
.footer-middle .mc4form-fields button {
    position: absolute;
    right: 0;
    top: 0;
    width: 37%;
    height: 50px;
    border-radius: 0px;
    color: #fff;
    background: #f71735;
    cursor: pointer;
    padding: 10px 10px;
    -webkit-transition: .5s;
    transition: .5s;
    border: none;
    outline: none;
}
/* footer bottom area */
.footer-bottom {
    padding: 26px 0px 24px;
    background: #121223;
}
.copy-right-text p {
    color: #fff;
    margin-bottom: 0;
}
.footer-menu ul {
    display: flex;
    justify-content: right;
}
.footer-menu ul li a {
    color: #fff;
    padding: 0 10px;
    margin-left: 4px;
    transition-duration: .5s;
}
.footer-menu ul li a:hover {
    color: var(--primary);
}
.footer-middle-hr hr {
    margin: 0;
    border-color: #ffffff61;
}
/*========================== 15. Breadcamb Area CSS ==========================*/
.breadcamb_area {
    padding: 180px 0 140px;
    position: relative;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.breadcamb_area::before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: rgba(0,0,0,0.31);
}
.breadcamb_inner h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}
.breadcamb_inner ul {
    display: flex;
    justify-content: center;
}
.breadcamb_inner ul * {
    color: #fff;
    margin: 0;
    transition: .5s;
    font-weight: 700;
    font-size: 17px;
}
.breadcamb_inner a:hover {
    color: var(--primary);
}

/* =============== 16. Contact Area CSS =============== */
.contact_area {
    padding: 90px 0 0;
}
.input-group {
    padding: 0 5px;
}
.input-group label {
    width: 100%;
    margin-bottom: 30px;
}
.input-group input, .input-group textarea, .input-group select {
    width: 100%;
    display: block;
    padding-left: 30px;
    height: 45px;
    border: 1px solid #ddd;
    color: #929292;
    background: #fff;
    border-radius: 5px;
    outline: 0;
    font-size: 15px
}
.input-group textarea {
    height: auto;
    padding-top: 15px
}
.input-group button[type="submit"] {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--primary);
    color: var(--primary);
    transition: .5s;
    background: #fff;
    width: 100%;
    display: block;	
	height: 45px;
}
.input-group button[type="submit"]:hover {
    background: var(--primary);
    color: var(--light);
}
.contact_image img {
    margin-top: 45px;
    margin-left: 10px;
}
.contact_area .container-fluid {
    padding: 0;
}
.contact_location {
    height: 540px;
    margin-top: 90px
}
.contact_location iframe {
    width: 100%;
    border: 0;
    height: 100%;
}