/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Hetch - Windows and Doors HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Why Work With Us css
08. Intro Video css
09. Work Gallery css
10. Our Testimonial css
11. Our FAQ css
12. Latest News css
13. Footer Ticker css
14. Footer css
15. About Us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Team Page css
23. Team Single css
24. Image Gallery css
25. Video Gallery css
26. FAQs Page css
27. Contact Us Page css
28. 404 Error Page css
29. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
    --primary-color: #000000;
    --secondary-color: #fbfbfb;
    --text-color: #000000;
    --accent-color: #b10100;
    --white-color			: #FFFFFF;
    --divider-color			: #B101000F;
    --dark-divider-color	: #F1EFF024;
    --error-color			: rgb(230, 87, 87);
    --default-font			: "Plus Jakarta Sans", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body{
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    background: url('../images/section-bg-shape.png') var(--white-color);
    background-repeat: repeat-y;
    background-position: top 1000px center;
    background-size: auto;
    color: var(--text-color);
}

p{
    line-height: 1.7em;
    margin-bottom: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin :0;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary-color);
}

figure{
    margin: 0;
}

img{
    max-width: 100%;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: none;
    outline: 0;
}

a:focus{
    text-decoration: none;
    outline: 0;
}

html,
body{
    width: 100%;
    overflow-x: clip;
}

.container{
    max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
    position: relative;
    overflow: hidden;
}

.image-anime:after{
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
    padding-right: 15px;
    padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 0;
    padding: 17px 30px;
    border: none;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    z-index: 1;
}

.btn-default:hover{
    background-color: transparent;
}

.btn-default::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
    right: 0;
    width: 0;
    height: 106%;
    background: var(--primary-color);
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-default:hover::before{
    width: 100%;
    transform: skew(0deg);
    left: 0;
}

.btn-default.btn-highlighted{
    background: var(--ztc-bg-bg-1);
    color: var(--accent-color);
}

.btn-default.btn-highlighted:hover{
    color: var(--white-color);
}

.btn-default.btn-highlighted::before{
    background: var(--accent-color);
}

.cb-cursor:before{
    background: var(--accent-color);
}

.preloader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-container,
.loading{
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
}

.loading-container{
    margin: 40px auto;
}

.loading{
    border: 1px solid transparent;
    border-color: transparent var(--white-color) transparent var(--white-color);
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
    transition: all 0.5s ease-in-out;
}

#loading-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 66px;
    transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}

.section-row{
    position: relative;
    margin-bottom: 60px;
    z-index: 1;
}

.section-row .section-title{
    margin: 0;
}

.section-title-content p{
    margin: 0;
}

.section-title-content.dark-section p{
    color: var(--white-color);
}

.section-btn{
    text-align: right;
}

.section-title{
    position: relative;
    margin-bottom: 40px;
    z-index: 1;
}

.section-title h3{
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-color);
    padding-left: 18px;
    margin-bottom: 15px;
}

.section-title h3::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: var(--accent-color);
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.section-title h1{
    font-size: 80px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -0.02em;
    color: var(--primary-color);
    margin-bottom: 0;
    cursor: none;
}

.section-title h2{
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -0.02em;
    color: var(--primary-color);
    margin-bottom: 0;
    cursor: none;
}

.section-title p{
    margin-top: 20px;
    margin-bottom: 0;
}

.section-title.dark-section p,
.section-title.dark-section h1,
.section-title.dark-section h2,
.section-title.dark-section h3{
    color: var(--white-color);
}

.section-title.dark-section h3::before{
    background: var(--white-color);
}

.help-block.with-errors ul{
    margin: 0;
    text-align: left;
}

.help-block.with-errors ul li{
    color: var(--error-color);
    font-size: 14px;
    font-weight: 500;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

.topbar{
    background-color: #b10100;
    padding: 15px 0;
}

.topbar-contact-info ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px 20px;
}

.topbar-contact-info ul li a{
    font-size: 14px;
    font-weight: 500;
    color: var(--ztc-bg-bg-1);
    display: flex;
    align-items: center;
}

.topbar-contact-info ul li a img{
    max-width: 20px;
    margin-right: 6px;
}

.topbar-offer p{
    font-size: 14px;
    color: var(--white-color);
    margin-bottom: 0;
    text-align: center;
}

