/*
Template Name:sectok
Author Name: WPEXPERT
*/

/*
Table Of Content

1. Top Menu Area CSS
2. Menu Area CSS
3. Banner Area CSS
4. Feature Area CSS
5. About Area CSS
6. Counter Area CSS
7. Service Area CSS
8. Portfolio Area CSS
9. Team Area CSS
10. Pricing Area CSS
11. Testimonial Area CSS
12. Blog Area CSS
13. Contact Area CSS
14. Faq Area CSS
15. Shop Area CSS
17. Footer Area CSS

*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700;900&display=swap');
/* theme css */
:root{
    --light: #fff;
    --dark: #303849;
    --green: #108bea;
}
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;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    color: #777;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    color: #212121;
    line-height: 1.2;
    font-weight: 700;
    -webkit-transition: .5s;
    transition: .5s;
    margin: 0 0 8px;
}
.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;
}
a {
    text-decoration: none;
    transition-duration: .5s;
}
a:hover {
    text-decoration: none;
    color: var(--green);
}
a.btn, a {
    text-decoration: none;
    transition-duration: .5s;
}
a.btn:hover, a:hover {
    text-decoration: none;
}
ul, li {
    list-style: none;
}
.heading-md {
    font-size: 24px;
    padding: 15px 0 10px 0;
    color: #212121;
    font-weight: 700;
    line-height: 1.2;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.middle {
    display: flex;
    align-items: center;
}
a.dtbtn {
    border: none;
    display: block;
    font-size: 16px;
    margin-left: 12px;
    font-weight: 500;
    padding: 12px 40px!important;
    color: #fff!important;
    background: var(--green)!important;
    transition-duration: .5s;
}
a.dtbtn:hover {
    background: #000!important;
}
p {
    color: #777;
    line-height: 1.7em;
}
.witr_btn {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    position: relative;
    margin-right: 15px;
    z-index: 2;
    transition: 1s;
    padding: 18px 46px 18px 46px;
    color: #fff;
    display: inline-block;
    background: var(--green);
}
.witr_btn:hover {
    background: #000;
    color: #fff;
}
.btn {
    font-weight: 500;
    transition-duration: .5s;
}
.slick-prev, .slick-next {
    font-size: 0;
}
.current_menu_item {
    color: #37889E!important;
}
img {
    max-width: 100%;
}
.st {
    padding: 10px 0 30px;
}
.heading-md {
    font-size: 24px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
}
.pp {
    color: #777777;
}
#scrollUp {
    position: fixed;
    right: 100px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: var(--green);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    font-size: 30px;
    transition: .5s;
    border: none;
    outline: none;
}
/* ========== 1. Top Menu Area CSS ========== */
.top-contact-section {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #108bea;
}
.left-contact {
    display: flex;
    justify-content: left;
}
.left-contact .address, .left-contact .phone {
    margin-right: 30px;
}
.left-contact span, .left-contact a {
    display: inline-block;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
}
.left-contact i {
    margin-right: 8px;
    font-size: 14px;
}
.right-contact .social-icons a {
    padding: 0 5px;
    color: var(--light);
    display: inline-block;
    font-weight: bold;
    transition-duration: .5s;
}
.right-contact .social-icons a:hover {
    color: #000;
}
.sectok_nav_area.trp_nav_area.scroll_fixed.postfix, .top-contact-section {
    padding-left: 200px;
    padding-right: 200px;
}
.trp_nav_area .container {
    max-width: 100%!important
}
/* ========== 2. Menu Area CSS ========== */
.sectok_nav_area.postfix {
    transition: .3s;
}
.sectok_nav_area {
    background: #fff;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);
}
.trp_nav_area {
    border-bottom: 1px solid #eaebef26;
}
.logo-right,
.logo-left {
    align-items: center;
}
.mobile_menu_logo.text-center {
     padding: 20px 0;
}

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

