/*
    Template  Name: Gogrin - Firestation
*/

/*
Table Of Content

1. header top area

2. main menu area

3. slider area

4. video slider area  

5. breadcum area

6. about area

7. feature area

8. call to action

9. tab area

10. service area

11. video area

12. testimonial area

13. project area

14. call in area

15. brand area

16. choose area

17. team area

18. counter area

19. contact service

20. contact area

21.  map area

22. faq area

23. site map area 

24.  blog area

25.  subscribe area

26.  footer area

*/

/* ======= site font family ==========*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400..900&family=Roboto:wght@400;500;700;900&display=swap');
:root{
    --blackc: #000;
    --whitec: #fff;
    --bgcolor: #3c3c3c;
    --brcolor: #c91304;
    --paracolor: #3c3c3c;
    --titlecolor: #3c3c3c;
}

/* defult css */
body{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    font-family: "Roboto", sans-serif;
    color: var(--paracolor);
}
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    font-size: 24px;
    font-weight: 700;
    color: var(--titlecolor);
    line-height: 1.2;
    font-family: "Roboto Slab", serif;
    padding: 0;
    margin-bottom: 10px;
    
}
h1{
    font-size: 30px;
}
h2{
    font-size: 24px;
}
h3{
    font-size: 22px;
}
h4{
    font-size: 18px;
}
h5{
    font-size: 16px;
}
h6{
    font-size: 15px;
}
a{
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    color: var(--blackc);
    transition: .5s;
}
a:hover{
    color: var(--brcolor);
}
/* highlight color css */
.highlight{
    color: var(--brcolor);
}
/*======= header top area start =====*/
.header_top_area {
    padding: 10px 170px;
    background-color: var(--brcolor);
}
/* header left */
.header_left span, .header_right span, .header_left a{
    font-size: 15px;
    font-weight: 500;
    color: var(--whitec);
}
.header_left span, .header_left a {
    margin: 0 22px 0 0;
}
.header_left span i,
.header_left a i{
    color: var(--whitec);
    margin-right: 6px;
}
/* header top middle css */
.header_top_middle{
    text-align: center;
}
/* header right */
.header_right a {
    font-size: 15px;
    font-weight: 600;
    margin-left: 12px;
    color: var(--whitec);
}
.header_right a:hover{
    color: var(--brcolor);
}
.header_right span i{
    margin-right: 5px;
}
/*======= header top area end ======*/