.topbar-time ul{
    display: flex;
    justify-content: end;
    gap: 10px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topbar-time ul li a{
    font-size: 14px;
    font-weight: 500;
    color: var(--ztc-bg-bg-1);
    display: flex;
    align-items: center;
}

.topbar-time ul li a img{
    max-width: 20px;
    margin-right: 6px;
}

header.main-header{
    position: relative;
    z-index: 100;
}

header.main-header .header-sticky{
    position: relative;
    top: 0;
    z-index: 100;
}

header.main-header .header-sticky.hide{
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    border-radius: 0;
}

header.main-header .header-sticky.active{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    transform: translateY(0);
    background: var(--white-color);
    border-bottom: 1px solid var(--divider-color);
}

.navbar{
    padding: 20px 0;
    align-items: center;
}

.navbar-brand{
    padding: 0;
    margin: 0;
}


.navbar-brand img{
    width: 140px;
}
.main-menu .nav-menu-wrapper{
    flex: 1;
    text-align: center;
    margin-left: 40px;
}

.main-menu .nav-menu-wrapper > ul{
    align-items: center;
    display: inline-flex;
}

.main-menu ul li{
    margin: 0;
    position: relative;
}

.main-menu ul li.nav-item .nav-link{
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 20px;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.main-menu .navbar-nav li > ul li a::before{
    display: none;
}

.main-menu ul li.submenu > a:after{
    content: '\f107';
    font-family: 'FontAwesome';
    font-weight: 900;
    line-height: normal;
    font-size: 14px;
    margin-left: 8px;
}

.main-menu ul li.nav-item .nav-link:hover,
.main-menu ul li.nav-item .nav-link:focus{
    color: var(--accent-color);
}

.main-menu ul ul{
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: top;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 230px;
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 100%;
    background: #ffffff;
    text-align: left;
    transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu:first-child ul{
    width: 230px;
}

.main-menu ul ul ul{
    left: 100%;
    top: 0;
    text-align: left;
}

.main-menu ul li:hover > ul{
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
    margin: 0;
    padding: 0;
}

.main-menu ul ul li.nav-item .nav-link{
    color: var(--white-color);
    padding: 6px 20px;
    transition: all 0.3s ease-in-out;
}

.main-menu ul li:hover > ul{
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul ul li.nav-item .nav-link:hover,
.main-menu ul ul li.nav-item .nav-link:focus{
    color: var(--primary-color);
    background-color: transparent;
    padding: 6px 20px 6px 23px !important;
}

.header-social-icons ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-social-icons ul li{
    display: inline-block;
    margin-right: 20px;
}

.header-social-icons ul li:last-child{
    margin-right: 0;
}

.header-social-icons ul li a{
    color: inherit;
}

.header-social-icons ul li a i{
    font-size: 20px;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.header-social-icons ul li a:hover i{
    color: var(--accent-color);
}

.responsive-menu,
.navbar-toggle{
    display: none;
}

.responsive-menu{
    top: 0;
    position: relative;
}

.slicknav_btn{
    background: var(--accent-color);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 0;
}

.slicknav_icon .slicknav_icon-bar{
    display: block;
    width: 100%;
    height: 3px;
    width: 22px;
    background-color: var(--white-color);
    border-radius: 6px;
    margin: 4px auto !important;
    transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
    margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
    margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
    position: absolute;
    width: 100%;
    padding: 0;
    background: var(--accent-color);
}

.slicknav_menu ul{
    margin: 5px 0;
}

.slicknav_menu ul ul{
    margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 20px;
    color: var(--white-color);
    line-height: normal;
    margin: 0;
    border-radius: 0 !important;
    transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
    background-color: transparent;
    color: var(--primary-color);
}

.slicknav_menu ul ul li a{
    padding: 8px 20px 8px 30px;
}

.slicknav_arrow{
    font-size: 0 !important;
}

.slicknav_arrow:after{
    content: '\f107';
    font-family: 'FontAwesome';
    font-weight: 900;
    font-size: 12px;
    margin-left: 8px;
    color: var(--white-color);
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: rotate(-180deg);
    color: var(--primary-color);
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero{
    position: relative;
    background: url('../images/hero-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 200px 0;
    overflow: hidden;
}

.hero::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 70.86%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-video .hero-bg-video{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.hero.hero-video .hero-bg-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero.hero-slider-layout{
    background: none;
    padding: 0;
}

.hero.hero-slider-layout .hero-slide{
    position: relative;
    padding: 200px 0;
}

.hero.hero-slider-layout .hero-slide::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(1.91deg, rgba(38, 38, 38, 0.3) 64.59%, #262626 101.91%), linear-gradient(270deg, rgba(38, 38, 38, 0) 44.72%, #262626 117.07%), linear-gradient(180deg, rgba(38, 38, 38, 0) 68.75%, rgba(38, 38, 38, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
    position: absolute;
    bottom: 50px;
    text-align: left;
    padding-left: calc(((100vw - 1300px) / 2));
    z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

.hero-content{
    position: relative;
    z-index: 2;
}

.hero-content .section-title p{
    font-size: 18px;
    color: var(--ztc-bg-bg-1);
}

.hero-content .hero-btn .btn-highlighted{
    margin-left: 20px;
}

.hero-content-body{
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.satisfy-client-images{
    display: inline-flex;
    margin-right: 20px;
}

.satisfy-client-img{
    width: 60px;
    height: 60px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    overflow: hidden;
    margin-left: -20px;
}

.satisfy-client-img:first-child{
    margin: 0;
}

.satisfy-client-img figure{
    display: block;
}

.satisfy-client-img img{
    width: 100%;
    border-radius: 50%;
}

.hero-counter-box{
    width: 100%;
    max-width: 200px;
}

.hero-counter-box p{
    color: var(--white-color);
    margin: 0;
}

/************************************/
/***       05. About Us Css       ***/
/************************************/

.about-us{
    padding: 100px 0;
}

.about-us-image{
    position: relative;
    background-image: url(../images/about-bg-dot-shape.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top left;
    padding: 0 85px;
    margin-right: 30px;
}

.about-image figure{
    display: block;
    border-radius: 999px 999px 0 0;
    overflow: hidden;
}

.about-image img{
    width: 100%;
    aspect-ratio: 1 / 1.45;
    object-fit: cover;
    border-radius: 999px 999px 0 0;
}

.about-customer-box{
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 100%;
    max-width: 200px;
    text-align: center;
    background-color: var(--accent-color);
    border: 10px solid var(--white-color);
    border-radius: 999px 999px 0 0;
    padding: 50px 30px 20px;
    overflow: hidden;
    z-index: 1;
}

.about-customer-box::before{
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: var(--primary-color);
    border-radius: 100px 100px 0 0;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    z-index: -1;
}

.about-customer-box:hover:before{
    top: 0;
    opacity: 1;
}

.about-customer-box h2{
    font-size: 46px;
    color: var(--white-color);
    margin-bottom: 10px;
}

.about-customer-box p{
    color: var(--white-color);
    margin-bottom: 0;
}

.about-item-box{
    margin-bottom: 40px;
}

.about-us-item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
}

.about-us-item:last-child{
    margin-bottom: 0;
}

.about-us-item .icon-box{
    position: relative;
    margin-right: 20px;
}

.about-us-item .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    background-color: var(--ztc-bg-bg-1);
    border-radius: 50%;
    height: 32px;
    width: 32px;
    z-index: -1;
}

.about-us-item .icon-box img{
    max-width: 60px;
}

.about-item-content{
    width: calc(100% - 80px);
}

.about-item-content h3{
    font-size: 20px;
    margin-bottom: 10px;
}

.about-item-content p{
    margin-bottom: 0;
}

.about-facility-box{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    border-top: 1px solid var(--ztc-bg-bg-1);
    padding-top: 60px;
    margin-top: 60px;
}

.about-facility-item{
    width: calc(16.66% - 33.33px);
    text-align: center;
}

.about-facility-item .icon-box{
    margin-bottom: 15px;
}

.about-facility-item .icon-box img{
    max-width: 60px;
}

.about-facility-content p{
    font-weight: 600;
    margin-bottom: 0;
}

/************************************/
/***     06. Our Services Css     ***/
/************************************/

.our-services{
    position: relative;
    background: url('../images/our-service-bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 100px 0;
}

.our-services:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--ztc-bg-bg-1);
    opacity: 80%;
    z-index: 0;
}

.our-services .container{
    position: relative;
    z-index: 1;
}

.service-box-item{
    display: flex;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.service-box-item:last-child{
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: none;
}

.service-box-item .icon-box{
    display: block;
    margin-right: 30px;
}

.service-box-item .icon-box img{
    max-width: 60px;
}

.service-item-content{
    width: calc(100% - 90px);
}

.service-item-content h3{
    font-size: 20px;
    margin-bottom: 8px;
}

.service-item-content p{
    margin: 0;
}

.service-box-image{
    text-align: center;
}

.service-box-image img{
    width: 100%;
    aspect-ratio: 1 / 1.257;
    object-fit: cover;
}

/************************************/
/***    07. Why Work With Us Css  ***/
/************************************/

.our-work{
    padding: 100px 0;
}

.our-work-image{
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 230px 180px 0 0;
    margin-right: 110px;
}

.our-work-image:before{
    content: '';
    position: absolute;
    width: 90%;
    height: 80%;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    background: var(--accent-color);
    border-radius: 80px;
    z-index: -1;
}

.our-work-img-1{
    position: absolute;
    width: 100%;
    max-width: 325px;
    top: 0;
    right: 0;
    z-index: 1;
}

.our-work-img-1 figure,
.our-work-img-2 figure{
    border-radius: 300px 300px 0 0;
}

.our-work-img-1 img,
.our-work-img-2 img{
    border-radius: 300px 300px 0 0;
    border: 4px solid var(--white-color);
}

.work-content-body{
    margin-bottom: 40px;
}

.our-work-list ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px 30px;
    margin: 0;
    padding: 0;
}

.our-work-list ul li{
    width: calc(50% - 15px);
    position: relative;
    padding-left: 35px;
}

.our-work-list ul li:before{
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 22px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 2px;
    left: 0;
}

.our-work-btn{
    margin-top: 40px;
}

.work-counter-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
}

.work-counter-item{
    position: relative;
    width: calc(33.33% - 40px);
}

.work-counter-item:after{
    content: '';
    position: absolute;
    height: 100%;
    width: 2px;
    top: 0;
    right: -30px;
    bottom: 0;
    background: var(--ztc-bg-bg-1);
}

.work-counter-item:last-child::after,
.work-counter-item:nth-child(3n + 3):after{
    display: none;
}

.work-counter-item h3{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.work-counter-item p{
    margin: 0;
}

.work-facility-list{
    border-top: 1px solid var(--ztc-bg-bg-1);
    margin-top: 60px;
    padding-top: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 70px;
}

.work-facility-item{
    width: calc(25% - 52.5px);
    position: relative;
    display: flex;
    align-items: center;
}

.work-facility-item:after{
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    right: -35px;
    bottom: 0;
    background: var(--ztc-bg-bg-1);
}

.work-facility-item:last-child:after,
.work-facility-item:nth-child(4n + 4):after{
    display: none;
}

.work-facility-item .icon-box{
    margin-right: 20px;
}

.work-facility-item .icon-box img{
    max-width: 60px;
}

.work-facility-content{
    width: calc(100% - 80px);
}

.work-facility-content h3{
    font-size: 20px;
    margin-bottom: 10px;
}

.work-facility-content p{
    margin: 0;
}

/************************************/
/***     08. Intro Video Css      ***/
/************************************/

.intro-video .container-fluid{
    padding: 0;
}

.intro-video-box{
    position: relative;
}

.intro-video-image a{
    display: block;
    cursor: none;
}

.intro-video-image img{
    width: 100%;
    aspect-ratio: 1 / 0.38;
    filter: brightness(80%);
    object-fit: cover;
}

.video-play-button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-play-button a{
    position: relative;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--white-color);
    border: 1px solid var(--ztc-bg-bg-1);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition: all 0.4s ease-in-out;
}

.video-play-button a:hover{
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/************************************/
/***     09. Work Gallery Css     ***/
/************************************/

.work-gallery{
    padding: 100px 0;
}

.work-gallery-item{
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.work-gallery-img a{
    display: block;
    cursor: none;
}

.work-gallery-img figure{
    display: block;
}

.work-gallery-img figure::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 43.22%);
    z-index: 1;
}

.work-gallery-img img{
    width: 100%;
    aspect-ratio: 1 / 1.09;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.work-gallery-item:hover .work-gallery-img img{
    transform: scale(1.1);
}

.work-gallery-content{
    position: absolute;
    top: auto;
    right: 40px;
    bottom: 40px;
    left: 40px;
    z-index: 2;
}

.work-gallery-content h3{
    font-size: 20px;
    color: var(--white-color);
    line-height: 1.4em;
}

.work-gallery-content h3 a{
    display: block;
    color: inherit;
}

.work-with-company{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
    margin-top: 30px;
}

.work-company-title{
    width: calc(18% - 15px);
}

.work-company-title h3{
    font-size: 20px;
}

.work-with-company-slider{
    width: calc(82% - 15px);
}

.work-with-company-slider .company-logo{
    text-align: center;
}

.work-with-company-slider .company-logo img{
    width: 100%;
    max-height: 38px;
}

/************************************/
/***    10. Our Testimonial Css   ***/
/************************************/

.our-testimonial{
    position: relative;
    padding: 100px 0;
    background: url('../images/our-testimonial-bg.jpg') no-repeat center center;
    background-size: cover;
}

.our-testimonial:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--ztc-bg-bg-1);
    opacity: 90%;
}

.our-testimonial .container{
    position: relative;
    z-index: 1;
}

.testimonial-slider .swiper-wrapper{
    cursor: none;
}

.testimonial-item{
    position: relative;
    padding: 40px;
    overflow: hidden;
}

.testimonial-item:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background: var(--white-color);
    transition: all 0.5s ease-in-out;
    height: 100%;
    z-index: -1;
}

.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-item::before{
    top: 0;
}

.testimonial-header{
    margin-bottom: 20px;
}

.testimonial-quote-img{
    margin-bottom: 20px;
}

.testimonial-quote-img img{
    max-width: 30px;
    opacity: 30%;
}

.testimonial-rating i{
    color: var(--accent-color);
    font-size: 18px;
    margin-right: 5px;
}

.testimonial-rating i:last-child{
    margin-right: 0;
}

.testimonial-content{
    border-bottom: 2px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.testimonial-content p{
    margin: 0;
}

.testimonial-author{
    display: flex;
    align-items: center;
}

.author-image{
    margin-right: 15px;
}

.author-image img{
    max-width: 40px;
    border-radius: 50%;
}

.author-content{
    width: calc(100% - 55px);
}

.author-content h3{
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
}

.testimonial-slider .swiper-pagination{
    position: relative;
    margin-top: 40px;
    text-align: center;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet{
    height: 8px;
    width: 8px;
    background: var(--white-color);
    opacity: 1;
    margin: 0 8px;
}

.testimonial-slider .swiper-pagination-bullet.swiper-pagination-bullet-active{
    position: relative;
    background-color: var(--accent-color);
}

.testimonial-slider .swiper-pagination-bullet.swiper-pagination-bullet-active:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--accent-color);
    height: 18px;
    width: 18px;
    border-radius: 50%;
}

/************************************/
/***       11. Our FAQs Css       ***/
/************************************/

.our-faqs{
    background: var(--primary-color);
    padding: 100px 0;
}

.our-faqs-img{
    margin-right: 30px;
}

.our-faqs-img figure,
.our-faqs-img img{
    display: block;
    border-radius: 400px 400px 0 0;
}

.our-faqs-img img{
    width: 100%;
    aspect-ratio: 1 / 1.25;
    object-fit: cover;
}

.our-faqs-content{
    margin-left: 20px;
}

.faq-accordion .accordion-item{
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.faq-accordion .accordion-item:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.faq-accordion .accordion-header .accordion-button{
    position: relative;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4em;
    color: var(--white-color);
    padding-right: 25px;
}

.faq-accordion .accordion-header .accordion-button span{
    margin-right: 5px;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 18px;
    color: var(--white-color);
    transform: translateY(-50%) rotate(90deg);
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    transform: translateY(-50%) rotate(-90deg);
}

.faq-accordion .accordion-item .accordion-body{
    padding: 15px 25px 0 0;
}

.faq-accordion .accordion-item .accordion-body p{
    color: var(--white-color);
    margin-bottom: 10px;
}

.faq-accordion .accordion-item .accordion-body p:last-child{
    margin-bottom: 0;
}

/************************************/
/***      12. Latest News Css     ***/
/************************************/

.latest-news{
    padding: 100px 0 70px;
}

.post-item{
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image{
    margin-bottom: 20px;
}

.post-featured-image a{
    display: block;
    cursor: none;
    overflow: hidden;
}

.post-featured-image img{
    width: 100%;
    aspect-ratio: 1 / 0.67;
    object-fit: cover;
    transition: all 0.5s ease-out;
}

.post-item:hover .post-featured-image img{
    transform: scale(1.1);
}

.post-item-content{
    margin-bottom: 20px;
}

.post-item-content h2{
    font-size: 20px;
    line-height: 1.4em;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.post-item-content h2 a{
    display: block;
    color: inherit;
}

.post-item-content p{
    margin: 0;
}

.post-item-btn a{
    position: relative;
    display: inline-block;
    color: var(--text-color);
    padding-right: 40px;
    transition: all 0.4s ease-in-out;
}

.post-item-btn a:hover{
    color: var(--primary-color);
}

.post-item-btn a:after{
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    background-color: var(--accent-color);
    background-image: url('../images/arrow-white.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px auto;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

.post-item-btn a:hover:after{
    background-color: var(--primary-color);
}

/************************************/
/***    13. Footer Ticker Css     ***/
/************************************/

.footer-ticker{
    position: relative;
    padding: 40px 0;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--divider-color);
    background: #b10100;
}

.footer-ticker:after,
.footer-ticker:before{
    content: '';
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #ff5500 40%, #FFFFFF00 100%);
    z-index: 1;
}

.footer-ticker:before{
    background: linear-gradient(270deg, #b10100 40%, #FFFFFF00 100%);
    right: 0;
    left: auto;
}

.scrolling-ticker{
    position: relative;
}

.scrolling-ticker-box{
    --gap: 30px;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.scrolling-content{
    flex-shrink: 0;
    display: flex;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll 50s linear infinite;
}

.scrolling-content span{
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-size: 80px;
    font-weight: 700;
    line-height: 1.3em;
}

@keyframes scroll{
    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.schedule-now-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.scrolling-ticker .schedule-now-btn a{
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4em;
    width: 150px;
    height: 150px;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 50%;
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.scrolling-ticker .schedule-now-btn a:hover{
    background: var(--primary-color);
}

/************************************/
/***      	14. Footer Css   	  ***/
/************************************/

.main-footer{
    background: #000000;
    padding: 80px 0 0;
}

.footer-header{
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.footer-header .section-title{
    margin-bottom: 0;
}

.footer-contact-btn{
    text-align: end;
}

.footer-logo{
    margin-bottom: 20px;
}

.footer-logo img {
    width: 170px;
}


.about-footer-content{
    margin-bottom: 20px;
}

.about-footer-content p{
    color: var(--white-color);
    margin: 0;
}

.footer-social-links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-social-links ul li{
    display: inline-block;
    margin-right: 10px;
}

.footer-social-links ul li:last-child{
    margin-right: 0;
}

.footer-social-links ul li a{
    border: 1px solid var(--dark-divider-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li:hover a{
    border-color: var(--white-color);
}

.footer-social-links ul li a i{
    font-size: 16px;
    color: var(--white-color);
}

.footer-links h3{
    color: var(--white-color);
    font-size: 20px;
    margin-bottom: 20px;
}

.footer-links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links ul li{
    color: var(--white-color);
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
}

.footer-links ul li:last-child{
    margin-bottom: 0;
}

.footer-links ul li:hover{
    color: var(--accent-color);
}

.footer-links ul li a{
    color: inherit;
}

.footer-contact-item{
    display: flex;
    margin-bottom: 20px;
}

.footer-contact-item:last-child{
    margin-bottom: 0;
}

.footer-contact-item .icon-box{
    margin-right: 10px;
    color: #fff;
}

.footer-contact-item .icon-box img{
    max-width: 20px;
}

.footer-contact-content{
    width: calc(100% - 30px);
}

.footer-contact-content p{
    color: var(--white-color);
    margin-bottom: 0;
}

.footer-latest-news-form .form-group{
    display: flex;
    border-bottom: 1px solid var(--dark-divider-color);
    overflow: hidden;
}

.footer-latest-news-form .form-group .form-control{
    width: 85%;
    border: none;
    border-radius: 0;
    font-weight: 500;
    line-height: 1.4em;
    color: var(--white-color);
    background: transparent;
    padding: 14px 10px 14px 0;
    box-shadow: none;
}

.footer-latest-news-form .form-group .form-control::placeholder{
    color: var(--white-color);
}

.footer-latest-news-form .latestnews-btn{
    background: transparent;
    width: 15%;
    border: none;
    padding: 0;
    text-align: right;
}

.footer-latest-news-form .latestnews-btn img{
    max-width: 24px;
}

.footer-copyright{
    text-align: center;
    border-top: 1px solid var(--dark-divider-color);
    padding: 40px 0;
    margin-top: 60px;
}

.footer-copyright-text p{
    color: var(--white-color);
    margin: 0;
}

/************************************/
/***     15. About Us Page Css    ***/
/************************************/

.page-header{
    position: relative;
    background: url('../images/page-header-bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 180px 0;
}

.page-header::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 70.86%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box{
    position: relative;
    text-align: center;
    z-index: 1;
}

.page-header-box h1{
    display: inline-block;
    font-size: 80px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -0.02em;
    color: var(--white-color);
    margin-bottom: 10px;
    cursor: none;
}

.page-header-box ol{
    justify-content: center;
    margin: 0;
    padding: 0;
}

.page-header-box ol li.breadcrumb-item{
    font-size: 18px;
    font-weight: 400;
    color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    font-size: 18px;
    color: var(--white-color);
}

.page-about-us{
    padding: 100px 0 50px;
}

.our-mission-vision{
    position: relative;
    padding: 50px 0 100px;
}

.mission-vision-bg{
    position: relative;
    background: url('../images/mission-vision-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 100px 0 200px;
}

.mission-vision-bg:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(20, 24, 62, 0.8) 0%, rgba(20, 24, 62, 0) 100%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mission-vision-box{
    position: relative;
    box-shadow: 0px 4px 124px 0px var(--divider-color);
    margin-top: -200px;
    z-index: 1;
}

.mission-vision-nav ul{
    list-style: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--divider-color);
    overflow: hidden;
}

.mission-vision-nav ul li{
    width: 33.33%;
    position: relative;
    display: inline-block;
    text-align: center;
}

.mission-vision-nav ul li:last-child{
    padding-right: 0;
}

.mission-vision-nav ul li .nav-link{
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    padding: 30px;
    transition: all 0.4s ease-in-out;
}

.mission-vision-nav ul li .nav-link.active,
.mission-vision-nav ul li .nav-link:hover{
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 0;
}

.mission-vision-nav ul li .nav-link img{
    max-width: 24px;
    margin-right: 20px;
    transition: all 0.3s ease-in-out;
}

.mission-vision-nav ul li .nav-link.active img,
.mission-vision-nav ul li .nav-link:hover img{
    filter: brightness(0) invert(1);
}

.mission-vision-item{
    background-color: var(--white-color);
    padding: 40px;
}

.mission-vision-content-header{
    margin-bottom: 40px;
}

.mission-vision-content-header p{
    margin: 0;
}

.mission-vision-content-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.mission-vision-content-list ul li{
    position: relative;
    color: var(--primary-color);
    padding-left: 30px;
    margin-bottom: 20px;
}

.mission-vision-content-list ul li:last-child{
    margin-bottom: 0;
}

.mission-vision-content-list ul li:before{
    content: '\f058';
    font-family: 'FontAwesome';
    position: absolute;
    font-size: 20px;
    top: 1px;
    color: var(--accent-color);
    left: 0;
}

.mission-vision-image figure{
    display: block;
}

.mission-vision-image img{
    width: 100%;
    aspect-ratio: 1 / 0.5;
    object-fit: cover;
}

.our-team{
    padding: 100px 0 70px;
}

.team-member-item{
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.team-image{
    margin-bottom: 20px;
}

.team-image figure,
.team-image a{
    cursor: none;
    display: block;
}

.team-image img{
    width: 100%;
    aspect-ratio: 1 / 1.11;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.team-member-item:hover .team-image img{
    transform: scale(1.1);
}

.team-content{
    text-align: center;
    margin-bottom: 15px;
}

.team-content h3{
    font-size: 20px;
    margin-bottom: 10px;
}

.team-content h3 a{
    color: inherit;
}

.team-content p{
    font-weight: 500;
    margin: 0;
}

.team-social-icon ul{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.team-social-icon ul li{
    display: inline-block;
    margin-right: 10px;
}

.team-social-icon ul li:last-child{
    margin: 0;
}

.team-social-icon ul li a{
    width: 44px;
    height: 44px;
    background: var(--ztc-bg-bg-1);
    border-radius: 50%;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.team-social-icon ul li a:hover{
    background: var(--primary-color);
    color: var(--white-color);
}

.team-social-icon ul li a i{
    font-size: 20px;
    color: inherit;
}

/************************************/
/***     16. Services Page Css    ***/
/************************************/

.page-services{
    padding: 100px 0 70px;
}

.page-service-item{
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.page-service-image a{
    position: relative;
    display: block;
    cursor: none;
}

.page-service-image figure::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.12%, #000000 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-service-image img{
    aspect-ratio: 1 / 1.05;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.page-service-item:hover .page-service-image img{
    transform: scale(1.1);
}

.page-service-content{
    position: absolute;
    right: 40px;
    bottom: 40px;
    left: 40px;
    z-index: 2;
}

.page-service-content h3{
    color: var(--white-color);
    font-size: 20px;
}

.cta-section{
    position: relative;
    background: linear-gradient(135deg, #b10100 0%, #8a0000 100%);
    padding: 80px 0;
    overflow: hidden;
}

.cta-section:before{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.cta-box-image{
    position: relative;
    z-index: 1;
}

.cta-box-image img{
    width: 100%;
    aspect-ratio: 1 / 0.629;
    object-fit: cover;
}

.cta-box-content{
    position: relative;
    margin-left: 0;
    z-index: 1;
}

.cta-main-title{
    position: relative;
    z-index: 1;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.15;
}

.cta-subtitle{
    position: relative;
    z-index: 1;
    font-size: 18px;
    color: rgba(255,255,255,0.88);
    margin-bottom: 20px;
}

.cta-buttons{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cta-btn-primary{
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #111;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 36px;
    border-radius: 7px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.cta-btn-primary:hover{
    background: rgba(255,255,255,0.9);
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.cta-btn-outline{
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 36px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.7);
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.cta-btn-outline:hover{
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}



.cta-btn-primary i {
    font-size: 17px;
}

.cta-btn-outline i {
    font-size: 16px;
}

.cta-trust-bar{
    position: relative;
    z-index: 1;
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.cta-trust-bar i{
    opacity: 0.85;
}

@media (max-width: 767px){
    .cta-buttons{
        flex-direction: column;
        align-items: center;
    }
    .cta-btn-primary,
    .cta-btn-outline{
        width: 100%;
        justify-content: center;
    }
}

/************************************/
/***   17. Services Single Css    ***/
/************************************/

.page-service-single{
    padding: 100px 0;
}

.service-sidebar{
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.service-catagery-list{
    border: 1px solid var(--divider-color);
    padding: 30px;
    margin-bottom: 40px;
}

.service-catagery-list h3{
    font-size: 20px;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.service-catagery-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-catagery-list ul li{
    margin-bottom: 20px;
}

.service-catagery-list ul li:last-child{
    margin: 0;
}

.service-catagery-list ul li a{
    position: relative;
    display: block;
    font-weight: 500;
    color: var(--text-color);
    padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a{
    color: var(--primary-color);
}

.service-catagery-list ul li a::before{
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 18px;
    color: var(--text-color);
    transform: translateY(-50%) rotate(-45deg);
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a::before{
    color: var(--primary-color);
    transform: translateY(-50%) rotate(0);
}

.sidebar-cta-box{
    background-color: var(--accent-color);
    padding: 30px;
}

.sidebar-cta-title{
    margin-bottom: 20px;
}

.sidebar-cta-title h2{
    font-size: 20px;
    color: var(--white-color);
}

.sidebar-cta-contact-item{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.sidebar-cta-contact-item:last-child{
    margin-bottom: 0;
}

.sidebar-cta-contact-item .icon-box{
    margin-right: 20px;
}

.sidebar-cta-contact-item .icon-box img{
    max-width: 24px;
}

.cta-contact-item-content p{
    color: var(--white-color);
    margin-bottom: 0;
}

.service-single-slider{
    margin-bottom: 40px;
}

.service-single-slider .swiper-wrapper{
    cursor: none;
}

.service-single-slider .swiper-slide figure{
    display: block;
}

.service-single-slider .swiper-slide img{
    width: 100%;
    aspect-ratio: 1 / 0.5;
    object-fit: cover;
}

.service-single-slider .service-button-next,
.service-single-slider .service-button-prev{
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.service-single-slider .service-button-next{
    left: auto;
    right: 20px;
}

.service-single-slider .service-button-next:hover,
.service-single-slider .service-button-prev:hover{
    border-color: var(--accent-color);
}

.service-single-slider .service-button-next::before,
.service-single-slider .service-button-prev::before{
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    font-weight: 900;
    line-height: normal;
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.service-single-slider .service-button-prev::before{
    transform: rotate(180deg);
}

.service-single-slider .service-button-next:hover:before,
.service-single-slider .service-button-prev:hover:before{
    color: var(--accent-color);
}

.service-entry{
    margin-bottom: 40px;
}

.service-entry h2{
    font-size: 46px;
    margin-bottom: 20px;
}

.service-entry p{
    margin-bottom: 20px;
}

.service-entry p:last-child{
    margin-bottom: 0;
}

.service-entry ul{
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.service-entry ul li{
    position: relative;
    width: calc(50% - 15px);
    padding-left: 35px;
}

.service-entry ul li:before{
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 2px;
    left: 0;
}

.service-entry-images{
    display: flex;
    gap: 30px;
    margin: 40px 0;
}

.service-entry-img{
    width: calc(50% - 15px);
}

.service-entry-img figure{
    display: block;
}

.service-entry-img img{
    width: 100%;
    aspect-ratio: 1 / 0.84;
    object-fit: cover;
}

.our-work-content.service-work-content{
    margin-bottom: 40px;
}

.faq-accordion.page-faq-accordion .accordion-item{
    border-bottom-color: var(--divider-color);
}

.faq-accordion.page-faq-accordion .accordion-header .accordion-button{
    color: var(--primary-color);
}

.faq-accordion.page-faq-accordion .accordion-item .accordion-button::after,
.faq-accordion.page-faq-accordion .accordion-item .accordion-button.collapsed::after{
    color: var(--primary-color);
}

.faq-accordion.page-faq-accordion .accordion-item .accordion-body p{
    color: var(--text-color);
}

/************************************/
/***     18. Blog Archive Css     ***/
/************************************/

.page-blog{
    padding: 100px 0;
}

.page-blog .post-item{
    height: calc(100% - 40px);
    margin-bottom: 40px;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--divider-color);
    color: var(--primary-color);
    border-radius: 0;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
    line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a,
.page-pagination ul li a:hover{
    background: var(--accent-color);
    color: var(--white-color);
}

/************************************/
/***      19. Blog Single Css     ***/
/************************************/

.page-single-post{
    padding: 100px 0;
}

.post-image{
    position: relative;
    margin-bottom: 30px;
}

.post-image figure{
    display: block;
    overflow: hidden;
}

.post-image figure,
.post-image img{
    aspect-ratio: 1 / 0.50;
    object-fit: cover;
}

.post-content{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.post-entry{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.6em;
}

.post-entry h1{
    font-size: 80px;
}

.post-entry h2{
    font-size: 46px;
}

.post-entry h3{
    font-size: 40px;
}

.post-entry h4{
    font-size: 30px;
}

.post-entry h5{
    font-size: 24px;
}

.post-entry h6{
    font-size: 18px;
}

.post-entry p{
    margin-bottom: 20px;
}

.post-entry p:last-child{
    margin-bottom: 0;
}

.post-entry p strong{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.post-entry ul{
    padding: 0;
    margin: 20px 0 20px;
    padding-left: 20px;
}

.post-entry ul li{
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
    margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
    background: url('../images/icon-blockquote.svg'), var(--primary-color);
    background-repeat: no-repeat;
    background-position: 35px 30px;
    background-size: 58px;
    border-radius: 0;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
    font-family: var(--accent-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4em;
    color: var(--white-color);
}

.post-entry blockquote p:last-child{
    margin-bottom: 0;
}

.tag-links{
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 0;
    padding: 8px 20px;
    transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
    background: var(--primary-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
    margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 0;
    width: 36px;
    height: 36px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a{
    background: var(--primary-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/***     20. Projects Page Css    ***/
/************************************/

.page-projects{
    padding: 100px 0 70px;
}

.our-Project-nav{
    text-align: center;
    margin-bottom: 60px;
}

.our-Project-nav ul{
    list-style: none;
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px 30px;
    padding: 0;
    margin: 0;
}

.our-Project-nav ul li a{
    position: relative;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2em;
    transition: all 0.3s ease-in-out;
}

.our-Project-nav ul li a:hover,
.our-Project-nav ul li a.active-btn{
    color: var(--accent-color);
}

.our-Project-nav ul li a:before{
    content: '';
    position: absolute;
    top: 50%;
    bottom: 0;
    right: -18px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}

.our-Project-nav ul li:last-child a:before{
    display: none;
}

.project-item{
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.project-image a{
    position: relative;
    display: block;
    cursor: none;
}

.project-image figure::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.12%, #000000 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.project-image img{
    aspect-ratio: 1 / 1.05;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.project-item:hover .project-image img{
    transform: scale(1.1);
}

.project-content{
    position: absolute;
    right: 40px;
    bottom: 40px;
    left: 40px;
    z-index: 2;
}

.project-content h3{
    font-size: 20px;
    color: var(--white-color);
}

.project-content h3 a{
    color: inherit;
}

/************************************/
/***    21. Projects Single Css   ***/
/************************************/

.page-project-single{
    padding: 100px 0;
}

.project-single-sidebar{
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.project-detail-list{
    border: 1px solid var(--divider-color);
    padding: 30px;
    margin-bottom: 40px;
}

.project-detail-title{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.project-detail-title h3{
    font-size: 20px;
}

.project-detail-item{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.project-detail-item:last-child{
    margin-bottom: 0;
}

.project-detail-item .icon-box{
    position: relative;
    background-color: var(--accent-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.project-detail-item .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.project-detail-item:hover .icon-box::before{
    transform: scale(1);
}

.project-detail-item .icon-box i{
    position: relative;
    font-size: 20px;
    color: var(--white-color);
    z-index: 1;
}

.project-detail-content{
    width: calc(100% - 70px);
}

.project-detail-content h3{
    font-size: 16px;
    margin-bottom: 5px;
}

.project-detail-content p{
    font-weight: 500;
    margin-bottom: 0;
}

.project-single-image{
    margin-bottom: 40px;
}

.project-single-image figure{
    display: block;
}

.project-single-image img{
    width: 100%;
    aspect-ratio: 1 / 0.54;
    object-fit: cover;
}

.project-info,
.project-features{
    margin-bottom: 40px;
}

.project-entry h2{
    font-size: 46px;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.project-entry p{
    margin-bottom: 20px;
}

.project-entry p:last-child{
    margin-bottom: 0;
}

.project-entry ul{
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.project-entry ul li{
    position: relative;
    font-weight: 500;
    color: var(--text-color);
    padding-left: 30px;
    margin-bottom: 15px;
}

.project-entry ul li:last-child{
    margin-bottom: 0;
}

.project-entry ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'FontAwesome';
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: var(--accent-color);
    display: inline-block;
    top: 3px;
    left: 0;
}

.project-gallery-images{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.project-gallery-img{
    width: calc(25% - 22.5px);
}

.project-gallery-img a,
.project-gallery-img figure{
    display: block;
    cursor: none;
}

.project-gallery-img figure img{
    width: 100%;
    aspect-ratio: 1 / 1.01;
    object-fit: cover;
}

/************************************/
/***     	22. Team Page Css     ***/
/************************************/

.page-team{
    padding: 100px 0 70px;
}

/************************************/
/***     23. Team Single Css      ***/
/************************************/

.page-team-single{
    padding: 100px 0;
}

.team-single-image{
    position: sticky;
    top: 100px;
    margin-right: 30px;
}

.team-single-image figure{
    display: block;
    overflow: hidden;
}

.team-single-image img{
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
}

.team-member-info{
    margin-bottom: 40px;
}

.team-member-info .section-title h3{
    padding-left: 0;
}

.team-member-info .section-title h3::before{
    display: none;
}

.team-info-list ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-info-list ul li{
    display: block;
    margin-bottom: 20px;
}

.team-info-list ul li:last-child{
    margin-bottom: 0;
}

.team-info-list ul li span{
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-block;
    width: 20%;
}

.team-member-experience{
    margin-bottom: 40px;
}

.member-experience-list ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.member-experience-list ul li{
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
}

.member-experience-list ul li:last-child{
    margin-bottom: 0;
}

.member-experience-list ul li::before{
    content: '\f058';
    font-family: 'FontAwesome';
    position: absolute;
    font-size: 20px;
    top: 1px;
    color: var(--accent-color);
    left: 0;
}

.member-form form .form-control{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6em;
    color: var(--text-color);
    background: transparent;
    border-width: 0 0 1px 0;
    border-color: var(--divider-color);
    border-radius: 0;
    padding: 15px 0;
    outline: none;
    box-shadow: none;
}

/************************************/
/***     24. Image Gallery Css    ***/
/************************************/

.page-gallery{
    padding: 100px 0 70px;
}

.page-gallery-box .photo-gallery{
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
    cursor: none;
}

.page-gallery-box .photo-gallery img{
    aspect-ratio: 1 / 0.92;
    object-fit: cover;
}

/************************************/
/***     25. Video Gallery Css    ***/
/************************************/

.page-video-gallery{
    padding: 100px 0 70px;
}

.video-gallery-image{
    overflow: hidden;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.video-gallery-image a{
    position: relative;
    display: block;
    cursor: none;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 40%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
    font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    font-size: 20px;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
    aspect-ratio: 1 / 0.92;
    object-fit: cover;
}

/************************************/
/***      264. FAQs Page Css       ***/
/************************************/

.page-faqs{
    padding: 100px 0;
}

.faq-sidebar{
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.faq-catagery-list{
    border: 1px solid var(--divider-color);
    padding: 30px;
    margin-bottom: 40px;
}

.faq-catagery-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-catagery-list ul li{
    margin-bottom: 20px;
}

.faq-catagery-list ul li:last-child{
    margin: 0;
}

.faq-catagery-list ul li a{
    position: relative;
    display: block;
    font-weight: 500;
    color: var(--text-color);
    padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a{
    color: var(--primary-color);
}

.faq-catagery-list ul li a::before{
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 18px;
    color: var(--text-color);
    transform: translateY(-50%) rotate(-45deg);
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a::before{
    color: var(--primary-color);
    transform: translateY(-50%) rotate(0);
}

.faq-accordion.page-faq-accordion{
    margin-bottom: 60px;
}

.faq-accordion.page-faq-accordion:last-child{
    margin-bottom: 0;
}

/************************************/
/***    27. Contact Us Page Css   ***/
/************************************/

.page-contact-us{
    padding: 100px 0 70px;
}

.page-contact-us .section-title{
    text-align: center;
}

.contact-info-item{
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.contact-info-img{
    overflow: hidden;
    margin-bottom: 20px;
}

.contact-info-img figure{
    display: block;
}

.contact-info-img img{
    width: 100%;
    aspect-ratio: 1 / 0.97;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.contact-info-item:hover img{
    transform: scale(1.1);
}

.contact-info-content h3{
    font-size: 20px;
    margin-bottom: 20px;
}

.contact-info-content p{
    margin: 0;
}

.google-map-form{
    position: relative;
    padding: 100px 0;
}

.google-map{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.google-map iframe{
    width: 100%;
    height: 100%;
}

.form-box{
    position: relative;
    background: var(--white-color);
    padding: 80px;
    z-index: 1;
}

.form-box .section-title{
    text-align: center;
}

.form-box .form-control{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--text-color);
    padding: 11px 20px;
    border: 1px solid var(--divider-color);
    border-radius: 0;
    box-shadow: none;
    outline: none;
    background: transparent;
}

.form-box .form-control::placeholder{
    color: var(--text-color);
}

/************************************/
/***    28. 404 Error Page Css    ***/
/************************************/

.error-page{
    padding: 100px 0;
}

.error-page-image{
    text-align: center;
    margin-bottom: 40px;
}

.error-page-image img{
    width: 100%;
    max-width: 50%;
}

.error-page-content{
    text-align: center;
}

.error-page-content .section-title{
    margin-bottom: 20px;
}

.error-page-content-body p{
    font-size: 20px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/************************************/
/***       29. Responsive Css     ***/
/************************************/

@media only screen and (max-width: 1024px){

    .main-menu ul li{
        margin-left: 0;
    }
}

@media only screen and (max-width: 991px){

    .topbar{
        padding: 10px 0;
    }

    .topbar-time{
        padding: 5px 0px;
    }

    .topbar-time ul {
        justify-content: left;
    }


    .topbar-contact-info ul li {
        padding: 5px 0px;
    }


    .topbar-offer p{
        text-align: right;
    }

    .navbar{
        padding: 15px 0px;
    }

    .header-social-icons{
        display: none;
    }

    .slicknav_nav li,
    .slicknav_nav ul{
        display: block;
    }

    .responsive-menu,
    .navbar-toggle{
        display: block;
    }

    .section-row{
        margin-bottom: 40px;
    }

    .section-title{
        margin-bottom: 30px;
    }

    .section-title-content{
        margin-top: 15px;
    }

    .section-btn{
        text-align: left;
        margin-top: 15px;
    }

    .section-title h3{
        margin-bottom: 10px;
    }

    .section-title h1{
        font-size: 60px;
    }

    .section-title h2{
        font-size: 36px;
    }

    .section-title p{
        margin-top: 15px;
    }

    .hero{
        padding: 130px 0;
    }

    .hero.hero-slider-layout .hero-slide{
        padding: 130px 0;
    }

    .hero.hero-slider-layout .hero-pagination{
        padding-left: 15px;
        bottom: 30px;
    }

    .hero-content-body{
        margin-top: 30px;
    }

    .about-us{
        padding: 50px 0;
    }

    .about-us-image{
        width: 100%;
        max-width: 80%;
        margin: 0 auto 30px;
    }

    .about-customer-box{
        max-width: 180px;
        padding: 40px 25px 20px;
    }

    .about-customer-box h2{
        font-size: 36px;
    }

    .about-item-box{
        margin-bottom: 30px;
    }

    .about-us-item{
        margin-bottom: 20px;
    }

    .about-us-item .icon-box img{
        max-width: 50px;
    }

    .about-item-content{
        width: calc(100% - 70px);
    }

    .about-facility-box{
        gap: 30px;
        padding-top: 30px;
        margin-top: 30px;
    }

    .about-facility-item{
        width: calc(16.66% - 25px);
    }

    .about-facility-item .icon-box{
        margin-bottom: 10px;
    }

    .about-facility-item .icon-box img{
        max-width: 50px;
    }

    .our-services{
        padding: 50px 0;
    }

    .service-box-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .service-box-item .icon-box{
        margin-right: 15px;
    }

    .service-box-item .icon-box img{
        max-width: 50px;
    }

    .service-item-content{
        width: calc(100% - 65px);
    }

    .service-item-content h3{
        font-size: 18px;
    }

    .service-box-image{
        max-width: 405px;
        margin: 0px auto;
        margin-top: 30px;
    }

    .our-work{
        padding: 50px 0;
    }

    .our-work-image{
        max-width: 510px;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .work-content-body{
        margin-bottom: 30px;
    }

    .our-work-btn{
        margin-top: 30px;
    }

    .work-facility-list{
        margin-top: 30px;
        padding-top: 30px;
    }

    .work-facility-item{
        width: calc(50% - 35px);
    }

    .work-facility-item:nth-child(2n + 2):after{
        display: none;
    }

    .intro-video-image img{
        aspect-ratio: 1 / 0.5;
    }

    .video-play-button a{
        width: 80px;
        height: 80px;
    }

    .work-gallery{
        padding: 50px 0;
    }

    .work-gallery-content{
        right: 30px;
        bottom: 30px;
        left: 30px;
    }

    .work-gallery-content h3{
        font-size: 18px;
    }

    .work-with-company{
        margin-top: 10px;
    }

    .work-company-title h3{
        font-size: 18px;
    }

    .work-company-title{
        width: calc(22% - 15px);
    }

    .work-with-company-slider{
        width: calc(78% - 15px);
    }

    .our-testimonial{
        padding: 50px 0;
    }

    .testimonial-item{
        padding: 30px;
    }

    .testimonial-header,
    .testimonial-quote-img{
        margin-bottom: 15px;
    }

    .testimonial-content{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .testimonial-rating i{
        font-size: 16px;
    }

    .testimonial-slider .swiper-pagination{
        margin-top: 30px;
    }

    .our-faqs{
        padding: 50px 0;
    }

    .our-faqs-img{
        max-width: 500px;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .our-faqs-content{
        margin-left: 0px;
    }

    .faq-accordion .accordion-item{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .faq-accordion .accordion-item .accordion-body{
        padding: 10px 25px 0 0;
    }

    .latest-news{
        padding: 50px 0 20px;
    }

    .post-featured-image{
        margin-bottom: 15px;
    }

    .post-item-content h2{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .post-item-content{
        margin-bottom: 15px;
    }

    .post-item-btn a{
        padding-right: 32px;
    }

    .post-item-btn a:after{
        width: 24px;
        height: 24px;
        background-size: 12px auto;
    }

    .footer-ticker{
        padding: 30px 0;
    }

    .footer-ticker:after,
    .footer-ticker:before{
        width: 100px;
    }

    .scrolling-content span{
        font-size: 60px;
    }

    .scrolling-ticker .schedule-now-btn a{
        font-size: 14px;
        width: 100px;
        height: 100px;
        padding: 5px;
    }

    .main-footer{
        padding: 50px 0 0;
    }

    .footer-header{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .about-footer{
        margin-bottom: 30px;
    }

    .footer-logo{
        margin-bottom: 15px;
    }

    .about-footer-content{
        margin-bottom: 15px;
    }

    .footer-links{
        margin-bottom: 30px;
    }

    .footer-links ul li{
        margin-bottom: 10px;
    }

    .footer-contact-item{
        margin-bottom: 15px;
    }

    .footer-copyright{
        margin-top: 0px;
        padding: 20px 0;
    }

    .page-header{
        padding: 90px 0;
    }

    .page-header-box h1{
        font-size: 60px;
    }

    .page-about-us{
        padding: 50px 0 20px;
    }

    .our-mission-vision{
        padding: 25px 0 50px;
    }

    .mission-vision-bg{
        padding: 50px 0 100px;
    }

    .mission-vision-box{
        margin-top: -100px;
    }

    .mission-vision-nav ul li .nav-link{
        font-size: 18px;
        padding: 20px;
    }

    .mission-vision-nav ul li .nav-link img{
        max-width: 20px;
        margin-right: 10px;
    }

    .mission-vision-item{
        padding: 30px;
    }

    .mission-vision-content{
        margin-bottom: 30px;
    }

    .mission-vision-content-header{
        margin-bottom: 20px;
    }

    .mission-vision-content-list ul li{
        margin-bottom: 15px;
    }

    .our-team{
        padding: 50px 0 20px;
    }

    .team-image{
        margin-bottom: 15px;
    }

    .team-content h3{
        margin-bottom: 5px;
    }

    .page-services{
        padding: 50px 0 20px;
    }

    .page-service-content{
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .cta-box-image{
        max-width: 80%;
        margin: 0 auto;
    }

    .cta-box-content{
        margin-left: 0;
        margin-bottom: 30px;
    }

    .page-service-single{
        padding: 50px 0;
    }

    .service-sidebar{
        position: initial;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .service-catagery-list{
        padding: 20px;
        margin-bottom: 30px;
    }

    .service-catagery-list h3{
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .service-catagery-list ul li{
        margin-bottom: 15px;
    }

    .sidebar-cta-box{
        padding: 20px;
    }

    .sidebar-cta-contact-item{
        margin-bottom: 15px;
    }

    .sidebar-cta-contact-item .icon-box{
        margin-right: 15px;
    }

    .sidebar-cta-contact-item .icon-box img{
        max-width: 20px;
    }

    .service-single-slider{
        margin-bottom: 30px;
    }

    .service-entry{
        margin-bottom: 30px;
    }

    .service-entry h2{
        font-size: 36px;
    }

    .service-entry ul{
        gap: 10px 20px;
    }

    .service-entry ul li{
        width: calc(50% - 10px);
        padding-left: 30px;
    }

    .service-entry ul li:before{
        font-size: 18px;
        top: 3px;
    }

    .service-entry-images{
        margin: 30px 0;
    }

    .our-work-content.service-work-content{
        margin-bottom: 30px;
    }

    .page-blog{
        padding: 50px 0;
    }

    .page-blog .post-item{
        height: calc(100% - 30px);
        margin-bottom: 30px;
    }

    .page-pagination{
        margin-top: 10px;
    }

    .page-single-post{
        padding: 50px 0;
    }

    .post-image{
        margin-bottom: 20px;
    }

    .post-entry blockquote{
        background-position: 25px 25px;
        background-size: 50px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
    }

    .post-entry blockquote p{
        font-size: 18px;
    }

    .post-entry h2{
        font-size: 36px;
    }

    .post-entry ul li{
        font-size: 16px;
    }

    .post-tags{
        margin-bottom: 20px;
    }

    .post-social-sharing ul{
        text-align: left;
    }

    .post-tags .tag-links a{
        font-size: 16px;
        padding: 6px 15px;
    }

    .page-projects{
        padding: 50px 0 30px;
    }

    .our-Project-nav{
        margin-bottom: 40px;
    }

    .our-Project-nav ul li a{
        font-size: 18px;
    }

    .project-content{
        right: 30px;
        bottom: 30px;
        left: 30px;
    }

    .page-project-single{
        padding: 50px 0;
    }

    .project-single-sidebar{
        position: initial;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .project-detail-list{
        padding: 20px;
        margin-bottom: 30px;
    }

    .project-detail-title{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .project-detail-item{
        margin-bottom: 20px;
    }

    .project-single-image{
        margin-bottom: 30px;
    }

    .project-info,
    .project-features{
        margin-bottom: 30px;
    }

    .project-entry h2{
        font-size: 36px;
    }

    .page-team{
        padding: 50px 0 20px;
    }

    .page-team-single{
        padding: 50px 0;
    }

    .team-single-image{
        position: initial;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .team-single-image img{
        aspect-ratio: 1 / 0.79;
        object-position: top center;
    }

    .team-member-info{
        margin-bottom: 30px;
    }

    .team-info-list ul li{
        margin-bottom: 15px;
    }

    .team-info-list ul li span{
        font-size: 18px;
    }

    .team-member-experience{
        margin-bottom: 30px;
    }

    .member-experience-list ul li{
        margin-bottom: 15px;
    }

    .page-gallery{
        padding: 50px 0 20px;
    }

    .page-video-gallery{
        padding: 50px 0 20px;
    }

    .page-faqs{
        padding: 50px 0;
    }

    .faq-sidebar{
        position: initial;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .faq-catagery-list{
        padding: 20px;
        margin-bottom: 30px;
    }

    .faq-accordion.page-faq-accordion{
        margin-bottom: 40px;
    }

    .page-contact-us{
        padding: 50px 0 20px;
    }

    .contact-info-content h3{
        margin-bottom: 10px;
    }

    .google-map-form{
        padding: 0;
    }

    .google-map{
        position: relative;
    }

    .google-map iframe{
        height: 400px;
    }

    .form-box{
        padding: 50px 0;
    }

    .error-page{
        padding: 50px 0;
    }

    .error-page-image{
        margin-bottom: 30px;
    }

    .error-page-image img{
        max-width: 80%;
    }

    .error-page-content-body p{
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px){

    .btn-default{
        padding: 15px 25px;
    }

    .topbar-offer{
        margin-top: 5px;
    }

    .topbar-offer p{
        text-align: center;
    }

    .section-title h1{
        font-size: 34px;
    }

    .section-title h2{
        font-size: 26px;
    }

    .hero-btn .btn-default{
        margin-right: 30px;
    }

    .hero-btn .btn-default.btn-highlighted{
        margin: 0;
    }

    .satisfy-client-images{
        margin-right: 10px;
    }

    .satisfy-client-img{
        width: 50px;
        height: 50px;
    }

    .hero-counter-box{
        max-width: 100%;
    }

    .about-us-image{
        background-size: 100px auto;
        max-width: 100%;
        padding: 0 40px;
    }

    .about-customer-box{
        bottom: 30px;
        max-width: 130px;
        padding: 30px 15px 15px;
    }

    .about-customer-box h2{
        font-size: 26px;
        margin-bottom: 5px;
    }

    .about-customer-box p{
        font-size: 14px
    }

    .about-us-item .icon-box{
        width: 100%;
        margin: 0 0 10px 0;
    }

    .about-item-content{
        width: 100%;
    }

    .about-item-content h3{
        font-size: 18px;
    }

    .about-facility-item{
        width: calc(50% - 15px);
    }

    .service-box-image{
        max-width: 100%;
        margin: 30px 0;
    }

    .our-work-image{
        max-width: 100%;
        padding: 160px 125px 0 0;
    }

    .our-work-image:before{
        border-radius: 40px;
    }

    .our-work-img-1{
        max-width: 220px;
    }

    .our-work-list ul li{
        width: 100%;
        padding-left: 30px;
    }

    .our-work-list ul li:before{
        font-size: 18px;
        top: 4px;
    }

    .work-counter-list{
        gap: 20px 30px;
    }

    .work-counter-item{
        width: calc(50% - 15px);
    }

    .work-counter-item:after{
        right: -15px;
    }

    .work-counter-item:nth-child(3n + 3):after{
        display: block;
    }

    .work-counter-item:nth-child(2n + 2):after,
    .work-counter-item:last-child::after{
        display: none;
    }

    .work-facility-list{
        gap: 30px;
    }

    .work-facility-item{
        width: 100%;
    }

    .work-facility-item .icon-box{
        margin-right: 10px;
    }

    .work-facility-item .icon-box img{
        max-width: 50px;
    }

    .work-facility-content{
        width: calc(100% - 60px);
    }

    .work-facility-content h3{
        font-size: 18px;
        margin-bottom: 5px;
    }

    .intro-video-image img{
        aspect-ratio: 1 / 0.7;
    }

    .work-gallery-content{
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .work-gallery-content h3{
        font-size: 18px;
    }

    .work-with-company-slider,
    .work-company-title{
        width: 100%;
    }

    .our-faqs-img{
        max-width: 100%;
    }

    .faq-accordion .accordion-header .accordion-button{
        font-size: 18px;
    }

    .faq-accordion .accordion-item .accordion-body{
        padding: 10px 0px 0 0;
    }

    .footer-ticker:after,
    .footer-ticker:before{
        width: 60px;
    }

    .scrolling-ticker .schedule-now-btn a{
        font-size: 12px;
        width: 80px;
        height: 80px;
    }

    .scrolling-content span{
        font-size: 34px;
    }

    .footer-contact-btn{
        text-align: left;
        margin-top: 30px;
    }

    .footer-links h3{
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-latest-news-form .form-group .form-control{
        padding: 10px 10px 10px 0;
    }

    .footer-copyright{
        padding: 15px 0;
    }

    .page-header-box h1{
        font-size: 34px;
    }

    .page-header-box ol li.breadcrumb-item{
        font-size: 16px;
    }

    .mission-vision-nav ul li .nav-link{
        display: grid;
        justify-content: center;
        font-size: 16px;
        padding: 10px;
    }

    .mission-vision-nav ul li .nav-link img{
        margin: 0 auto;
        margin-bottom: 5px;
    }

    .mission-vision-item{
        padding: 20px 15px;
    }

    .mission-vision-content-list ul li{
        font-size: 14px;
        padding-left: 22px;
        margin-bottom: 10px;
    }

    .mission-vision-content-list ul li:before{
        font-size: 16px;
    }

    .team-content h3{
        font-size: 18px;
    }

    .page-service-content h3{
        font-size: 18px;
    }

    .cta-box-image{
        max-width: 100%;
    }

    .service-catagery-list h3{
        font-size: 18px;
    }

    .sidebar-cta-title{
        margin-bottom: 15px;
    }

    .sidebar-cta-title h2{
        font-size: 18px;
    }

    .cta-contact-item-content p{
        font-size: 14px;
    }

    .service-single-slider .swiper-slide img{
        aspect-ratio: 1 / 0.67;
    }

    .service-single-slider .service-button-next,
    .service-single-slider .service-button-prev{
        left: 10px;
    }

    .service-single-slider .service-button-next{
        left: auto;
        right: 10px;
    }

    .service-entry h2{
        font-size: 26px;
        margin-bottom: 15px;
    }

    .service-entry p{
        margin-bottom: 15px;
    }

    .service-entry ul li{
        font-size: 14px;
        width: 100%;
    }

    .service-entry-images{
        margin: 20px 0;
        gap: 20px;
    }

    .service-entry-img{
        width: calc(50% - 10px);
    }

    .post-image figure,
    .post-image img{
        aspect-ratio: 1 / 0.70;
    }

    .post-entry blockquote{
        background-position: 15px 15px;
        padding: 65px 15px 15px 15px;
    }

    .post-entry h2{
        font-size: 26px;
    }

    .post-entry p{
        margin-bottom: 15px;
    }

    .our-Project-nav ul{
        gap: 10px 20px;
    }

    .our-Project-nav ul li a{
        font-size: 16px;
    }

    .our-Project-nav ul li a:before{
        right: -13px;
    }

    .project-content{
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .project-content h3{
        font-size: 18px;
    }

    .project-detail-title{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .project-detail-title h3{
        font-size: 18px;
    }

    .project-single-image{
        margin-bottom: 20px;
    }

    .project-single-image img{
        aspect-ratio: 1 / 0.7;
    }

    .project-info,
    .project-features{
        margin-bottom: 20px;
    }

    .project-entry h2{
        font-size: 26px;
        margin-bottom: 15px;
    }

    .project-entry p{
        margin-bottom: 15px;
    }

    .project-gallery-images{
        gap: 20px;
    }

    .project-gallery-img{
        width: calc(50% - 10px);
    }

    .team-single-image img{
        aspect-ratio: 1 / 1.2;
        object-position: center center;
    }

    .team-member-info{
        margin-bottom: 30px;
    }

    .team-info-list ul li span{
        width: 35%;
    }

    .team-member-experience{
        margin-bottom: 30px;
    }

    .member-experience-list ul li:before{
        font-size: 18px;
    }

    .faq-catagery-list ul li{
        margin-bottom: 15px;
    }

    .contact-info-content h3{
        font-size: 18px;
    }

    .google-map iframe{
        height: 350px;
    }

    .error-page-image img{
        max-width: 100%;
    }

    .error-page-content-body p{
        font-size: 16px;
    }
}
















body, html {
    overflow-x: hidden;
}

a, a:hover {
    text-decoration: none;
    color: #b10100;
}

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

h2, p {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
}

input, textarea {
    background: none;
    border: none;
    outline: none;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.space6 {
    height: 6px;
}

.space8 {
    height: 8px;
}

.space10 {
    height: 10px;
}

.space12 {
    height: 12px;
}

.space14 {
    height: 14px;
}

.space16 {
    height: 16px;
}

.space18 {
    height: 18px;
}

.space20 {
    height: 20px;
}

.space22 {
    height: 22px;
}

.space24 {
    height: 24px;
}

.space26 {
    height: 26px;
}

.space28 {
    height: 28px;
}

.space30 {
    height: 30px;
}

.space32 {
    height: 32px;
}

.space34 {
    height: 34px;
}

.space36 {
    height: 36px;
}

.space38 {
    height: 38px;
}

.space40 {
    height: 40px;
}

.space42 {
    height: 42px;
}

.space44 {
    height: 44px;
}

.space46 {
    height: 46px;
}

.space48 {
    height: 48px;
}

.space50 {
    height: 50px;
}

.space52 {
    height: 52px;
}

.space54 {
    height: 54px;
}

.space56 {
    height: 56px;
}

.space58 {
    height: 58px;
}

.space60 {
    height: 60px;
}

.space62 {
    height: 62px;
}

.space64 {
    height: 64px;
}

.space66 {
    height: 66px;
}

.space68 {
    height: 68px;
}

.space70 {
    height: 70px;
}

.space72 {
    height: 72px;
}

.space74 {
    height: 74px;
}

.space76 {
    height: 76px;
}

.space78 {
    height: 78px;
}

.space80 {
    height: 80px;
}

.space82 {
    height: 82px;
}

.space84 {
    height: 84px;
}

.space86 {
    height: 86px;
}

.space {
    height: 88px;
}

.space90 {
    height: 90px;
}

.space92 {
    height: 92px;
}

.space94 {
    height: 94px;
}

.space96 {
    height: 96px;
}

.space98 {
    height: 98px;
}

.space100 {
    height: 100px;
}

@keyframes animation-5 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}
.aniamtion-key-5 {
    position: relative;
    animation-name: animation-5;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: all 0.4s ease-in-out;
}

@keyframes animation-7 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-1000deg);
    }
}
.keyframe5 {
    position: relative;
    animation-name: animation-7;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1);
}

@keyframes animation-1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(30px);
    }
}
.aniamtion-key-1 {
    position: relative;
    animation-name: animation-1;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation-2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50px);
    }
}
.aniamtion-key-2 {
    position: relative;
    animation-name: animation-2;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation-3 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(60px);
    }
}
.aniamtion-key-3 {
    position: relative;
    animation-name: animation-3;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation-4 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(40px);
    }
}
.aniamtion-key-4 {
    position: relative;
    animation-name: animation-4;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation-6 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(50px);
    }
}
.aniamtion-key-6 {
    position: relative;
    animation-name: animation-6;
    animation-duration: 1.9s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation-8 {
    0% {
        padding-left: 0px;
    }
    100% {
        padding-left: 50px;
    }
}
.aniamtion-key-7 {
    position: relative;
    animation-name: animation-8;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes fade-in-down {
    0% {
        transform: translate3d(0, -50px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translatex(-100%);
    }
}
@keyframes marquee-2 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translatex(0);
    }
}
:root {
    --ztc-text-text-1: #fff;
    --ztc-text-text-2: #b10100;
    --ztc-text-text-3: #060404;
    --ztc-text-text-4: #000000;
    --ztc-text-text-5: #142637;
    --ztc-text-text-6: #525455;
    --ztc-text-text-7: #000000;
    --ztc-text-text-8: #000;
    --ztc-text-text-9: #EC631A;
    --ztc-text-text-10: #383e44;
    --ztc-text-text-11: #5A5A5A;
    --ztc-bg-bg-1: #fbfbfb;
    --ztc-bg-bg-2: #FAE7E8;
    --ztc-bg-bg-3: #b10100;
    --ztc-bg-bg-4: #b10100;
    --ztc-bg-bg-5: #E7E9EB;
    --ztc-bg-bg-6: #B9BEC3;
    --ztc-bg-bg-7: #b10100;
    --ztc-bg-bg-8: #383e440f;
    --ztc-bg-bg-10: #383e440f;
    --ztc-bg-bg-11: #b10100;
    --ztc-bg-bg-12: #383e440f;
    --ztc-bg-bg-13: #383e440f;
    --ztc-bg-bg-14: #383e440f;
    --ztc-border-border-1: #f0f0f0;
    --ztc-border-border-2: #dfdcdc;
    --ztc-font-size-font-s10: 10px;
    --ztc-font-size-font-s12: 12px;
    --ztc-font-size-font-s14: 14px;
    --ztc-font-size-font-s16: 16px;
    --ztc-font-size-font-s18: 18px;
    --ztc-font-size-font-s20: 20px;
    --ztc-font-size-font-s22: 22px;
    --ztc-font-size-font-s24: 24px;
    --ztc-font-size-font-s26: 26px;
    --ztc-font-size-font-s28: 28px;
    --ztc-font-size-font-s30: 30px;
    --ztc-font-size-font-s32: 32px;
    --ztc-font-size-font-s34: 34px;
    --ztc-font-size-font-s36: 36px;
    --ztc-font-size-font-s38: 38px;
    --ztc-font-size-font-s40: 40px;
    --ztc-font-size-font-s42: 42px;
    --ztc-font-size-font-s44: 44px;
    --ztc-font-size-font-s46: 46px;
    --ztc-font-size-font-s48: 48px;
    --ztc-font-size-font-s50: 50px;
    --ztc-font-size-font-s52: 52px;
    --ztc-font-size-font-s54: 54px;
    --ztc-font-size-font-s56: 56px;
    --ztc-font-size-font-s58: 58px;
    --ztc-font-size-font-s60: 60px;
    --ztc-font-size-font-s62: 62px;
    --ztc-font-size-font-s64: 64px;
    --ztc-font-size-font-s66: 66px;
    --ztc-font-size-font-s68: 68px;
    --ztc-font-size-font-s70: 70px;
    --ztc-font-size-font-s10: 10px;
    --ztc-font-size-font-s12: 12px;
    --ztc-font-size-font-s14: 14px;
    --ztc-font-size-font-s16: 16px;
    --ztc-font-size-font-s18: 18px;
    --ztc-font-size-font-s20: 20px;
    --ztc-font-size-font-s22: 22px;
    --ztc-font-size-font-s24: 24px;
    --ztc-font-size-font-s26: 26px;
    --ztc-font-size-font-s28: 28px;
    --ztc-font-size-font-s30: 30px;
    --ztc-font-size-font-s32: 32px;
    --ztc-font-size-font-s34: 34px;
    --ztc-font-size-font-s36: 36px;
    --ztc-font-size-font-s38: 38px;
    --ztc-font-size-font-s40: 40px;
    --ztc-font-size-font-s42: 42px;
    --ztc-font-size-font-s44: 44px;
    --ztc-font-size-font-s46: 46px;
    --ztc-font-size-font-s48: 48px;
    --ztc-font-size-font-s50: 50px;
    --ztc-font-size-font-s52: 52px;
    --ztc-font-size-font-s54: 54px;
    --ztc-font-size-font-s56: 56px;
    --ztc-font-size-font-s58: 58px;
    --ztc-font-size-font-s60: 60px;
    --ztc-font-size-font-s62: 62px;
    --ztc-font-size-font-s64: 64px;
    --ztc-font-size-font-s66: 66px;
    --ztc-font-size-font-s68: 68px;
    --ztc-font-size-font-s70: 70px;
    --ztc-specing-height6: 6px;
    --ztc-specing-height8: 8px;
    --ztc-specing-height10: 10px;
    --ztc-specing-height12: 12px;
    --ztc-specing-height14: 114px;
    --ztc-specing-height16: 16px;
    --ztc-specing-height18: 18px;
    --ztc-specing-height20: 20px;
    --ztc-specing-height22: 22px;
    --ztc-specing-height24: 24px;
    --ztc-specing-height26: 26px;
    --ztc-specing-height28: 28px;
    --ztc-specing-height30: 30px;
    --ztc-specing-height32: 32px;
    --ztc-specing-height34: 34px;
    --ztc-specing-height36: 36px;
    --ztc-specing-height38: 38px;
    --ztc-specing-height40: 40px;
    --ztc-specing-height42: 42px;
    --ztc-specing-height44: 44px;
    --ztc-specing-height46: 46px;
    --ztc-specing-height48: 48px;
    --ztc-specing-height50: 50px;
    --ztc-specing-height52: 52px;
    --ztc-specing-height54: 54px;
    --ztc-specing-height56: 56px;
    --ztc-specing-height58: 58px;
    --ztc-specing-height60: 60px;
    --ztc-specing-height70: 70px;
    --ztc-specing-height80: 80px;
    --ztc-specing-height90: 90px;
    --ztc-specing-height100: 100px;
    --ztc-specing-height110: 110px;
    --ztc-specing-height120: 120px;
    --ztc-specing-height130: 130px;
    --ztc-weight-regular: 400;
    --ztc-weight-medium: 500;
    --ztc-weight-semibold: 600;
    --ztc-weight-bold: 800;
    --ztc-weight-black: 800;
    --ztc-family-font1: 'Figtree', sans-serif;
}

/*
============================
Name:  Current - Electricity Services Templete
Version: 1.0.0
Description: Current - Electricity Services Templete
Author: Unifato
Author URI: https://themeforest.net/user/unifato/portfolio
Location:
============================
*/
/*============= HEDAER CSS AREA ===============*/
/*============= HERO CSS AREA ===============*/
/*============= MOBILE-MENU CSS AREA ===============*/
/*============= ABOUT CSS AREA ===============*/
/*============= SERVICE CSS AREA ===============*/
/*============= WORK CSS AREA ===============*/
/*============= FEATURES CSS AREA ===============*/
/*============= TESTIMONIAL CSS AREA ===============*/
/*============= BLOG CSS AREA ===============*/
/*============= CONTACT CSS AREA ===============*/
/*============= TEAM CSS AREA ===============*/
/*============= FAQ CSS AREA ===============*/
/*============= CASE CSS AREA ===============*/
/*============= FOOTER CSS AREA ===============*/
/*============= COMMON CSS AREA ===============*/
.heading1 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 8px 12px;

    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.heading1 h5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    opacity: 10%;
    z-index: -1;
}
.heading1 h1 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s64);
    line-height: var(--ztc-font-size-font-s70);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);

    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading1 h1 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading1 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 0.9 !important;
    margin-bottom: 10px;
}

.heading2 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-2);
    border-radius: 4px;
    padding: 8px 12px;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.heading2 h5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: var(--ztc-bg-bg-2);
    z-index: -1;
    .heading2
    h5: :after {
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        border-radius: 4px;
        background: var(--ztc-bg-bg-2);
        z-index: -1;
    };
}
.heading2 h2 {
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s54);
    font-weight: 800;
    color: var(--ztc-text-text-3);
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading2 h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading2 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    margin-bottom: 10px;
    /* opacity: 80% !important; */
}

.heading3 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-medium);

    border-radius: 4px;
    display: inline-block;
    background: var(--ztc-bg-bg-4);
    padding: 8px 12px;
    margin-bottom: 24px;
}
.heading3 h1 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s64);
    line-height: var(--ztc-font-size-font-s70);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .heading3 h1 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading3 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80% !important;
    line-height: var(--ztc-font-size-font-s26);
}

.heading4 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-5);
    font-weight: var(--ztc-weight-medium);

    border-radius: 4px;
    display: inline-block;
    background: var(--ztc-bg-bg-5);
    padding: 8px 12px;
    margin-bottom: 16px;
}
.heading4 h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s54);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-5);
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading4 h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading4 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-6);
    line-height: var(--ztc-font-size-font-s26);
}

.heading5 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-bg-bg-7);
    font-weight: var(--ztc-weight-medium);

    border-radius: 4px;
    display: inline-block;
    background: var(--ztc-bg-bg-8);
    padding: 8px 12px;
    margin-bottom: 24px;
}
.heading5 h1 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s64);
    line-height: var(--ztc-font-size-font-s70);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-7);
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .heading5 h1 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading5 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-8);
    opacity: 80% !important;
    line-height: var(--ztc-font-size-font-s26);
}

.heading6 h5 {
    font-family: var(--ztc-family-font1);
    font-size: 14px;
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-bg-bg-7);
    font-weight: var(--ztc-weight-medium);
    border-radius: 4px;
    display: inline-block;
    background: var(--ztc-bg-bg-10);
    padding: 8px 12px;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.heading6 h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s54);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-7);
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading6 h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading6 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-8);
    opacity: 80% !important;
    line-height: var(--ztc-font-size-font-s26);
}

.heading7 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: #000001;
    font-weight: var(--ztc-weight-medium);
    border-radius: 4px;
    display: inline-block;
    padding: 8px 12px;
    margin-bottom: 16px;
    position: relative;
}
.heading7 h5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    opacity: 10%;
    z-index: -1;
}
.heading7 h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s54);
    font-weight: var(--ztc-weight-bold);
    color: #000000;
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading7 h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading7 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: #000000;
    opacity: 80% !important;
    line-height: var(--ztc-font-size-font-s26);
}

.heading8 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-bg-bg-11);
    font-weight: var(--ztc-weight-medium);

    border-radius: 4px;
    display: inline-block;
    background: var(--ztc-bg-bg-12);
    padding: 8px 12px;
    margin-bottom: 16px;
}
.heading8 h1 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s64);
    line-height: var(--ztc-font-size-font-s70);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-7);
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .heading8 h1 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading8 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-8);
    opacity: 80% !important;
    line-height: var(--ztc-font-size-font-s26);
}

.heading9 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-bg-bg-11);
    font-weight: var(--ztc-weight-medium);

    border-radius: 4px;
    display: inline-block;
    background: var(--ztc-bg-bg-12);
    padding: 8px 12px;
    margin-bottom: 16px;
}
.heading9 h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s54);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-10);
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading9 h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading9 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-11);
    line-height: var(--ztc-font-size-font-s26);
}

.heading10 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-bg-bg-11);
    font-weight: var(--ztc-weight-medium);

    border-radius: 4px;
    display: inline-block;
    background: var(--ztc-bg-bg-12);
    padding: 8px 12px;
    margin-bottom: 16px;
}
.heading10 h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s40);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-10);
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading10 h3 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading10 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-11);
    line-height: var(--ztc-font-size-font-s26);
}

.heading11 h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-medium);

    border-radius: 4px;
    display: inline-block;
    background: #1A1F26;
    padding: 8px 12px;
    margin-bottom: 16px;
}
.heading11 h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s54);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .heading11 h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-font-size-font-s42);
    }
}
.heading11 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    line-height: var(--ztc-font-size-font-s26);
    opacity: 80% !important;
}

.header-btn1 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    background: var(--ztc-text-text-2);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.header-btn1:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.header-btn1:hover::after {
    width: 100%;
    transition: all 0.4s;
    right: auto;
    left: 0;
}
.header-btn1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    right: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
    opacity: 0.2;
    z-index: -1;
    border-radius: 4px;
}
.header-btn1 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.header-btn2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    padding: 14px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
    border: 1px solid var(--ztc-text-text-1);
}
.header-btn2:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
    border: 1px solid var(--ztc-text-text-2);
}
.header-btn2:hover::after {
    width: 100%;
    transition: all 0.4s;
    right: auto;
    left: 0;
}
.header-btn2::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    right: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
    z-index: -1;
    border-radius: 4px;
}
.header-btn2 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.header-btn3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: #ffffff;
    background: var(--ztc-bg-bg-3);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.header-btn3:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.header-btn3:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.header-btn3::after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    left: 45%;
    top: 27%;
    transition: all 0.4s;
    background: var(--ztc-text-text-5);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.header-btn3 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.header-btn4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    padding: 14px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
    border: 1px solid var(--ztc-text-text-1);
}
.header-btn4:hover {
    color: var(--ztc-text-text-5);
    transition: all 0.4s;
}
.header-btn4:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.header-btn4::after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    left: 45%;
    top: 27%;
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.header-btn4 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.header-btn5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    background: var(--ztc-bg-bg-7);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.header-btn5:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.header-btn5:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.header-btn5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    border-radius: 4px;
    left: 45%;
    top: 0;
    transition: all 0.4s;
    background: #ff6a00;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.header-btn5 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.header-btn6 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-7);
    padding: 14px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
    border: 1px solid var(--ztc-text-text-7);
}
.header-btn6:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    border: 1px solid #ff6a00;
}
.header-btn6:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.header-btn6::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    border-radius: 4px;
    left: 45%;
    top: 0;
    transition: all 0.4s;
    background: #ff6a00;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.header-btn6 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.header-btn7 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    background: var(--ztc-bg-bg-11);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.header-btn7:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.header-btn7:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.header-btn7::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    border-radius: 4px;
    left: 45%;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-7);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.header-btn7 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.header-btn8 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-bg-bg-11);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-1);
}
.header-btn8:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.header-btn8:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.header-btn8::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    border-radius: 4px;
    left: 45%;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-7);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.header-btn8 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