/* logo sticky */
 .sectok-main-menu .logo a.main_sticky_main_l {
     display: block;
}
 .sectok-main-menu .logo a.main_sticky_l {
     display: none;
}
/* logo pre */
 .sectok-main-menu .prefix .logo a.main_sticky_main_l {
     display: none;
}
 .sectok-main-menu .prefix .logo a.main_sticky_l {
     display: block;
} 
/* MENU text CSS */
 .sectok_menu ul {
     text-align: right;
     list-style: none;
}
 .sectok_menu > ul > li {
     display: inline-block;
     position: relative;
}
.sectok_menu > ul > li > a {
    display: block;
    margin: 40px 25px;
    transition: .5s;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    color: #272727;
    text-transform: uppercase;
}
.sectok_menu ul .sub-menu li a:hover, .sectok_menu ul .sub-menu li.current-menu-item a, .sectok_menu>ul>li.current-menu-item>a, .sectok_menu>ul>li>a:hover, .sectok_nav_area.prefix .sectok_menu>ul>li.current-menu-item>a, .sectok_nav_area.prefix .sectok_menu>ul>li>a:hover, .hbg2 .sectok_menu>ul>li.current-menu-item>a, .hbg2 .sectok_menu>ul>li>a:hover, .heading_style_2 .sectok_menu>ul>li.current-menu-item>a, .heading_style_2 .sectok_menu>ul>li>a:hover, .heading_style_3 .sectok_menu>ul>li.current-menu-item>a, .heading_style_3 .sectok_menu>ul>li>a:hover, .heading_style_4 .sectok_menu>ul>li.current-menu-item>a, .heading_style_4 .sectok_menu>ul>li>a:hover {
    color: var(--green);
}
 .sectok_menu > ul > li > a:before, .sectok_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;
}
 .sectok_menu ul li:last-child a {
     margin-right: 15px !important;
}
.sectok_menu > ul > li.current > a, .sectok_menu > ul > li:hover > a, .creative_header_menu > ul > li:hover > a {
    color: var(--green);
    background-color: transparent;
	color: var(--green);
}
 .sectok_menu > ul > li:hover > a:before, .sectok_menu > ul > li.current > a:before {
     opacity: 1;
}

 .transprent-menu .sectok_nav_area {
     background-color: transparent;
     padding: 0;
     transition: .5s;
}
 .sectok_nav_area.postfix {
     transition: .3s;
}
.sectok_nav_area.prefix {
    background-color: transparent;
}
.hbg2 {
    background-color: rgba(0,0,0,0.7) !important;
}

 .sectok_nav_area.prefix .sectok_menu > ul > li > a {
     color:#fff;
}
.sectok_nav_area.prefix .sectok_menu > ul > li.current > a {
    color: var(--green);
}
 .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 */
.sectok_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 240px;
    text-align: left;
    background: #fff;
    margin: 0;
    padding: 15px 8px 8px 25px;
    z-index: 9999;
    box-shadow: 0 0 30px rgb(0 0 0 / 9%);
    transition: .2s;
    opacity: 0;
    visibility: hidden;
}
 .sectok_menu ul li:hover > .sub-menu {
     transition: .5s;
     opacity: 1;
     visibility: visible;
     top: 100%;
     z-index: 9999;
}
 .sectok_menu ul .sub-menu li {
     position: relative;
	 transition:.5s;
}
.sectok_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 0px;
}
 .sectok_menu ul .sub-menu li:hover > a, .sectok_menu ul .sub-menu .sub-menu li:hover > a, .sectok_menu ul .sub-menu .sub-menu .sub-menu li:hover > a, .sectok_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
     color: var(--green);
}
.sectok_menu ul .sub-menu li:before {
    left: -18px;
}
.sectok_menu ul .sub-menu li:hover:before{
	opacity:1;
}
.sectok_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a, .sectok_menu ul .sub-menu .sub-menu .sub-menu li:hover>a, .sectok_menu ul .sub-menu .sub-menu li:hover>a, .sectok_menu ul .sub-menu li:hover:before, .sectok_menu ul .sub-menu li:hover>a {
    color: var(--green);
    padding-left: 12px;
}
/* sub menu 2 */
.sectok_menu ul .sub-menu .sub-menu {
    left: 100%;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}
 .sectok_menu ul .sub-menu li:hover > .sub-menu {
     opacity: 1;
     visibility: visible;
     top: 0%;
}
/* sub menu 3 */
 .sectok_menu ul .sub-menu .sub-menu li {
     position: relative;
}
 .sectok_menu ul .sub-menu .sub-menu .sub-menu {
     right: 100%;
     left: auto;
     top: 130%;
     opacity: 0;
     visibility: hidden;
}
 .sectok_menu ul .sub-menu .sub-menu li:hover > .sub-menu {
     opacity: 1;
     visibility: visible;
     top: 0%;
}
/* sub menu 4 */
 .sectok_menu ul .sub-menu .sub-menu .sub-menu li {
     position: relative;
}
 .sectok_menu ul .sub-menu .sub-menu .sub-menu li:hover > .sub-menu {
     opacity: 1;
     visibility: visible;
     top: 0%;
}

/* has menu icon */
.sectok-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;
}
 .sectok-main-menu .menu-item-has-children .menu-item-has-children> a:after {
     margin-left: 8px;
     content: "\f107";
}

/* quearys area css */
.sectok_menu.main-search-menu > .em-header-quearys, .em-quearys-top.msin-menu-search {
    display: inline-block;
}
.em-top-quearys-area {
    position: relative;
}
.sectok_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;
}
.sectok_nav_area.prefix .main-search-menu .em-header-quearys .em-quearys-menu i {
    color: #fff;
}
.mrt10{
	margin-top:10px;
}
.em-quearys-menu i {
    background: var(--green);
    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: var(--green);
	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: var(--green);
}
.main_menu_header_address_text h4 {
    margin-bottom: 0;
    color: #030925;
}