/*======== main menu area start ==========*/
.main_menu_area {
    padding: 0px 170px;
}
.main_menu_area.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgb(0 0 0 / 70%);
}
.main_menu_area .sticky_logo{
    display: none;
}
.main_menu_area.sticky .main_logo{
    display: none;
}
.main_menu_area.sticky .sticky_logo{
    display: block;
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a{
    color: var(--whitec);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a:hover{
    color: var(--brcolor);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a i{
    color: var(--whitec);
}
.main_menu_area.sticky .main_nav_icons >i{
    color: var(--whitec);
}
.main_menu_area.sticky .main_nav_right_text h3,
.main_menu_area.sticky .main_nav_right_text h3 a,
.main_menu_area.sticky .main_me_cont p,
.main_menu_area.sticky .main_me_cont p a{
    color: var(--whitec);
}
.site_logo_area{
    margin-right: 15px;
}
/* main nav area css */
.main_nav_area {
    display: flex;
    align-items: center;
    justify-content: end;
}
.main_menu_all_item {
    position: relative;
    align-items: center;
}
/* inner main nav area css */
.inner_main_nav_area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.inner_main_nav_area >ul >li {
    display: inline-block;
    position: relative;
}
.inner_main_nav_area >ul >li >a {
    display: inline-block;
    margin: 35px 12px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}
.inner_main_nav_area >ul >li >a>i {
    font-size: 14px;
    font-weight: 700;
    margin-left: 5px;
}
.inner_main_nav_area >ul> li> a:hover{
    color: var(--brcolor);
}
/* main nav icons together */
.main_nav_right_together {
    display: flex;
    align-items: center;
}
/* drop down menu css */
.inner_main_nav_area ul li .sub_menu{
    position: absolute;
    top: 130%;
    left: 0;
    width: 230px;
    text-align: left;
    margin: 0;
    padding: 15px 5px 14px;
    z-index: 9999;
    box-shadow: 0 0 30px rgb(0 0 0 / 9%);
    background-color: var(--whitec);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li{
    position: relative;
}
.inner_main_nav_area ul li .sub_menu li a {
    display: inline-block;
    font-size: 15px;
    padding: 8px 17px;
    text-transform: uppercase;
}
.inner_main_nav_area ul li .sub_menu li a:hover{
    color: var(--brcolor);
    margin-left: 5px;
}
.inner_main_nav_area >ul >li:hover .sub_menu{
    top: 100%;
    opacity: 1;
    visibility: visible;
}
.inner_main_nav_area .sub_menu >li > ul.sub_menu{
    top: 130%;
    left: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li:hover  ul.sub_menu{
    top: 0;
    opacity: 1;
    visibility: visible;
}
/* main menu socail css */
.main_menu_socail a{
    display: inline-block;
    font-size: 22px;
    height: 35px;
    line-height: 35px;
    margin: 0 3px;
    width: 35px;
    border-radius: 100%;
    text-align: center;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.main_menu_socail a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* main nav icons together */
.gogrin_right_area {
    display: flex;
    align-items: center;
}
.main_nav_icons_together {
    display: flex;
    align-items: center;
}
/* main nav icons */
.main_nav_icons {
    margin-left: 10px;
}
.main_nav_icons >i {
    color: var(--blackc);
    font-size: 20px;
    cursor: pointer;
    transition: .5s;
}
/* nav icon popup css */
.nav_icon_popup {
    position: fixed;
    top: -110%;
    left: 0%;
    background: #000000f0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}
.nav_icon_popup.icon_popup {
    opacity: 1;
    visibility: visible;
    top: 0;
}
/* inner nav icon popup */
.inner_nav_icon_popup {
    width: 47%;
    margin: 0 auto;
    position: relative;
}
.inner_nav_icon_popup input{
    font-size: 30px;
    font-weight: 500;
    padding: 17px 40px 15px 15px;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: 0px 0px 30px 0px #dddddd45;
    background: var(--whitec);
    border-radius: 10px;
}
.inner_nav_icon_popup input::placeholder{
    font-size: 30px;
}
/* inner nav popup form icons css */
.inner_nav_popup_form_icons {
    position: absolute;
    top: 35%;
    right: 10px;
    transform: translateY(-50%);
}
.inner_nav_popup_btnicon{
    font-size: 40px;
    border: none;
    outline: none;
    background: none;
}
.inner_nav_icon_popup i{
    display: inline-block;
    margin-top: 10px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--whitec);
    color: var(--blackc);
    font-size: 25px;
    cursor: pointer;
    transition: 1s;
}
/* main nav icons middle css */
.main_nav_icons_middle {
    margin-left: 18px;
    position: relative;
}
.main_nav_icons_middle a {
    position: relative;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    background: var(--whitec);
    box-shadow: 0 0 5px #64333338;
    border-radius: 100%;
}
.main_nav_icons_middle a span {
    position: absolute;
    top: 0;
    right: -5px;
    width: 18px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background-color: var(--brcolor);
    border-radius: 100%;
    color: var(--whitec);
}
.main_nav_middle_box_item {
    overflow: scroll;
    position: absolute;
    right: 0;
    top: 130%;
    width: 300px;
    height: 300px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    background-color: var(--whitec);
    transition: .5s;
}
.main_nav_icons_middle:hover .main_nav_middle_box_item{
    top: 180%;
    opacity: 1;
    visibility: visible;
}
.main_nav_middle_box_item p{
    padding: 20px;
}
/* main nav btn css */
.main_nav_btn {
    margin-left: 20px;
}
.main_nav_btn a {
    display: inline-block;
    padding: 35px 50px;
    font-size: 16px;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.main_nav_btn a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* main menu address area css */
.main_menu_add_area {
    display: flex;
    align-items: center;
    margin-left: 30px;
}
.main_me_call_icon{
    margin-right: 10px;
}
.main_me_call_icon i {
    font-size: 30px;
    color: var(--brcolor);
}
.main_me_cont p{
    margin: 0;
    font-family: "Roboto Slab", serif;
    font-weight: 600;
}
.main_me_cont p a{
    font-size: 14px;
    font-weight: 600;
}
/* home 2 main menu */
.h2_menu_area .main_nav_area{
    justify-content: space-between;
}
.h2_flex_menu {
    display: flex;
}
/* absolute menu css */
.absolute_menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
    background: transparent;
    border: none;
}
.absolute_menu .inner_main_nav_area >ul >li >a{
    color: var(--whitec);
    margin: 35px 0px 35px 25px;
}
/*======== main menu area end ==========*/

/*======== mobile menu area start ==========*/
.mobile_logo_area{
    padding: 20px 0;
    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: var(--whitec);
}
.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;
}
/*======== mobile menu area end ==========*/

/*======== slider area start  ==========*/
.inner_slider_area {
    height: 950px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex !important;
    align-items: center;
    position: relative;
}
.inner_slider_content {
    width: 62%;
    margin: 0px auto 0;
    text-align: left;
}
.inner_slider_content h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--whitec);
}
.inner_slider_content h2 {
    font-size: 72px;
    font-weight: 900;
    color: var(--whitec);
}
.inner_slider_content p {
    width: 55%;
    font-size: 18px;
    color: var(--whitec);
    margin: 20px auto 50px;
}
/* home inner slider */
.h2_inner_slider .inner_slider_content p {
    margin: 33px 0 50px;
}
/* home 3 inner slider */
.h3_inner_slider{
    height: 850px;
}
.h3_inner_slider .inner_slider_content h1{
    color: var(--brcolor);
}
.h3_inner_slider .inner_slider_content h2 {
    width: 60%;
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    color: var(--titlecolor);
}
/* golobal btn css */
.g_btn.margin_top {
    margin-top: 53px;
}
.g_btn a {
    display: inline-block;
    position: relative;
    padding: 22px 50px;
    font-size: 16px;
    background-color: var(--brcolor);
    color: var(--whitec);
    margin-right: 15px;
    overflow: hidden;
    z-index: 1;
}
.g_btn a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bgcolor);
    width: 100%;
    height: 0%;
    transition: .5s;
    z-index: -1;
}
.g_btn a:hover::before{
    height: 100%;
}
.g_btn a.active{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.g_btn a.active:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
.g_btn.mar_top{
    margin-top: 30px;
}
/* golobal slick defult arrow css */
.slick-prev , .slick-next{
    position: absolute;
    top: 50%;
    width: 55px;
    height: 55px;
    line-height: 55px;
    z-index: 9999;
    outline: none;
    border: none;
    font-size: 0;
    background: none;
    transform: translateY(-50%);
    transition: 1s;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}
.slick-prev{
    left: -60px;
}
.slick-next{
    right: -40px;
}
.slick-prev::before ,.slick-next::before{
    content: '\ea93';
    font-family: IcoFont;
    display: inline-block;
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 40px;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: 1s;
}
.slick-next::before{
    content: '\ea94';
}
.slick-prev:hover::before ,.slick-next:hover::before{
    background-color: var(--bgcolor);
    color: var(--whitec)
}
/* slider defult arrow css */
.slider_area:hover .slick-prev, .slider_area:hover .slick-next {
    background: none;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
}
.slider_area .slick-prev{
    left: 0;
}
.slider_area .slick-next{
    right: 10px;
}
.slider_area .slick-prev::before ,.slider_area .slick-next::before{
    content: '\eac9';
    font-family: IcoFont;
    color: var(--whitec);
    display: inline-block;
    background: 0 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 0;
    font-size: 50px;
    font-weight: 700;
}
.slider_area .slick-next::before{
    content: '\eaca';
}
.slider_area .slick-prev:hover::before ,.slider_area .slick-next:hover::before{
    color: var(--whitec);
}
.h3_slider .slick-prev::before, .h3_slider .slick-next::before{
    color: var(--blackc);
}
.h3_slider .slick-prev:hover::before ,.h3_slider .slick-next:hover::before{
    color: var(--brcolor);
}
/*======== slider area end  ==========*/

/*======== breadcum area start  ==========*/
.breadcum_area {
    background-size: cover;
    background-position: center center;
    padding: 60px 0;
}
.inner_breadcum_area h1{
    font-size: 30px;
    color: var(--whitec);
}
.inner_breadcum_area ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.inner_breadcum_area ul li{
    display: inline-block;
    color: var(--whitec);
}
.inner_breadcum_area ul li a{
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: var(--whitec);
}
.inner_breadcum_area ul li i, .inner_breadcum_area ul li a i {
    font-size: 22px;
}
/*======== breadcum area end  ==========*/

/*======== video slider area start  ==========*/
.video_slider_area{
    position: relative;
    height: 100%;
    overflow: hidden;
}
.video_slider_area::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #00000057;
}
.witr_youtube_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -99;
    transform: scale(1.2);
}
.witr_youtube_video iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.video_slider_area .inner_slider_content h1,
.video_slider_area .inner_slider_content h2,
.video_slider_area .inner_slider_content h3,
.video_slider_area .inner_slider_content p{
    color: var(--whitec);
}
/*======== video slider area end  =======*/