/*============= COMMON CSS AREA ENDS===============*/
.sp1 {
    padding: 100px 0 100px;
}
@media (max-width: 767px) {
    .sp1 {
        padding: 50px 0 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp1 {
        padding: 50px 0 50px;
    }
}

.sp2 {
    padding: 100px 0 70px;
}
@media (max-width: 767px) {
    .sp2 {
        padding: 50px 0 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp2 {
        padding: 50px 0 20px;
    }
}

.sp3 {
    padding: 100px 0 50px;
}

.sp4 {
    padding: 80px 0 80px;
}
@media (max-width: 767px) {
    .sp4 {
        padding: 40px 0 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp4 {
        padding: 40px 0 40px;
    }
}

.sp5 {
    padding: 70px 0 70px;
}
@media (max-width: 767px) {
    .sp5 {
        padding: 40px 0 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp5 {
        padding: 40px 0 40px;
    }
}

.sp6 {
    padding: 120px 0 120px;
}
@media (max-width: 767px) {
    .sp6 {
        padding: 60px 0 60px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp6 {
        padding: 60px 0 60px;
    }
}

.sp7 {
    padding: 120px 0 90px;
}
@media (max-width: 767px) {
    .sp7 {
        padding: 60px 0 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp7 {
        padding: 60px 0 30px;
    }
}

.sp8 {
    padding: 100px 0 0;
}
@media (max-width: 767px) {
    .sp8 {
        padding: 50px 0 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp8 {
        padding: 50px 0 0;
    }
}

/*============= ABOUT CSS AREA ===============*/
.about1-section-area {
    position: relative;
    z-index: 1;
}
.about1-section-area .about-images-area {
    position: relative;
}
.about1-section-area .about-images-area .img1 img {
    width: 100%;
    height: 370px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about1-section-area .about-images-area .img1 img {
        height: 100%;
    }
}
@media (max-width: 767px) {
    .about1-section-area .about-images-area .img1 img {
        height: 100%;
        width: 100%;
    }
}
.about1-section-area .about-images-area .img2 {
    position: relative;
    left: 44%;
    margin-top: -79px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about1-section-area .about-images-area .img2 {
        margin-top: -105px;
    }
}
@media (max-width: 767px) {
    .about1-section-area .about-images-area .img2 {
        margin-top: 30px;
        left: 0;
    }
}
.about1-section-area .about-images-area .img2 img {
    width: 362px;
    height: 250px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about1-section-area .about-images-area .img2 img {
        height: 270px;
        width: 385px;
    }
}
@media (max-width: 767px) {
    .about1-section-area .about-images-area .img2 img {
        height: 100%;
        width: 100%;
    }
}
.about1-section-area .about-images-area .conter-area {
    background: var(--ztc-text-text-2);
    display: inline-block;
    text-align: center;
    padding: 40px 35px;
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    width: 267px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about1-section-area .about-images-area .conter-area {
        width: 290px;
    }
}
@media (max-width: 767px) {
    .about1-section-area .about-images-area .conter-area {
        width: 100%;
        height: 100%;
        position: relative;
        margin-top: 30px;
    }
}
.about1-section-area .about-images-area .conter-area h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s44);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    margin-bottom: 20px;
}
.about1-section-area .about-images-area .conter-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: 16px;
    color: var(--ztc-text-text-1);
    opacity: 0.8;
}
.about1-section-area .about-header-area {
    padding: 0 0 0 80px;
}
@media (max-width: 767px) {
    .about1-section-area .about-header-area {
        margin-top: 30px;
        padding: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about1-section-area .about-header-area {
        margin-top: 30px;
        padding: 0;
    }
}
.about1-section-area .about-header-area ul li {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    line-height: var(--ztc-font-size-font-s18);
    margin-top: 16px;
    display: flex;
}
.about1-section-area .about-header-area ul li img {
    margin: 0 8px 0 0;
}
.about1-section-area .about-header-area .btn-area {
    margin-top: 32px;
}

.about2-section-area .about-images-area {
    position: relative;
}
.about2-section-area .about-images-area:hover .img1::after {
    left: 0;
    top: 0;
    transition: all 0.4s;
}
.about2-section-area .about-images-area .img1 {
    position: relative;
    z-index: 1;
    transition: all 0.4s;
}
.about2-section-area .about-images-area .img1::after {
    position: absolute;
    content: "";
    height: 100%;
    left: 30px;
    top: 30px;
    width: 100%;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
    border-radius: 4px;
    z-index: -1;
}
.about2-section-area .about-images-area .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
.about2-section-area .about-images-area .img2 {
    position: absolute;
    right: -50px;
    bottom: -50px;
    z-index: 1;
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about2-section-area .about-images-area .img2 {
        right: -30px;
    }
}
@media (max-width: 767px) {
    .about2-section-area .about-images-area .img2 {
        right: 0;
    }
}
.about2-section-area .about-images-area .img2 img {
    height: 200px;
    width: 240px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}
.about2-section-area .about-header-area {
    padding: 0 0 0 80px;
}
@media (max-width: 767px) {
    .about2-section-area .about-header-area {
        padding: 0;
        margin-top: 60px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about2-section-area .about-header-area {
        padding: 0;
        margin-top: 60px;
    }
}
.about2-section-area .about-header-area .progress_bar .progress_bar_item {
    margin-bottom: 20px;
    position: relative;
}
.about2-section-area .about-header-area .progress_bar .item_label,
.about2-section-area .about-header-area .progress_bar .item_value {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    line-height: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-5);
}
.about2-section-area .about-header-area .progress_bar .item_value.cell1 {
    position: absolute;
    right: 80px;
    top: 0;
}
@media (max-width: 767px) {
    .about2-section-area .about-header-area .progress_bar .item_value.cell1 {
        right: 0;
    }
}
.about2-section-area .about-header-area .progress_bar .item_value.cell2 {
    position: absolute;
    right: 35px;
    top: 0;
}
@media (max-width: 767px) {
    .about2-section-area .about-header-area .progress_bar .item_value.cell2 {
        right: 0;
    }
}
.about2-section-area .about-header-area .progress_bar .item_value.cell3 {
    position: absolute;
    right: 140px;
    top: 0;
}
@media (max-width: 767px) {
    .about2-section-area .about-header-area .progress_bar .item_value.cell3 {
        right: 0;
    }
}
.about2-section-area .about-header-area .progress_bar .item_bar {
    position: relative;
    height: 8px;
    width: 100%;
    background-color: var(--ztc-bg-bg-6);
    border-radius: 4px;
    margin-top: 16px;
}
.about2-section-area .about-header-area .progress_bar .item_bar .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    height: 8px;
    margin: 0;
    background-color: var(--ztc-text-text-5);
    border-radius: 4px;
    transition: width 100ms ease;
}
.about2-section-area .about-header-area .header-btn3 {
    margin-top: 12px;
}

.about3-section-area {
    position: relative;
    z-index: 1;
}
.about3-section-area .about3-header-area .misson-text {
    margin-top: 24px;
}
.about3-section-area .about3-header-area .misson-text p {
    font-size: var(--ztc-font-size-font-s24);
    font-family: var(--ztc-family-font1);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-7);
    line-height: var(--ztc-font-size-font-s24);
}
.about3-section-area .about3-header-area .misson-text ul li {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-8);
    font-weight: var(--ztc-weight-semibold);
    margin-top: 16px;
}
.about3-section-area .about3-header-area .misson-text ul li img {
    margin: 0 8px 0 0;
}
.about3-section-area .about3-header-area .btn-area {
    margin-top: 32px;
}
.about3-section-area .about-images-area {
    position: relative;
}
.about3-section-area .about-images-area .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
.about3-section-area .about-images-area .img1 .about-footer-bottom {
    display: flex;
    align-items: center;
    background: var(--ztc-bg-bg-7);
    border-radius: 4px;
    padding: 32px 24px;
    margin-top: 32px;
}
.about3-section-area .about-images-area .img1 .about-footer-bottom .content {
    margin-left: 16px;
}
.about3-section-area .about-images-area .img1 .about-footer-bottom .content span {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);

    font-weight: var(--ztc-weight-bold);
    display: inline-block;
}

.about4-section-area .about-header-area {
    padding: 0 82px 0 0;
}
@media (max-width: 767px) {
    .about4-section-area .about-header-area {
        margin-bottom: 30px;
        padding: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about4-section-area .about-header-area {
        margin-bottom: 30px;
        padding: 0;
    }
}
.about4-section-area .about-header-area .counter-box {
    background: var(--ztc-bg-bg-14);
    text-align: center;
    margin-top: 30px;
    padding: 24px;
    border-radius: 4px;
    transition: all 0.4s;
}
.about4-section-area .about-header-area .counter-box:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.about4-section-area .about-header-area .counter-box:hover h2 {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.about4-section-area .about-header-area .counter-box:hover p {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.about4-section-area .about-header-area .counter-box h2 {
    line-height: 44px;
    transition: all 0.4s;
}
.about4-section-area .about-header-area .counter-box p {
    line-height: 16px;
    transition: all 0.4s;
}
.about4-section-area .about-header-area .btn-area {
    margin-top: 32px;
}
.about4-section-area .about-images-area {
    position: relative;
    z-index: 1;
}
.about4-section-area .about-images-area .img1 {
    position: relative;
}
.about4-section-area .about-images-area .img1 .elements2 {
    position: absolute;
    top: -43px;
    right: -24px;
    height: 100px;
    width: 100px;
    -o-object-fit: contain;
    object-fit: contain;
}
.about4-section-area .about-images-area .img1 img {
    height: 415px;
    width: 100%;
    border-radius: 4px;
    transition: all 0.4s;
    -o-object-fit: cover;
    object-fit: cover;
}
@media (max-width: 767px) {
    .about4-section-area .about-images-area .img1 img {
        width: 100%;
        height: 100%;
    }
}
.about4-section-area .about-images-area .img2 {
    position: absolute;
    right: 76px;
    bottom: 0px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about4-section-area .about-images-area .img2 {
        right: 82px;
        bottom: -10px;
    }
}
@media (max-width: 767px) {
    .about4-section-area .about-images-area .img2 {
        position: relative;
        right: 0;
        left: 0;
    }
}
.about4-section-area .about-images-area .img2 img {
    height: 282px;
    width: 282px;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about4-section-area .about-images-area .img2 img {
        width: 310px;
    }
}
@media (max-width: 767px) {
    .about4-section-area .about-images-area .img2 img {
        width: 100%;
        margin-top: 20px;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
}
.about4-section-area .about-images-area .content-experiance {
    background: var(--ztc-bg-bg-11);
    border-radius: 4px;
    display: inline-block;
    padding: 32px 40px;
    transition: all 0.4s;
    text-align: center;
    margin-top: 8px;
    width: 268px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about4-section-area .about-images-area .content-experiance {
        width: 290px;
    }
}
@media (max-width: 767px) {
    .about4-section-area .about-images-area .content-experiance {
        width: 100%;
        margin-top: 30px;
    }
}
.about4-section-area .about-images-area .content-experiance h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    transition: all 0.4s;
    margin-bottom: 16px;
}
.about4-section-area .about-images-area .content-experiance h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s44);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 8px;
}
.about4-section-area .about-images-area .content-experiance p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    transition: all 0.4s;
}
/Users/developerts/Desktop/Clientes/CAIXILERIA/Cailixeria/Plantillas/current/assets/css/main.css

                                                                                        .aboutpage-inner {
                                                                                            background: var(--ztc-bg-bg-1) !important;
                                                                                            position: relative;
                                                                                        }
.aboutpage-inner .about3-header-area .misson-text p {
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
}
.aboutpage-inner .about3-header-area .misson-text ul li {
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
}
.aboutpage-inner .about-images-area .about-footer-bottom {
    background: var(--ztc-text-text-2) !important;
}

.about-innerpage .about-images-area .img1::after {
    background: var(--ztc-text-text-2);
}
.about-innerpage .about-header-area .progress_bar_item .item_label {
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-bold);
}
.about-innerpage .about-header-area .progress_bar_item .item-value {
    color: var(--ztc-text-text-3);
}
.about-innerpage .about-header-area .progress_bar_item .item-bar .progress {
    background: var(--ztc-text-text-3);
}
.about-innerpage .about-header-area .btn-area {
    margin-top: 32px;
}

/*============= ABOUT CSS AREA ENDS ===============*/
/*============= SERVICE CSS AREA ===============*/
.service1-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
}
.service1-section-area .service-header-area {
    margin-bottom: 60px;
}
.service1-section-area .service-auhtor-boxarea {
    position: relative;
    z-index: 1;
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    margin-bottom: 30px;
}
.service1-section-area .service-auhtor-boxarea:hover .img1::after {
    height: 100%;
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea:hover .img1 img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea:hover .content-area::after {
    height: 100%;
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea:hover .content-area a {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea:hover .content-area p {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    opacity: 0.8;
}
.service1-section-area .service-auhtor-boxarea:hover .content-area .readmore {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea:hover .content-area h3 {
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    color: var(--ztc-text-text-3);
}
.service1-section-area .service-auhtor-boxarea .img1 {
    height: 100%;
    width: 100%;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    position: relative;
    z-index: 1;
}
.service1-section-area .service-auhtor-boxarea .img1::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
    opacity: 0.5;
    left: 0;
    top: 0;
}
.service1-section-area .service-auhtor-boxarea .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea .content-area {
    padding: 64px 38px 32px 38px;
    text-align: center;
    position: relative;
    transition: all 0.4s;
    z-index: 1;
}
@media (max-width: 767px) {
    .service1-section-area .service-auhtor-boxarea .content-area {
        padding: 64px 32px 32px 32px;
    }
}
.service1-section-area .service-auhtor-boxarea .content-area::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    bottom: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
    z-index: -1;
    border-radius: 0 0 4px 4px;
}
.service1-section-area .service-auhtor-boxarea .content-area h3 {
    font-size: var(--ztc-font-size-font-s24);
    font-family: var(--ztc-family-font1);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 80px;
    background: var(--ztc-text-text-3);
    border-radius: 50%;
    transition: all 0.4s;
    margin: 0 auto;
    margin-top: -100px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}
.service1-section-area .service-auhtor-boxarea .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    display: inline-block;
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 16px;
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    color: var(--ztc-text-text-4);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea .content-area a.readmore {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-3);
    display: inline-block;
    margin-bottom: 0;
    margin-top: 24px;
    font-weight: var(--ztc-weight-bold);
    transition: all 0.4s;
}
.service1-section-area .service-auhtor-boxarea .content-area a.readmore i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.service2-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
}
.service2-section-area .service-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .service2-section-area .service-header-area {
        margin-bottom: 30px;
    }
}
.service2-section-area .service2-author-boxarea {
    background: var(--ztc-text-text-1);
    position: relative;
    border-radius: 4px;
    transition: all 0.4s;
    margin-bottom: 30px;
}
.service2-section-area .service2-author-boxarea:hover .images::after {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
}
.service2-section-area .service2-author-boxarea:hover .images img {
    transform: scale(1.1) rotate(4deg);
    transition: all 0.4s;
}
.service2-section-area .service2-author-boxarea:hover .icons {
    transition: all 0.4s;
    transform: rotateY(-180deg);
}
.service2-section-area .service2-author-boxarea .images {
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.service2-section-area .service2-author-boxarea .images::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-bg-bg-3);
    opacity: 0.7;
    transition: all 0.4s;
}
.service2-section-area .service2-author-boxarea .images img {
    height: 100%;
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: all 0.4s;
}
.service2-section-area .service2-author-boxarea .icons {
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    border-radius: 4px;
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
    position: absolute;
    top: 49%;
    right: 16px;
    bottom: 16px;
    z-index: 2;
}
.service2-section-area .service2-author-boxarea .service-content {
    padding: 24px;
}
.service2-section-area .service2-author-boxarea .service-content a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    display: inline-block;
    transition: all 0.4s;
    margin-bottom: 16px;
}
.service2-section-area .service2-author-boxarea .service-content a:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.service2-section-area .service2-author-boxarea .service-content p {
    font-size: var(--ztc-font-size-font-s18);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s26);
    color: var(--ztc-text-text-6);
    font-weight: var(--ztc-weight-medium);
}
.service2-section-area .service2-author-boxarea .service-content .readmore {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    margin-bottom: 0;
    display: inline-block;
    transition: all 0.4s;
    font-weight: var(--ztc-weight-bold);
    margin-top: 24px;
}
.service2-section-area .service2-author-boxarea .service-content .readmore:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.service2-section-area .service2-author-boxarea .service-content .readmore i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.service3-section-area {
    position: relative;
    z-index: 1;
}
.service3-section-area .service-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .service3-section-area .service-header-area {
        margin-bottom: 30px;
    }
}
.service3-section-area .service-auhtor-boxarea {
    text-align: center;
    position: relative;
    z-index: 1;
    background: #383e44;
    border-radius: 4px;
    padding: 32px;
    transition: all 0.4s;
    margin-bottom: 30px;
}
.service3-section-area .service-auhtor-boxarea:hover {
    background: var(--ztc-bg-bg-7);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.service3-section-area .service-auhtor-boxarea:hover .icons {
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: rotateY(-180deg);
}
.service3-section-area .service-auhtor-boxarea:hover .icons img {
    filter: none;
    transition: all 0.4s;
}
.service3-section-area .service-auhtor-boxarea .icons {
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    display: inline-block;
    border-radius: 4px;
    background: var(--ztc-bg-bg-7);
    transition: all 0.4s;
    margin: 0 auto;
}
.service3-section-area .service-auhtor-boxarea .icons img {
    filter: brightness(0) invert(1);
    transition: all 0.4s;
}
.service3-section-area .service-auhtor-boxarea .content-area {
    margin-top: 32px;
}
.service3-section-area .service-auhtor-boxarea .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    display: inline-block;
    font-weight: var(--ztc-weight-bold);
}
.service3-section-area .service-auhtor-boxarea .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    transition: all 0.4s;
    padding-top: 16px;
    margin-bottom: 32px;
}
.service3-section-area .service-auhtor-boxarea .content-area a.readmore {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    display: inline-block;
    font-weight: var(--ztc-weight-bold);
}
.service3-section-area .service-auhtor-boxarea .content-area a.readmore i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.service1-section-area .pagination-area ul {
    text-align: center;
    justify-content: center;
    margin-top: 30px;
}
.service1-section-area .pagination-area ul li a {
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 4px !important;
    transition: all 0.4s;
    border: none;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s40);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    margin: 0 16px;
    box-shadow: none;
    background: var(--ztc-bg-bg-1);
}
.service1-section-area .pagination-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.service1-section-area .pagination-area ul li .page-link.active {
    background: var(--ztc-text-text-2) !important;
    color: var(--ztc-text-text-1);
}

.leftside {
    background: var(--ztc-text-text-1) !important;
}
.leftside .service-auhtor-boxarea {
    background: var(--ztc-bg-bg-1);
}

.service-leftside-area {
    position: relative;
}
.service-leftside-area .service-leftside .service-author-list {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    transition: all 0.4s;
    padding: 32px 20px;
}
.service-leftside-area .service-leftside .service-author-list h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    margin-bottom: 4px;
}
.service-leftside-area .service-leftside .service-author-list ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    padding: 20px 24px;
    background: var(--ztc-text-text-1);
    margin-top: 20px;
    border-radius: 4px;
    height: 60px;
    transition: all 0.4s;
}
.service-leftside-area .service-leftside .service-author-list ul li a i {
    transition: all 0.4s;
}
.service-leftside-area .service-leftside .service-author-list ul li a:hover {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.service-leftside-area .service-leftside .service-author-list ul li a:hover i {
    transform: rotate(90deg);
    transition: all 0.4s;
}
.service-leftside-area .service-leftside .helping-area {
    background: var(--ztc-text-text-2);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.service-leftside-area .service-leftside .helping-area h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-1);
}
.service-leftside-area .service-leftside .helping-area .btn-area {
    margin-top: 24px;
}
.service-leftside-area .service-leftside .helping-area .btn-area .header-btn1 {
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-3);
}
.service-leftside-area .service-leftside .helping-area .btn-area .header-btn1 i {
    margin: 0 6px 0 0;
}
.service-leftside-area .service-leftside .download-broucher {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.service-leftside-area .service-leftside .download-broucher h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.service-leftside-area .service-leftside .download-broucher p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    margin-top: 16px;
}
.service-leftside-area .service-leftside .download-broucher .btn-area .header-btn1 {
    margin-top: 24px;
}
.service-leftside-area .service-leftside .download-broucher .btn-area .header-btn1 img {
    filter: brightness(0) invert(1);
    transition: all 0.4s;
    margin: -5px 4px 0 0;
}
.service-leftside-area .service-leftside .download-broucher .btn-area .header-btn1:hover {
    background: var(--ztc-text-text-3);
    transition: all 0.4s;
    transform: translateY(-5px);
    color: var(--ztc-text-text-1);
}
.service-leftside-area .service-leftside .download-broucher .btn-area .header-btn2 {
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    margin-left: 16px;
    margin-top: 24px;
    padding: 16px 20px;
}
@media (max-width: 767px) {
    .service-leftside-area .service-leftside .download-broucher .btn-area .header-btn2 {
        margin-left: 0;
    }
}
.service-leftside-area .service-leftside .download-broucher .btn-area .header-btn2 img {
    transition: all 0.4s;
    margin: -5px 4px 0 0;
}
.service-leftside-area .service-leftside .download-broucher .btn-area .header-btn2:hover {
    background: var(--ztc-text-text-3);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.service-leftside-area .service-leftside .download-broucher .btn-area .header-btn2:hover img {
    transition: all 0.4s;
    filter: brightness(0) invert(1);
}
.service-leftside-area .service-leftside .social-icons {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.service-leftside-area .service-leftside .social-icons h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.service-leftside-area .service-leftside .social-icons ul {
    margin-top: 24px;
}
.service-leftside-area .service-leftside .social-icons ul li {
    display: inline-block;
}
.service-leftside-area .service-leftside .social-icons ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    color: var(--ztc-text-text-3);
    margin: 0 8px 0 0;
}
.service-leftside-area .service-leftside .social-icons ul li a:hover {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.service-leftside-area .service-leftside .tags-area {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.service-leftside-area .service-leftside .tags-area h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.service-leftside-area .service-leftside .tags-area ul li {
    display: inline-block;
}
.service-leftside-area .service-leftside .tags-area ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    display: inline-block;
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 12px 12px 0 0;
}
.service-leftside-area .service-leftside .tags-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    transform: translateY(-3px);
    color: var(--ztc-text-text-1);
}

.service-rightside-area {
    padding: 0 0 0 50px;
}
@media (max-width: 767px) {
    .service-rightside-area {
        padding: 0;
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service-rightside-area {
        padding: 0;
        margin-top: 30px;
    }
}
.service-rightside-area .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
.service-rightside-area .img1 ul li {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
}
.service-rightside-area .img1 ul li img {
    height: 20px;
    width: 20px;
    margin: 0 8px 0 0;
}
.service-rightside-area p {
    margin-bottom: 16px !important;
}
.service-rightside-area h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s40);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-weight-bold);
    margin-bottom: 16px;

}
@media (max-width: 767px) {
    .service-rightside-area .faq-auhtor-area1 {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service-rightside-area .faq-auhtor-area1 {
        margin-top: 30px;
    }
}
.service-rightside-area .faq-auhtor-area1 .accordion .accordion-item {
    border: none;
    border-radius: 6px;
    background: var(--ztc-bg-bg-1);
}
.service-rightside-area .faq-auhtor-area1 .accordion .accordion-item .accordion-button::after {
    filter: brightness(0);
    position: absolute;
    right: 16px;
}
.service-rightside-area .faq-auhtor-area1 .accordion .accordion-item h2 {
    margin-bottom: 0 !important;
}
.service-rightside-area .faq-auhtor-area1 .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: var(--ztc-bg-bg-1);
}
.service-rightside-area .faq-auhtor-area1 .accordion .accordion-item .accordion-header button {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-5);
    display: inline-block;
    font-weight: var(--ztc-weight-bold);

    border: none;
    box-shadow: none;
    padding: 20px 16px 20px 16px;
    background: var(--ztc-bg-bg-1);
}
@media (max-width: 767px) {
    .service-rightside-area .faq-auhtor-area1 .accordion .accordion-item .accordion-header button {
        line-height: var(--ztc-font-size-font-s26);
    }
}
.service-rightside-area .faq-auhtor-area1 .accordion .accordion-item .accordion-body {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-6);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s26);
    padding: 0 16px 16px 16px;
}

.rightsidebar {
    padding: 0 50px 0 0 !important;
}
@media (max-width: 767px) {
    .rightsidebar {
        padding: 0 !important;
        margin-bottom: 30px;
        margin-top: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .rightsidebar {
        padding: 0 !important;
        margin-bottom: 30px;
        margin-top: 0;
    }
}


/*============= SERVICE CSS AREA ENDS===============*/
/*============= HERO CSS AREA ===============*/
.slider-header-carousel .owl-item.active .hero1-section-area .header-img1 {
    transform: scale(1.2);
}
.slider-header-carousel .owl-item.active .hero1-section-area .hero-heading-area h5 {
    transition: transform 1400ms ease, opacity 1400ms ease;
    transform: translateX(0px);
    opacity: 1;
}
.slider-header-carousel .owl-item.active .hero1-section-area .hero-heading-area h1.main-heading {
    transition: transform 1600ms ease, opacity 1600ms ease;
    transform: translateX(0px);
    opacity: 1;
}
.slider-header-carousel .owl-item.active .hero1-section-area .hero-heading-area p.pera {
    transition: transform 1700ms ease, opacity 1700ms ease;
    transform: translateX(0px);
    opacity: 1 !important;
}
.slider-header-carousel .owl-item.active .hero1-section-area .hero-heading-area .btn-area {
    transition: transform 1800ms ease, opacity 1800ms ease;
    transform: translateX(0px);
    opacity: 1;
}
.slider-header-carousel .owl-item.active .hero1-section-area .hero-heading-area .header-bottom-images {
    transition: transform 2000ms ease, opacity 2000ms ease;
    transform: translateX(0px);
    opacity: 1;
}
.slider-header-carousel .owl-nav {
    position: absolute;
    right: 50px;
    top: 45%;
}
@media (max-width: 767px) {
    .slider-header-carousel .owl-nav {
        top: 80%;
        display: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-header-carousel .owl-nav {
        top: 40%;
        right: 30px;
    }
}
.slider-header-carousel .owl-nav button {
    height: 60px;
    width: 60px;
    text-align: center;
    border: none;
    outline: none;
    line-height: 60px;
    border-radius: 4px;
    transition: all 0.4s;
    font-size: 20px;
    color: var(--ztc-text-text-1);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border: 1px solid var(--ztc-text-text-1);
}
.slider-header-carousel .owl-nav button:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.slider-header-carousel .owl-nav button i {
    color: var(--ztc-text-text-1);
    font-size: var(--ztc-font-size-font-s20);
}
.slider-header-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -70px;
}
.slider-header-carousel .owl-dots {
    position: absolute;
    bottom: 36px;
    margin: 0 auto;
    text-align: center;
    left: 50%;
}
.slider-header-carousel .owl-dots button {
    height: 12px;
    width: 12px;
    display: inline-block;
    background: #767478;
    transition: all 0.4s;
    border-radius: 50%;
    margin: 0 18px 0 0;
    position: relative;
    z-index: 1;
}
.slider-header-carousel .owl-dots button::after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    border: 1px solid #fff;
    top: -4px;
    left: -4px;
    border-radius: 50%;
    visibility: hidden;
    opacity: 1;
}
.slider-header-carousel .owl-dots button.active {
    background: var(--ztc-text-text-1);
}
.slider-header-carousel .owl-dots button.active::after {
    visibility: visible;
    opacity: 1;
}

.hero1-section-area {
    position: relative;
    z-index: 1;
    padding: 250px 0 130px;
    min-height: 925px;
}
@media (min-width: 992px) {
    .slider-header-carousel {
        background-color: #060404;
    }
}
@media (max-width: 767px) {
    .hero1-section-area {
        padding: 200px 0 130px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero1-section-area {
        padding: 200px 0 130px;
    }
}
.hero1-section-area .header-img1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1);
    transition: transform 8000ms ease, opacity 1800ms ease-in;
    z-index: -1;
}
.hero1-section-area::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-text-text-3);
    opacity: 0.6;
    z-index: -1;
}
.hero1-section-area .hero-heading-area h5 {
    transition: transform 1300ms ease, opacity 1500ms ease;
    transform: translateX(-300px);
    opacity: 0;
    position: relative;
}
.hero1-section-area .hero-heading-area h1.main-heading {
    transition: transform 1400ms ease, opacity 1400ms ease;
    transform: translateX(-300px);
    position: relative;
    opacity: 0;
}
.hero1-section-area .hero-heading-area p.pera {
    transition: transform 1400ms ease, opacity 1400ms ease;
    transform: translateX(-300px);
    position: relative;
    opacity: 0 !important;
}
.hero1-section-area .hero-heading-area .btn-area {
    transition: transform 1400ms ease, opacity 1400ms ease;
    transform: translateX(-300px);
    position: relative;
    opacity: 0;
}
.hero1-section-area .hero-heading-area .btn-area .header-btn1 {
    margin-top: 30px;
}
.hero1-section-area .hero-heading-area .btn-area .header-btn2 {
    margin-left: 20px;
    margin-top: 30px;
}
@media (max-width: 767px) {
    .hero1-section-area .hero-heading-area .btn-area .header-btn2 {
        margin-left: 0;
    }
}
.hero1-section-area .hero-heading-area .header-bottom-images {
    display: flex;
    align-items: center;
    margin-top: 32px;
    transition: transform 1500ms ease, opacity 1500ms ease;
    transform: translateX(-300px);
    position: relative;
    opacity: 0;
}
.hero1-section-area .hero-heading-area .header-bottom-images .content {
    margin-left: 20px;
}
.hero1-section-area .hero-heading-area .header-bottom-images .content ul li {
    display: inline-block;
    color: #FFD600;
}
.hero1-section-area .hero-heading-area .header-bottom-images .content ul li:nth-child(5) {
    color: var(--ztc-text-text-1);
}
.hero1-section-area .hero-heading-area .header-bottom-images .content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    margin-top: 12px;
}
.hero1-section-area .hero-heading-area .header-bottom-images .content p span {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    display: inline-block;
    margin: 0 6px 0 0;
}
.hero1-section-area .circle-arrow {
    position: absolute;
    right: 135px;
    bottom: 35px;
}
@media (max-width: 767px) {
    .hero1-section-area .circle-arrow {
        position: relative;
        right: 0;
        left: 0;
        bottom: -30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero1-section-area .circle-arrow {
        right: 50px;
    }
}
.hero1-section-area .circle-arrow a {
    height: 200px;
    width: 200px;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}
.hero1-section-area .circle-arrow a .circle1 {
    height: 154px;
    width: 154px;
    text-align: center;
    line-height: 154px;
    position: relative;
    margin-left: 22px;
    margin-top: 22px;
}
.hero1-section-area .circle-arrow a .arrow1 {
    position: absolute;
    top: 80px;
    left: 80px;
    height: 40px;
    width: 40px;
}

.hero2-section-area {
    position: relative;
    z-index: 1;
    padding: 80px 0 80px;
}
@media (max-width: 767px) {
    .hero2-section-area .hero-header {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero2-section-area .hero-header {
        margin-bottom: 30px;
    }
}
.hero2-section-area .hero-header .btn-area .header-btn3 {
    margin-top: 32px;
}
.hero2-section-area .hero-header .btn-area .header-btn3:hover {
    color: var(--ztc-text-text-5);
    transition: all 0.4s;
}
.hero2-section-area .hero-header .btn-area .header-btn3::after {
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.hero2-section-area .hero-header .btn-area .header-btn4 {
    margin-top: 32px;
    margin-left: 20px;
}
@media (max-width: 767px) {
    .hero2-section-area .hero-header .btn-area .header-btn4 {
        margin-left: 0;
    }
}
.hero2-section-area .hero-header .counter-header-area {
    display: flex;
    align-items: center;
    margin-top: 60px;
}
@media (max-width: 767px) {
    .hero2-section-area .hero-header .counter-header-area {
        display: block;
        margin-top: 30px;
        text-align: center;
        justify-content: center;
    }
}
.hero2-section-area .hero-header .counter-header-area .counter-area {
    margin: 0 60px 0 0;
}
@media (max-width: 767px) {
    .hero2-section-area .hero-header .counter-header-area .counter-area {
        margin: 0 0 20px 0;
        text-align: center;
    }
}
.hero2-section-area .hero-header .counter-header-area .counter-area h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s32);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 16px;
}
.hero2-section-area .hero2-images-area {
    padding: 0 0 0 50px;
}
@media (max-width: 767px) {
    .hero2-section-area .hero2-images-area {
        padding: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero2-section-area .hero2-images-area {
        padding: 0;
    }
}
.hero2-section-area .hero2-images-area img.circle2.keyframe5 {
    position: absolute;
    margin-top: -60px;
    right: 250px;
    z-index: -1;
}
@media (max-width: 767px) {
    .hero2-section-area .hero2-images-area img.circle2.keyframe5 {
        display: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero2-section-area .hero2-images-area img.circle2.keyframe5 {
        right: 0px;
    }
}
.hero2-section-area .hero2-images-area .images {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}
.hero2-section-area .hero2-images-area .images .circle2 {
    height: 140px;
    width: 140px;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    right: -40px;
    top: -40px;
    z-index: -1;
}
.hero2-section-area .hero2-images-area .images img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}

.hero3-section-area {
    background: var(--ztc-bg-bg-1);
    position: relative;
    z-index: 1;
    padding: 160px 0 0 0;
    overflow: hidden;
}
.hero3-section-area .tower1 {
    position: absolute;
    bottom: 50px;
    left: 0;
}
.hero3-section-area .hero-header-area .header-btn5 {
    margin-top: 20px;
}
.hero3-section-area .hero-header-area .header-btn6 {
    margin-top: 20px;
    margin-left: 20px;
}
@media (max-width: 767px) {
    .hero3-section-area .hero-header-area .header-btn6 {
        margin-left: 0;
    }
}
.hero3-section-area .header-images-area {
    position: relative;
}
.hero3-section-area .header-images-area .header-img {
    position: relative;
    z-index: 1;
}
.hero3-section-area .header-images-area .header-img::after {
    position: absolute;
    content: "";
    height: 420px;
    width: 420px;
    border-radius: 50%;
    background: var(--ztc-bg-bg-7);
    left: 18%;
    top: 20%;
    z-index: -1;
    animation-name: animation-5;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@media (max-width: 767px) {
    .hero3-section-area .header-images-area .header-img::after {
        display: none;
    }
}
.hero3-section-area .header-images-area .header-img img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
.hero3-section-area .header-images-area .shapes .arrow1 {
    position: absolute;
    top: 18%;
    left: -100px;
}
.hero3-section-area .header-images-area .shapes .lite1 {
    position: absolute;
    top: 35px;
    left: 14%;
}

.hero4-section-area {
    position: relative;
    z-index: 1;
    padding: 200px 0 100px;
    background: var(--ztc-bg-bg-13);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero4-section-area .hero4-header-textarea {
        text-align: center;
    }
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea {
        text-align: center;
    }
}
.hero4-section-area .hero4-header-textarea .header-text {
    margin-bottom: 32px;
}
.hero4-section-area .hero4-header-textarea .header-text .btn-area .header-btn7 {
    margin-top: 20px;
}
.hero4-section-area .hero4-header-textarea .header-text .btn-area .header-btn8 {
    margin-top: 20px;
    margin-left: 20px;
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea .header-text .btn-area .header-btn8 {
        margin-left: 0;
    }
}
.hero4-section-area .hero4-header-textarea .header-left-side {
    position: relative;
}
.hero4-section-area .hero4-header-textarea .header-left-side img.bottom2 {
    margin-bottom: 24px;
}
.hero4-section-area .hero4-header-textarea .header-left-side .arrow2 {
    position: relative;
    left: 22%;
    right: 50%;
    padding: 60px 0 60px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero4-section-area .hero4-header-textarea .header-left-side .arrow2 {
        left: 0;
    }
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea .header-left-side .arrow2 {
        left: 0;
    }
}
.hero4-section-area .hero4-header-textarea .header-left-side p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-10);
    line-height: var(--ztc-font-size-font-s16);
}
.hero4-section-area .hero4-header-textarea .header-left-side p span {
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    margin: 0 8px 0 0;
}
.hero4-section-area .hero4-header-textarea .header-left-side ul {
    margin-top: 10px;
}
.hero4-section-area .hero4-header-textarea .header-left-side ul li {
    display: inline-block;
}
.hero4-section-area .hero4-header-textarea .header-left-side .percent-electri h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s44);
    color: var(--ztc-text-text-10);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 8px;
}
.hero4-section-area .hero4-header-textarea .header-left-side .percent-electri p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-11);
}
.hero4-section-area .hero4-header-textarea .header-images {
    text-align: center;
    position: relative;
}
.hero4-section-area .hero4-header-textarea .header-images .elements1 {
    position: absolute;
    top: 30px;
    right: 60px;
    width: 123px;
    height: 130px;
    -o-object-fit: contain;
    object-fit: contain;
}
.hero4-section-area .hero4-header-textarea .header-images img.header-img6 {
    transition: all 0.4s;
    width: 500px;
    height: 600px;
    border-radius: 4px;
    -o-object-fit: contain;
    object-fit: contain;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero4-section-area .hero4-header-textarea .header-images img.header-img6 {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 4px;
    }
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea .header-images img.header-img6 {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 4px;
    }
}
.hero4-section-area .hero4-header-textarea .header-images .arrow2 {
    text-align: start;
    position: absolute;
    bottom: 10%;
    left: -60px;
    transform: rotate(-90deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero4-section-area .hero4-header-textarea .header-images .arrow2 {
        display: none;
    }
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea .header-images .arrow2 {
        display: none;
    }
}
.hero4-section-area .hero4-header-textarea .images-text-area {
    position: relative;
    left: -13%;
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea .images-text-area {
        left: -35%;
    }
}
.hero4-section-area .hero4-header-textarea .images-text-area .content-area {
    display: flex;
    align-items: center;
    position: relative;
    left: 30%;
    top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero4-section-area .hero4-header-textarea .images-text-area .content-area {
        left: 57%;
    }
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea .images-text-area .content-area {
        left: 60%;
    }
}
.hero4-section-area .hero4-header-textarea .images-text-area .content-area .icons {
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    border-radius: 50%;
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
    margin: 0 16px 0 0;
}
.hero4-section-area .hero4-header-textarea .images-text-area .content-area .pera p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-10);
    line-height: var(--ztc-font-size-font-s26);
}
.hero4-section-area .hero4-header-textarea .images-text-area .pera2 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    color: var(--ztc-text-text-10);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);
    margin-top: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero4-section-area .hero4-header-textarea .images-text-area .pera2 p {
        padding-left: 280px;
    }
}
@media (max-width: 767px) {
    .hero4-section-area .hero4-header-textarea .images-text-area .pera2 p {
        padding-left: 150px;
    }
}