/*=======================
#2 sectok 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: 16px;
    margin-left: 20px;
    font-weight: 500;
    padding: 12px 38px;
    color: #fff;
    background: var(--primary);
    border-radius: 0px;
    font-family: "Cabin", sans-serif;
}
a.dtbtn:hover {
    background: var(--dark);
}

/* ========== 3. Banner Area CSS ========== */
.banner-section {
    background-image: url(assets/images/slider-1-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    background-position: center center;
}
.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: 99;
}
.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: 999;
}
.banner-wrapper {
    position: relative;
    padding: 200px 20px;
}
.banner-left-area {
    position: relative;
    z-index: 999;
}
.banner-heading h2 {
    font-size: 66px;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 700;
}
.banner-para p {
    color: #fff;
    font-size: 20px;
    margin: 20px 0;
}
.banner-btn {
    margin-top: 45px;
}
.banner-image-area {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
    display: block;
    width: 30%;
    z-index: 0;
}
.stba {
    padding: 60px 0;
}
.stba .stba_inner h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 5px;
}
.stba .stba_inner a, .stba .stba_inner i, .stba .stba_inner p {
    color: #fff;
    margin: 0;
    transition: .5s;
}
.stba .stba_inner a:hover {
    color: var(--green);
}

/* ========== 4. Feature Area CSS ========== */
.feature-area {
    padding: 90px 0 10px 0;
    position: relative;
    z-index: 999;
    margin-top: -200px;
}
.single-feature {
    margin-bottom: 30px;
}
.feature-wrapper {
    background: #fff;
    padding: 50px 30px 30px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    height: 100% 
}
.feature-icon span {
    background: #108bea;
    display: block;
    padding: 25px;
    border-radius: 8px;
    transition-duration: .5s;
}
.feature-wrapper:hover .feature-icon span {
    background: #2e3748;
}
.feature-icon span i {
    color: #fff;
    font-size: 30px;
}
.feature-heading h2 {
    text-align: center;
    margin: 10px 0 12px;
}

.feature-para p {
    text-align: center;
    color: #7a7a7a
}
/* ========== 5. About Area CSS ========== */
.about-area {
    padding: 0px 0 75px 0;
}
.about-left-wrapper {
    margin-top: 40px;
}
.about-left-wrapper p {
    width: 100%!important;
    text-align: left;
    margin-top: 25px!important;
}
.about-menu li {
    margin-top: 12px;
}
.about-menu li span {
    font-size: 15px;
}
.about-menu li i {
    color: var(--green);
    margin-right: 8px;
    font-size: 14px;
}
.about-btn-area {
    margin-top: 45px;
}

/* ========== 6. Counter Area CSS ========== */
.counter-area {
    padding: 50px 0 45px 0;
    background: var(--green);
    color: #fff;
    text-align: center;
}
.counter-wrapper {
    padding: 12px;
}
.single-counter {
    padding: 12px;
}
.icon-area {
    text-align: center;
}
.icon-area i {
    font-size: 40px
}
.counter-number {
    text-align: center;
}
.counter-number h2 {
    font-size: 40px;
    display: inline-block;
    margin: 10px 0 5px 0;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    margin-right: 8px;
    color: #fff;
}
.counter-number span {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
}
.counter-heading h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