/*======== about area start  =======*/
.about_bg{
    background-position: center center;
    background-size: cover;
}
.about_area {
    position: relative;
    padding: 50px 0 95px;
    z-index: 11;
}
.inner_about_area{
    margin-bottom: 20px;
}
/* progress bar css */
.skill_left_inner {
    padding: 15px 0 30px;
}
.witr_single_progress {
    overflow: hidden;
    margin-bottom: 20px;
}
.progress {
    display: flex;
    height: 10px;
    background-color: var(--bgcolor);
    border-radius: 0;
}
.progress-bar {
    overflow: initial;
    background-color: var(--brcolor);
}
.witr_title2 span {
    font-size: 17px;
    font-weight: 700;
    color: var(--titlecolor);
    font-family: "Roboto Slab", sans-serif;
}
.witr_progress-style2 .progress-bar {
    position: relative;
    text-align: left;
    line-height: 4px;
    border-radius: 0;
    box-shadow: none;
}
.witr_progress-style2 {
    overflow: visible;
    position: relative;
    margin-top: 2px;
    box-shadow: none;
    background: var(--bgcolor);
    margin-bottom: 2px;
}
.witr_progress-style2 + .witr_progress-style2 {
	margin-top: 60px;
}
.witr_progress-style2 .progress-bar {
    position: relative;
    text-align: left;
    line-height: 25px;
    box-shadow: none;
    height: 10px;
}
.witr_title6 .witr_label {
	left: 2px;
	top: 8px;
	color: #272727;
	font-size: 16px;
	font-weight: 600;
}
.witr_progress-style2 .witr_percent {
    position: absolute;
    font-size: 16px;
    right: 0;
    font-weight: 700;
    top: -28px;
    color: var(--titlecolor);
}
.h2_about_shap {
    position: absolute;
    bottom: 100px;
    left: 120px;
    z-index: -1;
}
/*======== about area end  =======*/