/*============= HERO CSS AREA ===============*/
/*============= MOBILE MENU CSS AREA ===============*/
.mobile-header.mobile-haeder1 {
    background: var(--ztc-text-text-3);
    position: fixed;
    width: 100%;
}
.mobile-header.mobile-haeder1 .dots-menu {
    color: var(--ztc-text-text-1);
}

.mobile-sidebar.mobile-sidebar1 {
    background: var(--ztc-text-text-3);
}
.mobile-sidebar.mobile-sidebar1 .menu-close {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .header-btn1 {
    width: 100%;
    text-align: center;
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 span.submenu-button:before {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 span.submenu-button::after {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 ul li a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    text-transform: capitalize;
    font-weight: var(--ztc-weight-bold);
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single {
    display: flex;
    margin-top: 16px;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon {
    margin: 0 8px 0 0;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon i {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul {
    margin-top: 20px;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li {
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a {
    height: 40px;
    width: 40px;
    text-align: center;
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    display: inline-block;
    border-radius: 50%;
    margin: 0 6px 0 0;
}
.mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

.mobile-header.mobile-haeder2 {
    background: var(--ztc-text-text-5);
    position: fixed;
    width: 100%;
}
.mobile-header.mobile-haeder2 .dots-menu {
    color: var(--ztc-text-text-1);
}

.mobile-sidebar.mobile-sidebar2 {
    background: var(--ztc-text-text-5);
}
.mobile-sidebar.mobile-sidebar2 .menu-close {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .header-btn3 {
    width: 100%;
    text-align: center;
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 span.submenu-button:before {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 span.submenu-button::after {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 ul li a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    text-transform: capitalize;
    font-weight: var(--ztc-weight-bold);
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single {
    display: flex;
    margin-top: 16px;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon {
    margin: 0 8px 0 0;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon i {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul {
    margin-top: 20px;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li {
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a {
    height: 40px;
    width: 40px;
    text-align: center;
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    display: inline-block;
    border-radius: 50%;
    margin: 0 6px 0 0;
}
.mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a:hover {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
    color: var(--ztc-text-text-5);
}

.mobile-header.mobile-haeder3 {
    background: var(--ztc-text-text-7);
    position: fixed;
    width: 100%;
}
.mobile-header.mobile-haeder3 .dots-menu {
    color: var(--ztc-text-text-1);
}

.mobile-sidebar.mobile-sidebar3 {
    background: var(--ztc-text-text-7);
}
.mobile-sidebar.mobile-sidebar3 .menu-close {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .header-btn5 {
    width: 100%;
    text-align: center;
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 span.submenu-button:before {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 span.submenu-button::after {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 ul li a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    text-transform: capitalize;
    font-weight: var(--ztc-weight-bold);
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single {
    display: flex;
    margin-top: 16px;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon {
    margin: 0 8px 0 0;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon i {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul {
    margin-top: 20px;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li {
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a {
    height: 40px;
    width: 40px;
    text-align: center;
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-7);
    transition: all 0.4s;
    display: inline-block;
    border-radius: 50%;
    margin: 0 6px 0 0;
}
.mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a:hover {
    background: var(--ztc-bg-bg-7);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

.mobile-header.mobile-haeder4 {
    background: var(--ztc-text-text-10);
    position: fixed;
    width: 100%;
}
.mobile-header.mobile-haeder4 .dots-menu {
    color: var(--ztc-text-text-1);
}

.mobile-sidebar.mobile-sidebar4 {
    background: var(--ztc-text-text-10);
}
.mobile-sidebar.mobile-sidebar4 .menu-close {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .header-btn7 {
    width: 100%;
    text-align: center;
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 span.submenu-button:before {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 span.submenu-button::after {
    background: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 ul li a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    text-transform: capitalize;
    font-weight: var(--ztc-weight-bold);
    margin-top: 24px;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single {
    display: flex;
    margin-top: 16px;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon {
    margin: 0 8px 0 0;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-icon i {
    color: var(--ztc-text-text-1);
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .footer1-contact-info .contact-info-single .contact-info-text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul {
    margin-top: 20px;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li {
    display: inline-block;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a {
    height: 40px;
    width: 40px;
    text-align: center;
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    display: inline-block;
    border-radius: 50%;
    margin: 0 6px 0 0;
}
.mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .allmobilesection .social-links-mobile-menu ul li a:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}


/*============= MOBILE MENU CSS AREA ===============*/
/*============= BLOG CSS AREA ===============*/
.blog1-section-area {
    position: relative;
    z-index: 1;
}
.blog1-section-area .blog-header {
    margin-bottom: 60px;
}
.blog1-section-area .blog-auhtor-boxarea {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-bottom: 30px;
}
.blog1-section-area .blog-auhtor-boxarea:hover .img1::after {
    height: 100%;
    transition: all 0.4s;
}
.blog1-section-area .blog-auhtor-boxarea:hover .img1 img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.blog1-section-area .blog-auhtor-boxarea:hover .blog-position .heading {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.blog1-section-area .blog-auhtor-boxarea .img1 {
    overflow: hidden;
    transition: all 0.4s;
    border-radius: 4px 4px 0 0;
    position: relative;
}
.blog1-section-area .blog-auhtor-boxarea .img1::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
    opacity: 0.7;
}
.blog1-section-area .blog-auhtor-boxarea .img1 img {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    border-radius: 4px 4px 0 0;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position {
    position: relative;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .heading {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    display: inline-block;
    line-height: var(--ztc-font-size-font-s30);
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
    padding: 24px;
    text-align: center;
    margin: -70px 24px 0 24px;
    border-radius: 4px;
    z-index: 2;
    position: relative;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area {
    padding: 24px;
    text-align: center;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: center;
}
@media (max-width: 767px) {
    .blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul {
        display: inline-block;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul {
        display: inline-block;
    }
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul li {
    margin: 0 16px 0 0;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    display: inline-block;
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul li a i {
    margin: 0 4px 0 0;
}
@media (max-width: 767px) {
    .blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul li:nth-child(2) {
        margin-top: 10px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul li:nth-child(2) {
        margin-top: 10px;
    }
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area p {
    font-size: var(--ztc-font-size-font-s18);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    transition: all 0.4s;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area .learnmore {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    line-height: var(--ztc-font-size-font-s16);
    margin-top: 24px;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area .learnmore:hover {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.blog1-section-area .blog-auhtor-boxarea .blog-position .blog-content-area .learnmore i {
    margin-left: 4px;
    transform: rotate(-45deg);
}
.blog1-section-area .pagination-area ul {
    text-align: center;
    justify-content: center;
    margin-top: 30px;
}
.blog1-section-area .pagination-area ul li a {
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 4px !important;
    transition: all 0.4s;
    border: none;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s40);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    margin: 0 16px;
    box-shadow: none;
    background: var(--ztc-bg-bg-1);
}
.blog1-section-area .pagination-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.blog1-section-area .pagination-area ul li .page-link.active {
    background: var(--ztc-text-text-2) !important;
    color: var(--ztc-text-text-1);
}

.blog2-section-area {
    position: relative;
    z-index: 1;
}
.blog2-section-area .blog-header {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .blog2-section-area .blog-header {
        margin-bottom: 30px;
    }
}
.blog2-section-area .blog-box2 {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    margin-bottom: 30px;
}
.blog2-section-area .blog-box2:hover .img1::after {
    height: 100%;
    width: 404px;
    transition: all 0.4s;
}
.blog2-section-area .blog-box2:hover .img1 img {
    transform: scale(1.1) rotate(0);
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .img1 {
    position: relative;
    z-index: 1;
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .img1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
    opacity: 0.7;
}
.blog2-section-area .blog-box2 .img1 img {
    width: 385px;
    height: 288px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .img1 {
    overflow: hidden;
    transition: all 0.4s;
    border-radius: 4px 4px 0 0;
    position: relative;
}
.blog2-section-area .blog-box2 .img1::after {
    position: absolute;
    content: "";
    height: 0;
    width: 404px;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
    opacity: 0.7;
}
.blog2-section-area .blog-box2 .img1 img {
    width: 385px;
    height: 288px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .blog-content-area {
    padding: 32px;
    background: var(--ztc-text-text-1);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    top: 12%;
    right: 0;
    width: 430px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog2-section-area .blog-box2 .blog-content-area {
        position: relative;
        top: 0;
        width: 100%;
        margin-top: -115px;
        border-radius: 0 0 4px 4px;
    }
}
@media (max-width: 767px) {
    .blog2-section-area .blog-box2 .blog-content-area {
        position: relative;
        top: 0;
        width: 100%;
        margin-top: -115px;
        border-radius: 0 0 4px 4px;
    }
}
.blog2-section-area .blog-box2 .blog-content-area .heading {
    display: block;
    font-size: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-5);
    line-height: var(--ztc-font-size-font-s30);
    padding-bottom: 24px;
    border-bottom: 1px solid #E7E9EB;
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .blog-content-area .heading:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .blog-content-area ul {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .blog2-section-area .blog-box2 .blog-content-area ul {
        display: inline-block;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog2-section-area .blog-box2 .blog-content-area ul {
        display: inline-block;
    }
}
.blog2-section-area .blog-box2 .blog-content-area ul li {
    margin: 0 16px 0 0;
}
.blog2-section-area .blog-box2 .blog-content-area ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    display: inline-block;
    color: var(--ztc-text-text-6);
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .blog-content-area ul li a i {
    margin: 0 4px 0 0;
    color: var(--ztc-text-text-5);
}
@media (max-width: 767px) {
    .blog2-section-area .blog-box2 .blog-content-area ul li:nth-child(2) {
        margin-top: 10px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog2-section-area .blog-box2 .blog-content-area ul li:nth-child(2) {
        margin-top: 10px;
    }
}
.blog2-section-area .blog-box2 .blog-content-area p {
    font-size: var(--ztc-font-size-font-s18);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .blog-content-area .learnmore {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    line-height: var(--ztc-font-size-font-s16);
    margin-top: 24px;
}
.blog2-section-area .blog-box2 .blog-content-area .learnmore:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.blog2-section-area .blog-box2 .blog-content-area .learnmore i {
    margin-left: 4px;
    transform: rotate(-45deg);
}
.blog2-section-area .blog-auhtor-boxarea {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    margin-bottom: 30px;
}
.blog2-section-area .blog-auhtor-boxarea:hover .img1::after {
    height: 100%;
    transition: all 0.4s;
}
.blog2-section-area .blog-auhtor-boxarea:hover .img1 img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.blog2-section-area .blog-auhtor-boxarea .img1 {
    overflow: hidden;
    transition: all 0.4s;
    border-radius: 4px 4px 0 0;
    position: relative;
}
.blog2-section-area .blog-auhtor-boxarea .img1::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
    opacity: 0.7;
}
.blog2-section-area .blog-auhtor-boxarea .img1 img {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    border-radius: 4px 4px 0 0;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area {
    padding: 32px;
    background: var(--ztc-text-text-1);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    border-radius: 4px;
    margin: -115px 24px 0 24px;
    position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog2-section-area .blog-auhtor-boxarea .blog-content-area {
        position: relative;
        top: 0;
        width: 100%;
        margin: -115px 0 0 0;
        border-radius: 0 0 4px 4px;
    }
}
@media (max-width: 767px) {
    .blog2-section-area .blog-auhtor-boxarea .blog-content-area {
        position: relative;
        top: 0;
        width: 100%;
        margin: -115px 0 0 0;
        border-radius: 0 0 4px 4px;
    }
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area .heading {
    display: block;
    font-size: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-5);
    line-height: var(--ztc-font-size-font-s30);
    padding-bottom: 24px;
    border-bottom: 1px solid #E7E9EB;
    transition: all 0.4s;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area .heading:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area ul {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .blog2-section-area .blog-auhtor-boxarea .blog-content-area ul {
        display: inline-block;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog2-section-area .blog-auhtor-boxarea .blog-content-area ul {
        display: inline-block;
    }
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area ul li {
    margin: 0 16px 0 0;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    display: inline-block;
    color: var(--ztc-text-text-6);
    transition: all 0.4s;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area ul li a i {
    margin: 0 4px 0 0;
    color: var(--ztc-text-text-5);
}
@media (max-width: 767px) {
    .blog2-section-area .blog-auhtor-boxarea .blog-content-area ul li:nth-child(2) {
        margin-top: 10px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog2-section-area .blog-auhtor-boxarea .blog-content-area ul li:nth-child(2) {
        margin-top: 10px;
    }
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area p {
    font-size: var(--ztc-font-size-font-s18);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    transition: all 0.4s;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area .learnmore {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    line-height: var(--ztc-font-size-font-s16);
    margin-top: 24px;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area .learnmore:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.blog2-section-area .blog-auhtor-boxarea .blog-content-area .learnmore i {
    margin-left: 4px;
    transform: rotate(-45deg);
}

.blog3-section-area .blog-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .blog3-section-area .blog-header-area {
        margin-bottom: 30px;
    }
}
.blog3-section-area .blog-boxes-area {
    background: var(--ztc-bg-bg-1);
    transition: all 0.4s;
    overflow: hidden;
    border-radius: 4px;
    padding: 24px;
    position: relative;
    margin-bottom: 30px;
}
.blog3-section-area .blog-boxes-area:hover {
    transform: translateY(-5px);
    transition: all 0.4s;
}
.blog3-section-area .blog-boxes-area:hover .img1::after {
    height: 100%;
    transition: all 0.4s;
}
.blog3-section-area .blog-boxes-area:hover .img1 img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.blog3-section-area .blog-boxes-area .tags-area {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.blog3-section-area .blog-boxes-area .tags-area .date {
    margin: 0 20px 0 0;
}
.blog3-section-area .blog-boxes-area .tags-area .date a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-8);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
}
.blog3-section-area .blog-boxes-area .tags-area .date a i {
    color: var(--ztc-text-text-7);
    margin: 0 4px 0 0;
}
.blog3-section-area .blog-boxes-area .tags-area .date a img {
    margin: 0 4px 0 0;
}
.blog3-section-area .blog-boxes-area .tags-area .contact a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-8);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
}
.blog3-section-area .blog-boxes-area .tags-area .contact a img {
    margin: 0 4px 0 0;
}
.blog3-section-area .blog-boxes-area .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s32);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-7);
    display: block;
    transition: all 0.4s;
    margin-bottom: 24px;
}
.blog3-section-area .blog-boxes-area .content-area a:hover {
    color: var(--ztc-bg-bg-7);
    transition: all 0.4s;
}
.blog3-section-area .blog-boxes-area .content-area .readmore {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-7);
    transition: all 0.4s;
    display: inline-block;
}
.blog3-section-area .blog-boxes-area .content-area .readmore:hover {
    color: var(--ztc-bg-bg-7);
    transition: all 0.4s;
}
.blog3-section-area .blog-boxes-area .img1 {
    position: relative;
    border-radius: 4px;
    transition: all 0.4s;
    overflow: hidden;
}
.blog3-section-area .blog-boxes-area .img1::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-7);
    opacity: 0.7;
    border-radius: 4px;
}
.blog3-section-area .blog-boxes-area .img1 img {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    border-radius: 4px;
}

.blog4-section-area {
    position: relative;
    z-index: 1;
}
.blog4-section-area .blog-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .blog4-section-area .blog-header-area {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog4-section-area .blog-header-area {
        margin-bottom: 30px;
    }
}
.blog4-section-area .blog-auhtor-boxesarea {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-bottom: 30px;
}
.blog4-section-area .blog-auhtor-boxesarea:hover .img1::after {
    height: 100%;
    transition: all 0.4s;
}
.blog4-section-area .blog-auhtor-boxesarea:hover .img1 img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.blog4-section-area .blog-auhtor-boxesarea .img1 {
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    transition: all 0.4s;
    position: relative;
}
.blog4-section-area .blog-auhtor-boxesarea .img1::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-11);
    opacity: 0.7;
    border-radius: 4px 4px 0 0;
}
.blog4-section-area .blog-auhtor-boxesarea .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: all 0.4s;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area {
    padding: 24px;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s32);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-10);
    transition: all 0.4s;
    display: inline-block;
}
@media (max-width: 767px) {
    .blog4-section-area .blog-auhtor-boxesarea .content-area a {
        font-size: var(--ztc-font-size-font-s20);
        line-height: var(--ztc-font-size-font-s26);
    }
}
.blog4-section-area .blog-auhtor-boxesarea .content-area a:hover {
    color: var(--ztc-bg-bg-11);
    transition: all 0.4s;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area p {
    font-size: var(--ztc-font-size-font-s18);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-11);
    transition: all 0.4s;
    padding-top: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #DBE3EF;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-11);
    transition: all 0.4s;
    display: inline-block;
    margin-bottom: 0;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area ul li a i {
    color: var(--ztc-text-text-10);
    margin: 0 6px 0 0;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area ul li .learnmore {
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-10);
    transition: all 0.4s;
    display: inline-block;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area ul li .learnmore:hover {
    color: var(--ztc-bg-bg-11);
    transition: all 0.4s;
}
.blog4-section-area .blog-auhtor-boxesarea .content-area ul li .learnmore i {
    transform: rotate(-45deg);
}

.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea {
    padding: 32px 20px;
    border-radius: 4px;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-1);
}
.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea form {
    margin-top: 20px;
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 16px;
    height: 50px;
}
.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea form input {
    width: 100%;
    background: none;
    outline: none;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    line-height: var(--ztc-font-size-font-s16);
}
.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea form input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    line-height: var(16px);
}
.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea form input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    line-height: var(16px);
}
.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea form button {
    border: none;
    outline: none;
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    height: 50px;
    width: 56px;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    border-radius: 4px;
    transition: all 0.4s;
    position: absolute;
    right: 0;
    top: 0;
}
.blog-leftside-section-area .blog-auhtor-side-area .search-boxarea form button:hover {
    background: var(--ztc-text-text-3);
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-auhtor-side-area .blog-author-list {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    transition: all 0.4s;
    padding: 32px 20px;
    margin-top: 32px;
}
.blog-leftside-section-area .blog-auhtor-side-area .blog-author-list h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    margin-bottom: 4px;
}
.blog-leftside-section-area .blog-auhtor-side-area .blog-author-list ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    padding: 20px 24px;
    background: var(--ztc-text-text-1);
    margin-top: 20px;
    border-radius: 4px;
    height: 60px;
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-auhtor-side-area .blog-author-list ul li a i {
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-auhtor-side-area .blog-author-list ul li a:hover {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.blog-leftside-section-area .blog-auhtor-side-area .blog-author-list ul li a:hover i {
    transform: rotate(90deg);
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts {
    padding-top: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E7E9EB;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts .img1 {
    position: absolute;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts .img1 img {
    height: 80px;
    width: 80px;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts .content {
    padding-left: 100px;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts .content a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    display: inline-block;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts .content a i {
    color: var(--ztc-text-text-3);
    margin: 0 6px 0 0;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts .content .heading {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    display: inline-block;
    margin-top: 10px;
}
.blog-leftside-section-area .blog-auhtor-side-area .recent-posts-area .recent-single-posts .content .heading:hover {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-auhtor-side-area .helping-area {
    background: var(--ztc-text-text-2);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .helping-area h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-1);
}
.blog-leftside-section-area .blog-auhtor-side-area .helping-area .btn-area {
    margin-top: 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .helping-area .btn-area .header-btn1 {
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-3);
}
.blog-leftside-section-area .blog-auhtor-side-area .helping-area .btn-area .header-btn1 i {
    margin: 0 6px 0 0;
}
.blog-leftside-section-area .blog-auhtor-side-area .tags-area {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .tags-area h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.blog-leftside-section-area .blog-auhtor-side-area .tags-area ul li {
    display: inline-block;
}
.blog-leftside-section-area .blog-auhtor-side-area .tags-area ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    display: inline-block;
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 12px 12px 0 0;
}
.blog-leftside-section-area .blog-auhtor-side-area .tags-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    transform: translateY(-3px);
    color: var(--ztc-text-text-1);
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    margin-top: 16px;
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn1 {
    margin-top: 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn1 img {
    filter: brightness(0) invert(1);
    transition: all 0.4s;
    margin: -5px 4px 0 0;
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn1:hover {
    background: var(--ztc-text-text-3);
    transition: all 0.4s;
    transform: translateY(-5px);
    color: var(--ztc-text-text-1);
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn2 {
    background: var(--ztc-text-text-1);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    margin-left: 16px;
    margin-top: 24px;
    padding: 16px 20px;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn2 {
        margin-left: 0;
    }
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn2 img {
    transition: all 0.4s;
    margin: -5px 4px 0 0;
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn2:hover {
    background: var(--ztc-text-text-3);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.blog-leftside-section-area .blog-auhtor-side-area .download-broucher .btn-area .header-btn2:hover img {
    transition: all 0.4s;
    filter: brightness(0) invert(1);
}
.blog-leftside-section-area .blog-auhtor-side-area .social-icons {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    margin-top: 32px;
    padding: 32px 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .social-icons h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s30);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    color: var(--ztc-text-text-3);
}
.blog-leftside-section-area .blog-auhtor-side-area .social-icons ul {
    margin-top: 24px;
}
.blog-leftside-section-area .blog-auhtor-side-area .social-icons ul li {
    display: inline-block;
}
.blog-leftside-section-area .blog-auhtor-side-area .social-icons ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    color: var(--ztc-text-text-3);
    margin: 0 8px 0 0;
}
.blog-leftside-section-area .blog-auhtor-side-area .social-icons ul li a:hover {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.blog-leftside-section-area .blog-leftside-area {
    padding: 0 0 0 80px;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area {
        padding: 0;
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-leftside-section-area .blog-leftside-area {
        padding: 0;
        margin-top: 30px;
    }
}
.blog-leftside-section-area .blog-leftside-area .heading2 p {
    margin-bottom: 0 !important;
}
.blog-leftside-section-area .blog-leftside-area .heading2 h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s40);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    font-weight: var(--ztc-weight-bold);
}
.blog-leftside-section-area .blog-leftside-area .blog-left-heading .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area .tags-share-area {
        display: inline-block;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-leftside-section-area .blog-leftside-area .tags-share-area {
        display: inline-block;
    }
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .tags {
    display: flex;
    align-items: center;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area .tags-share-area .tags {
        display: inline-block;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-leftside-section-area .blog-leftside-area .tags-share-area .tags {
        margin-bottom: 20px;
    }
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .tags h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    margin: 0 8px 0 0;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area .tags-share-area .tags ul {
        margin-bottom: 30px;
    }
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .tags ul li {
    display: inline-block;
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .tags ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-2);
    font-weight: var(--ztc-weight-medium);
    display: inline-block;
    padding: 8px 12px;

    border: 1px solid var(--ztc-text-text-2);
    border-radius: 4px;
    margin: 0 10px 0 0;
    transition: all 0.4s;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area .tags-share-area .tags ul li a {
        margin: 10px 4px 0 0;
    }
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .tags ul li a:hover {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .share {
    display: flex;
    align-items: center;
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .share h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    margin: 0 8px 0 0;
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .share ul li {
    display: inline-block;
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .share ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s36);
    color: var(--ztc-text-text-2);
    font-weight: var(--ztc-weight-medium);
    display: inline-block;

    border-radius: 4px;
    margin: 0 10px 0 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-1);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    text-align: center;
}
.blog-leftside-section-area .blog-leftside-area .tags-share-area .share ul li a:hover {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    padding: 24px;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box {
        display: inline-block;
    }
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .all-content {
    display: flex;
    align-items: center;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .all-content .img1 img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .all-content .content-area {
    margin-left: 16px;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .all-content .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    line-height: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    display: block;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .all-content .content-area .date {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    line-height: var(--ztc-font-size-font-s18);
    display: inline-block;
    margin-top: 10px;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .reply {
        margin-top: 20px;
    }
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .reply a {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s18);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    cursor: pointer;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .reply a:hover {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .reply a:hover img {
    filter: none;
    transition: all 0.4s;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea .comment-auhtor-box .reply a img {
    filter: brightness(0);
    transition: all 0.4s;
    margin: 0 4px 0 0;
}
.blog-leftside-section-area .blog-leftside-area .comments-boxarea.boxarea2 {
    margin: 0 0 0 30px;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area .comments-boxarea.boxarea2 {
        margin: 0;
    }
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    padding: 32px;
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s32);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    margin-top: 16px;
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area {
    margin-top: 20px;
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    background: var(--ztc-text-text-1);
    width: 100%;
    border-radius: 4px;
    padding: 16px 20px;
    height: 58px;
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area textarea {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    background: var(--ztc-text-text-1);
    width: 100%;
    border-radius: 4px;
    padding: 16px 20px;
    height: 140px;
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area textarea::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area textarea::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area1 {
    text-align: end;
}
.blog-leftside-section-area .blog-leftside-area .contact-submit-boxarea .input-area1 button {
    border: none;
    margin-top: 30px;
}
.blog-leftside-section-area .blog-leftside-area.blog-rightside {
    padding: 0 70px 0 0 !important;
}
@media (max-width: 767px) {
    .blog-leftside-section-area .blog-leftside-area.blog-rightside {
        padding: 0 !important;
        margin-bottom: 30px;
        margin-top: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-leftside-section-area .blog-leftside-area.blog-rightside {
        padding: 0 !important;
        margin-bottom: 30px;
        margin-top: 0;
    }
}
.blog-leftside-section-area .blog-leftside-area.blog-singleside {
    padding: 0;
}
.blog-leftside-section-area .blog-auhtor-boxarea {
    text-align: start;
}
.blog-leftside-section-area .blog-auhtor-boxarea:hover .heading {
    background: none !important;
    color: var(--ztc-text-text-3) !important;
}
.blog-leftside-section-area .blog-auhtor-boxarea .blog-position {
    text-align: start;
}
.blog-leftside-section-area .blog-auhtor-boxarea .blog-position .blog-content-area {
    text-align: start;
}
.blog-leftside-section-area .blog-auhtor-boxarea .blog-position .blog-content-area ul {
    justify-content: start;
}
.blog-leftside-section-area .blog-auhtor-boxarea .blog-position .heading {
    width: 100%;
    left: 0;
    border-radius: 0;
    margin: 0 0 0 0 !important;
    position: relative;
    background: none;
    padding: 0;
    text-align: start;
}
.blog-leftside-section-area .blog-auhtor-boxarea .blog-position .heading:hover {
    color: var(--ztc-text-text-2) !important;
}

/*============= BLOG CSS AREA ENDS ===============*/
/*============= FOOTER CSS AREA ===============*/
.footer1-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-3);
}
.footer1-section-area .footer-logo-content {
    border-bottom: 1px solid #1A1F26;
}
.footer1-section-area .footer-logo-content .logo-content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    margin-top: 24px;
}
.footer1-section-area .footer-logo-content .logo-content ul {
    margin-top: 24px;
}
.footer1-section-area .footer-logo-content .logo-content ul li {
    display: inline-block;
}
.footer1-section-area .footer-logo-content .logo-content ul li a {
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    transition: all 0.4s;
    background: #1A1E26;
    border-radius: 50%;
    color: var(--ztc-text-text-1);
    margin: 0 6px 0 0;
}
.footer1-section-area .footer-logo-content .logo-content ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
    transform: translateY(-3px);
}
.footer1-section-area .footer-logo-content .service-heading h2 {
    font-family: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    font-size: var(--ztc-font-size-font-s20);

    margin-bottom: 4px;
}
.footer1-section-area .footer-logo-content .service-heading ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    transition: all 0.4s;
    display: inline-block;
    padding-top: 20px;
}
.footer1-section-area .footer-logo-content .service-heading ul li a:hover {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
    padding-left: 5px;
}
.footer1-section-area .footer-logo-content .service-heading.contact ul li a {
    display: flex;
}
.footer1-section-area .footer-logo-content .service-heading.contact ul li a:hover .icons {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.footer1-section-area .footer-logo-content .service-heading.contact ul li a span.icons {
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: #01060E;
    transition: all 0.4s;
    display: inline-block;
    margin: 0 8px 0 0;
}
.footer1-section-area .copyright p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s24);
    text-align: center;
    padding: 24px 0 30px 0;
}

.footer2-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-5);
}
.footer2-section-area .cta-header {
    padding-top: 100px;
}
@media (max-width: 767px) {
    .footer2-section-area .cta-header {
        padding-top: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer2-section-area .cta-header {
        padding-top: 50px;
    }
}
.footer2-section-area .cta-header h2 {
    color: var(--ztc-text-text-1);
}
.footer2-section-area .cta-header p {
    color: var(--ztc-text-text-1);
    opacity: 0.8 !important;
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
}
.footer2-section-area .cta-header form {
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 20px;
    position: relative;
    height: 56px;
    margin-top: 32px;
    display: inline-block;
    width: 385px;
}
@media (max-width: 767px) {
    .footer2-section-area .cta-header form {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer2-section-area .cta-header form {
        width: 100%;
    }
}
.footer2-section-area .cta-header form input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-5);
    font-weight: var(--ztc-weight-medium);
    width: 100%;
    outline: none;
}
.footer2-section-area .cta-header form input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
}
.footer2-section-area .cta-header form input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
}
.footer2-section-area .cta-header form button {
    border: none;
    transition: all 0.4s;
    position: absolute;
    right: 4px;
    top: 4px;
}
.footer2-section-area .footer-logo-content {
    border-bottom: 1px solid #2C3C4B;
}
.footer2-section-area .footer-logo-content .logo-content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    margin-top: 24px;
}
.footer2-section-area .footer-logo-content .logo-content ul {
    margin-top: 24px;
}
.footer2-section-area .footer-logo-content .logo-content ul li {
    display: inline-block;
}
.footer2-section-area .footer-logo-content .logo-content ul li a {
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    transition: all 0.4s;
    background: #2C3B4A;
    border-radius: 50%;
    color: var(--ztc-text-text-1);
    margin: 0 6px 0 0;
}
.footer2-section-area .footer-logo-content .logo-content ul li a:hover {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
    color: var(--ztc-text-text-5);
    transform: translateY(-3px);
}
.footer2-section-area .footer-logo-content .service-heading h2 {
    font-family: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    font-size: var(--ztc-font-size-font-s20);

    margin-bottom: 4px;
}
.footer2-section-area .footer-logo-content .service-heading ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 0.8 !important;
    transition: all 0.4s;
    display: inline-block;
    padding-top: 20px;
}
.footer2-section-area .footer-logo-content .service-heading ul li a:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
    padding-left: 5px;
}
.footer2-section-area .footer-logo-content .service-heading.contact ul li a {
    display: flex;
}
.footer2-section-area .footer-logo-content .service-heading.contact ul li a:hover .icons {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.footer2-section-area .footer-logo-content .service-heading.contact ul li a .icons {
    margin: 0 8px 0 0;
    transition: all 0.4s;
}
.footer2-section-area .copyright p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s24);
    text-align: center;
    padding: 24px 0 30px 0;
}

.footer3-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-7);
}
.footer3-section-area .cta-header {
    padding-top: 100px;
}
@media (max-width: 767px) {
    .footer3-section-area .cta-header {
        padding-top: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer3-section-area .cta-header {
        padding-top: 50px;
    }
}
.footer3-section-area .cta-header h2 {
    color: var(--ztc-text-text-1);
}
.footer3-section-area .cta-header p {
    color: var(--ztc-text-text-1);
    opacity: 0.8 !important;
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
}
.footer3-section-area .cta-header form {
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 20px;
    position: relative;
    height: 56px;
    margin-top: 32px;
    display: inline-block;
    width: 385px;
}
@media (max-width: 767px) {
    .footer3-section-area .cta-header form {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer3-section-area .cta-header form {
        width: 100%;
    }
}
.footer3-section-area .cta-header form input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-5);
    font-weight: var(--ztc-weight-medium);
    width: 100%;
    outline: none;
}
.footer3-section-area .cta-header form input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
}
.footer3-section-area .cta-header form input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
}
.footer3-section-area .cta-header form button {
    border: none;
    transition: all 0.4s;
    position: absolute;
    right: 4px;
    top: 4px;
}
.footer3-section-area .footer-logo-content {
    border-bottom: 1px solid #221D19;
}
.footer3-section-area .footer-logo-content .logo-content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    margin-top: 24px;
}
.footer3-section-area .footer-logo-content .logo-content ul {
    margin-top: 24px;
}
.footer3-section-area .footer-logo-content .logo-content ul li {
    display: inline-block;
}
.footer3-section-area .footer-logo-content .logo-content ul li a {
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    transition: all 0.4s;
    background: #221D19;
    border-radius: 50%;
    color: var(--ztc-text-text-1);
    margin: 0 6px 0 0;
}
.footer3-section-area .footer-logo-content .logo-content ul li a:hover {
    background: var(--ztc-bg-bg-7);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
    transform: translateY(-3px);
}
.footer3-section-area .footer-logo-content .service-heading h2 {
    font-family: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    font-size: var(--ztc-font-size-font-s20);

    margin-bottom: 4px;
}
.footer3-section-area .footer-logo-content .service-heading ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 0.8 !important;
    transition: all 0.4s;
    display: inline-block;
    padding-top: 20px;
}
.footer3-section-area .footer-logo-content .service-heading ul li a:hover {
    color: var(--ztc-bg-bg-7);
    transition: all 0.4s;
    padding-left: 5px;
}
.footer3-section-area .footer-logo-content .service-heading.contact ul li a {
    display: flex;
}
.footer3-section-area .footer-logo-content .service-heading.contact ul li a:hover .icons {
    color: var(--ztc-bg-bg-7);
    transition: all 0.4s;
}
.footer3-section-area .footer-logo-content .service-heading.contact ul li a .icons {
    margin: 0 8px 0 0;
    transition: all 0.4s;
}
.footer3-section-area .copyright p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s24);
    text-align: center;
    padding: 24px 0 30px 0;
}

.footer4-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-10);
}
.footer4-section-area .footer-logo-content {
    border-bottom: 1px solid #1A1F26;
}
.footer4-section-area .footer-logo-content .logo-content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    margin-top: 24px;
}
.footer4-section-area .footer-logo-content .logo-content ul {
    margin-top: 24px;
}
.footer4-section-area .footer-logo-content .logo-content ul li {
    display: inline-block;
}
.footer4-section-area .footer-logo-content .logo-content ul li a {
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    transition: all 0.4s;
    background: #1A1E26;
    border-radius: 50%;
    color: var(--ztc-text-text-1);
    margin: 0 6px 0 0;
}
.footer4-section-area .footer-logo-content .logo-content ul li a:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
    transform: translateY(-3px);
}
.footer4-section-area .footer-logo-content .service-heading h2 {
    font-family: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-1);
    font-size: var(--ztc-font-size-font-s20);

    margin-bottom: 4px;
}
.footer4-section-area .footer-logo-content .service-heading ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    transition: all 0.4s;
    display: inline-block;
    padding-top: 20px;
}
.footer4-section-area .footer-logo-content .service-heading ul li a:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    padding-left: 5px;
}
.footer4-section-area .footer-logo-content .service-heading.contact ul li a {
    display: flex;
}
.footer4-section-area .footer-logo-content .service-heading.contact ul li a:hover .icons {
    background: none;
    transition: all 0.4s;
}
.footer4-section-area .footer-logo-content .service-heading.contact ul li a span.icons {
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: #01060E;
    transition: all 0.4s;
    display: inline-block;
    margin: 0 8px 0 0;
}
.footer4-section-area .copyright p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s24);
    text-align: center;
    padding: 24px 0 30px 0;
}

/*============= FOOTER CSS AREA ===============*/
/*============= HEADER CSS AREA ===============*/
.homepage1-body .header-area.homepage1 {
    position: absolute;
    width: 100%;
    z-index: 9999;
    padding: 16px 0;
    transition: all 0.4s;
}
.homepage1-body .header-area.homepage1 nav#navbar-example2 {
    display: block !important;
    padding: 0 !important;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a.nav-link.active {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu .tp-submenu {
    left: -370px;
}
.homepage1-body .header-area.homepage1 .header-elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    position: relative;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.4s;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu {
    position: relative;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li {
    display: inline-block;
    position: relative;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu {
    background: var(--ztc-text-text-1) !important;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb {
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after {
    transform: scale(1);
    transition: all 0.4s;
    visibility: visible;
    opacity: 0.7;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn {
    top: 38%;
    visibility: visible;
    opacity: 1;
    transition: all 0.6s;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-3);
    opacity: 0;
    border-radius: 4px;
    transform: scale(0.8);
    z-index: 1;
    visibility: hidden;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 0.4s;
    border: 1px solid #E5E7EB;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn {
    position: absolute;
    top: 30%;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    transition: all 0.6s;
    margin: 0 auto;
    left: 20%;
    right: 20%;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    background: var(--ztc-text-text-2);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover::after {
    width: 100%;
    transition: all 0.4s;
    right: auto;
    left: 0;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    right: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
    opacity: 0.2;
    z-index: -1;
    border-radius: 4px;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-content a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    margin-top: 20px;
    text-align: center;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover .tp-submenu {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover ul.dropdown-padding {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    display: inline-block;
    transition: all 0.4s;
    padding: 0 20px;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a {
    transition: all 0.4s;
    color: var(--ztc-text-text-2) !important;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-text-text-1);
    top: 100px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
    left: -300px;
    width: 1300px;
    overflow: hidden;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-text-text-1);
    top: 100px;
    width: 225px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu {
    position: relative;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a {
    transition: all 0.4s;
    padding-left: 25px;
    color: var(--ztc-text-text-2);
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
    color: var(--ztc-text-text-2);
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li {
    display: block;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a {
    font-family: var(--ztc-family-font1);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
    padding: 8px;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    color: var(--ztc-text-text-3);
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 10px;
    transition: all 0.4s;
    z-index: -1;
    left: 10px;
    top: 21px;
    border-radius: 4px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    background: var(--ztc-text-text-2);
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a:hover {
    padding-left: 25px;
    color: var(--ztc-text-text-2);
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after {
    border-radius: 4px;
    visibility: visible;
    transition: all 0.4s;
    opacity: 1;
}

.header-area.homepage1.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0, 0, 0);
    z-index: 111;
    animation-name: fade-in-down;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: var(--ztc-text-text-3);
    padding: 0;
    transition: all 0.4s;
}
.header-area.homepage1.sticky .header-elements {
    background: none;
    transition: all 0.4s;
    padding: 20px 0;
}

.homepage2-body .header-area.homepage2 {
    position: absolute;
    width: 100%;
    z-index: 9999;
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
}
.homepage2-body .header-area.homepage2 nav#navbar-example2 {
    display: block !important;
    padding: 0 !important;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li a.nav-link.active {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu .tp-submenu {
    left: -370px;
}
.homepage2-body .header-area.homepage2 .header-elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    position: relative;
    border-radius: 4px;
    transition: all 0.4s;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu {
    position: relative;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li {
    display: inline-block;
    position: relative;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu {
    background: var(--ztc-text-text-1) !important;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb {
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after {
    transform: scale(1);
    transition: all 0.4s;
    visibility: visible;
    opacity: 0.7;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn {
    top: 38%;
    visibility: visible;
    opacity: 1;
    transition: all 0.6s;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-4);
    opacity: 0;
    border-radius: 4px;
    transform: scale(0.8);
    z-index: 1;
    visibility: hidden;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 0.4s;
    border: 1px solid #E5E7EB;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn {
    position: absolute;
    top: 30%;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    transition: all 0.6s;
    margin: 0 auto;
    left: 20%;
    right: 20%;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-5);
    background: var(--ztc-bg-bg-3);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn3:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn3:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn3::after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    left: 45%;
    top: 27%;
    transition: all 0.4s;
    background: var(--ztc-text-text-5);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn3 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-content a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-bg-bg-4);
    transition: all 0.4s;
    margin-top: 20px;
    text-align: center;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover .tp-submenu {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover ul.dropdown-padding {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    display: inline-block;
    transition: all 0.4s;
    padding: 0 20px;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover > a {
    transition: all 0.4s;
    color: var(--ztc-bg-bg-3) !important;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-bg-bg-4);
    top: 100px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
    left: -300px;
    width: 1300px;
    overflow: hidden;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-text-text-1);
    top: 100px;
    width: 225px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu {
    position: relative;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a {
    transition: all 0.4s;
    padding-left: 25px;
    color: var(--ztc-bg-bg-3);
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
    color: var(--ztc-bg-bg-3);
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li {
    display: block;
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a {
    font-family: var(--ztc-family-font1);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
    padding: 8px;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    color: var(--ztc-text-text-5);
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 10px;
    transition: all 0.4s;
    z-index: -1;
    left: 10px;
    top: 21px;
    border-radius: 4px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    background: var(--ztc-bg-bg-3);
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a:hover {
    padding-left: 25px;
    color: var(--ztc-bg-bg-3);
}
.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after {
    border-radius: 4px;
    visibility: visible;
    transition: all 0.4s;
    opacity: 1;
}

.header-area.homepage2.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0, 0, 0);
    z-index: 111;
    animation-name: fade-in-down;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: var(--ztc-text-text-1);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    padding: 16px 0;
    transition: all 0.4s;
}
.header-area.homepage2.sticky .header-elements {
    background: none;
    transition: all 0.4s;
    padding: 0;
}

.homepage3-body .header-area.homepage3 {
    position: absolute;
    width: 100%;
    z-index: 9999;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-8);
}
.homepage3-body .header-area.homepage3 nav#navbar-example2 {
    display: block !important;
    padding: 0 !important;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li a.nav-link.active {
    color: var(--ztc-text-text-9);
    transition: all 0.4s;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu .tp-submenu {
    left: -370px;
}
.homepage3-body .header-area.homepage3 .header-elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 4px;
    transition: all 0.4s;
    padding: 16px 0;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu {
    position: relative;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li {
    display: inline-block;
    position: relative;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu {
    background: var(--ztc-text-text-1) !important;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb {
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after {
    transform: scale(1);
    transition: all 0.4s;
    visibility: visible;
    opacity: 0.7;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn {
    top: 38%;
    visibility: visible;
    opacity: 1;
    transition: all 0.6s;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-7);
    opacity: 0;
    border-radius: 4px;
    transform: scale(0.8);
    z-index: 1;
    visibility: hidden;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 0.4s;
    border: 1px solid #E5E7EB;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn {
    position: absolute;
    top: 30%;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    transition: all 0.6s;
    margin: 0 auto;
    left: 20%;
    right: 20%;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    background: var(--ztc-bg-bg-7);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    border-radius: 4px;
    left: 45%;
    top: 0;
    transition: all 0.4s;
    background: #ff6a00;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-content a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-7);
    transition: all 0.4s;
    margin-top: 20px;
    text-align: center;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover .tp-submenu {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover ul.dropdown-padding {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-7);
    display: inline-block;
    transition: all 0.4s;
    padding: 0 20px;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover > a {
    transition: all 0.4s;
    color: var(--ztc-bg-bg-7) !important;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-text-text-1);
    top: 100px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
    left: -300px;
    width: 1300px;
    overflow: hidden;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-text-text-1);
    top: 100px;
    width: 225px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu {
    position: relative;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a {
    transition: all 0.4s;
    padding-left: 25px;
    color: var(--ztc-bg-bg-7);
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after {
    background: var(--ztc-bg-bg-7);
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
    color: var(--ztc-bg-bg-7);
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li {
    display: block;
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a {
    font-family: var(--ztc-family-font1);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
    padding: 8px;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    color: var(--ztc-text-text-7);
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 10px;
    transition: all 0.4s;
    z-index: -1;
    left: 10px;
    top: 21px;
    border-radius: 4px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    background: var(--ztc-bg-bg-7);
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a:hover {
    padding-left: 25px;
    color: var(--ztc-bg-bg-7);
}
.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after {
    border-radius: 4px;
    visibility: visible;
    transition: all 0.4s;
    opacity: 1;
}

.header-area.homepage3.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0, 0, 0);
    z-index: 111;
    animation-name: fade-in-down;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: var(--ztc-text-text-1);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    padding: 0;
    transition: all 0.4s;
}
.header-area.homepage3.sticky .header-elements {
    background: none;
    transition: all 0.4s;
}
.header-area.homepage3.sticky .header-pera {
    display: none;
    transition: all 0.4s;
}

.header-pera {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    padding: 16px 0;
    line-height: var(--ztc-font-size-font-s16);
    background: var(--ztc-text-text-7);
    text-align: center;
    transition: all 0.4s;
}

.homepage4-body .header-area.homepage4 {
    position: absolute;
    width: 100%;
    z-index: 9999;
    padding: 16px 0;
    transition: all 0.4s;
}
.homepage4-body .header-area.homepage4 nav#navbar-example2 {
    display: block !important;
    padding: 0 !important;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li a.nav-link.active {
    color: var(--ztc-bg-bg-11);
    transition: all 0.4s;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu .tp-submenu {
    left: -370px;
}
.homepage4-body .header-area.homepage4 .header-elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    position: relative;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu {
    position: relative;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li {
    display: inline-block;
    position: relative;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu {
    background: var(--ztc-text-text-1) !important;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb {
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after {
    transform: scale(1);
    transition: all 0.4s;
    visibility: visible;
    opacity: 0.7;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn {
    top: 38%;
    visibility: visible;
    opacity: 1;
    transition: all 0.6s;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-3);
    opacity: 0;
    border-radius: 4px;
    transform: scale(0.8);
    z-index: 1;
    visibility: hidden;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 0.4s;
    border: 1px solid #E5E7EB;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn {
    position: absolute;
    top: 30%;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    transition: all 0.6s;
    margin: 0 auto;
    left: 20%;
    right: 20%;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn7 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    background: var(--ztc-bg-bg-11);
    padding: 16px 20px;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn7:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn7:hover::after {
    left: 0;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn7::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    border-radius: 4px;
    left: 45%;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-7);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn7 i {
    margin-left: 4px;
    transform: rotate(-45deg);
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-content a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    margin-top: 20px;
    text-align: center;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover .tp-submenu {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover ul.dropdown-padding {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 9;
    top: 50px;
    position: absolute;
    transition: all 0.4s;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-10);
    display: inline-block;
    transition: all 0.4s;
    padding: 0 20px;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover > a {
    transition: all 0.4s;
    color: var(--ztc-bg-bg-11) !important;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-text-text-1);
    top: 100px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
    left: -300px;
    width: 1300px;
    overflow: hidden;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    position: absolute;
    background: var(--ztc-text-text-1);
    top: 100px;
    width: 225px;
    z-index: 1;
    transition: all 0.4s;
    border-radius: 5px;
    padding: 15px;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu {
    position: relative;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a {
    transition: all 0.4s;
    padding-left: 25px;
    color: var(--ztc-bg-bg-11);
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
    color: var(--ztc-bg-bg-11);
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li {
    display: block;
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a {
    font-family: var(--ztc-family-font1);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
    padding: 8px;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    color: var(--ztc-text-text-10);
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 10px;
    transition: all 0.4s;
    z-index: -1;
    left: 10px;
    top: 21px;
    border-radius: 4px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    background: var(--ztc-bg-bg-11);
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a:hover {
    padding-left: 25px;
    color: var(--ztc-bg-bg-11);
}
.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after {
    border-radius: 4px;
    visibility: visible;
    transition: all 0.4s;
    opacity: 1;
}

.header-area.homepage4.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0, 0, 0);
    z-index: 111;
    animation-name: fade-in-down;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: var(--ztc-text-text-1);
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    transition: all 0.4s;
    padding: 16px 0;
}
.header-area.homepage4.sticky .header-elements {
    background: none;
    transition: all 0.4s;
    padding: 0;
}

/*============= HEADER CSS AREA ENDS ===============*/
/*============= WORK CSS AREA ===============*/
.work1-section-area .tabs-list ul li button {
    background: var(--ztc-bg-bg-1);
    border: none;
    outline: none;
    padding: 14px 16px;
    border-radius: 4px;
    transition: all 0.4s;
    display: flex;
    align-items: center;
    margin-top: 24px;

    width: 380px;
}
@media (max-width: 767px) {
    .work1-section-area .tabs-list ul li button {
        width: 100%;
    }
}
.work1-section-area .tabs-list ul li button .workicons {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 50%;
    display: inline-block;
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    margin: 0 8px 0 0;
}
.work1-section-area .tabs-list ul li button .worktext {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    display: inline-block;
    line-height: 18px;
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    text-align: start;
}
@media (max-width: 767px) {
    .work1-section-area .tabs-list ul li button .worktext {
        line-height: 24px;
    }
}
.work1-section-area .tabs-list ul li button.active {
    background: var(--ztc-text-text-2);
    color: var(--ztc-text-text-1);
}
.work1-section-area .tabs-list ul li button.active .workicons {
    background: #D23D48;
}
.work1-section-area .tabs-list ul li button.active .worktext {
    color: var(--ztc-text-text-1);
}
.work1-section-area .works-author-area {
    padding: 0 0 0 70px;
    position: relative;
}
@media (max-width: 767px) {
    .work1-section-area .works-author-area {
        padding: 0;
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .work1-section-area .works-author-area {
        padding: 0;
        margin-top: 30px;
    }
}
.work1-section-area .works-author-area .tab-pane {
    position: relative;
    left: 100px;
    transition: all 0.4s;
}
.work1-section-area .works-author-area .tab-pane .works-side-area {
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
}
.work1-section-area .works-author-area .tab-pane .works-side-area .images img {
    height: 100%;
    width: 100%;
    border-radius: 4px 4px 0 0;
}
.work1-section-area .works-author-area .tab-pane .works-side-area .content-area {
    padding: 32px 50px 32px 32px;
}
@media (max-width: 767px) {
    .work1-section-area .works-author-area .tab-pane .works-side-area .content-area {
        padding: 32px;
    }
}
.work1-section-area .works-author-area .tab-pane .works-side-area .content-area a.power {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s32);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s32);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .work1-section-area .works-author-area .tab-pane .works-side-area .content-area a.power {
        font-size: var(--ztc-font-size-font-s24);
        line-height: var(--ztc-font-size-font-s32);
    }
}
.work1-section-area .works-author-area .tab-pane .works-side-area .content-area a.power:hover {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.work1-section-area .works-author-area .tab-pane .works-side-area .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    transition: all 0.4s;
}
.work1-section-area .works-author-area .tab-pane .works-side-area .content-area .btn-area {
    margin-top: 24px;
}
.work1-section-area .works-author-area .tab-pane.fade.show.active {
    left: 0;
    transition: all 0.4s;
}

/*============= WORK CSS AREA ===============*/
/*============= OTHERS CSS AREA STARTS ===============*/
.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}
.progress-wrap:hover {
    background: var(--ztc-text-text-2);
    transform: translateY(-5px);
    box-shadow: 0 0 15px 0 var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    color: var(--ztc-text-text-2);
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
}

.progress-wrap:hover::after {
    opacity: 0;
}

.progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}

.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--ztc-text-text-2);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pagination2 .progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}
.pagination2 .progress-wrap:hover {
    background: var(--ztc-bg-bg-3);
    transform: translateY(-5px);
    box-shadow: 0 0 15px 0 var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.pagination2 .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pagination2 .progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    color: var(--ztc-bg-bg-3);
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
}
.pagination2 .progress-wrap:hover::after {
    opacity: 0;
}
.pagination2 .progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}
.pagination2 .progress-wrap:hover::before {
    opacity: 1;
}
.pagination2 .progress-wrap svg path {
    fill: none;
}
.pagination2 .progress-wrap svg.progress-circle path {
    stroke: var(--ztc-bg-bg-3);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}
.pagination2 .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pagination3 .progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}
.pagination3 .progress-wrap:hover {
    background: var(--ztc-bg-bg-7);
    transform: translateY(-5px);
    box-shadow: 0 0 15px 0 var(--ztc-bg-bg-7);
    transition: all 0.4s;
}
.pagination3 .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pagination3 .progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    color: var(--ztc-bg-bg-7);
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
}
.pagination3 .progress-wrap:hover::after {
    opacity: 0;
}
.pagination3 .progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}
.pagination3 .progress-wrap:hover::before {
    opacity: 1;
}
.pagination3 .progress-wrap svg path {
    fill: none;
}
.pagination3 .progress-wrap svg.progress-circle path {
    stroke: var(--ztc-bg-bg-7);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}
.pagination3 .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pagination4 .progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}
.pagination4 .progress-wrap:hover {
    background: var(--ztc-bg-bg-11);
    transform: translateY(-5px);
    box-shadow: 0 0 15px 0 var(--ztc-bg-bg-11);
    transition: all 0.4s;
}
.pagination4 .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pagination4 .progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    color: var(--ztc-bg-bg-11);
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
}
.pagination4 .progress-wrap:hover::after {
    opacity: 0;
}
.pagination4 .progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}
.pagination4 .progress-wrap:hover::before {
    opacity: 1;
}
.pagination4 .progress-wrap svg path {
    fill: none;
}
.pagination4 .progress-wrap svg.progress-circle path {
    stroke: var(--ztc-bg-bg-11);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}
.pagination4 .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cursor {
    width: 30px;
    height: 30px;
    border: 1px solid var(--ztc-text-text-2);
    border-radius: 50%;
    position: absolute;
    z-index: 9999;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    animation: cursorAnim 0.5s alternate;
    pointer-events: none;
}

.cursor::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 2px solid var(--ztc-text-text-2);
    border-radius: 50%;
    opacity: 0.5;
    top: 9PX;
    left: 9PX;
    animation: cursorAnim2 0.5s alternate;
    background: var(--ztc-text-text-2);
}

@keyframes cursorAnim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.7);
    }
}
@keyframes cursorAnim2 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.4);
    }
}
@keyframes cursorAnim3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(3);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
.expand {
    animation: cursorAnim3 0.5s forwards;
    border: 1px solid var(--ztc-text-text-2);
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999999;
    background-color: var(--ztc-text-text-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader2 {
    background: var(--ztc-bg-bg-11) !important;
}

.preloader3 {
    background: var(--ztc-text-text-5) !important;
}

.preloader4 {
    background: var(--ztc-bg-bg-7) !important;
}

.loading-container,
.loading {
    height: 120px;
    position: relative;
    width: 120px;
    border-radius: 100%;
}

.loading-container {
    margin: 40px auto;
}

.loading {
    border: 1px solid transparent;
    border-color: transparent var(--ztc-text-text-2) transparent var(--ztc-text-text-2);
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.preloader2 .loading {
    border-color: transparent var(--ztc-text-text-1) transparent var(--ztc-text-text-1) !important;
    border: 1px solid transparent;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.preloader3 .loading {
    border-color: transparent var(--ztc-bg-bg-3) transparent var(--ztc-bg-bg-3) !important;
    border: 1px solid transparent;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.preloader4 .loading {
    border-color: transparent var(--ztc-text-text-1) transparent var(--ztc-text-text-1) !important;
    border: 1px solid transparent;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading {
    transition: all 0.5s ease-in-out;
}

#loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80px;
    width: 80px;
}

@keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*============= OTHERS CSS AREA ENDS ===============*/
/*============= PRICING CSS AREA ===============*/
.pricing-area {
    position: relative;
    z-index: 2;
    overflow-x: hidden;
}

.toggle-inner input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 25px;
    right: 0;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}

.custom-toggle {
    position: absolute;
    height: 20px;
    width: 20px;
    background-color: var(--ztc-text-text-1);
    top: 5px;
    left: 35px;
    border-radius: 50%;
    transition: 300ms all;
}

.toggle-inner .t-month,
.toggle-inner .t-year {
    position: absolute;
    left: -75px;
    top: 2px;
    transition: 300ms all;
}

.toggle-inner .t-year {
    left: unset;
    left: 73px;
    opacity: 0.5;
}

.active > .toggle-inner .t-month {
    opacity: 0.5;
}

.active > .toggle-inner .t-year {
    opacity: 1;
}

.toggle-inner input:checked + span {
    left: 5px;
}

.toggle-inner {
    width: 60px;
    margin: 0 auto;
    height: 30px;
    border-radius: 25px;
    position: relative;
    background: var(--ztc-text-text-3);
    left: -20px;
}

.t-year h4 {
    min-width: 200px;
}

.t-year {
    text-align: left;
}

.plan-toggle-wrap {
    margin-top: 50px;
    margin-bottom: 32px;
}

.plan-toggle-wrap h4 {
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    font-family: "Figtree", sans-serif;
    margin-bottom: 0;
}

.plan-toggle-wrap h4 span {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
}

.plan-toggle-wrap1 {
    position: absolute;
    z-index: 1;
    left: 25%;
    top: 30%;
    right: 71%;
}
@media (max-width: 767px) {
    .plan-toggle-wrap1 {
        position: relative;
        left: 0;
        top: 0;
        text-align: center;
        right: 0;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .plan-toggle-wrap1 {
        left: 20%;
        top: 20%;
        right: 0;
    }
}
@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .plan-toggle-wrap1 {
        right: 56% !important;
    }
}

.plan-toggle-wrap1 h4 {
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    font-family: "Figtree", sans-serif;
    margin-bottom: 0;
}

.plan-toggle-wrap1 h4 span {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
}

.single-pricing-area {
    margin-bottom: 30px;
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    padding: 30px;
    transition: all 0.4s;
    border: 1.5px solid #efefef;
}
.single-pricing-area:hover {
    border: 1px solid var(--ztc-text-text-2);
    transition: all 0.4s;
}
.single-pricing-area .pricing-box h3 {
    font-family: var(--ztc-family-font1);
    font-size: 26px;
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    line-height: var(--ztc-font-size-font-s18);
    margin-bottom: 20px;
}
.single-pricing-area .pricing-box p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-text-text-4);
    line-height: var(--ztc-font-size-font-s26);
    font: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-4);
    font-weight: var(--ztc-weight-medium);
}
.single-pricing-area .pricing-box h2 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s44);
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 4px;
    margin-top: 24px;
}
.single-pricing-area .pricing-box .header-btn1 {
    width: 100%;
    margin-top: 24px;
    text-align: center;
}
.single-pricing-area .pricing-box h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    line-height: var(--ztc-font-size-font-s20);
    color: var(--ztc-text-text-3);
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: var(--ztc-weight-bold);
}
.single-pricing-area .pricing-box ul li {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-4);
    font-weight: var(--ztc-weight-medium);
    margin-top: 16px;
}
.single-pricing-area .pricing-box ul li img {
    margin: 0 8px 0 0;
}

.single-pricing-area.active {
    border: 1px solid var(--ztc-text-text-2);
    transition: all 0.4s;
}

/* ── Tarjeta proEvolution 72 destacada ── */
.single-pricing-area.pricing-featured {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 16px 48px rgba(177,1,0,0.35);
    transform: translateY(-6px);
}
.single-pricing-area.pricing-featured .pricing-box h3,
.single-pricing-area.pricing-featured .pricing-box h4,
.single-pricing-area.pricing-featured .pricing-box p,
.single-pricing-area.pricing-featured .pricing-box ul li {
    color: #fff !important;
}
.single-pricing-area.pricing-featured .pricing-box .popular {
    color: rgba(255,255,255,0.75) !important;
    font-style: italic;
}
.single-pricing-area.pricing-featured .pricing-box .icons {
    background: rgba(255,255,255,0.2);
}
.single-pricing-area.pricing-featured .check-white {
    filter: brightness(0) invert(1);
}
.btn-featured-white {
    background: #fff !important;
    color: var(--accent-color) !important;
    border-color: #fff !important;
    font-weight: 700;
}
.btn-featured-white:hover {
    background: rgba(255,255,255,0.88) !important;
    color: var(--accent-color) !important;
}
.badge-ecotec-plus {
    display: inline-block;
    background: #fff;
    color: var(--accent-color);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.06em;
    vertical-align: middle;
    margin-left: 3px;
}

.compareplan-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
}
.compareplan-section-area .single-pricing-area {
    background: var(--ztc-text-text-1);
    padding: 32px 40px !important;
    position: relative;
    margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .compareplan-section-area .single-pricing-area {
        padding: 20px !important;
    }
}
.compareplan-section-area .comparison table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
.compareplan-section-area .comparison td, .compareplan-section-area .comparison th {
    text-align: center;
}
.compareplan-section-area .comparison tbody tr:nth-child(odd) {
    display: none;
}
.compareplan-section-area .comparison .compare-row td {
    padding: 25px 0;
    border-top: 1px solid #FAE7E8;
}
.compareplan-section-area .comparison tr td:first-child {
    text-align: left;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    padding: 25px 0;
    border-top: 1px solid #FAE7E8;
}
.compareplan-section-area .comparison .tl2 {
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    font-size: var(--ztc-font-size-font-s24);
}
.compareplan-section-area .comparison .tl2 span {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
    font-family: var(--ztc-family-font1);
    margin-top: 32px;
    position: absolute;
    left: 6%;
    top: 55px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .compareplan-section-area .comparison .tl2 span {
        display: none;
    }
}
.compareplan-section-area .comparison .qbo {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    line-height: var(--ztc-font-size-font-s20);
    padding: 0 !important;
}
.compareplan-section-area th.price-info.hide-mobile {
    padding-bottom: 40px;
}
.compareplan-section-area .comparison .price-now span {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    line-height: var(--ztc-font-size-font-s44);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-3);
    transition: all 0.4s;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 24px;
}
@media (max-width: 767px) {
    .compareplan-section-area .comparison {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s20);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-3);
        transition: all 0.4s;
        padding: 20px !important;
        background: var(--ztc-text-text-1);
    }
    .compareplan-section-area th.price-info.hide-mobile {
        padding-bottom: 20px;
    }
    .compareplan-section-area .comparison .qbo {
        background: none;
        padding: 10px !important;
    }
    .compareplan-section-area .comparison td:first-child, .compareplan-section-area .comparison th:first-child {
        display: none;
    }
    .compareplan-section-area .comparison tbody tr:nth-child(odd) {
        display: table-row;
    }
    .compareplan-section-area .comparison .row {
        background: #fff;
    }
    .compareplan-section-area .comparison td, .compareplan-section-area .comparison th {
        border: 1px solid #FAE7E8;
        padding: 20px 0;
    }
}

/*============= PRICING CSS AREA ENDS ===============*/
/*============= SLIDER CSS AREA ===============*/
.slider-section-area {
    position: relative;
    z-index: 1;
    padding: 80px 0;
}
@media (max-width: 767px) {
    .slider-section-area {
        padding: 40px 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-section-area {
        padding: 40px 0;
    }
}
.slider-section-area .header-slider {
    margin-bottom: 60px;
}
.slider-section-area .header-slider h3 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    line-height: var(--ztc-font-size-font-s20);
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-bold);

}
.slider-section-area .slider-images .img1 img {
    height: 40px;
    width: 160px;
    -o-object-fit: contain;
    object-fit: contain;
}

/*============= SLIDER CSS AREA ENDS ===============*/
/*============= MISSION CSS AREA ===============*/
.mission-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
}
.mission-section-area .mission-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .mission-section-area .mission-header-area {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mission-section-area .mission-header-area {
        margin-bottom: 30px;
    }
}
.mission-section-area .tabs-auhtor-area .nav.nav-pills {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.mission-section-area .tabs-auhtor-area .nav.nav-pills .nav-item {
    display: inline-block;
}
.mission-section-area .tabs-auhtor-area .nav.nav-pills .nav-item button {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-10);
    font-weight: var(--ztc-weight-medium) !important;
    transition: all 0.4s;
    background: var(--ztc-text-text-1);
    display: inline-block;
    width: 400px;
    text-align: center;
    padding: 20px !important;
    border-radius: 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mission-section-area .tabs-auhtor-area .nav.nav-pills .nav-item button {
        width: 215px;
    }
}
@media (max-width: 767px) {
    .mission-section-area .tabs-auhtor-area .nav.nav-pills .nav-item button {
        width: 100%;
        margin-bottom: 10px;
    }
}
.mission-section-area .tabs-auhtor-area .nav.nav-pills .nav-link.active {
    background: var(--ztc-bg-bg-11);
    color: var(--ztc-text-text-1);
}
.mission-section-area .tabs-auhtor-area .nav.nav-pills .nav-link {
    padding: 0 !important;
}
.mission-section-area .tabs-auhtor-area .tab-pane .mission-img img {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover;
}
.mission-section-area .tabs-auhtor-area .tab-pane .mission-content-area {
    padding: 0 0 0 75px;
}
@media (max-width: 767px) {
    .mission-section-area .tabs-auhtor-area .tab-pane .mission-content-area {
        padding: 0;
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mission-section-area .tabs-auhtor-area .tab-pane .mission-content-area {
        padding: 0;
        margin-top: 30px;
    }
}
.mission-section-area .tabs-auhtor-area .tab-pane .mission-content-area p {
    margin-bottom: 16px;
}
.mission-section-area .tabs-auhtor-area .tab-pane .mission-content-area .btn-area {
    margin-top: 32px;
}
.mission-section-area .tabs-auhtor-area .tab-pane.fade {
    top: 120px;
    position: relative;
    transition: auto;
    transition: all 0.6s;
    transform: rotateX(50px);
}
.mission-section-area .tabs-auhtor-area .tab-pane.fade.show {
    top: 0;
    transition: all 0.6s;
    transform: rotateX(0);
}

/*============= MISSION CSS AREA ENDS ===============*/
/*============= TEAM CSS AREA ===============*/
.team1-section-area .team-header-area {
    margin-bottom: 50px;
}
.team1-section-area .team-auhtor-boxarea {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 30px;
}
.team1-section-area .team-auhtor-boxarea:hover .images {
    transition: all 0.4s;
}
.team1-section-area .team-auhtor-boxarea:hover .images::after {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
}
.team1-section-area .team-auhtor-boxarea:hover .images img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.team1-section-area .team-auhtor-boxarea .team-social-area .icons a.plus {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 53px;
    display: inline-block;
    border-radius: 50%;
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
}
.team1-section-area .team-auhtor-boxarea .team-social-area .icons a.plus i {
    font-size: var(--ztc-font-size-font-s20);
    transition: all 0.4s;
}
.team1-section-area .team-auhtor-boxarea .team-social-area .icons:hover .plus i {
    transform: rotate(-45deg);
    transition: all 0.4s;
}
.team1-section-area .team-auhtor-boxarea .team-social-area .icons:hover ul {
    right: 20px;
    transition: all 0.6s;
}
.team1-section-area .team-auhtor-boxarea .team-social-area ul {
    position: absolute;
    top: 28%;
    right: -50px;
    transition: all 0.6s;
    z-index: 2;
}
.team1-section-area .team-auhtor-boxarea .team-social-area ul li a {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    display: inline-block;
    color: var(--ztc-text-text-3);
    margin: 0 0 8px 0;
}
.team1-section-area .team-auhtor-boxarea .team-social-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.team1-section-area .team-auhtor-boxarea .images {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 4px;
}
.team1-section-area .team-auhtor-boxarea .images::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
    opacity: 0.5;
}
.team1-section-area .team-auhtor-boxarea .images img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 0.4s;
}
.team1-section-area .team-auhtor-boxarea .content-area {
    margin-top: 24px;
}
.team1-section-area .team-auhtor-boxarea .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    display: inline-block;
    transition: all 0.4s;
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-bold);
}
.team1-section-area .team-auhtor-boxarea .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-4);
    font-weight: var(--ztc-weight-medium);
    margin-top: 16px;
}
.team1-section-area .pagination-area ul {
    text-align: center;
    justify-content: center;
    margin-top: 30px;
}
.team1-section-area .pagination-area ul li a {
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 4px !important;
    transition: all 0.4s;
    border: none;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s40);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    margin: 0 16px;
    box-shadow: none;
    background: var(--ztc-bg-bg-1);
}
.team1-section-area .pagination-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.team1-section-area .pagination-area ul li .page-link.active {
    background: var(--ztc-text-text-2) !important;
    color: var(--ztc-text-text-1);
}

.team2-section-area {
    position: relative;
    z-index: 1;
}
.team2-section-area .team-header {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .team2-section-area .team-header {
        margin-bottom: 30px;
    }
}
.team2-section-area .team-author-boxarea {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}
.team2-section-area .team-author-boxarea:hover .content {
    left: 0;
    transition: all 0.6s;
}
.team2-section-area .team-author-boxarea:hover .images::after {
    height: 100%;
    transition: all 0.4s;
}
.team2-section-area .team-author-boxarea:hover .images img {
    transform: scale(1.1);
    transition: all 0.6s;
}
.team2-section-area .team-author-boxarea .images {
    overflow: hidden;
    transition: all 0.4s;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}
.team2-section-area .team-author-boxarea .images::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-5);
    opacity: 0.5;
}
.team2-section-area .team-author-boxarea .images img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 0.6s;
}
.team2-section-area .team-author-boxarea .content {
    background: var(--ztc-text-text-1);
    border-radius: 0 4px 4px 0;
    transition: all 0.6s;
    position: absolute;
    bottom: 50px;
    left: -200px;
    z-index: 2;
    padding: 24px;
}
.team2-section-area .team-author-boxarea .content a {
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-5);
    transition: all 0.4s;
    font-family: var(--ztc-family-font1);
    display: inline-block;
    line-height: var(--ztc-font-size-font-s20);
}
.team2-section-area .team-author-boxarea .content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-6);
    margin-top: 10px;
    transition: all 0.4s;
}
.team2-section-area .team-author-boxarea .share-area:hover .icons a {
    color: var(--ztc-text-text-5);
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
}
.team2-section-area .team-author-boxarea .share-area:hover .list ul {
    right: 10px;
    transition: all 0.6s;
}
.team2-section-area .team-author-boxarea .share-area .icons a {
    font-size: var(--ztc-font-size-font-s32);
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    background: var(--ztc-text-text-5);
    color: var(--ztc-text-text-1);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border-radius: 0 4px 0 100px;
    display: inline-block;
    transition: all 0.4s;
}
.team2-section-area .team-author-boxarea .share-area .icons a i {
    position: absolute;
    top: 15px;
    left: 25px;
}
.team2-section-area .team-author-boxarea .share-area .list ul {
    position: absolute;
    top: 80px;
    right: -100px;
    z-index: 2;
    transition: all 0.6s;
}
.team2-section-area .team-author-boxarea .share-area .list ul li a {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
    background: var(--ztc-text-text-5);
    display: inline-block;
    margin-bottom: 8px;
}
.team2-section-area .team-author-boxarea .share-area .list ul li a:hover {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
    color: var(--ztc-text-text-5);
}

.team3-section-area .team-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .team3-section-area .team-header-area {
        margin-bottom: 30px;
    }
}
.team3-section-area .team-auhtor-boxes {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    transition: all 0.4s;
    margin-bottom: 30px;
}
.team3-section-area .team-auhtor-boxes:hover .img1::after {
    height: 100%;
    transition: all 0.6s;
}
.team3-section-area .team-auhtor-boxes:hover .img1 img {
    transform: scale(1.1);
    transition: all 0.4s;
}
.team3-section-area .team-auhtor-boxes:hover .content-area {
    height: 166px;
    transition: all 0.6s;
}
.team3-section-area .team-auhtor-boxes:hover .content-area ul {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    height: 66px;
}
.team3-section-area .team-auhtor-boxes .img1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 4px;
    transition: all 0.4s;
}
.team3-section-area .team-auhtor-boxes .img1::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-bg-bg-7);
    opacity: 0.7;
    transition: all 0.6s;
}
.team3-section-area .team-auhtor-boxes .img1 img {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
}
.team3-section-area .team-auhtor-boxes .content-area {
    text-align: center;
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    transition: all 0.6s;
    overflow: hidden;
    padding: 24px;
    position: absolute;
    z-index: 1;
    bottom: 24px;
    right: 24px;
    left: 24px;
    height: 102px;
}
.team3-section-area .team-auhtor-boxes .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    line-height: var(--ztc-font-size-font-s20);
    color: var(--ztc-text-text-7);
    font-weight: var(--ztc-weight-bold);
    transition: all 0.4s;
    display: inline-block;
    margin-bottom: 16px;
}
.team3-section-area .team-auhtor-boxes .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-8);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
}
.team3-section-area .team-auhtor-boxes .content-area ul {
    margin-top: 24px;
    visibility: hidden;
    opacity: 1;
    transition: all 0.4s;
    height: 0;
}
.team3-section-area .team-auhtor-boxes .content-area ul li {
    display: inline-block;
}
.team3-section-area .team-auhtor-boxes .content-area ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    transition: all 0.4s;
    color: var(--ztc-bg-bg-7);
    background: #FDF0E5;
    margin: 0 8px 0 0;
}
.team3-section-area .team-auhtor-boxes .content-area ul li a:hover {
    background: var(--ztc-bg-bg-7);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}

.team4-section-area .team-header-area {
    margin-bottom: 50px;
}
.team4-section-area .team-auhtor-boxarea {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 30px;
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea:hover .images {
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea:hover .images::after {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea:hover .images img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea:hover .content-area a {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea:hover .content-area p {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea:hover .icons ul {
    transition: all 0.6s;
    bottom: 20px;
}
.team4-section-area .team-auhtor-boxarea .team-social-area {
    text-align: center;
}
.team4-section-area .team-auhtor-boxarea .team-social-area ul {
    position: absolute;
    bottom: -100px;
    transition: all 0.6s;
    z-index: 2;
    text-align: center;
    left: 25%;
    right: 25%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team4-section-area .team-auhtor-boxarea .team-social-area ul {
        left: 22%;
        right: 22%;
    }
}
@media (max-width: 767px) {
    .team4-section-area .team-auhtor-boxarea .team-social-area ul {
        left: 20%;
        right: 20%;
    }
}
.team4-section-area .team-auhtor-boxarea .team-social-area ul li {
    display: inline-block;
}
.team4-section-area .team-auhtor-boxarea .team-social-area ul li a {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    display: inline-block;
    color: var(--ztc-bg-bg-11);
    margin: 0 0 8px 0;
}
.team4-section-area .team-auhtor-boxarea .team-social-area ul li a:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.team4-section-area .team-auhtor-boxarea .images {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}
.team4-section-area .team-auhtor-boxarea .images::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-11);
    opacity: 0.7;
}
.team4-section-area .team-auhtor-boxarea .images img {
    height: 100%;
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: all 0.4s;
}
.team4-section-area .team-auhtor-boxarea .content-area {
    padding: 24px;
    text-align: center;
}
.team4-section-area .team-auhtor-boxarea .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    display: inline-block;
    transition: all 0.4s;
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-10);
    font-weight: var(--ztc-weight-bold);
}
.team4-section-area .team-auhtor-boxarea .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-11);
    font-weight: var(--ztc-weight-medium);
    margin-top: 16px;
    transition: all 0.4s;
}

/*============= TEAM CSS AREA STARTS ===============*/
/*============= FAQ CSS AREA ===============*/
.faq1-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
}
.faq1-section-area .faq-header-area .btn-area {
    margin-top: 32px;
}
@media (max-width: 767px) {
    .faq1-section-area .faq-auhtoir-area1 {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq1-section-area .faq-auhtoir-area1 {
        margin-top: 30px;
    }
}
.faq1-section-area .faq-auhtoir-area1 .accordion .accordion-item {
    border: none;
    background: var(--ztc-text-text-2);
    border-radius: 6px;
}
.faq1-section-area .faq-auhtoir-area1 .accordion .accordion-item .accordion-button::after {
    filter: brightness(0);
    position: absolute;
    right: 16px;
}
.faq1-section-area .faq-auhtoir-area1 .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: none;
    color: var(--ztc-text-text-1);
}
.faq1-section-area .faq-auhtoir-area1 .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}
.faq1-section-area .faq-auhtoir-area1 .accordion .accordion-item .accordion-header button {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-3);
    display: inline-block;
    font-weight: var(--ztc-weight-bold);
    border: none;
    box-shadow: none;
    padding: 20px 16px 20px 16px;
}
@media (max-width: 767px) {
    .faq1-section-area .faq-auhtoir-area1 .accordion .accordion-item .accordion-header button {
        line-height: var(--ztc-font-size-font-s26);
    }
}
.faq1-section-area .faq-auhtoir-area1 .accordion .accordion-item .accordion-body {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s26);
    padding: 0 16px 16px 16px;
}

.faq2-section-area {
    position: relative;
    z-index: 1;
}
.faq2-section-area .faq-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .faq2-section-area .faq-header-area {
        margin-bottom: 30px;
    }
}
.faq2-section-area .faq-images img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
@media (max-width: 767px) {
    .faq2-section-area .faq-auhtor-area1 {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq2-section-area .faq-auhtor-area1 {
        margin-top: 30px;
    }
}
.faq2-section-area .faq-auhtor-area1 .accordion .accordion-item {
    border: none;
    border-radius: 6px;
    background: var(--ztc-text-text-5);
}
.faq2-section-area .faq-auhtor-area1 .accordion .accordion-item .accordion-button::after {
    filter: brightness(0);
    position: absolute;
    right: 16px;
}
.faq2-section-area .faq-auhtor-area1 .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: none;
    color: var(--ztc-text-text-1);
}
.faq2-section-area .faq-auhtor-area1 .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}
.faq2-section-area .faq-auhtor-area1 .accordion .accordion-item .accordion-header button {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-5);
    display: inline-block;
    font-weight: var(--ztc-weight-bold);

    border: none;
    box-shadow: none;
    padding: 20px 16px 20px 16px;
}
@media (max-width: 767px) {
    .faq2-section-area .faq-auhtor-area1 .accordion .accordion-item .accordion-header button {
        line-height: var(--ztc-font-size-font-s26);
    }
}
.faq2-section-area .faq-auhtor-area1 .accordion .accordion-item .accordion-body {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s26);
    padding: 0 16px 16px 16px;
}

.faq4-section-area {
    position: relative;
    z-index: 1;
}
.faq4-section-area .faq-header-area {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .faq4-section-area .faq-header-area {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq4-section-area .faq-header-area {
        margin-bottom: 30px;
    }
}
.faq4-section-area .faq-images img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 0.4s;
}
.faq4-section-area .faq-auhtoir-area2 {
    padding: 0 0 0 50px;
}
@media (max-width: 767px) {
    .faq4-section-area .faq-auhtoir-area2 {
        margin-top: 30px;
        padding: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq4-section-area .faq-auhtoir-area2 {
        margin-top: 30px;
        padding: 0;
    }
}
.faq4-section-area .faq-auhtoir-area2 .accordion .accordion-item {
    border: none;
    background: var(--ztc-bg-bg-11);
    border-radius: 6px;
}
.faq4-section-area .faq-auhtoir-area2 .accordion .accordion-item .accordion-button::after {
    filter: brightness(0);
    position: absolute;
    right: 16px;
}
.faq4-section-area .faq-auhtoir-area2 .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: none;
    color: var(--ztc-text-text-1);
}
.faq4-section-area .faq-auhtoir-area2 .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}
.faq4-section-area .faq-auhtoir-area2 .accordion .accordion-item .accordion-header button {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: var(--ztc-text-text-10);
    display: inline-block;
    font-weight: var(--ztc-weight-bold);

    border: none;
    box-shadow: none;
    padding: 20px 16px 20px 16px;
    background: var(--ztc-bg-bg-1);
}
@media (max-width: 767px) {
    .faq4-section-area .faq-auhtoir-area2 .accordion .accordion-item .accordion-header button {
        line-height: var(--ztc-font-size-font-s26);
    }
}
.faq4-section-area .faq-auhtoir-area2 .accordion .accordion-item .accordion-body {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s26);
    padding: 10px 36px 36px 36px;
}

.faq1-section-area.faq-inner {
    background: var(--ztc-text-text-1) !important;
}
.faq1-section-area.faq-inner .faq-auhtoir-area1 button {
    background: var(--ztc-bg-bg-1);
}

/*============= FAQ CSS AREA ===============*/
/*============= CONTACT CSS AREA ===============*/
.contact1-section-area {
    position: relative;
    z-index: 1;
}
.contact1-section-area::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-text-text-3);
    opacity: 0.7;
    z-index: -1;
}
.contact1-section-area .contact-header-area {
    padding: 0 70px 0 0;
}
@media (max-width: 767px) {
    .contact1-section-area .contact-header-area {
        padding: 0;
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact1-section-area .contact-header-area {
        padding: 0;
        margin-bottom: 30px;
    }
}
.contact1-section-area .contact-header-area h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 8px 12px;

    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.contact1-section-area .contact-header-area h5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    opacity: 10%;
    z-index: -1;
}
.contact1-section-area .contact-header-area h2 {
    color: var(--ztc-text-text-1);
}
.contact1-section-area .contact-header-area p {
    color: var(--ztc-text-text-1);
    opacity: 80%;
}
.contact1-section-area .contact-header-area .contact-auhtor-side .icons-text {
    display: flex;
    align-items: center;
}
.contact1-section-area .contact-header-area .contact-auhtor-side .icons-text .icons {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 4px;
    display: inline-block;
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
}
.contact1-section-area .contact-header-area .contact-auhtor-side .icons-text .text {
    padding-left: 16px;
}
.contact1-section-area .contact-header-area .contact-auhtor-side .icons-text .text p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    line-height: 20px;
    color: var(--ztc-text-text-1);
}
.contact1-section-area .contact-header-area .contact-auhtor-side .icons-text .text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    display: inline-block;
    transition: all 0.4s;
}
.contact1-section-area .contact-header-area .contact-auhtor-side .icons-text .text a:hover {
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
}
.contact1-section-area .contact-submit-boxarea {
    padding: 32px 40px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.contact1-section-area .contact-submit-boxarea h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s32);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 12px;

}
.contact1-section-area .contact-submit-boxarea .input-area {
    margin-top: 20px;
}
.contact1-section-area .contact-submit-boxarea .input-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    margin-bottom: 12px;
}
.contact1-section-area .contact-submit-boxarea .input-area input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 48px;
}
.contact1-section-area .contact-submit-boxarea .input-area input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact1-section-area .contact-submit-boxarea .input-area input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact1-section-area .contact-submit-boxarea .input-area textarea {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 150px;
}
.contact1-section-area .contact-submit-boxarea .input-area textarea::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact1-section-area .contact-submit-boxarea .input-area textarea::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact1-section-area .contact-submit-boxarea .input-area1 {
    margin-top: 20px;
    display: flex;
}
.contact1-section-area .contact-submit-boxarea .input-area1 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    padding-left: 8px;
}
.contact1-section-area .contact-submit-boxarea .input-area1 input[type=checkbox] {
    height: 16px;
    width: 16px;
    border: 1px solid #9EA4A9;
    border-radius: 5px;
    background: none;
    accent-color: var(--ztc-text-text-2);
}
.contact1-section-area .contact-submit-boxarea .input-area1 button {
    border: none;
    outline: none;
    margin-top: 12px;
}

.contact2-section-area {
    position: relative;
    z-index: 1;
}
.contact2-section-area::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-text-text-5);
    opacity: 0.8;
    z-index: -1;
}
.contact2-section-area .contact-header-area {
    padding: 0 70px 0 0;
}
@media (max-width: 767px) {
    .contact2-section-area .contact-header-area {
        padding: 0;
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact2-section-area .contact-header-area {
        padding: 0;
        margin-bottom: 30px;
    }
}
.contact2-section-area .contact-header-area h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 8px 12px;

    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.contact2-section-area .contact-header-area h5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    opacity: 10%;
    z-index: -1;
}
.contact2-section-area .contact-header-area h2 {
    color: var(--ztc-text-text-1);
}
.contact2-section-area .contact-header-area p {
    color: var(--ztc-text-text-1);
    opacity: 0.8;
}
.contact2-section-area .contact-header-area .contact-auhtor-side .icons-text {
    display: flex;
    align-items: center;
}
.contact2-section-area .contact-header-area .contact-auhtor-side .icons-text .icons {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 4px;
    display: inline-block;
    color: var(--ztc-text-text-5);
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
}
.contact2-section-area .contact-header-area .contact-auhtor-side .icons-text .text {
    padding-left: 16px;
}
.contact2-section-area .contact-header-area .contact-auhtor-side .icons-text .text p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    line-height: 20px;
    color: var(--ztc-text-text-1);
}
.contact2-section-area .contact-header-area .contact-auhtor-side .icons-text .text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    display: inline-block;
    transition: all 0.4s;
}
.contact2-section-area .contact-header-area .contact-auhtor-side .icons-text .text a:hover {
    color: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.contact2-section-area .contact-submit-boxarea {
    padding: 32px 40px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.contact2-section-area .contact-submit-boxarea h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s32);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 12px;

}
.contact2-section-area .contact-submit-boxarea .input-area {
    margin-top: 20px;
}
.contact2-section-area .contact-submit-boxarea .input-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    margin-bottom: 12px;
}
.contact2-section-area .contact-submit-boxarea .input-area input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 48px;
}
.contact2-section-area .contact-submit-boxarea .input-area input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact2-section-area .contact-submit-boxarea .input-area input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact2-section-area .contact-submit-boxarea .input-area textarea {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 150px;
}
.contact2-section-area .contact-submit-boxarea .input-area textarea::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact2-section-area .contact-submit-boxarea .input-area textarea::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact2-section-area .contact-submit-boxarea .input-area1 {
    margin-top: 20px;
    display: flex;
}
.contact2-section-area .contact-submit-boxarea .input-area1 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    padding-left: 8px;
}
.contact2-section-area .contact-submit-boxarea .input-area1 input[type=checkbox] {
    height: 16px;
    width: 16px;
    border: 1px solid #9EA4A9;
    border-radius: 5px;
    background: none;
    accent-color: var(--ztc-bg-bg-3);
}
.contact2-section-area .contact-submit-boxarea .input-area1 button {
    border: none;
    outline: none;
    margin-top: 12px;
}