/* ========== 7. Service Area CSS ========== */
.service-area {
    padding: 100px 0;
}
.service-top{
    padding: 12px 0 20px;
}
.service-wrapper {
    margin-top: 30px;
}
.single-service {
    padding: 0 10px;
    margin-bottom: 20px;
}
.single-service-wrapper {
    padding: 40px 35px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
    height: 100%;
    position: relative;
}
.single-service-wrapper::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 3px;
    height: 0%;
    transition: .5s;
    background: var(--green);
}
.single-service-wrapper:hover::before{
    height: 40%;
    z-index: 999
}
.single-service-wrapper .service-icon.as::before {
    position: absolute;
    top: 50px;
    left: 65px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--green);
    content: '';
    opacity: .12;
    transition-duration: .5s;
}
.single-service-wrapper:hover .service-icon.as::before {
    opacity: 1;
}
.single-service-wrapper .service-icon.as::after {
    background: url(assets/images/5.png) no-repeat right top;
    width: 288px;
    height: 216px;
    position: absolute;
    right: 0;
    top: 0;
    content: '';
    opacity: 0;
    transition: .5s;
    z-index: 10;
}
.single-service-wrapper:hover .service-icon.as::after {
    opacity: 1;
}
.service-heading h2 {
    margin: 20px 0;
}
.service-heading h2 a:Hover {
    color: var(--green)
}
.service-heading h2 a {
    color: var(--green);
    transition-duration: .5s;
}
.service-heading h2 a {
    color: #212121;
    font-size: 24px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
}
.service-para p {
    color: #777777;
}
.service-menu {
    margin-top: 15px;
    margin-bottom: 5px;
}
.service-menu li {
    margin-bottom: 8px;
}
.service-menu li i {
    margin-right: 15px;
    color: var(--green);
}
.service-menu li a {
    color: #454545;
}
.service-btn a.btn {
    background: #108bea26;
    padding: 12px 30px;
    color: var(--green);
    transition-duration: .5s;
    margin-top: 20px;
    border-radius: 0;
}
.service-btn a.btn.isb {
    color: #fff;
    background: #222429;
}
.service-btn a.btn.isb:hover {
    background: var(--green);
}
.service-btn a.btn.isb {
    background: #fff;
    color: var(--green);
}
.service-btn a.btn:hover {
    background: var(--green);
    color: #fff;
}
.single-service-image  {
    padding-top: 100px;
}
.single-service-image img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}
.service-desc h2 {
    font-size: 40px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #212121;
    padding: 20px 0 5px;
}
.service-desc h3 {
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #212121;
    margin-bottom: 5px;
}
.service-desc p {
    color: #777;
}
.service-desc {
    margin-bottom: 90px;
}
.faq-area {
    padding-bottom: 90px
}
.single-faq {
    box-shadow: 1px 1px 7px -5px rgba(0, 0, 0, 0.75);
    margin-bottom: 20px;
}
.faq-header {
    cursor: pointer;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 600;
    color: #232323;
    display: block;
}
.faq-body p {
    padding: 15px 20px 30px;
    margin-bottom:  0;
}
.faq-title {
    display: inline-block;
    padding-left: 8px;
}
.faq-header:before {
    font-family: 'FontAwesome';  
    content: "\f068";
    font-size: 20px;
    display: inline-block;
    font-weight: 400;
}
.faq-header.collapsed:before {
    content: "\f067"; 
}

/* ========== 8. Portfolio Area CSS ========== */
.portfolio-area {
    padding: 100px 0 85px;
    background: #f7f7f7;
}
.portfolio-top {
    padding: 10px 0 30px
}
.portfolio-btn-menu {
    text-align: center;
    padding-bottom: 30px;
}
.portfolio-btn-menu li {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px 15px;
    color: #212121;
    cursor: pointer;
}
.pgp li {
    border: 1px solid #f3eaea;
    border-radius: 8px;
    transition-duration: .5s
}
.pgp li.current_menu_item {
    background: var(--green);
    color: #fff!important;
}
.pgp li:hover {
    background: var(--green);
    color: #fff!important;
}
.single-portfolio {
    margin-bottom: 25px;
}
.single-portfolio-wrapper {
    position: relative
}
.portfolio-image {
    overflow: hidden;
}
.portfolio-image img{
    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 span {
    background: var(--green);
    color: #fff;
    padding: 15px;
    margin: 0 5px 10px;
    border-radius: 4px;
    transition-duration: .5s;
}
.picon span:hover {
    background: #1b1b1b;
}
.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;
}
.pdesc h2 a:hover {
    color: var(--green);
}
.pdesc p {
    color: #fff;
}
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition-duration: .5s;
    z-index: 1;
}
.single-portfolio-wrapper:hover .portfolio-overlay {
    bottom: 0;
    background: rgb(16 139 234 / 50%);
    opacity: 1;
}
.paginations {
    margin-top: 20px;
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px 0
}
.paginations li {
    display: inline-block;
    border-radius: 5px;
    margin: 0 5px;
    color: #888;
    font-size: 19px;
    transition-duration: .5s;
    box-shadow: 0 10px 40px 0 rgba(50,65,141,.12);
}
.paginations li a, .paginations li span {
    border-radius: 5px;
    display: block;
    color: #888;
    padding: 15px 24px;
}
.paginations li.active {
    background: var(--green);
}
.paginations li.active span {
    color: #fff;
}
.paginations li:hover {
    background: var(--green);
    color: #fff;
}
.paginations li:hover a  {
    color: #fff
}
/* single portfolio area */
.sp-area {
    padding: 90px 0 100px;
}
.sp-image img {
    width: 100%;
    display: block;
}
.sp-info h2 {
    font-size: 25px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}
.sp-info ul li {
    padding: 15px 0 10px;
    border-bottom: 1px solid #ddd;
}
.sp-info ul li b {
    color: #777;
    font-size: 18px;
    font-weight: 600;
}
.sp-info ul li span {
    color: #777;
    margin-left: 5px;
    font-weight: 400;
}
.sp-social-icons {
    margin: 25px 0;
}
.sp-social-icons span {
    width: 40px;
    height: 40px;
    margin-right: 8px;
    color: var(--green);
    line-height: 40px;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: inline-block;
    text-align: center;
    transition-duration: .5s;
}
.sp-social-icons span:hover {
    color: #fff;
    background: var(--green);
}
.sp-content strong {
    display: block;
}
.sp-content ul {
    display: inline-block;
    margin-bottom: 16px;
}
.sp-content ul li {
    color: #777;
}