/*======= feature area start =======*/
.feature_area {
    padding: 95px 0 20px;
}
/* service feature */
.service_feature{
    padding: 120px 0 20px;
}
/* home 2 feature */
.h2_feature_area {
    position: relative;
    margin-top: -70px;
    padding: 0px 0 50px;
}
.single_feature {
    display: flex;
    margin-bottom: 20px;
    box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.15);
    padding: 25px 20px 5px 30px;
    background-color: var(--whitec);
}
.sin_feature_icon {
    margin-top: 5px;
    margin-right: 20px;
}
.sin_feature_text h3 {
    margin-bottom: 5px;
}
.sin_feature_text h3 a{
    font-size: 18px;
}
.sin_feature_text p{
    font-size: 14px;
}
/*======= feature area end =======*/

/*======= call to action start =======*/
.call_to_action{
    padding: 50px 0 50px;
    position: relative;
}
.inner_call_to_action{
    position: relative;
}
.inner_call_to_action h2{
    font-size: 70px;
}
.inner_call_to_action p {
    width: 90%;
    margin: 30px auto 40px;
    font-size: 18px;
}
.call_shap {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    z-index: -1;
}
.call_right_shap {
    position: absolute;
    bottom: -70px;
    right: 80px;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
@keyframes witr_movelr_box45 {
    0%{
         transform: translateX(0px);
      }
    100%{
        transform: translateX(45px);
      }
}
@keyframes witr_movelr_box46 {
    0%{
         transform: translateY(0px);
}
    100%{
        transform: translateY(45px);
}
}
/* home 3 call action css */
.h3_call_action{
    padding: 5px 0 0px;
}
.h3_call_action .tab_down{
    margin: 50px auto 0;
}
/*======= call to action end =======*/

/*======= tab area start =======*/
.tab_area {
    padding: 40px 0 50px;
    position: relative;
}
.section_all{
    margin-bottom: 60px;
}
.section_title_area{
    position: relative;
    margin-bottom: 50px;
}
.section_title_area.margin_00{
    margin-bottom: 0;
}
.section_title_area h2{
    font-size: 18px;
    font-weight: 500;
    color: var(--brcolor);
}
.section_title_area h3{
    font-size: 48px;
}
.section_shap {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
}
.section_btn a{
    display: inline-block;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 400;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.section_btn a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* tab middle css */
.tab_middle{
    padding: 50px 0 60px;
}
.inner_tab_items ul {
    justify-content: space-between;
}
.inner_tab_items ul li a {
    display: inline-block;
    padding: 18px 90px;
    border: 1px solid var(--bgcolor);
    font-size: 16px;
}
.inner_tab_items ul li a.active{
    background-color: var(--brcolor);
    color: var(--whitec);
}
.inner_tab_items ul li a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.inner_tab_area .section_title_area h3{
    margin-bottom: 25px;
}
/* inner tab list css */
.inner_tab_list {
    display: flex;
    padding: 10px 0 25px;
}
.inner_tab_list ul{
    list-style: none;
    margin: 0 30px 0 0;
    padding: 0;
}
.inner_tab_list ul li{
    padding: 0 0 10px;
    font-weight: 600;
    font-family: "Roboto Slab", sans-serif;
}
.inner_tab_list ul li i{
    color: #6FB037;
    font-size: 20px;
    margin: 0px 10px 0px 0px;
}
/* tab down css */
.tab_down {
    margin: 80px auto 0;
}
.inner_tab_service{
    margin-bottom: 20px;
}
.inner_tab_service h4 {
    margin-bottom: 20px;
    color: var(--brcolor);
}
.inner_tab_service p{
    font-size: 14px;
}
/* tab left shap css */
.tab_left_shap {
    position: absolute;
    bottom: -70px;
    left: 0;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/*======= tab area end =======*/

/*======= service area start =======*/
.service_area {
    position: relative;
    padding: 110px 0 50px;
}
.h3_service_area{
    padding: 30px 0 50px;
}
.single_service {
    margin-bottom: 50px;
}
.single_service img{
    margin-bottom: 20px;
    transition: .5s;
}
.single_service p {
    width: 80%;
    margin: 18px auto 0;
    font-size: 14px;
}
.single_service:hover img{
    transform: rotateY(180deg);
}
.service_right_shap {
    position: absolute;
    top: 28%;
    right: 70px;
    z-index: -1;
    animation: witr_movelr_box46 5s linear 1s infinite alternate running;
}
/*======= service area end =======*/

/*===== video area start ====*/
.video_area {
    padding: 220px 0 210px;
    margin: 45px 100px 30px;
    background-position: center center;
    background-size: cover;
}
/* home 2 video */
.h2_video_area {
    margin: 15px 300px 30px 0;
}
/* about video css */
.about_video{
    margin: 15px 0px 30px 0;
}
.inner_video a{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 28px;
    border-radius: 100%;
    text-align: center;
    animation: witr-shadow 1s linear infinite;
    background-color: var(--brcolor);
    color: var(--whitec);
    z-index: 1;
}
@keyframes witr-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    }
}
/*===== video area end ====*/

/*===== testimonial area start ====*/
.testimonial_area{
    padding: 50px 0 20px;
    position: relative;
}
.inner_testimonial{
    padding: 25px 30px 26px;
    position: relative;
}
.inner_testimonial>p{
    font-family: "Roboto Slab", Sans-serif;
    font-size: 48px;
    font-weight: 600;
    font-style: normal;
    line-height: 55px;
}
.inner_testi_title {
    padding: 10px 0 0;
}
.inner_testi_title h4{
    margin: 0;
}
.inner_testi_title p{
    font-size: 14px;
    color: var(--brcolor);
}
.testi_shap {
    top: 50px;
    right: 45px;
    position: absolute;
}
.testimonial_area:hover .slick-prev ,.testimonial_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
.h2_testi_shap {
    position: absolute;
    bottom: 30px;
    left: 160px;
    z-index: -1;
}
/*===== testimonial area end ====*/

/*===== home 3 testimonial start ====*/
.h3_testimonial .inner_testimonial img {
    width: 78px;
    margin: 0 auto 15px;
}
.single_page_testi{
    padding: 90px 0 30px;
}
.h3_testimonial .inner_testimonial>p{
    font-size: 30px;
    font-weight: 600;
    line-height: 48px;
}
.h3_testimonial .inner_testi_title h4{
    color: var(--brcolor);
}
.h3_testimonial .inner_testi_title h4 span{
    font-size: 14px;
    font-weight: 400;
    font-family: Roboto, sans-serif;
    color: var(--titlecolor);
}
/*===== home 3 testimonial end ====*/


/*===== home 4 testimonial area start ====*/
.h4_testimonial_area {
    padding: 50px 0 95px;
}
.h4_testi_content{
    position: relative;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 6%);
    background: var(--whitec);
    border-radius: 5px;
    padding: 50px 20px 50px;
}
.h4_testi_content p{
    margin: 0;
}
.h4_testi_content i {
    font-size: 100px;
    color: #be5f1930;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.h4_testi_box{
    position: absolute;
    content: '';
    left: 50%;
    bottom: -36px;
    border-radius: 15px;
    width: 50px;
    height: 50px;
    background: var(--whitec);
    transform: rotate(45deg) translateX(-50%);
    z-index: -1;
    box-shadow: 0 2px 29px 0 rgb(0 0 0 / 8%);
}
/* testi title css */
.h4_testi_title{
    margin-top: 30px;
}
.h4_testi_title img{
    border-radius: 50%;
    width: 59px;
    margin: 0 auto 10px;
}
.h4_testi_title h2{
    margin: 0;
}
.h4_testimonial_area:hover .slick-prev ,.h4_testimonial_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
/*===== home 4 testimonial area end ====*/