.contact3-section-area {
    position: relative;
    z-index: 1;
}
.contact3-section-area::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-text-text-7);
    opacity: 0.8;
    z-index: -1;
}
.contact3-section-area .contact-header-area {
    padding: 0 70px 0 0;
}
@media (max-width: 767px) {
    .contact3-section-area .contact-header-area {
        padding: 0;
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact3-section-area .contact-header-area {
        padding: 0;
        margin-bottom: 30px;
    }
}
.contact3-section-area .contact-header-area h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 8px 12px;

    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.contact3-section-area .contact-header-area h5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    opacity: 10%;
    z-index: -1;
}
.contact3-section-area .contact-header-area h2 {
    color: var(--ztc-text-text-1);
}
.contact3-section-area .contact-header-area p {
    color: var(--ztc-text-text-1);
    opacity: 0.8;
}
.contact3-section-area .contact-header-area .contact-auhtor-side .icons-text {
    display: flex;
    align-items: center;
}
.contact3-section-area .contact-header-area .contact-auhtor-side .icons-text .icons {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 4px;
    display: inline-block;
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    background: var(--ztc-bg-bg-7);
}
.contact3-section-area .contact-header-area .contact-auhtor-side .icons-text .text {
    padding-left: 16px;
}
.contact3-section-area .contact-header-area .contact-auhtor-side .icons-text .text p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    line-height: 20px;
    color: var(--ztc-text-text-1);
}
.contact3-section-area .contact-header-area .contact-auhtor-side .icons-text .text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    display: inline-block;
    transition: all 0.4s;
    margin-top: 12px;
}
.contact3-section-area .contact-header-area .contact-auhtor-side .icons-text .text a:hover {
    color: var(--ztc-bg-bg-7);
    transition: all 0.4s;
}
.contact3-section-area .contact-submit-boxarea {
    padding: 32px 40px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.contact3-section-area .contact-submit-boxarea h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s32);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 12px;

}
.contact3-section-area .contact-submit-boxarea .input-area {
    margin-top: 20px;
}
.contact3-section-area .contact-submit-boxarea .input-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    margin-bottom: 12px;
}
.contact3-section-area .contact-submit-boxarea .input-area input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 48px;
}
.contact3-section-area .contact-submit-boxarea .input-area input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact3-section-area .contact-submit-boxarea .input-area input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact3-section-area .contact-submit-boxarea .input-area textarea {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 150px;
}
.contact3-section-area .contact-submit-boxarea .input-area textarea::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact3-section-area .contact-submit-boxarea .input-area textarea::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-5);
    opacity: 50%;
}
.contact3-section-area .contact-submit-boxarea .input-area1 {
    margin-top: 20px;
    display: flex;
}
.contact3-section-area .contact-submit-boxarea .input-area1 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    padding-left: 8px;
}
.contact3-section-area .contact-submit-boxarea .input-area1 input[type=checkbox] {
    height: 16px;
    width: 16px;
    border: 1px solid #9EA4A9;
    border-radius: 5px;
    background: none;
    accent-color: var(--ztc-bg-bg-7);
}
.contact3-section-area .contact-submit-boxarea .input-area1 button {
    border: none;
    outline: none;
    margin-top: 12px;
}