/* ========== 9. Team Area CSS ========== */
.team-area {
    padding: 100px 0 85px;
}
.single-team {
    height: 100%;
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}
.single-team-wrapper {
    box-shadow: 0 5px 20px 0 #00000014;
    height: 100%;
}
.team-member-image img {
    margin: auto;
    display: block;
}
.team-member-desc {
    padding: 23px 25px 30px;
}
.team-member-desc h2 {
    margin: 0;
    padding: 0;
    text-align: center;
}
.team-member-desc h2 a {
    transition-duration: .5s;
}
.team-member-desc h2 a:hover {
    color: var(--green);
}
.team-member-desc p {
    text-align: center;
}
.member-social-icon {
    text-align: center;
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.member-social-icon a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    transition: .5s;
}
.member-social-icon a:hover {
    background: var(--green);
}
.member-social-icon a i {
    color: #ababab;
    transition: .5s;
}
.member-social-icon a:hover i {
    color:#fff;
}

/* ========== 10. Pricing Area CSS ========== */
.pricing-area {
    padding-bottom: 90px;
}
.pricing-area.pp2 {
    background: #F9F9F9
}
.pp1, .pp2, .pp3 {
    padding: 90px 0;
}
.single-price {
    margin-bottom: 30px;
}
.single-price-wrapper {
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
    height: 100%;
    position: relative;
}
.pp3spw.single-price-wrapper {
    background: #fff;
    border: none;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 8%);
    overflow: hidden;
}
.single-price-wrapper.active {
    background: var(--green);
}
.single-price-wrapper.active * {
    color: #fff;
}
.pricing-tb {
    position: relative;
    height: 192px;
    overflow: hidden;
}
.pi-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #108BEAD6;
}
.ptb-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
}
.ptb-desc {
    padding: 30px 25px;
    position: relative;
    z-index: 100;
}
.rotate-heading strong {
    background: var(--green);
    color: #fff;
    padding: 7px 20px;
    display: inline-block;
    font-weight: 500;
    width: 160px;
    position: absolute;
    top: 13px;
    right: -40px;
    transform: rotate(45deg);
    text-align: center;
}
.ptb-desc h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
}
.ptb-desc h3 {
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-top: 20px;
    margin: 0;
}
.pricing-icon span {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    border-radius: 50%;
    left: 44px;
    top: -50px;
    z-index: 999;
}
.pricing-icon i {
    font-size: 40px;
    color: var(--green);
}
.pricing-menu i.icofont-check {
    color: #777;
    margin-right: 8px;
}
.ptb-desc h3 span {
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    margin-right: 5px;
}
.ptb-desc p {
    margin: 0;
    color: #fff;
}
.price-package h2 {
    text-align: center;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    padding: 55px 0px 15px;
}
.pricing-price h4 span {
    margin-right: 5px;
    display: inline-block;
}
.pricing-price h4 {
    font-size: 49px;
    color: var(--green);
    text-align: center;
    font-family: "Roboto", sans-serif;
}
.pricing-menu {
    padding-left: 60px;
}
.pricing-menu li {
    margin-bottom: 18px;
}
.pricing-menu li span {
    color: #777;
}
.pricing-menu li i.fa-check-circle {
    margin-right: 8px;
    color: var(--green);
}
.pricing-btn {
    padding: 37px 0 60px;
    text-align: center;
}
.pricing-btn a.btn {
    background: #fff;
    padding: 17px 30px;
    color: #212121;
    border: 1px solid #E5E5E5;
    font-weight: 500;
}
.pricing-btn.p2btn {
    padding-bottom: 0;
}
.pricing-btn.p2btn a.btn {
    width: 100%;
    display: block;
    background: #030925;
    color: #fff;
}
.pricing-btn a.btn:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}
.pricing-btn.active a.btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}
.pp3ti span {
    padding-top: 40px;
    display: block;
    text-align: center;
}
.pp3ti span i {
    font-size: 40px;
    color: var(--green);
}
.pp3th h2 {
    padding: 26px 0 12px;
    font-size: 30px;
    margin-bottom: 0;
}
.pp3pp h4 {
    color: #fff;
    background: var(--green);
    font-size: 35px;
    padding: 10px 0;
    margin-bottom: 30px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
}
.pp3pp h4 span {        
    font-size: 24px;
    margin-right: 5px;
}
.pp3pm {
    padding: 20px;
}
.pp3pm li {
    text-align: center;
}
.pp3pm li i {
    color: #777;
    margin-right: 8px;
}
.pp3pb a.btn {
    background: var(--green);
    color: #fff;
}
.pp3pb a.btn:hover {
    background: #fff;
    color: var(--green);
    border-color: var(--green);
}