/*===== project area start ====*/
.project_area{
    padding: 50px 0 50px;
    position: relative;
}
.inner_project_area{
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.inner_project_img img{
    width: 100%;
    transition: .5s;
}
.inner_project_area:hover .inner_project_img img{
    transform: scale(1.1);
}
.project_overay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #c914049f;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
}
.inner_project_area:hover .project_overay{
    opacity: 1;
    visibility: visible;
}
/* inner project content css */
.inner_project_content {
    width: 100%;
    position: absolute;
    top: 70%;
    left: 50%;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
    transform: translate(-50%, -50%);
}
.inner_project_area:hover .inner_project_content{
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.inner_project_content h2{
    margin: 0;
}
.inner_project_content h2 a,
.inner_project_content p{
    color: var(--whitec);
}
/* project shap */
.project_left_shap{
    position: absolute;
    top: 0;
    left: 20px;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/*===== project area end ====*/

/*======== home 2 project start ========*/
.h2_project_area{
    padding: 50px 0 50px;
    position: relative;
}
.h2_project_width {
    max-width: 1500px;
}
.h2_inner_project{
    position: relative;
    overflow: hidden;
}
.h2_inner_project_img img{
    width: 100%;
    transition: .5s;
}
.h2_inner_project:hover .h2_inner_project_img img{
    transform: scale(1.1);
}
/* project overlay css */
.h2_project_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brcolor);
    opacity: 0.7;
    transform: scale(0);
    transition: .5s;
}
.h2_inner_project:hover .h2_project_overlay{
    transform: scale(1.1);
}
/* project content css */
.h2_inner_pro_content {
    position: absolute;
    bottom: -200px;
    left: 30px;
    right: 0;
    transition: .5s;
}
.h2_inner_project:hover .h2_inner_pro_content{
    bottom: 0px;
}
.h2_inner_pro_content h2{
    margin-bottom: 5px;
}
.h2_inner_pro_content h2 a,
.h2_inner_pro_content p{
    color: var(--whitec);
}
.h2_project_area:hover .slick-prev ,.h2_project_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
.h2_project_left_shap {
    position: absolute;
    top: -145px;
    left: 25px;
    z-index: -1;
    animation: witr_movelr_box46 5s linear 1s infinite alternate running;
}
/*======== home 2 project end ========*/

/*===== call in area start ====*/
.call_in_area{
    padding: 35px 0 50px;
}
.h2_call_in_area{
    padding: 50px 0 50px;
}
.call_in_area .section_title_area {
    border-left: 8px solid var(--brcolor);
    padding: 8px 0 3px 30px;
}
/* home 3 call in area */
.h3_call_inarea {
    margin: 10px 250px 20px 250px;
    padding: 50px 150px 50px 150px;
    background-color: var(--bgcolor);
}
.h3_call_inarea .section_title_area h3{
    color: var(--whitec);
}
/*===== call in area end ====*/