.contact4-section-area {
    position: relative;
    z-index: 1;
}
.contact4-section-area::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-text-text-10);
    opacity: 0.4;
    z-index: -1;
}
.contact4-section-area .contact-submit-boxarea {
    padding: 32px 40px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.contact4-section-area .contact-submit-boxarea h4 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    line-height: var(--ztc-font-size-font-s32);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 12px;

}
.contact4-section-area .contact-submit-boxarea .input-area {
    margin-top: 20px;
}
.contact4-section-area .contact-submit-boxarea .input-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    margin-bottom: 12px;
}
.contact4-section-area .contact-submit-boxarea .input-area input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 48px;
}
.contact4-section-area .contact-submit-boxarea .input-area input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-10);
    opacity: 50%;
}
.contact4-section-area .contact-submit-boxarea .input-area input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-10);
    opacity: 50%;
}
.contact4-section-area .contact-submit-boxarea .input-area textarea {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-3);
    width: 100%;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    padding: 16px;
    height: 150px;
}
.contact4-section-area .contact-submit-boxarea .input-area textarea::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-10);
    opacity: 50%;
}
.contact4-section-area .contact-submit-boxarea .input-area textarea::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-10);
    opacity: 50%;
}
.contact4-section-area .contact-submit-boxarea .input-area1 {
    margin-top: 20px;
    display: flex;
}
.contact4-section-area .contact-submit-boxarea .input-area1 p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-weight: var(--ztc-weight-medium);

    padding-left: 8px;
}
.contact4-section-area .contact-submit-boxarea .input-area1 input[type=checkbox] {
    height: 16px;
    width: 16px;
    border: 1px solid var(--ztc-bg-bg-11);
    border-radius: 5px;
    background: none;
    accent-color: var(--ztc-bg-bg-11);
}
.contact4-section-area .contact-submit-boxarea .input-area1 button {
    border: none;
    outline: none;
    margin-top: 12px;
}

.contact1-section-area.contact-inner {
    background: var(--ztc-text-text-1);
}
.contact1-section-area.contact-inner::after {
    display: none;
}
.contact1-section-area.contact-inner .contact-header-area h2 {
    color: var(--ztc-text-text-3);
}
.contact1-section-area.contact-inner .contact-header-area h5 {
    background: var(--ztc-bg-bg-2);
    color: var(--ztc-text-text-2);
}
.contact1-section-area.contact-inner .contact-header-area p {
    color: var(--ztc-text-text-4);
}
.contact1-section-area.contact-inner .contact-header-area .contact-auhtor-side .icons-text .text p {
    color: var(--ztc-text-text-3);
}
.contact1-section-area.contact-inner .contact-header-area .contact-auhtor-side .icons-text .text a {
    color: var(--ztc-text-text-3);
}
.contact1-section-area.contact-inner .contact-submit-boxarea {
    background: var(--ztc-bg-bg-1);
}
.contact1-section-area.contact-inner .contact-submit-boxarea h4 {
    color: var(--ztc-text-text-3);
}
.contact1-section-area.contact-inner .contact-submit-boxarea .input-area p {
    color: var(--ztc-text-text-3);
    opacity: 80%;
}
.contact1-section-area.contact-inner .contact-submit-boxarea .input-area input::-moz-placeholder {
    color: var(--ztc-text-text-4);
    opacity: 1;
}
.contact1-section-area.contact-inner .contact-submit-boxarea .input-area input::placeholder {
    color: var(--ztc-text-text-4);
    opacity: 1;
}
.contact1-section-area.contact-inner .contact-submit-boxarea .input-area textarea::-moz-placeholder {
    color: var(--ztc-text-text-4);
    opacity: 1;
}
.contact1-section-area.contact-inner .contact-submit-boxarea .input-area textarea::placeholder {
    color: var(--ztc-text-text-4);
    opacity: 1;
}
.contact1-section-area.contact-inner .contact-submit-boxarea .input-area1 p {
    color: var(--ztc-text-text-3);
    opacity: 80%;
}

.mapouter .gmap_canvas iframe {
    width: 100%;
    height: 565px;
}

/*============= CONTACT CSS AREA ENDS===============*/
/*============= CTA CSS AREA ===============*/
.cta1-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-2);
    overflow: hidden;
}
.cta1-section-area .cta-header h2 {
    color: var(--ztc-text-text-1);
}
.cta1-section-area .cta-header p {
    color: var(--ztc-text-text-1);
    opacity: 80%;
}
.cta1-section-area .cta-header form {
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 20px;
    position: relative;
    height: 56px;
    margin-top: 32px;
    display: inline-block;
    width: 385px;
}
@media (max-width: 767px) {
    .cta1-section-area .cta-header form {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta1-section-area .cta-header form {
        width: 100%;
    }
}
.cta1-section-area .cta-header form input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-medium);
    width: 100%;
    outline: none;
}
.cta1-section-area .cta-header form input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.cta1-section-area .cta-header form input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.cta1-section-area .cta-header form button {
    border: none;
    transition: all 0.4s;
    position: absolute;
    right: 4px;
    top: 4px;
}
.cta1-section-area .cta-images .img1 {
    position: absolute;
    text-align: right;
    bottom: 0;
    z-index: 1;
}
@media (max-width: 767px) {
    .cta1-section-area .cta-images .img1 {
        position: relative;
        top: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta1-section-area .cta-images .img1 {
        position: relative;
        top: 50px;
    }
}
.cta1-section-area .cta-images .img1::after {
    position: absolute;
    content: "";
    height: 470px;
    width: 470px;
    left: 10%;
    transition: all 0.4s;
    z-index: -1;
    background: #CC2431;
    border-radius: 50%;
    bottom: -215px;
    animation-name: animation-5;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@media (max-width: 767px) {
    .cta1-section-area .cta-images .img1::after {
        display: none;
    }
}
.cta1-section-area .cta-images .img1 img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.cta4-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-11);
    overflow: hidden;
}
.cta4-section-area .cta-header h2 {
    color: var(--ztc-text-text-1);
}
.cta4-section-area .cta-header p {
    color: var(--ztc-text-text-1);
    opacity: 80%;
}
.cta4-section-area .cta-header form {
    background: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 20px;
    position: relative;
    height: 56px;
    margin-top: 32px;
    display: inline-block;
    width: 385px;
}
@media (max-width: 767px) {
    .cta4-section-area .cta-header form {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta4-section-area .cta-header form {
        width: 100%;
    }
}
.cta4-section-area .cta-header form input {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-medium);
    width: 100%;
    outline: none;
}
.cta4-section-area .cta-header form input::-moz-placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.cta4-section-area .cta-header form input::placeholder {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.cta4-section-area .cta-header form button {
    border: none;
    transition: all 0.4s;
    position: absolute;
    right: 4px;
    top: 4px;
}
.cta4-section-area .cta-images .img1 {
    position: absolute;
    text-align: right;
    bottom: 0;
    z-index: 1;
}
@media (max-width: 767px) {
    .cta4-section-area .cta-images .img1 {
        position: relative;
        top: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta4-section-area .cta-images .img1 {
        position: relative;
        top: 50px;
    }
}
.cta4-section-area .cta-images .img1::after {
    position: absolute;
    content: "";
    height: 470px;
    width: 470px;
    left: 10%;
    transition: all 0.4s;
    z-index: -1;
    background: #1F59B2;
    border-radius: 50%;
    bottom: -215px;
    animation-name: animation-5;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@media (max-width: 767px) {
    .cta4-section-area .cta-images .img1::after {
        display: none;
    }
}
.cta4-section-area .cta-images .img1 img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/*============= CTA CSS AREA ENDS===============*/
/*============= TESTIMONIAL CSS AREA ===============*/
.testimonial1-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-3);
}
.testimonial1-section-area .testimonial-header h5 {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    border-radius: 4px;
    padding: 8px 12px;

    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.testimonial1-section-area .testimonial-header h5::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    opacity: 10%;
    z-index: -1;
}
.testimonial1-section-area .testimonial-header h2 {
    color: var(--ztc-text-text-1);
}
.testimonial1-section-area .testimonial-header p {
    color: var(--ztc-text-text-1);
    opacity: 80%;
}
.testimonial1-section-area .testimonial-header .btn-area {
    margin-top: 22px;
}
.testimonial1-section-area .testimonial-vertical-slider {
    padding: 0 0 0 50px;
}
@media (max-width: 767px) {
    .testimonial1-section-area .testimonial-vertical-slider {
        padding: 0;
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial1-section-area .testimonial-vertical-slider {
        padding: 0;
        margin-top: 30px;
    }
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area {
    position: relative;
    z-index: 1;
    padding: 32px;
    border-radius: 4px;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-text-text-1);
    opacity: 5%;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area .quito1 {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area ul {
    margin-bottom: 24px;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area ul li {
    display: inline-block;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area ul li a {
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    transition: all 0.4s;
    display: inline-block;
    color: var(--ztc-text-text-9);
    background: #201F1F;
    margin: 0 4px 0 0;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s40);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    font-style: italic;
}
@media (max-width: 767px) {
    .testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial3-author-area p {
        font-size: var(--ztc-font-size-font-s20);
        line-height: var(--ztc-font-size-font-s34);
    }
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial1-man-info-area {
    display: flex;
    align-items: center;
    margin-top: 32px;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial1-man-info-area .mans-img img {
    height: 90px;
    width: 90px;
    border-radius: 50%;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial1-man-info-area .man-text {
    padding-left: 16px;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial1-man-info-area .man-text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
    display: inline-block;
    transition: all 0.4s;
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .testimonial3-slider-content-area .testimonial1-man-info-area .man-text p {
    font-size: var(--ztc-font-size-font-s18);
    font-family: var(--ztc-family-font1);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    opacity: 80%;
    line-height: var(--ztc-font-size-font-s18);
    margin-top: 12px;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .slider-galeria-thumbs .testimonial1-sliders-img {
    margin-bottom: 15px;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .slider-galeria-thumbs .testimonial1-sliders-img img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}
.testimonial1-section-area .testimonial-vertical-slider .slider-galeria .slider-galeria-thumbs .slick-list.draggable {
    height: 330px;
}
.testimonial1-section-area .testimonial-vertical-slider .testimonial1-sliders-img.slick-slide img {
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    left: 10px;
    top: 5px;
}
.testimonial1-section-area .testimonial-vertical-slider .testimonial1-sliders-img.slick-slide.slick-current.slick-active {
    position: relative;
}
.testimonial1-section-area .testimonial-vertical-slider .testimonial1-sliders-img.slick-slide.slick-current.slick-active::after {
    position: absolute;
    content: "";
    height: 70px;
    width: 70px;
    border-radius: 50%;
    left: 5px;
    top: 0px;
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
    z-index: -1;
}

.testimonial2-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
}
@media (max-width: 767px) {
    .testimonial2-section-area .testimonial-header {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial2-section-area .testimonial-header {
        margin-bottom: 30px;
    }
}
.testimonial2-section-area .testimonial-header .btn-area .header-btn3 {
    margin-top: 24px;
}
.testimonial2-section-area .testimonial-sliders {
    position: relative;
}
@media (max-width: 767px) {
    .testimonial2-section-area .testimonial-sliders .testimonial-content-slider .testimonial-slider-boxarea {
        margin-top: 30px;
    }
}
.testimonial2-section-area .testimonial-sliders .testimonial-content-slider .testimonial-slider-boxarea ul {
    margin-bottom: 24px;
}
.testimonial2-section-area .testimonial-sliders .testimonial-content-slider .testimonial-slider-boxarea ul li {
    display: inline-block;
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    background: var(--ztc-text-text-1);
    color: #EC811C;
    font-size: var(--ztc-font-size-font-s16);
}
.testimonial2-section-area .testimonial-sliders .testimonial-content-slider .testimonial-slider-boxarea .testimonial5-all-content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s32);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-6);
}
.testimonial2-section-area .testimonial-sliders .testimonial-content-slider .testimonial-slider-boxarea .content {
    margin-top: 40px;
}
.testimonial2-section-area .testimonial-sliders .testimonial-content-slider .testimonial-slider-boxarea .content a {
    font-size: var(--ztc-font-size-font-s24);
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-3);
    display: inline-block;
    font-weight: var(--ztc-weight-bold);
    margin-bottom: 10px;
}
.testimonial2-section-area .testimonial-sliders .testimonial-content-slider .testimonial-slider-boxarea .content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-6);
    font-weight: var(--ztc-weight-medium);
}
.testimonial2-section-area .testimonial-sliders .testimonial-arrows {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 20px;
}
.testimonial2-section-area .testimonial-sliders .testimonial-arrows button {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 4px;
    transition: all 0.4s;
    color: var(--ztc-text-text-3);
    background: var(--ztc-text-text-1);
    outline: none;
    border: none;
    margin: 0 16px 0 0;
}
.testimonial2-section-area .testimonial-sliders .testimonial-arrows button:hover {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}

.testimonial3-section-area {
    position: relative;
    z-index: 1;
}
.testimonial3-section-area .testimonial3-header {
    text-align: center;
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .testimonial3-section-area .testimonial3-header {
        margin-bottom: 30px;
    }
}
.testimonial3-section-area .testimonial-slider-area .testimonial-boxes {
    text-align: center;
    background: var(--ztc-text-text-1);
    position: relative;
    z-index: 1;
    transition: all 0.4s;
    padding: 32px 45px 32px 45px;
    border-radius: 4px;
}
.testimonial3-section-area .testimonial-slider-area .testimonial-boxes .img1 img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0 auto;
}
.testimonial3-section-area .testimonial-slider-area .testimonial-boxes ul {
    margin-top: 32px;
    margin-bottom: 16px;
}
.testimonial3-section-area .testimonial-slider-area .testimonial-boxes ul li {
    display: inline-block;
    color: var(--ztc-text-text-9);
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 32px;
    transition: all 0.4s;
    background: #FEF3EB;
    border-radius: 4px;
}
.testimonial3-section-area .testimonial-slider-area .testimonial-boxes p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    color: var(--ztc-text-text-8);
    font-weight: var(--ztc-weight-medium);
    transition: all 0.4s;
}
.testimonial3-section-area .testimonial-slider-area .testimonial-boxes a {
    display: inline-block;
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-7);
    transition: all 0.4s;
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s20);
    font-size: var(--ztc-font-size-font-s20);
    margin-top: 28px;
    margin-bottom: 10px;
}
.testimonial3-section-area .testimonial-slider-area .owl-dots {
    text-align: center;
    margin-top: 30px;
}
.testimonial3-section-area .testimonial-slider-area .owl-dots button {
    height: 12px;
    width: 12px;
    display: inline-block;
    border-radius: 50%;
    background: var(--ztc-bg-bg-8);
    margin: 0 6px;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}
.testimonial3-section-area .testimonial-slider-area .owl-dots button::after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    display: inline-block;
    border: 1px solid var(--ztc-bg-bg-7);
    top: -4px;
    left: -4px;
    transition: all 0.4s;
    border-radius: 50%;
    visibility: hidden;
    opacity: 0;
}
.testimonial3-section-area .testimonial-slider-area .owl-dots button.active {
    background: var(--ztc-bg-bg-7);
    transition: all 0.4s;
}
.testimonial3-section-area .testimonial-slider-area .owl-dots button.active::after {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
}

.testimonial4-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
}
.testimonial4-section-area .testimonial-header .btn-area {
    margin-top: 32px;
}
@media (max-width: 767px) {
    .testimonial4-section-area .testimonial-header {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial4-section-area .testimonial-header {
        margin-bottom: 30px;
    }
}
.testimonial4-section-area .testimonial-slider-boxarea4 .owl-nav {
    position: relative;
    text-align: center;
    margin-top: 30px;
}
@media (max-width: 767px) {
    .testimonial4-section-area .testimonial-slider-boxarea4 .owl-nav {
        position: relative;
        left: 0;
        bottom: 0;
        text-align: start;
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial4-section-area .testimonial-slider-boxarea4 .owl-nav {
        position: relative;
        left: 0;
        bottom: 0;
        text-align: center;
        margin-top: 30px;
    }
}
.testimonial4-section-area .testimonial-slider-boxarea4 .owl-nav button {
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    border-radius: 4px;
    transition: all 0.4s;
    color: var(--ztc-bg-bg-11);
    background: #C3D2E7;
    font-size: var(--ztc-font-size-font-s16);
    margin: 0 8px 0 0;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .owl-nav button:hover {
    background: var(--ztc-bg-bg-11);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider {
    background: var(--ztc-text-text-1);
    position: relative;
    border-radius: 4px;
    padding: 32px;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider ul {
    margin-bottom: 24px;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider ul li {
    display: inline-block;
    height: 34px;
    width: 34px;
    text-align: center;
    line-height: 34px;
    border-radius: 4px;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-1);
    color: #EC811C;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-11);
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider .auhtor-images {
    display: flex;
    align-items: center;
    margin-top: 32px;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider .auhtor-images .img1 img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider .auhtor-images .text {
    margin-left: 16px;
}
.testimonial4-section-area .testimonial-slider-boxarea4 .tesimonial-slider .auhtor-images .text a {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-10);
    line-height: var(--ztc-font-size-font-s20);
    transition: all 0.4s;
    font-family: var(--ztc-family-font1);
    margin-bottom: 10px;
}

.testimonials-inner-section-area {
    position: relative;
    z-index: 1;
}
.testimonials-inner-section-area .testimonial-inner-boxarea {
    text-align: center;
    position: relative;
    border-radius: 4px;
    padding: 32px 44px;
    background: var(--ztc-bg-bg-1);
    transition: all 0.4s;
    margin-bottom: 30px;
    border: 1px solid var(--ztc-bg-bg-1);
}
.testimonials-inner-section-area .testimonial-inner-boxarea:hover {
    border: 1px solid var(--ztc-text-text-2);
    transition: all 0.4s;
    transform: translateY(-5px);
}
@media (max-width: 767px) {
    .testimonials-inner-section-area .testimonial-inner-boxarea {
        padding: 32px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonials-inner-section-area .testimonial-inner-boxarea {
        padding: 32px;
    }
}
.testimonials-inner-section-area .testimonial-inner-boxarea .img1 img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
}
.testimonials-inner-section-area .testimonial-inner-boxarea .content-area ul {
    margin-top: 32px;
    margin-bottom: 16px;
}
.testimonials-inner-section-area .testimonial-inner-boxarea .content-area ul li {
    display: inline-block;
    height: 32px;
    width: 32px;
    border-radius: 4px;
    transition: all 0.4s;
    text-align: center;
    background: #F3E9E3;
    line-height: 32px;
    color: var(--ztc-bg-bg-7);
}
.testimonials-inner-section-area .testimonial-inner-boxarea .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s26);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-4);
}
.testimonials-inner-section-area .testimonial-inner-boxarea .content-area .text {
    margin-top: 30px;
}
.testimonials-inner-section-area .testimonial-inner-boxarea .content-area .text a {
    display: inline-block;
    font-size: var(--ztc-font-size-font-s20);
    line-height: var(--ztc-font-size-font-s20);
    color: var(--ztc-text-text-3);
    font-weight: var(--ztc-weight-bold);
    transition: all 0.4s;
    font-family: var(--ztc-family-font1);
}
.testimonials-inner-section-area .pagination-area ul {
    text-align: center;
    justify-content: center;
    margin-top: 30px;
}
.testimonials-inner-section-area .pagination-area ul li a {
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 4px !important;
    transition: all 0.4s;
    border: none;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s40);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    margin: 0 16px;
    box-shadow: none;
    background: var(--ztc-bg-bg-1);
}
.testimonials-inner-section-area .pagination-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.testimonials-inner-section-area .pagination-area ul li .page-link.active {
    background: var(--ztc-text-text-2) !important;
    color: var(--ztc-text-text-1);
}

/*============= TESTIMONIAL CSS AREA ENDS ===============*/
/*============= CASE STUDY CSS AREA ENDS ===============*/
.casestudy-section-area .casestudy-header {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .casestudy-section-area .casestudy-header {
        margin-bottom: 30px;
    }
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea {
    position: relative;
    z-index: 1;
    transition: all 0.4s;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea:hover .imges::after {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea:hover .imges img {
    transform: scale(1.1) rotate(4deg);
    transition: all 0.4s;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea:hover .case-content .icons a {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea .imges {
    overflow: hidden;
    position: relative;
    transition: all 0.4s;
    border-radius: 4px;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea .imges::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
    opacity: 0.7;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea .imges img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    transition: all 0.4s;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea .case-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ztc-text-text-1);
    padding: 20px 24px;
    border-radius: 4px;
    position: relative;
    bottom: 0;
    margin: -120px 16px 16px 16px;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea .case-content .text p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-6);
    font-weight: var(--ztc-weight-medium);
    margin-bottom: 14px;
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea .case-content .text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-5);
    display: inline-block;
    font-weight: var(--ztc-weight-bold);
}
@media (max-width: 767px) {
    .casestudy-section-area .casestudy-slider-area .case-author-boxarea .case-content .text a {
        font-size: var(--ztc-font-size-font-s20);
        line-height: 20px;
    }
}
.casestudy-section-area .casestudy-slider-area .case-author-boxarea .case-content .icons a {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    transition: all 0.4s;
    border-radius: 50%;
    background: #b10100;
    color: var(--ztc-text-text-1);
    transform: rotate(-45deg);
    display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .casestudy-section-area .casestudy-slider-area .owl-nav {
        text-align: center;
        margin-top: 30px;
    }
}
@media (max-width: 767px) {
    .casestudy-section-area .casestudy-slider-area .owl-nav {
        text-align: center;
        margin-top: 30px;
    }
}
.casestudy-section-area .casestudy-slider-area .owl-nav button {
    height: 60px;
    width: 60px;
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    transition: all 0.4s;
    background: #FFEFC5;
    color: var(--ztc-text-text-5);
}
.casestudy-section-area .casestudy-slider-area .owl-nav button:hover {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}
.casestudy-section-area .casestudy-slider-area .owl-nav .owl-prev {
    position: absolute;
    left: -82px;
    top: 41%;
    bottom: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .casestudy-section-area .casestudy-slider-area .owl-nav .owl-prev {
        position: relative;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        margin: 0 10px 0 0;
    }
}
@media (max-width: 767px) {
    .casestudy-section-area .casestudy-slider-area .owl-nav .owl-prev {
        position: relative;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        margin: 0 10px 0 0;
    }
}
.casestudy-section-area .casestudy-slider-area .owl-nav .owl-next {
    position: absolute;
    right: -82px;
    top: 41%;
    bottom: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .casestudy-section-area .casestudy-slider-area .owl-nav .owl-next {
        position: relative;
        right: 0;
        top: 0;
        bottom: 0;
    }
}
@media (max-width: 767px) {
    .casestudy-section-area .casestudy-slider-area .owl-nav .owl-next {
        position: relative;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

.casestudy2-section-area .casestudy-header {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .casestudy2-section-area .casestudy-header {
        margin-bottom: 30px;
    }
}
.casestudy2-section-area .case-auhtor-boxarea {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 4px;
    transition: all 0.4s;
    margin-bottom: 30px;
}
.casestudy2-section-area .case-auhtor-boxarea:hover .img1 img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.casestudy2-section-area .case-auhtor-boxarea:hover .case-bg {
    transition: all 0.6s;
    bottom: 0;
}
.casestudy2-section-area .case-auhtor-boxarea .img1 {
    overflow: hidden;
    border-radius: 4px;
    transition: all 0.4s;
    position: relative;
}
.casestudy2-section-area .case-auhtor-boxarea .img1 img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    transition: all 0.4s;
}
.casestudy2-section-area .case-auhtor-boxarea .case-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -300px;
    z-index: 1;
    transition: all 0.6s;
}
.casestudy2-section-area .case-auhtor-boxarea .case-bg img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}
.casestudy2-section-area .case-auhtor-boxarea .content {
    position: absolute;
    bottom: 38px;
    z-index: 2;
    left: 24px;
}
.casestudy2-section-area .case-auhtor-boxarea .content span {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    text-align: center;
    display: inline-block;
    color: var(--ztc-text-text-1);
    border-radius: 50%;
    transform: rotate(-45deg);
    transition: all 0.4s;
    background: var(--ztc-bg-bg-7);
}
.casestudy2-section-area .case-auhtor-boxarea .content p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    font-weight: var(--ztc-weight-medium);
    margin-top: 24px;
    margin-bottom: 16px;
}
.casestudy2-section-area .case-auhtor-boxarea .content a {
    display: inline-block;
    transition: all 0.4s;
    font-size: var(--ztc-font-size-font-s22);
    line-height: var(--ztc-font-size-font-s22);
    color: var(--ztc-text-text-1);
    font-weight: var(--ztc-weight-bold);
    font-family: var(--ztc-bg-bg-7);
}

.casestudy4-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-10);
}
.casestudy4-section-area .case-header {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .casestudy4-section-area .case-header {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .casestudy4-section-area .case-header {
        margin-bottom: 30px;
    }
}
.casestudy4-section-area .case-boxes-area {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    transition: all 0.4s;
    margin-bottom: 30px;
}
.casestudy4-section-area .case-boxes-area:hover .img1::after {
    height: 100%;
    transition: all 0.4s;
}
.casestudy4-section-area .case-boxes-area:hover .img1 img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}
.casestudy4-section-area .case-boxes-area:hover .content-area::after {
    height: 102%;
    transition: all 0.4s;
}
.casestudy4-section-area .case-boxes-area:hover .content-area .icons {
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: rotateY(-180deg);
}
.casestudy4-section-area .case-boxes-area:hover .content-area .icons img {
    filter: none;
    transition: all 0.4s;
}
.casestudy4-section-area .case-boxes-area:hover .content-area a {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.casestudy4-section-area .case-boxes-area:hover .content-area a.readmore {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}
.casestudy4-section-area .case-boxes-area:hover .content-area p {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    opacity: 80%;
}
.casestudy4-section-area .case-boxes-area .img1 {
    overflow: hidden;
    position: relative;
    transition: all 0.4s;
    border-radius: 4px;
}
.casestudy4-section-area .case-boxes-area .img1::after {
    position: absolute;
    content: "";
    height: 0px;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-11);
    opacity: 0.7;
    border-radius: 4px;
}
.casestudy4-section-area .case-boxes-area .img1 img {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    border-radius: 4px;
}
.casestudy4-section-area .case-boxes-area .content-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-1);
    transition: all 0.4s;
    text-align: center;
    padding: 72px 32px 32px 32px;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    margin: -130px 24px 0 24px;
}
.casestudy4-section-area .case-boxes-area .content-area::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    bottom: -1px;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-11);
    border-radius: 4px;
    z-index: -1;
}
.casestudy4-section-area .case-boxes-area .content-area .icons {
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    display: inline-block;
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    position: absolute;
    left: 40%;
    top: -32px;
    right: 50%;
}
.casestudy4-section-area .case-boxes-area .content-area .icons img {
    transition: all 0.4s;
    filter: brightness(0) invert(1);
}
.casestudy4-section-area .case-boxes-area .content-area a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-10);
    transition: all 0.4s;
    display: block;
}
@media (max-width: 767px) {
    .casestudy4-section-area .case-boxes-area .content-area a {
        font-size: var(--ztc-font-size-font-s20);
        line-height: 26px;
    }
}
.casestudy4-section-area .case-boxes-area .content-area p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-11);
    transition: all 0.4s;
    margin-top: 16px;
}
.casestudy4-section-area .case-boxes-area .content-area a.readmore {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    font-weight: var(--ztc-weight-bold);
    color: var(--ztc-text-text-10);
    transition: all 0.4s;
    margin-bottom: 0;
    margin-top: 24px;
    display: inline-block;
}