/* ========== 11. Testimonial Area CSS ========== */
.testimonial-area {
    padding: 100px 0;
    background: #F9F9F9;
}
.testimonials {
    position: relative;
}
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    background: var(--green);
    border: none;
    outline: none;
    transition: .5s;
    opacity: 0;
}
.slick-prev:hover, .slick-next:hover {
    background: #000;
    opacity: 1;
}
.testimonials:hover .slick-prev, .testimonials:hover .slick-next {
    opacity: 1;
}
.slick-prev {
    left: -65px;
}
.slick-next {
    right: -65px;
}
.slick-next::before, .slick-prev::before {
    color: #fff;
    font-size: 40px;
    -webkit-transition: .3s;
    transition: .3s;
    font-family: IcoFont!important;
    line-height: inherit;
    opacity: 1;
}
.slick-prev::before {
    content: "\ea93";
}
.slick-next::before {
    content: "\ea94";
}
.single-testimonial-wrapper {
    box-shadow: 0 0 10px 0 rgb(240 241 243);
    background: #fff;
    padding: 40px 35px 40px 35px;
    margin-top: 20px;
}
.review-area {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 10px;
}
.review-star {
    margin-right: 12px;
}
.review-star span i {
    color: var(--green);
    font-size: 18px;
}
.review-text h4 {
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--green);
    font-style: italic;
}
.review-cont {
    padding-top: 15px;
    padding-bottom: 40px;
}
.review-cont p {
    margin: 0;
    color: #777;
}
.reviewer-image {
    padding-right: 12px;
}
.reviewer-image img {
    border-radius: 50%;
}
.reviewer-name-surname h4, .reviewer-name-surname p {
    margin-bottom: 0;
}
.reviewer-name-surname h4 {
    font-size: 20px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
}
.reviewer-name-surname p {
    font-size: 16px;
    color: var(--green);
    font-weight: 400;
}

/* ========== 12. Blog Area CSS ========== */
.blog-area {
    padding: 100px 0 90px;
    background: #fff;
}
.blog-area-wrapper {
    padding-top: 30px;
}
.blogs:hover .slick-prev, .blogs:hover .slick-next {
    opacity: 1;
}
.single-blog {
    margin-bottom: 30px
}
.single-blog-wrapper {
    box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.blog-image-area {
    position: relative;
    overflow: hidden;
}
.blog-image img {
    transition-duration: .5s;
    display: block;
    width: 100%
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    overflow: hidden;
    border-radius: 4px;
    z-index: 10;
}
.blog-category a {
    background: var(--green);
    padding:3px 10px;
    color: #fff;
    display: block;
}
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(0,0,0,.5);
    transform: scale(0);
    transition-duration: .5s;
    z-index: 1;
    opacity: 0
}
.baio {
    transform: scale(1);
}
.single-blog-wrapper:hover .image-overlay {
    transform: scale(1);
    opacity: 1;
}
.single-blog-wrapper:hover .blog-image img {
    transform: scale(1.2)
}
.blog-desc-area {
    padding: 30px 30px 20px
}
.blog-desc-area.sbra {
    padding: 5px 15px 20px;
}
.blogger-name-time {
    display: flex;
}
.blogger-info {
    margin-right: 8px;
}
.blogger-name-time i {
    color: var(--green);
    margin-right: 8px
}
.blogger-name-time span {
    color: #777;
}
.blog-title h2 {
    margin: 15px 0 20px;
    line-height: .8;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 24px;
}
.blog-desc-area.sbra .blog-title h2 {
    margin-bottom: 10px;
}
.blog-desc-area.sbra .blogger-name-time {
    margin-bottom: 10px;
}
.blog-title h2 a{
    color: #212121;
    transition-duration: .5s;
}
.blog-title h2:hover a{
    color: var(--green);
}
.readmore-btn a.btn {
    color: var(--green);
}
.readmore-btn a.btn:hover {
    color: #000;
}
.blog-bottom-btn {
    position: absolute;
    bottom: 0;
    right: 24px;
}
.blog-bottom-btn a.btn i{
    color: var(--green);
    font-size: 20px;
    z-index: 100;
    position: relative;
    font-weight: 500;
    transition-duration: .5s;
}
.blog-desc-area.sbra .readmore-btn a.btn {
    border: 1px solid #ddd;
    color: #444;
    padding: 8px 24px
}
.blog-desc-area.sbra .readmore-btn a.btn:hover {
    color: #fff;
    background: var(--green);
}
.single-blog-wrapper:hover .blog-bottom-btn a.btn i {
    color: #fff;
}
.blog-bottom-btn a.btn::before {
    content: '';
    position: absolute;
    height: 110px;
    width: 110px;
    border: 2px solid #f7f7f7;
    bottom: -70px;
    z-index: 1;
    transform: rotate(-35deg);
    right: -30px;
    border-radius: 0 20px;
    transition: .5s;
}
.single-blog-wrapper:hover .blog-bottom-btn a.btn::before {
    background: var(--green);
}
/* single blog area */
.blog-content h2 {
    font-size: 24px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    margin-bottom: 10px
}
.sbva {
    margin-bottom: 10px;
    width: 100%;
    max-width: 500px;
    height: 280px;
}
.sbva iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.sb-comment-area {
    padding: 38px 30px 45px;
    margin-bottom: 30px;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.comment-heading h2 {
    font-size: 24px;
    position: relative;
    margin-bottom: 40px;
}
.comment-heading h2::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -9px;
    width: 40px;
    height: 2px;
    background: var(--green)
}
.sci {
    margin-bottom: 16px;
}
.sci input, .sci textarea {
    display: block;
    padding: 8px 12px;
    color: #495057;
    border: 1px solid #e5e5e5;
    width: 100%;
    border-radius: 4px;
    line-height: 1.5;
    margin-bottom: 16px;
    transition: .5s;
}
.sci input:focus, .sci textarea:focus {
    border-color: #80bdff;
}
.sci textarea {
    height: 150px;
}
.scisb {
    margin-bottom: 16px;
}
.scisb label {
    color: #777;
    margin-left: 4px;
    font-size: 16px;
}
.scisb button {
    border: none;
    outline: none;
    padding: 19px 29px;
    border-radius: 5px;
}