/*======== brand area start  =======*/
.brand_area {
    padding: 60px 0 50px;
    position: relative;
}
.inner_brand_area img{
    margin: 0 auto;
}
.brand_area:hover .slick-prev ,.brand_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
.brand_right_shap {
    position: absolute;
    top: -180px;
    right: 20px;
    z-index: -1;
    animation: witr_movelr_box46 5s linear 1s infinite alternate running;
}
/*======== brand area end  ==========*/

/*======== choose area start  ==========*/
.choose_area{
    padding: 70px 0 50px;
    position: relative;
}
/* about choose css */
.about_choose_area{
    padding: 110px 0 50px;
}
.inner_choose_area {
    padding: 30px 0 0;
}
.inner_choose_list {
    padding: 20px 0 10px;
}
.inner_choose_list ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.inner_choose_list ul li{
    padding: 0 0 20px;
}
.inner_choose_list ul li img{
    margin-right: 10px;
}
.inner_choose_para{
    padding-bottom: 20px;
}
.choose_left_shap {
    position: absolute;
    top: 0;
    left: -80px;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/*======== choose area end  ========*/

/*======== team area start ==========*/
.team_area {
    padding: 70px 0 30px;
}
/* single page team */
.single_page_team{
    padding: 110px 0 30px;
}
.inner_team_area{
    position: relative;
    margin-bottom: 20px;
}
.team_img_area{
    position: relative;
    overflow: hidden;
}
.team_img_area img{
    width: 100%;
    transition: .5s;
}
.inner_team_area:hover .team_img_area img{
    transform: scale(1.2);
}
/* team socail css */
.team_socail {
    position: absolute;
    bottom: -300px;
    left: 20px;
    display: grid;
    transition: .5s;
}
.inner_team_area:hover .team_socail{
    bottom: 70px;
}
.team_socail a{
    display: inline-block;
    margin: 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.team_socail a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* team overlay css */
.team_overlay{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    transition: .5s;
    background-color: #00051e9b;
}
.inner_team_area:hover .team_overlay{
    left: 0;
}
/* inner team content css */
.inner_team_content {
    text-align: center;
    background-color: var(--whitec);
    padding: 22px 30px;
    box-shadow: 0 0 30px 0 rgba(42, 67, 113, .15);
}
.inner_team_content p
,.inner_team_content h2 a{
    margin: 0;
}
/* inner team absoute icon css */
.inner_team_absol_icon {
    position: absolute;
    bottom: 135px;
    left: 20px;
    transition: .5s;
}
.inner_team_absol_icon a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    background-color: var(--brcolor);
    color: var(--whitec);
}
/*======== team area end ==========*/

/*======= home 2 team area start =======*/
.h2_team_area {
    padding: 80px 0px 50px 300px;
}
/* single page team 2 */
.single_page_team2{
    padding: 60px 0px 100px 0px;
}
.single_page_team2 .h2_inner_team{
    margin-bottom: 20px;
}
.h2_inner_team{
    position: relative;
    overflow: hidden;
}
.h2_inner_team_img{
    position: relative;
    overflow: hidden;
}
.h2_inner_team_img img{
    width: 100%;
    transition: .5s;
}
.h2_inner_team:hover .h2_inner_team_img img{
    transform: scale(1.1);
}
/* team overlay css */
.h2_team_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000076;
    transform: scale(0);
    transition: .5s;
}
.h2_inner_team:hover .h2_team_overlay{
    transform: scale(1.1);
}
/* inner team text css */
.h2_inner_team_text {
    position: absolute;
    bottom: -200px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    background-color: var(--brcolor);
    padding: 30px 25px 20px;
    transition: .5s;
}
.h2_inner_team:hover .h2_inner_team_text{
    bottom: 0px;
}
.h2_inner_team_text h2,
.h2_inner_team_text p{
    margin: 0;
    color: var(--whitec);
}
.h2_inner_team_icon a{
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    background-color: var(--whitec);
    color: var(--brcolor);
}
.h2_inner_team_icon a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.div_upbtn {
    margin-top: 50px;
}
/* home 2 team defult arrow */
.h2_team_area .slick-prev ,.h2_team_area .slick-next{
    top: -90px;
    opacity: 1;
    visibility: visible;
}
.h2_team_area .slick-prev{
    left: 72%;
}
.h2_team_area .slick-next {
    right: 20%;
}
/*======= home 2 team area end =======*/

/*===== counter area start  ====*/
.counter_area {
    position: relative;
    padding: 50px 0px 50px;
}
.about_counter{
    padding: 50px 0px 90px;
}
/* inner counter area css */
.inner_counter_area {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}
.inner_counter_thumb{
    display: flex;
    align-items: center;
    justify-content: center;
}
.inner_counter_thumb h2,
.inner_counter_thumb h4{
    color: var(--brcolor);
    font-size: 72px;
    font-weight: 600;
    margin: 0;
}
.inner_counter_area h3 {
    margin: 10px 0 15px;
    font-size: 18px;
    color: var(--brcolor);
}
.inner_counter_area p {
    width: 90%;
    margin: auto;
    font-size: 14px;
}
/*===== counter area end  ====*/