.casestudy-inner-section-area .casestudy-header {
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .casestudy-inner-section-area .casestudy-header {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .casestudy-inner-section-area .casestudy-header {
        margin-bottom: 30px;
    }
}
.casestudy-inner-section-area .case-author-boxarea {
    position: relative;
    z-index: 1;
    transition: all 0.4s;
    margin-bottom: 53px;
}
.casestudy-inner-section-area .case-author-boxarea:hover .imges::after {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
}
.casestudy-inner-section-area .case-author-boxarea:hover .imges img {
    transform: scale(1.1) rotate(4deg);
    transition: all 0.4s;
}
.casestudy-inner-section-area .case-author-boxarea:hover .case-content .icons a {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.casestudy-inner-section-area .case-author-boxarea .imges {
    overflow: hidden;
    position: relative;
    transition: all 0.4s;
    border-radius: 4px;
}
.casestudy-inner-section-area .case-author-boxarea .imges::after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    transition: all 0.4s;
    background: var(--ztc-text-text-2);
    opacity: 0.7;
}
.casestudy-inner-section-area .case-author-boxarea .imges img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    transition: all 0.4s;
}
.casestudy-inner-section-area .case-author-boxarea .case-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ztc-text-text-1);
    padding: 20px 24px;
    border-radius: 4px;
    position: relative;
    bottom: 0;
    margin: -120px 16px 16px 16px;
}
.casestudy-inner-section-area .case-author-boxarea .case-content .text p {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s16);
    color: var(--ztc-text-text-4);
    font-weight: var(--ztc-weight-medium);
    margin-bottom: 14px;
}
.casestudy-inner-section-area .case-author-boxarea .case-content .text a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    line-height: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-3);
    display: inline-block;
    font-weight: var(--ztc-weight-bold);
}
@media (max-width: 767px) {
    .casestudy-inner-section-area .case-author-boxarea .case-content .text a {
        font-size: var(--ztc-font-size-font-s20);
        line-height: 20px;
    }
}
.casestudy-inner-section-area .case-author-boxarea .case-content .icons a {
    height: 48px;
    width: 48px;
    text-align: center;
    line-height: 48px;
    transition: all 0.4s;
    border-radius: 50%;
    background: #FAE7E8;
    color: var(--ztc-text-text-2);
    transform: rotate(-45deg);
    display: inline-block;
}
.casestudy-inner-section-area .pagination-area ul {
    text-align: center;
    justify-content: center;
    margin-top: 30px;
}
.casestudy-inner-section-area .pagination-area ul li a {
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 4px !important;
    transition: all 0.4s;
    border: none;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    line-height: var(--ztc-font-size-font-s40);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    margin: 0 16px;
    box-shadow: none;
    background: var(--ztc-bg-bg-1);
}
.casestudy-inner-section-area .pagination-area ul li a:hover {
    background: var(--ztc-text-text-2);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}
.casestudy-inner-section-area .pagination-area ul li .page-link.active {
    background: var(--ztc-text-text-2) !important;
    color: var(--ztc-text-text-1);
}

/*============= CASE STUDY CSS AREA ENDS ===============*//*# main.css.map */

/*============= MEGA MENU SERVICIOS ===============*/
.main-menu ul li.submenu ul.mega-menu-service {
    width: max-content;
    display: inline;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px !important;
}
.main-menu ul li:hover > ul.mega-menu-service {
    padding: 12px !important;
}
.mega-menu-service-single {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    transition: background 0.25s ease;
    color: #000000 !important;
    white-space: normal;
    padding: 15px 25px;
    border-bottom: 1px solid var(--tj-color-border-2);
}
.mega-menu-service-single:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #b10000 !important;
}
.mega-menu-service-icon {
    font-size: 22px;
    min-width: 34px;
    text-align: center;
    opacity: 0.9;
}
.mega-menu-service-title {
    flex: 1;
    line-height: 1.35;
    font-weight: 500;
    font-size: 16px;
}
.mega-menu-service-nav {
    font-size: 10px;
    opacity: 0.55;
    display: flex;
    align-items: center;
    gap: 2px;
}
/*============= MEGA MENU SERVICIOS ENDS ===============*/



.heading3 ul li {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: var(--ztc-font-size-font-s18);
    color: #ffffff;
    font-weight: var(--ztc-weight-semibold);
    margin-top: 16px;
}
.heading3 ul li img {
    margin: 0 8px 0 0;
}



.single-pricing-area .pricing-box .icons {
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 70px;
    border-radius: 4px;
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
    color: #FAE7E8;
    margin-bottom: 30px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.single-pricing-area .pricing-box .icons i {
    filter: brightness(0) invert(1);
    transition: all 0.4s;
    font-size: 40px;
}

.work1-section-area .works-author-area .tab-pane .works-side-area .content-area .single-item-area {
    margin-bottom: 30px;
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    padding: 30px;
    border: 1px solid var(--ztc-bg-bg-1);
    transition: all 0.4s;
}

/* ==========================================================================
   Language Switcher - Inoqualabs
   ========================================================================== */

/* Contenedor nav de idiomas en el header */
.language-switcher-nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Item del idioma activo */
.language-switcher-nav > li {
    position: relative;
    list-style: none;
}

/* Trigger: "ES ∨" */
.language-switcher-nav > li > a.language-dropdown-active {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-decoration: none;
}

.language-switcher-nav > li > a.language-dropdown-active i.fa-globe {
    font-size: 13px;
    color: #ffffff;
}

.language-switcher-nav > li > a.language-dropdown-active i.fa-chevron-down {
    font-size: 9px;
    transition: transform 0.25s ease;
}

.language-switcher-nav > li > a.language-dropdown-active:hover {
    border-color: #ffffff;
    color: #ffffff;
    font-weight: 700;
}

.language-switcher-nav > li:hover > a.language-dropdown-active i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Dropdown */
.language-switcher-nav > li > ul.language-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 9999;
    background: #fff;
    border-radius: 4px;
    margin: 0;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

/* Mostrar al hover */
.language-switcher-nav > li:hover > ul.language-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Items del dropdown */
.language-switcher-nav > li > ul.language-dropdown li {
    list-style: none;
}

.language-switcher-nav > li > ul.language-dropdown li a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.language-switcher-nav > li > ul.language-dropdown li a:hover {
    background: rgb(177 0 0 / 11%);
    color: #b10000;
}

/* Responsive: ocultar en móvil (el menu responsive lo maneja slicknav) */
@media (max-width: 991px) {
    .language-switcher-nav {
        align-items: flex-start;
        */
        padding: 5px 0px;
        padding: 5px 0px;
    }
}

/* ===== Blog sidebar - helping-area, download-broucher, social-icons-sidebar ===== */
.blog-auhtor-side-area .helping-area {
    margin-bottom: 30px;
    padding: 24px 20px;
    background: #90bb13;
    border-radius: 8px;
    text-align: center;
}
.blog-auhtor-side-area .helping-area h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.5;
}
.blog-auhtor-side-area .helping-area .btn-area a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    color: #90bb13;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
}
.blog-auhtor-side-area .helping-area .btn-area a i {
    font-size: 14px;
}
.blog-auhtor-side-area .helping-area .btn-area a:hover {
    background: #f0f0f0;
}

.blog-auhtor-side-area .download-broucher {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}
.blog-auhtor-side-area .download-broucher h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}
.blog-auhtor-side-area .download-broucher p {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}
.blog-auhtor-side-area .download-broucher .btn-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blog-auhtor-side-area .download-broucher .btn-area a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
}

.blog-auhtor-side-area .social-icons-sidebar {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}
.blog-auhtor-side-area .social-icons-sidebar h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
.blog-auhtor-side-area .social-icons-sidebar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-auhtor-side-area .social-icons-sidebar ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9e9e9;
    color: #333;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
}
.blog-auhtor-side-area .social-icons-sidebar ul li a:hover {
    background: #90bb13;
    color: #fff;
}



.page-contact-us{
    padding: 100px 0 70px;
}

.page-contact-us .section-title{
    text-align: center;
}

.contact-info-item{
    height: calc(100% - 30px);
    margin-bottom: 30px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 24px 36px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s ease;
}

.contact-info-item:hover{
    box-shadow: 0 8px 32px rgba(177,1,0,0.15);
}

.contact-info-icon{
    width: 76px;
    height: 76px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.contact-info-icon i{
    color: #fff;
    font-size: 28px;
}

.contact-info-content h3{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.contact-info-content p{
    margin: 0 0 4px;
    font-size: 14px;
    color: #000;
}

.contact-info-content p a{
    color: inherit;
    font-weight: 600;
}

.contact-info-content p a:hover{
    color: var(--accent-color);
}

.contact-info-content p strong{
    color: #111;
    font-size: 16px;
}

.contact-info-label{
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.contact-info-heading{
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.contact-info-sub{
    font-size: 16px;
    color: #666;
    margin-bottom: 0;
}

.google-map-form{
    position: relative;
    padding: 100px 0;
}

.google-map{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.google-map iframe{
    width: 100%;
    height: 100%;
}

.form-box{
    position: relative;
    background: var(--white-color);
    padding: 80px;
    z-index: 1;
}

.form-box .section-title{
    text-align: center;
}

.form-box .form-control{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--text-color);
    padding: 11px 20px;
    border: 1px solid var(--divider-color);
    border-radius: 0;
    box-shadow: none;
    outline: none;
    background: transparent;
}

.form-box .form-control::placeholder{
    color: var(--text-color);
}



/*============= PILARES (MISIÓN/VISIÓN/VALORES) ===============*/
.pilares-section {
    background: var(--ztc-bg-bg-1);
}

.pilares-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pilares-heading {
    font-size: 46px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0;
}

.pilares-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    padding: 36px 30px;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pilares-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(177,1,0,0.1);
}

.pilares-icon {
    font-size: 55px;
    color: var(--accent-color);
    margin: 30px 20px;
}

.pilares-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 14px;
}

.pilares-text {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/*============= FAQ CSS AREA ===============*/
/*============= COVERAGE AREA ===============*/
.coverage-section {
}

.coverage-map {
    max-width: 100%;
    width: 520px;
    opacity: 0.9;
    display: block;
    margin: 32px auto 0;
}

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.coverage-badge {
    background: #fff;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #b10200;
    text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.coverage-badge small {
    font-size: 12px;
    font-weight: 400;
    display: block;
    color: #b10200;
}

.coverage-badge.priority {
    background: #b10100;
    border-color: #b10100;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
}

.coverage-badge:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 8px 32px rgba(177,1,0,0.15);
}

.coverage-badge.priority:hover {
    color: #ffffff !important;
    border-color: #ffffff;
}

@media (max-width: 991px) {
    .coverage-map {
        width: 380px;
    }
}

@media (max-width: 767px) {
    .coverage-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .coverage-map {
        width: 100%;
    }
}



/* ===== Nuestra Trayectoria (Timeline header inside history section) ===== */
.trayectoria-title {
    font-size: clamp(42px, 7vw, 80px);
    font-weight: 900;
    color: #1a2035;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}
.trayectoria-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3b5bdb 0%, #22b8cf 40%, #f59f00 80%, #e03131 100%);
    border-radius: 4px;
    margin: 0 auto 24px;
}
.trayectoria-subtitle {
    font-size: 18px;
    color: #6b7280;
    font-weight: 400;
    margin: 0;
}

.history-intro { padding: 80px 0 60px; }

.history-intro .sub-title {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
}

.history-intro .sub-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--accent-color);
    transform: translateY(-50%);
}

.history-intro .sec-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary-color);
}

.history-intro .sec-title span {
    color: var(--accent-color);
}

.history-intro .desc p {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.8;
}

/* ===== Timeline - Solvior style ===== */
.solvior-timeline {
    position: relative;
    padding: 0 0 60px;
    margin-top: 80px;
}

.solvior-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: var(--accent-color);
    opacity: 0.45;
    z-index: 0;
}

.timeline-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
    position: relative;
}

.timeline-row:last-child { margin-bottom: 0; }

/* Content side */
.timeline-content-side {
    flex: 0 0 45%;
    max-width: 45%;
}

/* Center line */
.timeline-center {
    flex: 0 0 10%;
    max-width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.timeline-center::before {
    display: none;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
    border: none;
    position: relative;
    z-index: 2;
    margin-top: 15px;
}

/* Date side */
.timeline-date-side {
    flex: 0 0 45%;
    max-width: 45%;
}

.timeline-year-label {
    font-size: 72px;
    font-weight: 900;
    color: var(--accent-color);
    opacity: 0.18;
    line-height: 1;
    margin-top: -10px;
}

/* Content card */
.timeline-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.06);
    transition: all 0.4s ease;
}

.timeline-card:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.timeline-card .step-number {
    font-size: 48px;
    font-weight: 900;
    color: rgba(177, 1, 0, 0.1);
    line-height: 1;
    margin-bottom: 5px;
}

.timeline-card .step-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.timeline-card p {
    color: var(--text-color);
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.7;
}

.timeline-card .card-images {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.timeline-card .card-images .img-placeholder {
    flex: 1;
    height: 120px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f3f3f3, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ccc;
    overflow: hidden;
}

.timeline-card .card-images .img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Alternate: even rows flip */
.timeline-row.reverse {
    flex-direction: row-reverse;
}

.timeline-row.reverse .timeline-year-label {
    text-align: right;
}

/* ===== Stats Cards ===== */
.about-stats-card {
    background: white;
    padding: 35px 25px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.about-stats-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent-color);
}

.about-stats-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.about-stats-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-color);
    line-height: 1.2;
    margin-bottom: 8px;
}

/* ===== Value Cards ===== */
.about-value-card {
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    border-top: 4px solid var(--accent-color);
}

.about-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.1);
}

.about-value-icon {
    width: 70px; height: 70px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px;
    font-size: 2rem;
    color: white;
}


/* ===== Reason Cards ===== */
.reasons-section {
    padding: 90px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.reasons-section .reasons-heading {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 50px;
}

.about-reason-card {
    background: white;
    padding: 30px 24px;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    height: 100%;
    transition: all 0.3s ease;
    text-align: center;
}

.about-reason-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(177, 1, 0, 0.1);
}

.about-reason-icon {
    font-size: 55px;
    color: var(--accent-color);
    margin: 30px 20px;
}

.about-reason-card h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.about-reason-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 0;
}

/* ===== Cert Badges ===== */
.cert-section {
    padding: 90px 0;
    background: var(--ztc-bg-bg-1);
}

.cert-section .cert-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-bottom: 16px;
}

.cert-section .cert-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

.cert-section .cert-heading {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 12px;
    line-height: 1.15;
}

.cert-section .cert-sub {
    font-size: 16px;
    color: #777;
    margin-bottom: 50px;
}

.about-cert-badge {
    background: white;
    padding: 32px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.about-cert-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}

.about-cert-logo {
    font-size: 55px;
    color: var(--accent-color);
    margin: 30px 20px;
}

.about-cert-badge h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.about-cert-badge p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 0;
}

/* ===== Testimonial Section - Slider Style ===== */
.testimonial2-section {
    padding: 100px 0;
    background: var(--ztc-bg-bg-1);
}

.testimonial-header h5 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
}

.testimonial-header h5::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--accent-color);
    transform: translateY(-50%);
}

.testimonial-header h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.testimonial-header p {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.testimonial-header .header-btn3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 3px;
}

.testimonial-header .header-btn3:hover {
    color: var(--accent-color);
}

.testimonial-slider-area {
    position: relative;
}

.testimonial-slide-inner {
    display: flex;
    align-items: center;
    gap: 30px;
}

.testimonial-slide-img {
    flex: 0 0 180px;
    max-width: 180px;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #e8e8e8, #d4d4d4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-slide-img .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 900;
    color: white;
    background: linear-gradient(135deg, var(--accent-color), #d42b2a);
}

.testimonial-slide-content {
    flex: 1;
}

.testimonial-slide-content .stars {
    color: #f59e0b;
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex;
    gap: 3px;
}

.testimonial-slide-content .quote {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
}

.testimonial-slide-content .client-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.testimonial-slide-content .client-info {
    font-size: 14px;
    color: #888;
}

.testimonial-arrows {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.testimonial-arrows button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: transparent;
    color: var(--primary-color);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-arrows button:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

@media (max-width: 991px) {
    .testimonial-header { margin-bottom: 40px; }
    .testimonial-header h2 { font-size: 30px; }
}

@media (max-width: 768px) {
    .testimonial-slide-inner { flex-direction: column; text-align: center; }
    .testimonial-slide-img { flex: 0 0 150px; max-width: 150px; height: 180px; margin: 0 auto; }
    .testimonial-slide-content .stars { justify-content: center; }
    .testimonial-arrows { justify-content: center; }
    .testimonial2-section { padding: 60px 0; }
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .history-intro .sec-title { font-size: 32px; }
    .timeline-year-label { font-size: 52px; }
}

@media (max-width: 768px) {
    /* Move the continuous line to the left side */
    .solvior-timeline {
        padding-left: 48px;
    }

    .solvior-timeline::before {
        left: 20px;
        transform: none;
    }

    /* Stack rows vertically */
    .timeline-row,
    .timeline-row.reverse {
        flex-direction: column;
        margin-bottom: 40px;
        position: relative;
    }

    /* Dot on the left line per row */
    .timeline-row::before,
    .timeline-row.reverse::before {
        content: '';
        position: absolute;
        left: -34px;
        top: 6px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--accent-color);
        z-index: 2;
    }

    /* Hide the center column (dot is now via ::before on the row) */
    .timeline-center {
        display: none;
    }

    .timeline-content-side,
    .timeline-date-side {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Year label above card for all rows */
    .timeline-date-side { order: 1; }
    .timeline-content-side { order: 2; }

    .timeline-year-label {
        font-size: 48px;
        text-align: left !important;
        margin-top: 0;
        margin-bottom: -8px;
        line-height: 1;
    }

    .timeline-card {
        padding: 20px;
    }

    .about-stats-number { font-size: 2.2rem; }
    .history-intro .sec-title { font-size: 28px; }
    .history-intro { padding: 50px 0 30px; }
}

/* ===== Testimonial Slider Section ===== */
.testimonial2-section {
    padding: 80px 0;
    background: #fff;
    overflow: hidden;
}

.testimonial-header h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.testimonial-header h5::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--accent-color);
}

.testimonial-header h2 {
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.2;
}

.testimonial-header p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 32px;
}

.about-testimonial-area {
    position: relative;
}

.about-testimonial-area .swiper {
    overflow: hidden;
    width: 100%;
}

.testimonial-slide-inner {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: #f9f9f9;
    border-radius: 16px;
    padding: 36px 32px;
    min-height: 220px;
}

.testimonial-slide-img {
    flex-shrink: 0;
}

.avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--accent-color);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
}

.testimonial-slide-content {
    flex: 1;
    min-width: 0;
}

.testimonial-slide-content .stars {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.testimonial-slide-content .stars i {
    color: #f5a623;
    font-size: 16px;
}

.testimonial-slide-content .quote {
    font-size: 15px;
    color: #333;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 20px;
}

.testimonial-slide-content .client-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.testimonial-slide-content .client-info {
    font-size: 13px;
    color: #888;
}

.testimonial-arrows {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.testimonial-prev,
.testimonial-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    background: var(--accent-color);
    color: #fff;
}

@media (max-width: 768px) {
    .testimonial2-section {
        padding: 50px 0;
    }

    .testimonial-slide-inner {
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
    }

    .testimonial-header {
        margin-bottom: 40px;
    }
}

/* ===== Stats Bar ===== */
.reviews-stats-bar {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    padding: 22px 0;
}
.reviews-stats-bar .stat-score {
    font-size: 56px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
    letter-spacing: -2px;
}
.reviews-stats-bar .stat-stars {
    display: flex;
    gap: 3px;
    font-size: 16px;
    color: #f5a623;
    margin-bottom: 4px;
}
.reviews-stats-bar .stat-count {
    font-size: 12.5px;
    color: #888;
}
.reviews-stats-bar .stat-count strong { color: var(--primary-color); }
.stat-divider {
    width: 1px;
    height: 48px;
    background: #e8e8e8;
    margin: 0 28px;
    flex-shrink: 0;
}
.google-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: all .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.google-badge:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 3px 12px rgba(177,1,0,0.12);
}
.google-badge svg { width: 17px; height: 17px; flex-shrink: 0; }
.verified-badge {
    font-size: 12px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 6px;
}
.verified-badge i { color: var(--accent-color); font-size: 13px; }

/* ===== Filter Bar ===== */
.reviews-filter-bar {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 14px rgba(0,0,0,0.05);
}
.filter-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid #f0f0f0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.filter-chip i { font-size: 12px; opacity: .7; }
.filter-chip:hover { border-color: var(--accent-color); color: var(--accent-color); background: rgba(177,1,0,0.03); }
.filter-chip.active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.filter-chip.active i { opacity: 1; }
.filter-chip .chip-count {
    background: rgba(0,0,0,0.07);
    border-radius: 50px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.filter-chip.active .chip-count { background: rgba(255,255,255,0.25); }
.filter-chips-divider {
    width: 1px;
    height: 28px;
    background: #e8e8e8;
    flex-shrink: 0;
    margin: 0 4px;
}
.filter-search {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
    min-width: 200px;
}
.filter-search input {
    width: 100%;
    border: 1.5px solid #e2e2e2;
    border-radius: 50px;
    padding: 8px 16px 8px 36px;
    font-size: 13px;
    outline: none;
    transition: border .2s, box-shadow .2s;
    background: #fafafa;
}
.filter-search input:focus {
    border-color: var(--accent-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(177,1,0,0.08);
}
.filter-search .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 12px;
}

/* ===== Grid ===== */
.reviews-grid-section {
    padding: 60px 0 90px;
    background: var(--ztc-bg-bg-1);
}
.reviews-results-info {
    font-size: 14px;
    color: #888;
    margin-bottom: 28px;
}
.reviews-results-info strong { color: var(--primary-color); }

/* ===== Card ===== */
.testimonial-inner-boxarea {
    background: var(--ztc-bg-bg-1);
    border-radius: 16px;
    padding: 36px 28px 30px;
    height: 100%;
    transition: all .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.testimonial-inner-boxarea:hover {
    background: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.10);
    transform: translateY(-4px);
}
/* img1: avatar centered at top */
.testimonial-inner-boxarea .img1 {
    margin-bottom: 22px;
}
.testimonial-inner-boxarea .img1 .avatar-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 auto;
}
/* content-area */
.testimonial-inner-boxarea .content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* Stars — each in its own rounded box */
.testimonial-inner-boxarea .content-area > ul {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    justify-content: center;
}
.testimonial-inner-boxarea .content-area > ul li {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(245, 166, 35, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5a623;
    font-size: 14px;
}
/* Review text */
.testimonial-inner-boxarea .content-area > p {
    font-size: 17px;
    line-height: 1.8;
    color: #000000;
    flex: 1;
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonial-inner-boxarea .content-area > p.expanded {
    display: block;
    -webkit-line-clamp: unset;
}
.expand-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--accent-color);
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 16px;
}
.expand-btn:hover { text-decoration: underline; }
/* Author block */
.testimonial-inner-boxarea .content-area .text {
    margin-top: auto;
    width: 100%;
}
.testimonial-inner-boxarea .content-area .text a {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 4px;
    text-transform: capitalize;
}
.testimonial-inner-boxarea .content-area .text a:hover { color: var(--accent-color); }
.testimonial-inner-boxarea .content-area .text > p {
    font-size: 13px;
    color: #999;
    margin: 0;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: visible;
    -webkit-line-clamp: unset;
}
.card-google-icon { color: #ccc; font-size: 14px; }


/* ===== No results ===== */
.no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}
.no-results i { font-size: 3rem; margin-bottom: 16px; display: block; }
.no-results p { font-size: 15px; }

/* ===== CTA ===== */
.reviews-cta {
    background: var(--primary-color);
    padding: 60px 0;
}
.reviews-cta h2 { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.reviews-cta p { color: rgba(255,255,255,.6); margin-bottom: 0; }
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-color);
    color: #fff;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
}
.cta-btn:hover { background: #8f0000; color: #fff; }

/* Avatar colors */
.av-0{background:#b10100} .av-1{background:#b10100} .av-2{background:#b10100}
.av-3{background:#b10100} .av-4{background:#b10100} .av-5{background:#b10100}
.av-6{background:#b10100} .av-7{background:#b10100} .av-8{background:#b10100}
.av-9{background:#b10100} .av-10{background:#b10100} .av-11{background:#b10100}


.form-area .form {
    padding: 50px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.10);
}

.form-area .form h2 {
    margin-bottom: 0px !important;
}

.form-area .form p {
    width: 100%;
    font-size: 18px;
    line-height: 30px;
}

.form-area .contact-field label {}


.form-area ul {}

.form-area ul li {
    margin-right: 10px;
    padding-right: 10px;
    float: left;
    width: 15.5%;
}

.form-area ul li:last-child {
    margin-right: 0;
}

.form-area input {
    width: 100%;
    background: #ffffff0f;
    padding: 10px 20px;
    transition: .3s;
    border: 1px solid #e7e7e7;
    height: auto;
    color: #fff;
    border-radius: 10px;
}

.form-area select {
    display: inline-block;
    width: 100%;
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: auto;
    padding: 10px 20px;
    border: none;
    background: #ffffff0f;
    color: #9e9e9e;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
}

.form-area .select {
    position: relative;
}

.form-area select option {
    padding: 0;
}

.form-area .select::after {
    content: "\f107";
    position: absolute;
    right: 15px;
    top: 8px;
    z-index: 1;
    font-family: "Font Awesome 6 Pro";
    color: #fff;
}

.form-area .btn {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    border: none;
    text-align: center;
    font-weight: 600;
    background: var(--ztc-bg-bg-4);
    width: 100%;
}

.form-area .btn:hover {
    background: #0A1119;
    color: #fff;
}

.form-area .slider-btn {
    width: 100%;
}

.form-area .slider-btn label {
    color: #FFB703;
    font-size: 30px;
    margin-bottom: 18px;
    width: 100%;
    text-align: center;
}

.form-area .contact-field i {
    background: #fff;
    padding-right: 5px;
    color: #FFB703;
}

.form-area h2 {
    color: #0A1119;
    font-size: 40px;
}

.form-area h5 {
    color: #FFFFFF5C;
    text-transform: uppercase;
    font-size: 14px;
}


.booking-content-box a {
    color: #fff;
    border-bottom: 5px solid #fff;
    margin-top: 15px;
    display: inline-block;
    padding-bottom: 5px;
}

.booking-content-box {
    margin-bottom: 50px;
}

.booking-content-box .booking-skill-text {
    display: flex;
    align-items: center;
    font-size: 40px;
    font-weight: 600;
}

.booking-content-box .booking-skill-text .text {
    width: 85%;
}

.booking-content-box .booking-skill-text h3 {
    font-size: 20px;
}

.booking-content-box .booking-skill-text .no {
    font-size: 48px;
    font-weight: 600;
    color: #FFB703;
}


.booking-content-box .booking-skill li {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e9e9e9;
}

.booking-contact-box .nav.nav-tabs li {
    width: 50%;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
}

.booking-contact-box .nav.nav-tabs li a {
    color: #777777;
    font-size: 20px;
    border: none;
    text-align: center;
    font-weight: 700;
    padding: 14px;
    display: inline-block;
    width: 100%;
}

.booking-contact-box .nav.nav-tabs li.active a,
.booking-contact-box .nav.nav-tabs li a.active {
    border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-bottom: 2px solid #FFB703;
    color: #000;
}


/* ===== Proceso Section ===== */
.proceso-section {
    background: var(--ztc-bg-bg-1);
}

.proceso-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.proceso-heading {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 14px;
}

.proceso-sub {
    font-size: 16px;
    color: #666;
    margin-bottom: 0;
}

.proceso-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 30px 32px;
    height: 100%;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.proceso-card:hover {
    box-shadow: 0 8px 36px rgba(177,1,0,0.12);
    transform: translateY(-4px);
}

.proceso-card--check {
    background: var(--accent-color);
}

.proceso-card--check .proceso-title,
.proceso-card--check .proceso-text,
.proceso-card--check .proceso-text strong {
    color: #fff;
}

.proceso-number {
    font-size: 52px;
    font-weight: 900;
    color: rgba(177,1,0,0.08);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -2px;
}

.proceso-number--check {
    font-size: 40px;
    color: rgba(255,255,255,0.25);
}

.proceso-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
    line-height: 1.3;
}

.proceso-text {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin-bottom: 0;
}

.proceso-text strong {
    color: var(--primary-color);
    font-weight: 600;
}

@media (max-width: 768px) {
    .proceso-card {
        padding: 28px 22px;
    }

    .proceso-number {
        font-size: 40px;
    }
}

/* ===== Stores Guide Section ===== */
.stores-guide-section {
    background: #fff;
}

.stores-guide-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.stores-guide-heading {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 18px;
    line-height: 1.2;
}

.stores-guide-intro {
    font-size: 17px;
    color: #000;
    line-height: 1.75;
    margin-bottom: 0;
    margin-bottom: 10px !important;
}

.stores-guide-subtitle {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ztc-bg-bg-1);
}

.stores-guide-body {
    font-size: 16px;
    color: #000;
    line-height: 1.8;
    margin-bottom: 16px;
}

.stores-guide-body strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* Benefit cards */
.stores-benefit-card {
    padding: 28px 22px;
    border-radius: 12px;
    border: 1.5px solid #f0f0f0;
    height: 100%;
    margin-bottom: 24px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.stores-benefit-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 32px rgba(177,1,0,0.10);
    transform: translateY(-3px);
}

.stores-benefit-icon {
    width: 56px;
    height: 56px;
    background: rgba(177,1,0,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.stores-benefit-icon i {
    font-size: 22px;
    color: var(--accent-color);
}

.stores-benefit-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.stores-benefit-text {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Type cards */
.stores-type-card {
    background: var(--ztc-bg-bg-1);
    border-radius: 14px;
    padding: 30px 24px;
    height: 100%;
    margin-bottom: 24px;
    transition: background 0.3s, transform 0.3s;
}

.stores-type-card:hover {
    background: var(--accent-color);
    transform: translateY(-4px);
}

.stores-type-card:hover .stores-type-title,
.stores-type-card:hover .stores-type-text,
.stores-type-card:hover .stores-type-num {
    color: #fff;
}

.stores-type-num {
    font-size: 40px;
    font-weight: 900;
    color: rgba(177,1,0,0.12);
    line-height: 1;
    margin-bottom: 14px;
}

.stores-type-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    transition: color 0.3s;
}

.stores-type-text {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
    transition: color 0.3s;
}

/* ===== Stores Extended Sections ===== */

/* Service Cards (detailed type cards) */
.stores-service-card {
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 14px;
    padding: 32px 28px;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}
.stores-service-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 10px 40px rgba(177,1,0,0.10);
    transform: translateY(-4px);
}
.stores-service-card.featured {
    border-color: var(--accent-color);
    border-width: 2px;
}
.stores-service-icon {
    width: 64px;
    height: 64px;
    background: rgba(177,1,0,0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.stores-service-icon i { font-size: 26px; color: var(--accent-color); }
.stores-service-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 8px;
}
.stores-service-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}
.stores-service-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 20px;
}
.stores-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}
.stores-feature-list li {
    font-size: 14px;
    color: #000;
    line-height: 1.6;
    padding: 7px 0 7px 22px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
}
.stores-feature-list li:last-child { border-bottom: none; }
.stores-feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 7px;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 13px;
}
.stores-popular-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--accent-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}