/* Blog sidebar area */
.sbla {
    padding: 35px 30px;
    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: var(--green);
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    border: none;
    outline: none;
    cursor: pointer;
    transition-duration: .5s;
}
.input-field button:hover {
    background: #000;
}
.blog-left-side ul li:before {
    content: "\eaa0";
    font-family: IcoFont!important;
    font-size: 18px;
    color: #454545;
    transition-duration: .5s;
}
.blog-left-side ul li:hover:before {
    color: var(--green);
}
.blog-left-side .widget-title {
    position: relative;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
}
.blog-left-side .widget-title::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    margin-top: 17px;
    width: 26%;
    border: 1px solid var(--green);
    top: 50%;
}
.blog-left-side ul li {
    border-bottom: 1px solid rgba(0,0,0,.12);
    margin: 0 0 10px;
    padding-bottom: 10px;
}
.blog-left-side ul li:last-child {
    border-bottom: none;
}
.blog-left-side ul li a {
    color: #454545;
    transition-duration: .5s;
}
.blog-left-side ul li a:hover {
    color: var(--green);
}
.recent-post-item {
    padding-right: 20px;
    margin-bottom: 10px;
    overflow: hidden;
}
.recent-post-image {
    width: 70px;
    float: left;
    margin-right: 15px;
}
.recent-post-image img {
    width: 100%;
}
.recent-post-text h4 {
    margin-bottom: 0;
    line-height: 1;
    margin-top: -5px;
}
.recent-post-text h4 a {
    font-size: 17px;
    font-family: "Roboto", sans-serif;
    color: #454545;
    font-weight: 600;
}
.recent-post-text h4 a:hover {
    color: var(--green);
}
.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(--green);
    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(--green)
}
/* ========== 13. Contact Area CSS ========== */
.contact-area {
    padding: 110px 0;
}
.contact-location-area {
    padding-bottom: 100px;
}
.contact-form-area {
    padding: 40px;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 6%);
}
.contact-heading h2 {
    font-size: 17px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: var(--green)
}
.contact-heading h3 {
    margin:15px 0 50px;
    font-size: 38px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}
.contact-form input, .contact-form textarea {
    padding: 6px 12px 6px 30px;
    width: 100%;
    border: 1px solid #f1f1f1;
    border-radius: 6px;
    margin-bottom: 24px;
}
.contact-form input {
    height: 60px;
}
.contact-form textarea {
    height: 150px;
}
.contact-form span {
    display: none;
}
.contact-form button {
    border: none;
    margin-bottom: 16px;
}
.location, .location iframe {
    width: 100%;
    height: 100%;
    max-height: 600px;
    border: 0;
}

/* ========== 14. Faq Area CSS ========== */
.faq-part-area {
    padding: 100px 0;
}
.single-faq-part {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
    border: 1px solid #F2F2F2;
    margin-bottom: 16px;
}
.faq-part-header {
    padding: 12px 30px;
    transition-duration: .5s;
    font-weight: 600;
    background: var(--green);
    position: relative;
    color: #fff!important;
    display: block;
}
.faq-part-header:hover {
    color: #fff!important;
}
.faq-part-header.collapsed {
    background: #fff;
}
.faq-part-header.collapsed {
    color: #212121!important;
}
.faq-part-header.collapsed {
    background: #fff;
}
.faq-part-header:hover {
    background: var(--green)!important;
}
.faq-part-header:hover {
    color: #fff!important;
}
.faq-part-header::after {
    color: #fff;
}
.faq-part-header.collapsed::after {
    color: #212121;
}
.faq-part-header:hover::after {
    color: #fff!important;
}
.faq-part-header.collapsed:after {
    content: '\eaa1';
}
.faq-part-header:after {
    font-family: 'Icofont';
    content: '\ea99';
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 20px
}
.faq-part-body p {
    padding: 20px 30px;
    margin-bottom: 16px;
}