/*======= contact service start ====*/
.contact_service_area {
    padding: 120px 0 50px;
}
.inner_contact_service {
    padding: 50px 30px 65px 30px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}
.inner_contact_service i {
    font-size: 30px;
    height: 80px;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    line-height: 80px;
    display: inline-block;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: .5s;
}
.inner_contact_service:hover i{
    background-color: var(--bgcolor);
    color: var(--whitec);
    border-radius: 50%;
}
.inner_contact_service h3 a {
    display: inline-block;
    font-size: 22px;
    margin: 12px 0 10px;
}
.inner_contact_service p{
    margin: 0;
}
.inner_contact_area p.form-messege{
    color: var(--brcolor);
}
/*======= contact service end ======*/

/*======== contact area start  ==========*/
.contact_area {
    padding: 50px 0 70px;
}
.inner_contact_area {
    padding: 60px 30px 50px 30px;
    box-shadow: 0 0 30px rgb(0 0 0 / 6%);
}
.inner_contact_area .section_title_area{
    margin-bottom: 40px;
}
/* inner contact form */
.inner_contact_form input {
    border: 1px solid #ddddddcc;
    outline: none;
    width: 100%;
    height: 45px;
    border-radius: 5px;
    padding: 0 20px;
    margin-bottom: 23px;
}
.inner_contact_form textarea {
    width: 100%;
    border: 1px solid #ddddddcc;
    outline: none;
    padding: 20px 20px;
}
textarea::placeholder {
    color: var(--paracolor);
}
.inner_contact_form button {
    margin-top: 18px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    outline: none;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: .5s;
}
.inner_contact_form button:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/*======== contact area end  ======*/

/*======== map area start ======*/
.map_area{
    margin: 50px 0 120px;
}
.inner_contact_map{
    width: 100%;
    height: 500px;
}
.inner_contact_map iframe {
    width: 100%;
    height: 100%;
}
/*======== map area end ======*/

/*===== faq area start  ====*/
.faq_area {
    margin: 55px 0 80px;
    padding: 110px 0 120px;
}
/* home 3 faq */
.h3_faq_area {
    padding: 50px 0 30px;
    margin: 0 0;
}
.single_page_faq{
    padding: 110px 0 30px;
}
.inner_faq_cont p {
    width: 80%;
    margin: 0 0 35px;
    font-size: 14px;
}
.accordion-item {
    margin-bottom: 20px;
}
.accordion-body{
    font-size: 14px;
}
.accordion-button:focus{
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: var(--brcolor);
    color: var(--whitec);
}
.accordion-item .accordion-button {
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    font-family: Roboto, sans-serif;
    border: none;
    box-shadow: 0 0 5px #dddddd7d;
}
.certificate_area{
    margin-top: 30px;
}
/*===== faq area end  ====*/

/*===== site map area start ====*/
.inner_sitemap_area{
    width: 100%;
    height: 600px;
}
.inner_sitemap_area iframe{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}
/*===== site map area end ====*/

/*======== blog area start  ==========*/
.blog_area {
    padding: 40px 0 50px;
    position: relative;
}
/* inner blog area css */
.inner_blog_area {
    overflow: hidden;
    margin-bottom: 20px;
    background-color: var(--whitec);
    box-shadow: 0 5px 10px 0 rgba(50, 65, 141, .07);
    transition: .5s;
}
.inner_blog_area:hover {
    background: transparent;
}
.blog_main_all {
    padding: 20px 25px 30px;
}
.inner_blog_thumb{
    position: relative;
    overflow: hidden;
}
.inner_blog_img img{
    width: 100%;
    transition: .5s;
}
.inner_blog_area:hover .inner_blog_img img{
    transform: scale(1.2);
}
/* blog overlay css */
.blog_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    transform: scale(0);
    transition: .5s;
}
.inner_blog_area:hover .blog_overlay{
    transform: scale(1.2);
}
.inner_blog_text span {
    font-size: 15px;
    margin-right: 5px;
    color: #888;
}
.inner_blog_text span i{
    margin-right: 6px;
    color: var(--brcolor);
}
/*inner blog content css */
.inner_blog_content {
    padding: 8px 0 0;
}
.inner_blog_content h2 a{
    font-size: 18px;
}
.inner_blog_content h2 a:hover{
    color: var(--brcolor);
}
.inner_blog_content p {
    padding-top: 10px;
}
.blog_btn a {
    font-size: 18px;
    font-weight: 600;
    color: var(--brcolor);
    font-family: "Roboto Slab", sans-serif;
}
.blog_btn a:hover{
    color: var(--bgcolor);
}
/* blog defult arrow */
.blog_area .slick-prev ,.blog_area .slick-next{
    top: -90px;
    opacity: 1;
    visibility: visible;
}
.blog_area .slick-prev{
    left: 89%;
}
.blog_area .slick-next {
    right: 2%;
}
.h3_blog_area .slick-prev ,.h3_blog_area .slick-next{
    top: 50%;
    opacity: 0;
    visibility: hidden;
}
.h3_blog_area:hover .slick-prev ,.h3_blog_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
.h3_blog_area .slick-prev{
    left: -60px;
}
.h3_blog_area .slick-next{
    right: -40px;
}
/* site page css */
.portfolio_area {
    padding: 110px 0 120px;
}
.yblog_left {
    padding: 120px 0 90px;
}
.yblog_left_inner{
    margin-bottom: 30px;
}
.yblog_left_sub h2 a {
    font-size: inherit;
}
/*======== blog area end  ==========*/