/* Mechanism Cards */
.stores-mechanism-section {/* background: var(--ztc-bg-bg-1); */}
.stores-mechanism-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    border: 1.5px solid #f0f0f0;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    position: relative;
    height: 100%;
    margin-bottom: 24px;
}
.stores-mechanism-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 32px rgba(177,1,0,0.10);
    transform: translateY(-4px);
}
.stores-mechanism-card.featured { border-color: var(--accent-color); border-width: 2px; }
.stores-mechanism-icon {
    width: 100px;
    height: 100px;
    background: rgba(177,1,0,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 20px;
    font-size: 51px;
    color: var(--accent-color);
}
.stores-mechanism-title {font-size: 22px;font-weight: 700;color: var(--primary-color);margin-bottom: 10px;}
.stores-mechanism-text {font-size: 18px;color: #000000;line-height: 1.7;margin-bottom: 12px;}
.stores-mechanism-price {font-size: 18px;font-weight: 700;color: var(--accent-color);}
.stores-mechanism-badge {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 8px;
    margin-bottom: 14px;
}

/* Tech Comparison (RTS vs io) */
.stores-tech-section { background: #fff; }
.stores-tech-card {
    border-radius: 14px;
    padding: 32px 28px;
    height: 100%;
    margin-bottom: 24px;
}
.stores-tech-card.standard { border: 2px solid var(--accent-color); background: #fff; }
.stores-tech-card.premium { background: var(--primary-color); border: 2px solid var(--primary-color); }
.stores-tech-card.premium h4,
.stores-tech-card.premium h5 { color: #fff; }
.stores-tech-card.premium p { color: rgba(255,255,255,0.82); }
.stores-tech-card.premium li { color: rgba(255,255,255,0.82); }
.stores-tech-card.premium .stores-tech-title-badge { color: #fff; }
.stores-tech-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    font-size: 20px;
}
.stores-tech-icon.standard { background: rgba(177,1,0,0.08); color: var(--accent-color); }
.stores-tech-icon.premium { background: rgba(255,255,255,0.12); color: #fff; }
.stores-tech-title-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
}
.stores-tech-title-badge.standard { background: rgba(177,1,0,0.10); color: var(--accent-color); }
.stores-tech-title-badge.premium { background: rgba(255,255,255,0.15); color: #fff; }
.stores-tech-list { list-style: none; padding: 0; margin: 0 0 16px; }
.stores-tech-list li {
    font-size: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    line-height: 1.6;
    color: #000;
}
.stores-tech-card.premium .stores-tech-list li { border-bottom-color: rgba(255,255,255,0.10); }
.stores-tech-list li:last-child { border-bottom: none; }
.stores-tech-expert {
    background: var(--ztc-bg-bg-1);
    border-left: 4px solid var(--accent-color);
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin-top: 24px;
}
.stores-tech-expert h5 { font-size: 15px; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; }
.stores-tech-expert p { font-size: 14px; color: #000; line-height: 1.7; margin-bottom: 0; }

/* Energy Savings Section */
.stores-energy-section { background: var(--ztc-bg-bg-1); }
.stores-energy-stat {
    background: var(--accent-color);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    color: #fff;
    height: 100%;
    margin-bottom: 24px;
}
.stores-energy-stat-number {
    font-size: clamp(52px, 7vw, 80px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    display: block;
}
.stores-energy-stat-label {font-size: 17px;color: rgba(255,255,255,0.80);margin-bottom: 0;}
.stores-energy-body { font-size: 15px; color: #000; line-height: 1.8; margin-bottom: 14px; }
.stores-seasonal-card {
    border-radius: 14px;
    padding: 28px 24px;
    height: 100%;
    margin-bottom: 24px;
}
/* Summer: fondo negro, acento rojo */
.stores-seasonal-card.summer { background: var(--primary-color); border: 2px solid var(--accent-color); }
/* Winter: fondo gris claro, borde negro */
.stores-seasonal-card.winter { background: var(--ztc-bg-bg-1); border: 2px solid var(--primary-color); }
.stores-seasonal-icon { font-size: 38px; display: block; text-align: center; margin-bottom: 12px; }
.stores-seasonal-icon.summer i { color: var(--accent-color); }
.stores-seasonal-icon.winter i { color: var(--primary-color); }
/* Summer: texto sobre negro */
.stores-seasonal-card.summer .stores-seasonal-title { color: #fff; }
.stores-seasonal-card.summer .stores-seasonal-text { color: rgba(255,255,255,0.80); }
.stores-seasonal-card.summer .stores-seasonal-list li { color: rgba(255,255,255,0.80); border-bottom-color: rgba(255,255,255,0.10); }
/* Shared */
.stores-seasonal-title { font-size: 17px; font-weight: 700; color: var(--primary-color); text-align: center; margin-bottom: 12px; }
.stores-seasonal-text { font-size: 14px; color: #000; line-height: 1.7; margin-bottom: 14px; }
.stores-seasonal-list { list-style: none; padding: 0; margin: 0 0 16px; }
.stores-seasonal-list li { font-size: 13px; color: #000; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.06); line-height: 1.6; }
.stores-seasonal-list li:last-child { border-bottom: none; }
.stores-seasonal-tip { border-radius: 8px; padding: 12px 16px; font-size: 13px; line-height: 1.6; }
/* Summer tip: rojo semitransparente sobre negro */
.stores-seasonal-tip.summer { background: rgba(177,1,0,0.25); border-left: 3px solid var(--accent-color); color: rgba(255,255,255,0.90); }
/* Winter tip: negro sobre gris */
.stores-seasonal-tip.winter { background: rgba(0,0,0,0.06); border-left: 3px solid var(--primary-color); color: #333; }
.stores-table-wrap { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); margin-bottom: 10px; }
.stores-data-table { width: 100%; border-collapse: collapse; margin: 0; }
.stores-data-table thead th { background: var(--primary-color); color: #fff; font-size: 14px; font-weight: 700; padding: 16px 20px; text-align: left; }
.stores-data-table tbody td { font-size: 14px; color: #000; padding: 14px 20px; border-bottom: 1px solid #f0f0f0; line-height: 1.5; }
.stores-data-table tbody tr:last-child td { border-bottom: none; }
.stores-data-table tbody tr:nth-child(even) { background: #fafafa; }
.stores-data-table tbody td:first-child { font-weight: 600; color: var(--primary-color); }
.stores-badge-ok {display: inline-block;background: var(--accent-color);color: #fff;font-size: 12px;font-weight: 700;padding: 3px 10px;border-radius: 12px;}

/* Use Case Cards */
.stores-usecases-section { background: #fff; }
.stores-usecase-card {
    background: var(--ztc-bg-bg-1);
    border-radius: 14px;
    padding: 28px 24px;
    height: 100%;
    border: 1.5px solid #efefef;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    margin-bottom: 24px;
}
.stores-usecase-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 32px rgba(177,1,0,0.08);
    transform: translateY(-3px);
}
.stores-usecase-icon {
    width: 70px;
    height: 70px;
    background: rgba(177,1,0,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 33px;
    color: var(--accent-color);
}
.stores-usecase-title {font-size: 20px;font-weight: 700;color: var(--primary-color);margin-bottom: 5px;}
.stores-usecase-desc {font-size: 16px;color: #000000;line-height: 1.7;margin-bottom: 14px;}
.stores-usecase-list { list-style: none; padding: 0; margin: 0; }
.stores-usecase-list li {font-size: 16px;color: #000000;padding: 5px 0 5px 18px;position: relative;line-height: 1.6;}
.stores-usecase-list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--accent-color); border-radius: 50%; }

/* Process Steps */
.stores-process-section { background: var(--ztc-bg-bg-1); }
.stores-process-card {
    background: #fff;
    border-radius: 14px;
    padding: 42px 42px;
    height: 100%;
    position: relative;
    border: 1.5px solid #f0f0f0;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    overflow: hidden;
    margin-bottom: 24px;
}
.stores-process-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 32px rgba(177,1,0,0.10);
    transform: translateY(-3px);
}
.stores-process-num {
    font-size: 80px;
    font-weight: 900;
    color: rgba(177,1,0,0.06);
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 16px;
    pointer-events: none;
}
.stores-process-icon {
    width: 70px;
    height: 70px;
    background: rgba(177,1,0,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 30px;
    color: var(--accent-color);
}
.stores-process-title {font-size: 20px;font-weight: 700;color: var(--primary-color);margin-bottom: 6px;}
.stores-process-text {font-size: 16px;color: #000000;line-height: 1.7;margin-bottom: 0;}

/* ===== Trust Strip ===== */
.stores-trust-strip {
    background: var(--primary-color);
    padding: 20px 0;
}
.stores-trust-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-right: 1px solid rgba(255,255,255,0.10);
}
.stores-trust-stat:last-child { border-right: none; }
.stores-trust-num {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 900;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 4px;
}
.stores-trust-label {
    font-size: 12px;
    color: rgba(255,255,255,0.70);
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ===== Brands Section ===== */
.stores-brands-section {
    background: var(--ztc-bg-bg-1);
    padding: 60px 0;
}
.stores-brands-label {
    font-size: 13px;
    font-weight: 700;
    color: #999;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0;
}
.stores-brand-card {
    background: #fff;
    border: 1.5px solid #ebebeb;
    border-radius: 16px;
    padding: 28px 26px;
    text-align: left;
    height: 100%;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden;
}
.stores-brand-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #e8e8e8;
    transition: background 0.3s;
}
.stores-brand-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 32px rgba(177,1,0,0.10);
    transform: translateY(-3px);
}
.stores-brand-card:hover::before {
    background: var(--accent-color);
}
.stores-brand-card--featured {
    border-color: var(--accent-color);
    border-width: 2px;
    box-shadow: 0 4px 24px rgba(177,1,0,0.08);
}
.stores-brand-card--featured::before {
    background: var(--accent-color);
    height: 4px;
}
.stores-brand-logo {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 3px;
    margin-bottom: 8px;
    line-height: 1;
}
.stores-brand-logo--featured {
    font-size: 28px;
    color: var(--accent-color);
}
.stores-brand-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(177,1,0,0.08);
    color: var(--accent-color);
}
.stores-brand-badge--top { background: var(--accent-color); color: #fff; }
.stores-brand-badge--neutral { background: #f5f5f5; color: #555; }
.stores-brand-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 18px 0;
}
.stores-brand-stat-number {
    font-size: 26px;
    font-weight: 900;
    color: var(--accent-color);
    line-height: 1;
    display: block;
}
.stores-brand-stat-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: block;
    margin-top: 3px;
}
.stores-brand-stat-box {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    flex: 1;
}
.stores-brand-origin {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}
.stores-brand-origin i { color: var(--accent-color); font-size: 11px; }
.stores-brand-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    text-align: left;
}
.stores-brand-specs li {
    font-size: 13px;
    color: #333;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
    line-height: 1.5;
}
.stores-brand-specs li:last-child { border-bottom: none; }
.stores-brand-specs li i { color: var(--accent-color); margin-right: 8px; font-size: 11px; }
.stores-brand-price {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 4px;
}

/* ===== Calculadora ===== */
.stores-calc-section { background: var(--primary-color); }
.stores-calc-section .stores-guide-label { color: rgba(255,255,255,0.60); }
.stores-calc-section .stores-guide-heading { color: #fff; }
.stores-calc-section .stores-guide-intro { color: rgba(255,255,255,0.72); }

.stores-calc-inputs {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 32px 28px;
    height: 100%;
}
.stores-calc-field { margin-bottom: 28px; }
.stores-calc-field:last-child { margin-bottom: 0; }
.stores-calc-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.80);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.stores-calc-slider-wrap { display: flex; align-items: center; gap: 14px; }
.stores-calc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.20);
    outline: none;
    cursor: pointer;
}
.stores-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}
.stores-calc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}
.stores-calc-slider-val {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}
.stores-calc-radio-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stores-calc-radio { cursor: pointer; margin: 0; }
.stores-calc-radio input[type="radio"] { display: none; }
.stores-calc-radio-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.15);
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}
.stores-calc-radio-box i { font-size: 20px; color: rgba(255,255,255,0.60); margin-bottom: 4px; }
.stores-calc-radio-box strong { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 700; display: block; }
.stores-calc-radio-box small { font-size: 11px; color: rgba(255,255,255,0.50); }
.stores-calc-radio input:checked + .stores-calc-radio-box {
    border-color: var(--accent-color);
    background: rgba(177,1,0,0.18);
}
.stores-calc-radio input:checked + .stores-calc-radio-box i,
.stores-calc-radio input:checked + .stores-calc-radio-box strong { color: #fff; }

.stores-calc-results { border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.stores-calc-results-header {
    background: var(--accent-color);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 16px 24px;
}
.stores-calc-results-body {
    background: #fff;
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.stores-calc-result-card {
    background: var(--ztc-bg-bg-1);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    border: 1px solid #f0f0f0;
}
.stores-calc-result-icon { font-size: 22px; color: var(--accent-color); }
.stores-calc-result-val {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}
.stores-calc-result-lbl { font-size: 12px; color: #888; line-height: 1.4; }
.stores-calc-disclaimer {
    font-size: 11px;
    color: #aaa;
    line-height: 1.5;
    text-align: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

/* ===== Compare Cards ===== */
.stores-compare-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    transition: box-shadow 0.2s;
}
.stores-compare-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
.stores-compare-label {
    font-size: 12px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.stores-compare-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.stores-compare-before {
    font-size: 15px;
    font-weight: 600;
    color: #bbb;
    text-decoration: line-through;
}
.stores-compare-arrow {
    font-size: 12px;
    color: var(--accent-color);
}
.stores-compare-after {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
}

/* ===== Sticky CTA Bar ===== */
.stores-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: var(--primary-color);
    border-top: 2px solid var(--accent-color);
    padding: 12px 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
}
.stores-sticky-bar--visible { transform: translateY(0); }
.stores-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.stores-sticky-text { font-size: 14px; color: rgba(255,255,255,0.80); }
.stores-sticky-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stores-sticky-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}
.stores-sticky-btn:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; }
.stores-sticky-btn--call { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.20); }
.stores-sticky-btn--whatsapp { background: #25d366; color: #fff; }
.stores-sticky-btn--cta { background: var(--accent-color); color: #fff; }
@media (max-width: 576px) {
    .stores-sticky-actions { gap: 6px; }
    .stores-sticky-btn { padding: 9px 12px; font-size: 13px; }
    .stores-sticky-btn span { display: none; }
}

/* ===== Mobile Scroll-Up Hint ===== */
.stores-scroll-hint {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 9991;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 14px 20px 14px 18px;
    text-align: center;
    min-width: 250px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
    border-top: 3px solid var(--accent-color);
}
.stores-scroll-hint--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
@media (min-width: 577px) {
    .stores-scroll-hint { display: none !important; }
}
.stores-scroll-hint__msg {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.4;
}
.stores-scroll-hint__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.stores-scroll-hint__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

/* ===== Services Section — UX Enhanced ===== */
.svc-google-bar {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 50px;
    padding: 10px 22px 10px 18px;
    margin-top: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.svc-google-bar .svc-rating-score {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}
.svc-google-bar .svc-stars {
    color: #FBBC04;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1;
}
.svc-google-bar .svc-rating-text {
    font-size: 13px;
    color: #666;
    line-height: 1.3;
}
.svc-google-bar .svc-rating-text strong { color: var(--primary-color); }
.svc-google-bar .svc-divider {
    width: 1px;
    height: 36px;
    background: #e0e0e0;
    flex-shrink: 0;
}
.svc-google-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}
.svc-google-btn:hover { color: var(--accent-color); }
.svc-google-btn .svc-g-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Stats strip */
.svc-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--primary-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 48px;
}
.svc-stat {
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.10);
    transition: background 0.25s;
}
.svc-stat:last-child { border-right: none; }
.svc-stat:hover { background: rgba(177,1,0,0.18); }
.svc-stat-num {
    display: block;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}
.svc-stat-num span { color: var(--accent-color); }
.svc-stat-lbl {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.60);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Card accent top */
.svc-card {
    border-top: 3px solid var(--accent-color) !important;
    display: flex;
    flex-direction: column;
}
.svc-card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--accent-color);
    color: #fff;
    margin-bottom: 14px;
    align-self: flex-start;
}
.svc-card-tag--popular {
    background: rgba(177,1,0,0.08);
    color: var(--accent-color);
}

/* CTA row bottom */
.svc-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 48px;
}
.svc-google-bar--sm {
    padding: 8px 18px 8px 14px;
    margin-top: 0;
}
.svc-google-bar--sm .svc-rating-score { font-size: 20px; }
.svc-google-bar--sm .svc-stars { font-size: 13px; }

@media (max-width: 767px) {
    .svc-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .svc-stat { border-bottom: 1px solid rgba(255,255,255,0.10); }
    .svc-google-bar { flex-wrap: wrap; gap: 12px; border-radius: 16px; }
    .svc-google-bar .svc-divider { display: none; }
    .svc-cta-row { flex-direction: column; gap: 16px; }
}

/* ── Stats bar ── */
.ht-stats-bar {
    background: #fff;
    border-radius: 20px;
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 6px 32px rgba(0,0,0,.10);
}
.ht-stats-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ht-score {
    font-size: 54px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: -2px;
    font-family: inherit;
}
.ht-stars-row {
    display: flex;
    gap: 5px;
    font-size: 24px;
    color: #f5a623;
}
.ht-count {
    font-size: 16px;
    color: #888;
    white-space: nowrap;
}
.ht-google-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--accent-color);
    color: #fff;
    padding: 14px 26px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ht-google-btn:hover { background: #8f0000; color: #fff; transform: translateY(-1px); }
.ht-g-icon {
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    flex-shrink: 0;
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1;
}
@media (max-width: 576px) {
    .ht-stats-bar { justify-content: center; text-align: center; padding: 20px 24px; }
    .ht-stats-left { justify-content: center; }
    .ht-google-btn { width: 100%; justify-content: center; }
}

/* ── Review cards ── */
.home-testimonial-card {background: var(--ztc-bg-bg-1);border-radius:16px;padding:32px 24px 26px;height:100%;transition:all .3s;display:flex;flex-direction:column;align-items:center;text-align:center;border:1.5px solid transparent;}
.home-testimonial-card:hover { background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.10); transform:translateY(-4px); border-color:#f0f0f0; }
.home-testimonial-card .ht-avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:#fff; margin:0 auto 20px; flex-shrink:0; background:var(--accent-color); }
.home-testimonial-card .ht-stars { display:flex; gap:5px; list-style:none; padding:0; margin:0 0 18px; justify-content:center; }
.home-testimonial-card .ht-stars li { width:32px; height:32px; border-radius:7px; background:rgba(245,166,35,.13); display:flex; align-items:center; justify-content:center; color:#f5a623; font-size:13px; }
.home-testimonial-card .ht-text { font-size:14px; line-height:1.8; color:#444; flex:1; margin-bottom:20px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.home-testimonial-card .ht-name { font-size:15px; font-weight:700; color:var(--primary-color); margin-bottom:3px; }
.home-testimonial-card .ht-meta { font-size:12px; color:#aaa; display:flex; align-items:center; justify-content:center; gap:7px; }
.home-testimonial-card .ht-meta i { color:#ccc; font-size:12px; }

/* ═══════════════════════════════════════════════════════════
   Mosquitonet — /services/mosquitonet
═══════════════════════════════════════════════════════════ */

/* ── Comparison table ── */
.mosq-compare-table { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 32px rgba(0,0,0,.08); border:1.5px solid #f0f0f0; }
.mosq-compare-header,
.mosq-compare-row { display:grid; grid-template-columns:1fr 1.4fr 1.4fr; align-items:center; }
.mosq-compare-header { background:#f9f9f9; border-bottom:2px solid #ebebeb; padding:16px 24px; font-size:13px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; }
.mosq-compare-row { padding:0 24px; border-bottom:1px solid #f3f3f3; transition:background .15s; }
.mosq-compare-row:hover { background:#fafafa; }
.mosq-compare-row--last { border-bottom:none; }
.mosq-col-label { font-size:15px; font-weight:600; color:#333; padding:18px 0; }
.mosq-col-bad { font-size:14px; color:#999; padding:18px 16px; display:flex; align-items:center; gap:10px; }
.mosq-col-good { font-size:14px; font-weight:600; color:#1a1a1a; padding:18px 16px; display:flex; align-items:center; gap:10px; background:rgba(177,1,0,.03); border-left:2px solid rgba(177,1,0,.15); position:relative; }
.mosq-compare-header .mosq-col-good { background:rgba(177,1,0,.04); border-left:2px solid var(--accent-color); color:#1a1a1a; font-weight:700; font-size:14px; text-transform:none; letter-spacing:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px 16px; }
.mosq-recommended-badge { display:inline-block; background:var(--accent-color); color:#fff; font-size:9px; font-weight:800; letter-spacing:1.2px; padding:3px 10px; border-radius:4px; text-transform:uppercase; }
.mosq-check { color:var(--accent-color); font-size:14px; flex-shrink:0; }
.mosq-dot { width:6px; height:6px; border-radius:50%; background:#ccc; flex-shrink:0; display:inline-block; }
@media (max-width: 576px) {
    .mosq-compare-header,
    .mosq-compare-row { grid-template-columns:0.8fr 1fr 1.2fr; }
    .mosq-col-label { font-size:13px; }
    .mosq-col-bad, .mosq-col-good { font-size:12px; padding:14px 10px; }
    .mosq-compare-header { padding:12px 10px; }
    .mosq-compare-row { padding:0 10px; }
}

/* ── Option badges (window type cards) ── */
.mosq-option-badge { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; padding:2px 9px; border-radius:20px; margin-left:6px; vertical-align:middle; line-height:1.6; }
.mosq-option-badge--popular { background:var(--accent-color); color:#fff; }
.mosq-option-badge--eco { background:#e8f5e9; color:#2e7d32; }

/* ── Stat bar (3 intro stats) ── */
.mosq-stat-card { background:#fff; border-radius:12px; border:1.5px solid #f0f0f0; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.mosq-stat-icon { width:48px; height:48px; border-radius:10px; background:rgba(177,1,0,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; color:var(--accent-color); }
.mosq-stat-value { font-size:22px; font-weight:900; color:var(--accent-color); line-height:1; }
.mosq-stat-label { font-size:12px; color:#888; margin-top:2px; }

/* ── Callout banner ── */
.mosq-callout { background:var(--primary-color); border-radius:14px; padding:28px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.mosq-callout-subtitle { color:rgba(255,255,255,.65); font-size:13px; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; font-weight:700; }
.mosq-callout-title { color:#fff; font-size:17px; font-weight:700; margin:0; }
.mosq-callout .header-btn3 { flex-shrink:0; }

/* ── Big stat numbers ── */
.mosq-big-number { font-size:48px; font-weight:900; color:var(--accent-color); line-height:1; margin-bottom:8px; }

/* ── Accent color ── */
.mosq-icon-accent { color:var(--accent-color); }
.mosq-accent { color:var(--accent-color); }

/* ── Price notes in window guide ── */
.mosq-price-note { color:#888; margin-top:3px; display:block; }

/* ── Process num icon size ── */
.mosq-process-num-icon { font-size:16px; }

/* ── Zone / coverage section ── */
.mosq-zone-box { background:#f9f9f9; border-radius:16px; padding:32px 40px; border:1.5px solid #f0f0f0; }
.mosq-zone-title { font-size:20px; font-weight:700; margin-bottom:12px; }
.mosq-zone-text { color:#555; font-size:15px; margin-bottom:16px; }
.mosq-zone-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.mosq-zone-item { font-size:14px; color:#555; }

/* ── Zona chips grid ── */
.zona-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; grid-auto-rows:42px; }
.zona-chip { display:flex; align-items:center; justify-content:center; padding:6px 4px; border:1.5px solid var(--accent-color); border-radius:6px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--accent-color); background:#fff; text-align:center; line-height:1.2; overflow:hidden; }
.zona-chip--active { background:var(--accent-color); color:#fff; }
.zona-chip--other { grid-column:span 2; }
@media(max-width:991px){ .zona-chips { grid-template-columns:repeat(3,1fr); } .zona-chip--other { grid-column:span 1; } }
@media(max-width:575px){ .zona-chips { grid-template-columns:repeat(2,1fr); } }

/* ── Related services links ── */
.mosq-related-links { display:flex; flex-direction:column; gap:10px; }
.mosq-related-link { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-radius:10px; border:1.5px solid #eee; text-decoration:none; color:#1a1a1a; font-weight:600; font-size:14px; transition:border-color .2s; }
.mosq-related-link:hover { border-color:var(--accent-color); color:#1a1a1a; }
.mosq-related-icon { color:var(--accent-color); font-size:18px; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════
   Railings — /services/railings
═══════════════════════════════════════════════════════════ */
.rail-compare-table { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 32px rgba(0,0,0,.08); border:1.5px solid #f0f0f0; }
.rail-compare-header, .rail-compare-row { display:grid; grid-template-columns:1fr 1.3fr 1.3fr; align-items:center; }
.rail-compare-header { background:#f9f9f9; border-bottom:2px solid #ebebeb; padding:16px 24px; font-size:12px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; }
.rail-compare-row { padding:0 24px; border-bottom:1px solid #f3f3f3; transition:background .15s; }
.rail-compare-row:last-child { border-bottom:none; }
.rail-compare-row:hover { background:#fafafa; }
.rail-col-label { font-size:14px; font-weight:600; color:#333; padding:16px 0; }
.rail-col-bad {font-size: 15px;color:#999;padding:16px 16px;display:flex;align-items:center;gap:9px;}
.rail-col-good {font-size: 15px;font-weight:600;color:#1a1a1a;padding:16px 16px;display:flex;align-items:center;gap:9px;background:rgba(177,1,0,.03);border-left:2px solid rgba(177,1,0,.15);}
.rail-compare-header .rail-col-bad { color:#555; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0; padding:14px 16px; }
.rail-compare-header .rail-col-good {background:rgba(177,1,0,.05);border-left:2px solid var(--accent-color);color:#1a1a1a;font-weight:800;font-size: 16px;text-transform:none;letter-spacing:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;}
.rail-recommended-badge { display:inline-block; background:var(--accent-color); color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; padding:2px 8px; border-radius:4px; text-transform:uppercase; }
.rail-check {color: #b10200;font-size:13px;flex-shrink:0;}
.rail-cross { color:#cc0000; font-size:13px; flex-shrink:0; }
@media (max-width: 576px) {
    .rail-compare-header, .rail-compare-row { grid-template-columns:0.9fr 1fr 1.2fr; }
    .rail-col-label { font-size:12px; }
    .rail-col-bad, .rail-col-good { font-size:11px; padding:13px 10px; }
    .rail-compare-header { padding:12px 10px; }
    .rail-compare-row { padding:0 10px; }
}

/* ═══════════════════════════════════════════════════════════
   Stores — /services/stores
═══════════════════════════════════════════════════════════ */
.sto-compare-table { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 32px rgba(0,0,0,.08); border:1.5px solid #f0f0f0; }
.sto-compare-header, .sto-compare-row { display:grid; grid-template-columns:1fr 1.3fr 1.3fr; align-items:center; }
.sto-compare-header { background:#f9f9f9; border-bottom:2px solid #ebebeb; padding:16px 24px; font-size:12px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; }
.sto-compare-row { padding:0 24px; border-bottom:1px solid #f3f3f3; transition:background .15s; }
.sto-compare-row:last-child { border-bottom:none; }
.sto-compare-row:hover { background:#fafafa; }
.sto-col-label {font-size: 16px;font-weight:600;color:#333;padding:16px 0;}
.sto-col-bad {font-size: 15px;color:#999;padding:16px 16px;display:flex;align-items:center;gap:9px;}
.sto-col-good {font-size: 15px;font-weight:600;color:#1a1a1a;padding:16px 16px;display:flex;align-items:center;gap:9px;background:rgba(177,1,0,.03);border-left:2px solid rgba(177,1,0,.15);}
.sto-compare-header .sto-col-bad { color:#555; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0; padding:14px 16px; }
.sto-compare-header .sto-col-good { background:rgba(177,1,0,.05); border-left:2px solid var(--accent-color); color:#1a1a1a; font-weight:800; font-size:12px; text-transform:none; letter-spacing:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; }
.sto-recommended-badge { display:inline-block; background:var(--accent-color); color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; padding:2px 8px; border-radius:4px; text-transform:uppercase; }
.sto-check {color: #b10200;font-size:13px;flex-shrink:0;}
.sto-cross { color:#cc0000; font-size:13px; flex-shrink:0; }
@media (max-width: 576px) {
    .sto-compare-header, .sto-compare-row { grid-template-columns:0.9fr 1fr 1.2fr; }
    .sto-col-label { font-size:12px; }
    .sto-col-bad, .sto-col-good { font-size:11px; padding:13px 10px; }
    .sto-compare-header { padding:12px 10px; }
    .sto-compare-row { padding:0 10px; }
}
/* ── Stores stats big numbers ── */
.svc-big-number { font-size:34px; font-weight:800; color:var(--accent-color); line-height:1; margin-bottom:6px; }

/* ═══════════════════════════════════════════════════════════
   Windows — /services/windows
═══════════════════════════════════════════════════════════ */
.win-compare-table { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 32px rgba(0,0,0,.08); border:1.5px solid #f0f0f0; }
.win-compare-header, .win-compare-row { display:grid; grid-template-columns:1fr 1.3fr 1.3fr; align-items:center; }
.win-compare-header { background:#f9f9f9; border-bottom:2px solid #ebebeb; padding:16px 24px; font-size:12px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; }
.win-compare-row { padding:0 24px; border-bottom:1px solid #f3f3f3; transition:background .15s; }
.win-compare-row:last-child { border-bottom:none; }
.win-compare-row:hover { background:#fafafa; }
.win-col-label { font-size:14px; font-weight:600; color:#333; padding:16px 0; }
.win-col-bad {font-size: 14px;color:#999;padding:16px 16px;display:flex;align-items:center;gap:9px;}
.win-col-good { font-size:13px; font-weight:600; color:#1a1a1a; padding:16px 16px; display:flex; align-items:center; gap:9px; background:rgba(177,1,0,.03); border-left:2px solid rgba(177,1,0,.15); }
.win-compare-header .win-col-bad { color:#555; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0; padding:14px 16px; }
.win-compare-header .win-col-good { background:rgba(177,1,0,.05); border-left:2px solid var(--accent-color); color:#1a1a1a; font-weight:800; font-size:12px; text-transform:none; letter-spacing:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; }
.win-recommended-badge { display:inline-block; background:var(--accent-color); color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; padding:2px 8px; border-radius:4px; text-transform:uppercase; }
.win-check {color: var(--accent-color);font-size: -84px;flex-shrink:0;}
.win-cross { color:#cc0000; font-size:13px; flex-shrink:0; }
@media (max-width: 576px) {
    .win-compare-header, .win-compare-row { grid-template-columns:0.9fr 1fr 1.2fr; }
    .win-col-label { font-size:12px; }
    .win-col-bad, .win-col-good { font-size:11px; padding:13px 10px; }
    .win-compare-header { padding:12px 10px; }
    .win-compare-row { padding:0 10px; }
}
/* ── Color swatches in the color section ── */
.win-color-white { color:#f5f5f5; -webkit-text-stroke:1px #ccc; }
.win-color-silver { color:#adb5bd; }
.win-color-anthracite { color:#343a40; }
.win-color-oak { color:#c8860a; }

/* ═══════════════════════════════════════════════════════════
   Contact form card — /contact
   Mapa: fondo completo. Formulario: tarjeta superpuesta a la derecha.
   El iframe se desplaza left:-40% width:140% → pin al ~30% desde izq.
═══════════════════════════════════════════════════════════ */

/* Wrapper: posición relativa para poder superponer */
.ctf-section { position:relative; min-height:720px; display:flex; align-items:center; overflow:hidden; }

/* Mapa de fondo — ocupa todo el section */
.ctf-map-bg { position:absolute; inset:0; z-index:0; }
.ctf-map-bg iframe { position:absolute; top:0; left:-40%; width:140%; height:100%; border:0; display:block; }

/* Container del formulario — sobre el mapa */
.ctf-overlay-container { position:relative; z-index:2; padding-top:64px; padding-bottom:64px; }

/* Tarjeta blanca */
.ctf-card { background:#fff; border-radius:24px; padding:44px 48px; box-shadow:0 16px 64px rgba(0,0,0,.28); }

/* Contenido de la tarjeta */
.ctf-badge { display:flex; align-items:center; gap:9px; font-size:11px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent-color); margin-bottom:14px; }
.ctf-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-color); flex-shrink:0; }
.ctf-title {font-size: 36px;font-weight:900;color:#1a1a1a;line-height:1.1;margin-bottom:10px;}
.ctf-subtitle { color:#999; font-size:15px; margin-bottom:28px; }
.ctf-label { display:block; font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:8px; }
.ctf-required { color:var(--accent-color); }
.ctf-input { width:100%; padding:15px 18px; border:none; border-radius:14px; background:#f2f2f2; font-size:15px; color:#1a1a1a; outline:none; transition:background .2s; }
.ctf-input::placeholder { color:#b0b0b0; }
.ctf-input:focus { background:#e8e8e8; }
.ctf-textarea { resize:vertical; min-height:120px; }
.ctf-btn { width:100%; padding:18px; background:var(--accent-color); color:#fff; border:none; border-radius:14px; font-size:17px; font-weight:800; cursor:pointer; transition:background .2s; }
.ctf-btn:hover { background:#8a0000; }
.ctf-trust { font-size:13px; color:#aaa; margin:4px 0 0; }
.ctf-trust-icon { color:var(--accent-color); }

/* Responsive */
@media (max-width: 991px) {
    .ctf-section { min-height:auto; }
    .ctf-map-bg { position:relative; inset:auto; height:320px; }
    .ctf-map-bg iframe { left:0; width:100%; height:320px; }
    .ctf-overlay-container { position:relative; padding:40px 0; }
    .ctf-card { padding:32px 24px; }
    .ctf-title { font-size:30px; }
}

.hero-form-card {
    background: #fff;
    border-radius: 20px;
    padding: 44px 40px;
    box-shadow: 0 8px 48px rgba(0,0,0,.18);
    margin-top: 20px;
}
.hero-form-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}
.hero-form-title {
    font-size: 30px;
    font-weight: 900;
    color: #111;
    line-height: 1.15;
    margin-bottom: 8px;
}
.hero-form-sub {
    font-size: 14px;
    color: #888;
    margin-bottom: 28px;
}
.hero-form-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    margin-bottom: 7px;
}
.hero-form-input {
    width: 100%;
    background: #f7f7f7;
    border: 1.5px solid #ebebeb;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    display: block;
}
.hero-form-input::placeholder { color: #bbb; }
.hero-form-input:focus {
    border-color: var(--accent-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(177,1,0,.08);
}
.hero-form-textarea {
    resize: vertical;
    min-height: 100px;
}
.hero-form-btn {
    width: 100%;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    margin-top: 4px;
}
.hero-form-btn:hover {
    background: #8f0000;
    transform: translateY(-1px);
}
.hero-form-footer {
    font-size: 13px;
    color: #aaa;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.hero-form-footer i { color: var(--accent-color); }
@media (max-width: 576px) {
    .hero-form-card { padding: 32px 24px; }
    .hero-form-title { font-size: 24px; }
}


.select2-container {width: 100% !important;width: 100%;background: #ffffff;border: 1.5px solid #ebebeb;border-radius: 12px;padding: 13px 16px;font-size: 14px;color: #333;outline: none;transition: border-color .2s, box-shadow .2s;display: block;}
.select2-selection--single {
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
}
.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: none;
    height: auto;
    padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: inherit;
    line-height: inherit;
    padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 27px !important;
    right: 8px;
}
.select2-container .select2-selection--single {
    height: 100%;
    display: flex;
    align-items: center;
    border: 0px solid transparent !important;
    padding: 0px !important;
}
.select2-container--open .select2-dropdown {
    left: 0;
    top: -7px;
    background-color: #ffffff;
    border: 1px solid #f7f7f7 !important;
}

.select2-dropdown { border:1.5px solid var(--accent-color) !important; border-radius:10px !important; overflow:hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color:var(--accent-color) !important; color:#fff !important; }

.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    position: relative;
}

.step-indicator::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.step-item {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 14px;
    color: var(--text-color);
}

.step-item.active .step-circle {
    background: #000000;
    border-color: #000000;
    color: white;
    transform: scale(1.1);
}

.step-item.completed .step-circle {
    background: var(--ztc-bg-bg-3);
    border-color: var(--ztc-bg-bg-3);
    color: white;
}

.step-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.step-item.active .step-label {
    color: #000000;
    font-weight: 600;
}

.step-item.completed .step-label {
    color: var(--ztc-bg-bg-3);
}

/* Form Steps */
.form-step { display: none; }

.form-step.active {
    display: block;
    animation: fadeInStep 0.5s;
}

@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Service Selection Cards */
.service-selection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.service-option { position: relative; }

.service-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.service-card-option {
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.4rem 0.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.service-card-option:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 14px rgba(177, 1, 0, 0.12);
}

.service-option input[type="radio"]:checked + .service-card-option {
    border-color: var(--accent-color);
    background: rgba(177, 1, 0, 0.04);
    box-shadow: 0 4px 14px rgba(177, 1, 0, 0.15);
}

.service-card-option i {
    font-size: 2.2rem;
    color: var(--accent-color);
    margin-bottom: 0;
}

.service-card-option h5 {
    font-size: 0.85rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
}


.btn-estimate-prev,
.btn-estimate-next {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-estimate-prev {
    background: transparent;
    color: #6c757d;
    border: none;
    padding-left: 0;
}

.btn-estimate-prev:hover {
    background: transparent;
    color: #343a40;
}

.btn-estimate-next {
    background: var(--accent-color);
    color: white;
}

.btn-estimate-next:hover {
    background: #8a0100;
}

.btn-estimate-prev:disabled {
    opacity: 0;
    cursor: not-allowed;
    pointer-events: none;
}

/* Form Styling */
.estimate-form .form-control,
.estimate-form .form-select {
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s;
}

.estimate-form .form-control:focus,
.estimate-form .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(177, 1, 0, 0.1);
}

.estimate-form .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.estimate-form .form-control.is-invalid {
    border-color: var(--error-color);
}

/* Info Boxes */
.estimate-info-box {
    background: #f8f9fa;
    border-left: 4px solid var(--accent-color);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 8px;
}

.estimate-info-box i {
    color: var(--accent-color);
    font-size: 1.5rem;
    margin-right: 1rem;
}

/* Submit Options */
.submit-options {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.submit-options .btn-estimate-submit {
    flex: 1;
    min-width: 200px;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-whatsapp {
    background: #000000;
    color: white;
}

.btn-whatsapp:hover {
    background: #20BA5A;
    color: white;
}

.btn-email-submit {
    background: var(--accent-color);
    color: white;
}

.btn-email-submit:hover {
    background: #8a0100;
    color: white;
}

/* Hero Estimate Section */
.estimate-hero {
    padding: 120px 0 80px;
}
.estimate-hero .hero-header h5 {
    color: var(--accent-color);
    background: rgba(177,1,0,0.12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 22px;
}
.estimate-hero .hero-header h1 {
    color: white;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.2;
    margin-bottom: 18px;
    font-weight: 800;
}
.estimate-hero .hero-header > p {
    color: rgba(255,255,255,0.82);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 28px;
}
.estimate-hero .hero-header ul {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
}
.estimate-hero .hero-header ul li {
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.estimate-hero .hero-header ul li img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.estimate-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
@media (max-width: 991px) {
    .estimate-hero { padding: 100px 0 60px; }
    .estimate-form-card { padding: 28px 22px; }
}
@media (max-width: 767px) {
    .estimate-hero { padding: 80px 0 40px; }
    .estimate-form-card { padding: 22px 16px; }
}

/* Process Sidebar */
.process-sidebar {
    position: sticky;
    top: 90px;
}
.process-sidebar-header {
    margin-bottom: 28px;
}
.process-sidebar-header h5 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 6px;
}
.process-sidebar-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.3;
    margin-bottom: 8px;
}
.process-sidebar-header p {
    font-size: 13px;
    color: #888;
    margin: 0;
}
.process-timeline {
    position: relative;
    padding-left: 0;
    list-style: none;
    margin: 0 0 28px 0;
}
.process-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #eee;
}
.process-step {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
}
.process-step:last-child { margin-bottom: 0; }
.process-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #aaa;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all .3s;
}
.process-step.done .process-step-num {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}
.process-step-body { padding-top: 6px; }
.process-step-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
}
.process-step-body span {
    font-size: 12.5px;
    color: #888;
    line-height: 1.5;
}
.sidebar-trust {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #555;
}
.sidebar-trust-item i {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.sidebar-trust-item strong { display: block; font-size: 13px; color: var(--primary-color); }

/* Responsive */
@media (max-width: 991px) {
    .process-sidebar { position: static; margin-bottom: 40px; }
}
@media (max-width: 768px) {
    .step-label { font-size: 0.7rem; }
    .step-circle { width: 35px; height: 35px; font-size: 0.9rem; }
    .service-selection { grid-template-columns: repeat(2, 1fr); }
    .submit-options { flex-direction: column; }
    .submit-options .btn-estimate-submit { min-width: 100%; }
    .estimate-hero .hero-header h1 { font-size: 1.8rem; }
}
/* Personalización de Select2 */
.select2-container--default .select2-selection--single {
    height: 45px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px;
}

.select2-container--default.is-invalid .select2-selection--single {
    border-color: #dc3545;
}

.select2-container--default .select2-selection--single:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select2-dropdown {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent-color, #0d6efd);
}

.form-text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Hero redesign to match image */
.estimate-hero {
    background-image: linear-gradient(to right, rgb(22 28 45 / 21%), rgb(43 56 78 / 21%)), url(/pages/images/bg/header-bg1.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    padding-top: 100px;
    padding-bottom: 220px;
    border-bottom-left-radius: 50% 10%;
    border-bottom-right-radius: 50% 10%;
}

.form-wrapper-row {
    margin-top: -150px;
    z-index: 10;
    position: relative;
}

.estimate-form-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 40px;
}

/* Steps */
.step-indicator {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
}
.step-line {
    position: absolute;
    top: 20px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: #e9ecef;
    z-index: 1;
}
.step-item {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 0 5px;
    text-align: center;
    flex: 1;
}
.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #e9ecef;
    color: #adb5bd;
    transition: all 0.3s ease;
}
.step-item.active .step-circle {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 6px rgba(177, 1, 0, 0.15);
}
.step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
    margin-top: 10px;
    transition: all 0.3s ease;
}
.step-item.active .step-label {
    color: #212529;
}

/* Inputs with icons */
.custom-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    background-color: #ffffff;
    transition: all 0.3s ease;
    overflow: hidden;
}
.custom-input-group:focus-within {
    border-color: rgba(177, 1, 0, 0.7);
    box-shadow: 0 0 0 0.25rem rgba(177, 1, 0, 0.15);
    background-color: #fff;
}
.custom-input-group i {
    color: #6c757d;
    margin-right: 10px;
    font-size: 1.1rem;
}
.custom-input-group input,
.custom-input-group select {
    border: none;
    background: transparent;
    flex: 1;
    outline: none;
    padding: 0;
    color: #495057;
    font-size: 1rem;
}
.custom-input-group input::placeholder {
    color: #adb5bd;
}

.form-label {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}
.form-label .text-danger {
    color: var(--accent-color) !important;
}

.form-text-custom {
    display: block;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: -5px;
    margin-bottom: 10px;
}

.btn-estimate-prev {
    background-color: transparent;
    color: #6c757d;
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-right: 10px;
}
.btn-estimate-prev:hover {
    color: #343a40;
}
.btn-estimate-prev:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Navegación 50/50 (pasos 2-5) ── */
.form-navigation-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 2rem;
}
.form-navigation-split .btn-estimate-prev {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #555;
    background: #fff;
    padding: 10px 0;
    font-weight: 600;
    text-align: center;
    width: 100%;
    justify-content: center;
}
.form-navigation-split .btn-estimate-prev:hover {
    border-color: #aaa;
    color: #222;
    background: #f5f5f5;
}
.form-navigation-split .btn-estimate-next {
    width: 100%;
    border-radius: 8px;
    justify-content: center;
}

/* ── Inputs sin icono paso 1 ── */
.estimate-form .form-control {
    padding: 12px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    background: #ffffff;
    transition: border-color 0.25s, box-shadow 0.25s;
    width: 100%;
}
.estimate-form .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(177,1,0,0.1);
    background: #fff;
    outline: none;
}
.estimate-form .form-control.is-invalid {
    border-color: #dc3545;
}

/* ── Tarjetas de servicio ── */
.service-card-option {
    padding: 1.6rem 1rem 1.2rem !important;
    gap: 0 !important;
}
.service-card-option i {
    font-size: 2.8rem !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto 10px !important;
}
.service-card-option h5 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}
.service-card-option small {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    text-align: center !important;
}

/* ── Autofill sin fondo azul del navegador ── */
.estimate-form .form-control:-webkit-autofill,
.estimate-form .form-control:-webkit-autofill:hover,
.estimate-form .form-control:-webkit-autofill:focus,
.estimate-form .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #383e4410 inset !important;
    box-shadow: 0 0 0 1000px #383e4410 inset !important;
    -webkit-text-fill-color: #495057 !important;
    background-color: #383e4410 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ── Botón Anterior paso 5 (ancho completo) ── */
.btn-estimate-prev-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 0;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    background: #fff;
    color: #555;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s;
}
.btn-estimate-prev-full:hover {
    border-color: #aaa;
    color: #222;
    background: #f5f5f5;
}

/* ── Botones de envío centrados ── */
.btn-whatsapp,
.btn-email-submit {
    justify-content: center !important;
}

/* Checkboxes con color de marca */
#multiStepForm .form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
#multiStepForm .form-check-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(177, 1, 0, 0.2);
}

/* ── Hero Estimate ── */
.estimate-hero-badge {
    display: block;
    text-align: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 6px 18px;
    border-radius: 8px;
    margin-bottom: 22px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.estimate-hero-title {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 32px;
    text-align: center;
}
.estimate-hero-title span {
    color: #b10000;
}

.estimate-hero-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 32px;
    max-width: 600px;
    margin: 0 auto 36px;
    text-align: left;
}

.estimate-benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.92);
    font-size: 0.97rem;
}

.estimate-benefit-item i {
    color: #f87171;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.estimate-hero-ctas {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.estimate-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-color);
    color: #fff;
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    padding: 11px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 18px rgba(177,1,0,0.35);
}

.estimate-cta-primary:hover {
    background: #8a0100;
    border-color: #8a0100;
    color: #fff;
    transform: translateY(-2px);
}

.estimate-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #b10100;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 8px;
    padding: 11px 28px;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    transition: all 0.3s;
}

.estimate-cta-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 575px) {
    .estimate-hero-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }
    .estimate-hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    .estimate-cta-primary,
    .estimate-cta-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}


.theme-btn {
    background-color: #008bce;
    border-radius: 37px;
    bottom: 17px;
    color: #fff;
    display: table;
    height: 50px;
    left: 25px;
    min-width: 49px;
    position: fixed;
    text-align: center;
    z-index: 9999;
}

.theme-btn i {
    font-size: 20px;
    line-height: 52px;
    font-weight: 600;
}

.theme-btn.bt-support-now {
    background: #b10100;
    background: -moz-linear-gradient(45deg, #1ebbf0 8%, #39dfaa 100%);
    bottom: 74px;
}

.theme-btn.bt-buy-now {
    background: #000000;
}

.theme-btn:hover {
    color: #fff;
    padding: 0 20px
}

.theme-btn span {
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: -15px;
    opacity: 0;
    line-height: 50px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    text-transform: uppercase
}

.theme-btn:hover span {
    opacity: 1;
    letter-spacing: 1px;
    padding-left: 10px
}

.theme-btn.bt-support-options {
    background: -moz-linear-gradient(45deg, #1ebbf0 8%, #39dfaa 100%);
    background: #008bce;
    bottom: 132px;
    color: #fff;
}