/* ========== 15. Shop Area CSS ========== */
.sec_padding {
    padding: 100px 0 90px;
}  
  .order_tx {
    justify-content: flex-end;
    align-items: center;
}  
ul.tx_product_tab.nav {
    justify-content: flex-end;
    margin-bottom: 2em;
  }
    ul.tx_product_tab.nav li a.active {
    color: #fff;
    border: 1px solid #e8e8e8;
    font-size: 22px;
    margin: 1px 0 0;
    padding: 2px 9px 2px;
    display: inline-block;
    margin-left: 10px;
    border-radius: 5px;
    background: var(--green);
    transition-duration: .5s;
}
ul.tx_product_tab.nav li a {
    font-size: 22px;
    margin: 1px 0 0;
    padding: 2px 9px 2px;
    display: inline-block;
    margin-left: 10px;
    border-radius: 5px;
    color: #333;
    border: 1px solid #e8e8e8;
}  
.woocommerce-ordering {
    margin: 0 0 2em;
}
.woocommerce-result-count {
    font-weight: 600;
}
.row.tx_product_list {
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 5%);
    margin-bottom: 30px !important;
}
.tbd_product {
    padding-left: 0;
}  
.listdiv_center {
    padding: 15px 0;
}  
.shop_grid_area .price span {
    font-size: 1rem;
    font-weight: 700;
    color: #277dff;
}  
p.list_produc_content {
    margin-top: 15px;
}
.thb_product_car {
    text-align: center;
    transition: 0.5s;
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    opacity: 1;
}
.thb_product_car.thb_product_carlist a, .product_icon a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 3px;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    box-shadow: 0 0 10px 0 rgb(27 81 209 / 10%);
    margin: 0 3px;
    color: #212121;
    transition-duration: .5s;
    background: #fff;
}
.tbd_product .thb_product_car a {
    background: #fff;
    color: #0e0d0d;
}
.thb_product_car.thb_product_carlist a:hover, .product_icon a:hover {
    color: #fff;
    background: var(--green);
}
.product_icon {
    position: absolute;
    opacity: 0;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    transition-duration: .5s;
    visibility: hidden;
}
.product_inner:hover .product_icon {
    transform: translateY(-20px);
    opacity: 1;
    visibility: visible;
}
  .product_img {
    position: relative;
}
.sale {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--green);
    padding: 6px 12px;
    border-radius: 2px
}
.sale p {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    line-height: normal;
}
  .product_inner {
    box-shadow: 0 0 10px 0 rgba(148,146,245,.2);
    margin-bottom: 30px;
}
  .product_text {
    padding: 20px
}
.tbd_product_title a h3, .product_name h3 a {
    font-weight: 700;
    color: #212121;
    display: block;
    transition-duration: .5s;
}
.product_name h3 a {
    font-size: 20px;
    text-align: center;
}
.tbd_product_title a h3 {
    font-size: 24px;
}
.tbd_product_title a h3:hover {
    color: var(--green);
}
.tbd_product_title h3 a:hover, .product_name h3 a:hover {
    color: var(--green);
}
.product_price p {
    color: var(--green);
    text-align: center;
    margin: 0;
    font-weight: 700;
}
.shop_grid_area .price span del, .product_price p del {
    font-size: 1rem;
    font-weight: 700;
    color: #277dff;
    opacity: 0.5;
    margin-right: 4px;
}

/* ========== 17. Footer Area CSS ========== */
.witrfm_area {
    background: #17161a;
}
.footer-middle {
    padding: 65px 0 70px
}
.footer-middle a, .footer-middle p, .footer-middle i, .footer-middle h2 {
    color: #fff;
}
.widget-title {
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    margin: 28px 0 25px;
    font-weight: 700;
}
.sectok-description-area a img {
    margin: 26px 0;
}
.sectok-description-area p {
    color: #fff;
}
.sectok-description-area .social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #ffffff70;
    margin: 0 10px 5px 0;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    transition-duration: .5s;
}
.sectok-description-area .social-icons a:hover {
    background: var(--green)
}
.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(--green);
}
.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 bottom area */
.footer-bottom {
    padding: 26px 0px 24px;
}
.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(--green);
}
.footer-middle-hr hr {
    margin: 0;
    border-color: #ffffff61;
}

/* section title */
.witr_section_title {
    position: relative
}
.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: 45px;
    margin: auto;
    font-weight: 700;
    line-height: 1.2;
    font-family: "Roboto", sans-serif;
}
.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: 18px;
    display: inline-block;
    margin-bottom: 10px;
    color: var(--green)
}
.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;
    color: #777;
}
.witr_section_title_inner.text-right p {
    width: 74%;
    margin-right: 0;
    margin-left: auto
}