/*======== subscribe area start =======*/
.subscribe_area {
    padding: 55px 0 80px;
}
.subscribe_area .section_title_area {
    padding: 6px 0px 0px 20px;
    border-left: 8px solid var(--brcolor);
}
.inner_subscribe_form {
    position: relative;
    overflow: hidden;
}
.inner_subscribe_form input{
    width: 100%;
    font-size: 16px;
    line-height: 28px;
    border-radius: 0px;
    border: none;
    outline: none;
    padding: 15px 30px;
    height: 50px;
    background: var(--bgcolor);
    color: var(--whitec);
}
.inner_subscribe_form input::placeholder{
    color: var(--whitec);
}
.inner_subscribe_form button {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 12px 35px 12px;
    font-size: 16px;
    border: none;
    outline: none;
    background-color: var(--brcolor);
    color: var(--whitec);
}
/*======== subscribe area end ========*/

/*======== footer area start  ==========*/
.footer_area {
    padding: 80px 0 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.footer_upper {
    padding: 0 0 85px;
}
._inner_footer_upper p {
    width: 60%;
    margin: 15px auto 0;
    color: var(--whitec);
}
.footer_widget h2{
    color: var(--brcolor);
}
.footer_widget p {
    margin-top: 25px;
    color: var(--whitec);
}
.footer_widget img {
    margin-bottom: 25px;
}
/* footer socail icon css */
.footer_socail_icons {
    padding: 10px 0 0;
}
.footer_socail_icons a {
    display: inline-block;
    color: var(--whitec);
    background-color: transparent;
    border: 1px solid var(--whitec);
    font-size: 20px;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    margin-right: 5px;
}
.footer_socail_icons a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
/* footer blog area css */
.footer_blog_area {
    margin-top: 30px;
}
.footer_main_add{
    display: flex;
    margin-bottom: 20px;
}
.footer_blog_area img {
    width: 75px;
    height: 60px;
    margin-right: 10px;
}
.footer_add_cont a {
    display: inline-block;
    font-size: 15px;
    color: var(--whitec);
    line-height: 19px;
}
.footer_add_cont a:hover{
    color: var(--whitec);
}
.footer_add_cont span{
    display: block;
    font-size: 14px;
    color: var(--whitec);
}
/* footer nav css */
.footer_nav {
    margin-top: 25px;
}
.footer_nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer_nav ul li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    padding: 0 0 9px;
    color: var(--whitec);
}
.footer_nav ul li a:hover{
    color: var(--brcolor);
}
/* footer widget sub img */
.footer_wid_sub_img {
    margin-top: 20px;
}
.inner_footer_widget_img {
    margin: 12px 0 0px;
}
.inner_footer_widget_img>img{
    width: 100%;
    height: auto;
    margin-bottom: 0px;
}
/*======== footer area end  ==========*/


/*======== copyright area start  ==========*/
.copy_right_area {
    padding: 25px 0 25px;
    background-color: var(--brcolor);
}
.inner_copy_right_area p{
    color: var(--whitec);
    margin: 0;
}
.copy_right_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.copy_right_menu ul li {
    display: inline-block;
    margin-left: 15px;
}
.copy_right_menu ul li a{
    font-size: 16px;
    font-weight: 400;
    color: var(--whitec);
}
/*======== copyright area end  ==========*/

/*======== scroll top btn css  ==========*/
#scrollUp {
    bottom: 40px;
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    right: 40px;
    text-align: center;
    border-radius: 5px;
    width: 40px;
    background: var(--brcolor);
    color: var(--whitec);
    box-shadow: 0 0 10px #0000002e;
}

/* blog and portfolio all color css */
.portfolio_nav ul li.current_menu_item,
.portfolio_nav ul li:hover,
.port_content_center a:hover,
.inner_portfolio_lower_nav ul li a.current,
.inner_portfolio_lower_nav ul li a:hover,
.ycalender_inner h5,
.ycalender_inner td.active,
.inner_project_in_icon a:hover,
.inner_sin_com_btn button,
.pay_sub_btn button,
.inner_my_accout_form_btn a ,
.inner_cart_btn a,
.shop_quenty button,
.shop_btn_area a  {
    background-color: var(--brcolor);
    color: var(--whitec);
}
.pay_sub_btn button:hover,
.inner_my_accout_form_btn a:hover,
.inner_cart_btn a:hover,
.tab_list_socail_icon a:hover,
.shop_btn_area a:hover,
.inner_shop_icons a:hover {
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.port_content_center h2 a:hover{
    background: none;
    color: var(--brcolor);
}
.port_content_center p{
    color: var(--whitec);
}
.yblog_left_text_sub span i{
    color: var(--brcolor);
}