:root {
    --primary-color: #FCD02C;
    --secondary-color: #141414;
    --dark-bg: #1f1f1f;
    --light-gray: #f4f4f4;
    --text-gray: #898989;
    --white: #ffffff;
    --border-color: #d9d9d9;
    --font-family: 'Manrope',sans-serif;
    --transition: all 0.3s ease
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--secondary-color);
    overflow-x: hidden
}

.container-fluid {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 20px
}

.section-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    display: block;
    margin-bottom: 1rem
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 2rem
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 12px 24px;
    transition: var(--transition);
    border: none;
    font-size: 14px
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 2px solid var(--primary-color)
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color)
}

.why-card.why-card-2 {
    background-color: #141414!important
}

.why-card.why-card-2 .why-content h4,.why-card.why-card-2 .why-content p {
    color: #fff
}

.why-card.why-card-3 {
    background-color: #fcd02c!important
}

.why-card.why-card-3 .why-content h4,.why-card.why-card-3 .why-content p {
    color: #141414
}

.why-img {
    margin-bottom: 64px;
    width: 100%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.why-img img {
    max-width: 190px
}

.btn-view-all span {
    padding: 15px 22px
}

.btn-view-all {
    background-color: var(--light-gray);
    color: var(--secondary-color);
    padding: 0;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.btn-view-all:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color)
}

.btn-view-all i {
    background-color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px
}

.header-section {
    background-color: var(--white);
    padding: 28px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,.1)
}

.logo img {
    height: 108px;
    width: auto
}

.navbar-nav {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px 40px
}

.nav-link {
    color: var(--text-gray)!important;
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    margin: 0 15px;
    position: relative;
    transition: var(--transition)
}

.nav-link.active {
    color: var(--secondary-color)!important
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 2px;
    background-color: var(--primary-color)
}

.nav-link:hover {
    color: var(--secondary-color)!important
}

.btn-quote {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 26px 20px;
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition)
}

.btn-quote:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color)
}

.hero-section {
    height: 850px;
    background: url(../images/hero-bg.jpg) center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 75px
}

.hero-bg {
    background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url(../images/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    height: 700px;
    border-radius: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px
}

.hero-overlay {
    text-align: center;
    color: var(--white);
    z-index: 2
}

.hero-title {
    font-size: 64px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,.5)
}

.hero-subtitle {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,.5)
}

.hero-description {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    opacity: .9
}

.hero-pagination {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: var(--white);
    font-size: 16px;
    font-weight: 700
}

.hero-pagination::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 49px;
    height: 2px;
    background-color: var(--primary-color)
}

.services-section {
    padding: 80px 0 55px;
    background-color: var(--white)
}

.section-header {
    margin-bottom: 50px;
    position: relative
}

.section-action {
    position: absolute;
    bottom: 0;
    right: 0
}

.service-cards {
    margin-bottom: 40px
}

.service-card {
    background-color: var(--white);
    border-radius: 15px;
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
    position: relative;
    z-index: 2
}

.service-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,.1)
}

.service-image {
    height: 360px;
    overflow: hidden;
    border-radius: 15px
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition)
}

.service-card:hover .service-image img {
    transform: scale(1.1)
}

.service-content h3 {
    color: #333;
    text-align: center;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    margin: 0
}

.service-content {
    background-color: var(--white);
    padding: 16px;
    margin-top: -30px;
    z-index: 2;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    height: 76px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 0;
    text-transform: capitalize
}

.service-pagination {
    text-align: left;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    position: relative
}
button.accordion-button {
    border: none;
    box-shadow: none !important;
}

.service-pagination::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 29px;
    height: 2px;
    background-color: var(--primary-color)
}

.services-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 82%;
    height: 335px;
    background-color: var(--secondary-color);
    background-image: url(../images/bg-ser.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0 0 20px 0
}

.services-section {
    position: relative
}
.services-section .container {
    position: relative;
    z-index: 9;
}
.service-cards-container {
    position: relative;
    margin-bottom: 0
}

.service-cards-swiper {
    position: relative;
    overflow: hidden
}

.service-cards-swiper .swiper-slide {
    transition: transform .8s ease!important;
    opacity: 1!important
}

.service-cards-swiper .swiper-slide-active {
    opacity: 1!important
}

.service-cards-swiper .swiper-slide-next,.service-cards-swiper .swiper-slide-prev {
    opacity: 1!important
}

.service-slide {
    height: auto
}

.service-cards-swiper .swiper-custom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    padding: 0 20px;
    position: relative;
    bottom: unset;
    z-index: 9
}

.service-cards-swiper .swiper-left-controls {
    display: flex;
    align-items: center;
    gap: 10px
}

.service-cards-swiper .swiper-pagination-fraction {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    position: relative
}

.service-cards-swiper .swiper-pagination-fraction::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 29px;
    height: 2px;
    background-color: var(--primary-color);
    display: none
}

.service-cards-swiper .swiper-custom-dots {
    display: flex;
    gap: 8px;
    align-items: center
}

.service-cards-swiper .swiper-custom-dot {
    border-radius: 50%;
    background-color: rgba(255,255,255,.5);
    cursor: pointer;
    transition: var(--transition);
    width: 29px;
    height: 1px;
    flex-shrink: 0
}

.service-cards-swiper .swiper-custom-dot.active {
    background-color: var(--primary-color);
    border-radius: 4px
}

.service-cards-swiper .swiper-right-controls {
    display: flex;
    flex-direction: row
}

.projects-gallery {
    position: relative;
    margin-top: 40px
}

.projects-swiper {
    position: relative;
    overflow: hidden
}

.project-slide {
    height: auto
}

.projects-swiper .swiper-custom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding: 0 20px;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 42px;
    bottom: unset;
}

.projects-swiper .swiper-left-controls {
    display: flex;
    align-items: center;
    gap: 20px
}

.projects-swiper .swiper-pagination-fraction {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    position: relative
}

.projects-swiper .swiper-pagination-fraction::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 29px;
    height: 2px;
    background-color: var(--primary-color)
}

.projects-swiper .swiper-custom-dots {
    display: flex;
    align-items: center;
    gap: 10px
}

.projects-swiper .swiper-custom-dot {
    border-radius: 50%;
    background-color: rgba(255,255,255,.5);
    cursor: pointer;
    transition: var(--transition);
    width: 8px;
    height: 8px;
    flex-shrink: 0
}

.projects-swiper .swiper-custom-dot.active {
    background-color: var(--primary-color);
    width: 24px;
    border-radius: 4px
}

.projects-swiper .swiper-right-controls {
    display: flex;
    align-items: center;
    gap: 15px
}

.projects-swiper .swiper-custom-next-btn,.projects-swiper .swiper-custom-prev-btn {
    width: auto;
    height: auto;
    background-color: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    position: relative;
    z-index: 10
}

.projects-swiper .swiper-custom-next-btn:hover,.projects-swiper .swiper-custom-prev-btn:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px)
}

.projects-swiper .swiper-custom-next-btn:hover svg,.projects-swiper .swiper-custom-prev-btn:hover svg {
    filter: brightness(0) invert(1)
}

/* Projects Header Pagination */
.project-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 20px
}

.project-pagination .swiper-pagination-fraction {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    position: relative
}

.project-pagination .swiper-pagination-fraction::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 29px;
    height: 2px;
    background-color: var(--primary-color);
    display: none;
}

.project-pagination .swiper-custom-dots {
    display: flex;
    align-items: center;
    gap: 10px
}

.project-pagination .swiper-custom-dot {
    border-radius: 50%;
    background-color: rgba(255,255,255,.5);
    cursor: pointer;
    transition: var(--transition);
    width: 29px;
    height: 1px;
    flex-shrink: 0
}

.project-pagination .swiper-custom-dot.active {
    background-color: var(--primary-color);
    /* width:24px; */
    border-radius: 4px
}
.projects-gallery  .swiper-custom-next-btn svg, .projects-gallery .swiper-custom-prev-btn svg {
    width: auto;
    height: auto;
}

/* Projects Navigation Center */
.projects-swiper .swiper-navigation-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    /* margin-top: 28px; */
    width: 106px;
    height: 106px;
    flex-shrink: 0;
    border-radius: 1212px;
    background: #FCD02C;
    gap: 50px;
}

.why-icon img {
    max-width: 68px
}

.why-icon::before {
    position: absolute;
    content: "";
    width: 100%;
    background: #333;
    bottom: -18px;
    left: 0;
    z-index: 9;
    height: 1px
}

.service-cards-swiper .swiper-custom-next-btn,.service-cards-swiper .swiper-custom-prev-btn {
    height: 50px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    border: none
}

.service-cards-swiper .swiper-custom-next-btn:hover,.service-cards-swiper .swiper-custom-prev-btn:hover {
    background-color: var(--primary-color)
}

.service-cards-swiper .swiper-custom-next-btn:hover svg path,.service-cards-swiper .swiper-custom-prev-btn:hover svg path {
    fill: var(--white)
}

@media (max-width: 768px) {
    .service-cards-swiper .swiper-custom-controls {
        flex-direction:column;
        gap: 20px;
        align-items: flex-start
    }

    .service-cards-swiper .swiper-right-controls {
        align-self: flex-end
    }
}

.why-section {
    padding: 80px 0 0;
    background-color: var(--white)
}

.why-content {
    text-align: left
}

.why-card {
    padding: 35px 25px;
    border-radius: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden
}

.why-card.light-bg {
    background-color: var(--light-gray)
}

.why-card.dark-bg {
    background-color: var(--secondary-color);
    color: var(--white)
}

.why-card.yellow-bg {
    background-color: var(--primary-color);
    color: var(--secondary-color)
}

.why-icon {
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative
}

.why-icon img {
    width: auto;
    height: 70px;
}

.why-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: #333;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize
}

.why-content p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0;
    color: #898989;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px
}

.about-section {
    padding: 80px 0;
    background-color: var(--white);
    position: relative
}svg.svg-about {
    position: absolute;
    top: -50px;
    right: 0;
}

.about-section .container {
    position: relative;
    max-width: 1300px;
    padding: 54px 50px 28px 50px;
    border-radius: 20px;
    background: #141414
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1300px;
    background-color: var(--secondary-color);
    border-radius: 20px;
    z-index: 0
}

.about-image img {
    border-radius: 15px;
    width: 100%
}

img.bg-about {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0
}
img.footer-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
/* ===== Footer ===== */
.footer-section {
    background: var(--white-color);
    padding: 15px;
}

.footer-bg {
    border-radius: 30px;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    background: #1F1F1F;
    z-index: 10;
}

.footer-map {
    margin-bottom: 60px;
}

.map-container {
    background: var(--light-gray);
    border-radius: 20px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-contact {
    margin-bottom: 60px;
}

.contact-title {
    color: var(--white-color);
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    line-height: 1.3;
}

.text-yellow {
    color: var(--primary-color);
}

.btn-contact {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 20px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.btn-contact:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}
span.section-label {
    padding-bottom: 23px;
    color: #FCD02C;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.footer-info {}
.footer-info {
    border-top: 1px solid #333;
    padding-top: 66px;
    color: var(--white-color);
}

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

.since-text {
    font-size: 64px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--primary-color);
    font-family: 'Manrope', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #FFF;
    color: #1F1F1F;
    letter-spacing: 0;
    margin: 5px 0 8px;
}

.copyright {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--white-color);
}

.footer-info h5 {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--white-color);
    margin-bottom: 38px;
    color: #FFF;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.footer-info p {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--white-color);
    margin-bottom: 30px;
    color: #FFF;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.footer-info a {
    color: var(--white-color);
    text-decoration: underline;
}

.footer-info a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: var(--white-color);
    color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.footer-menu {
    list-style: none;
    padding: 0;
}

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

.footer-menu a {
    color: var(--white-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.footer-menu a:hover {
    color: var(--primary-color);
}

.about-section .container .col-lg-7 {
    position: relative
}

.about-content {
    color: var(--white);
    padding-left: 60px;
    position: relative;
    z-index: 2
}

.about-text p {
    margin: 0
}

.about-content .section-subtitle {
    color: var(--white)
}

.about-text {
    margin-bottom: 60px;
    -webkit-line-clamp: 6
}

.about-content .section-title {
    color: var(--white);
    font-size: 32px;
    line-height: 1.3
}

.about-content .section-subtitle::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin: 28px 0;
    opacity: .3;
    background: #fff
}

.about-text p {
    color: var(--white);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px
}

.btn-discover {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 0
}

.btn-discover:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color)
}

.btn-discover span {
    padding: 14px 20px 14px 30px
}

.btn-discover i {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -1px
}

.projects-section {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 80px 0;
    position: relative;
    overflow: hidden
}

.projects-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/project-bg-overlay.jpg) center/cover no-repeat;
    opacity: .3;
    z-index: 0
}

.projects-header {
    position: relative;
    z-index: 2;
    margin-bottom: 60px
}

.projects-header .section-subtitle,.projects-header .section-title {
    color: var(--white)
}

.project-pagination {
    position: absolute;
    top: 0;
    right: 360px;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    flex-direction: column;
}

.project-pagination::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 29px;
    height: 2px;
    background-color: var(--primary-color);
    display: none;
}

.projects-gallery {
    position: relative;
    z-index: 2;
    max-width: calc(100% - 40px);
    margin: 0 auto
}

.project-card {
    position: relative;
    /* height: 565px; */
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent 25%,rgba(0,0,0,.8));
    z-index: 2;
    transition: var(--transition)
}

.project-card:hover::before {
    background: linear-gradient(transparent 0,rgba(252,208,44,.8))
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition)
}

.project-card:hover img {
    transform: scale(1.1)
}

.project-overlay {
    position: absolute;
    bottom: 24px;
    left: 40px;
    right: 40px;
    z-index: 3;
    color: var(--white)
}
.project-card:hover .project-overlay h3 {
    color: #141414;
}
.project-overlay h3 {
    color: #fff;
    text-align: center;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    margin: 0
}

.project-card:hover .project-overlay h4 {
    color: var(--secondary-color)
}

.stats-section {
    padding: 38px 0 0;
    background-color: var(--white)
}

.stats-cards {
    margin-top: 0;
}
.stat-features ul {
    padding: 0;
}

.stat-features {}

.stat-number {}
.stat-card {
    text-align: left
}

.stat-number {
    font-size: 96px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 20px
}

.stat-card h4 {
    font-size: 24px;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: capitalize;
    margin-bottom: 20px;
    color: #333;
    font-family: Manrope;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.stat-card p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 12px;
    color: #898989;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px; /* 178.571% */
}

.stat-card h4::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    margin: 28px 0 18px;
}

.stat-features {
    list-style: none;
    padding: 0
}

.stat-features li {
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
    text-transform: capitalize;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    /* line-height: 35px; */ /* 250% */
    text-transform: capitalize;
}

.stat-features i {
    width: 10px;
    height: 10px;
    color: var(--primary-color)
}

.quote-section {
    padding: 80px 0;
    background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.9)),url(../images/quote-bg.jpg) center/cover no-repeat;
    color: var(--white);
    position: relative
}

.quote-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 45px;
    background-color: var(--white);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px
}
.btn-submit span {
    padding: 14px 22px;
}
.quote-form {
    background-color: var(--white);
    padding: 40px;
    border-radius: 15px;
    color: var(--secondary-color)
}

.quote-form h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 30px;
    color: var(--secondary-color);
    color: #333;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.quote-form .form-control {
    border: 2px solid var(--border-color);
    border-radius: 5px;
    padding: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray);
    background-color: var(--white);
    min-height: 58px
}

.quote-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: none;
    background-color: var(--white)
}

.quote-form .form-control::placeholder {
    color: var(--text-gray);
    text-transform: capitalize
}

.quote-form .form-control[required]:focus {
    border-color: var(--primary-color)
}

.quote-form textarea.form-control {
    min-height: 130px;
    resize: vertical
}

.btn-submit {
    background-color: var(--light-gray);
    color: var(--secondary-color);
    border: none;
    padding: 0;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 15px
}

.btn-submit:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color)
}

.btn-submit i {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px
}

.quote-info {
    padding-left: 60px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    height: 100%;
}

.quote-info .section-subtitle {
    color: var(--white)
}

.quote-info h2 {
    font-size: 32px;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 30px
}

.quote-info p {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.8;
    margin-bottom: 40px
}

.hotline-box {
    background-color: var(--primary-color);
    padding: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--secondary-color);
    width: 100%;
}

.hotline-icon {
    width: 60px;
    height: 60px;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--secondary-color);
    display: none;
}

.hotline-content span {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    display: block;
    margin-bottom: 5px;
    color: #141414;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}
.hotline-content a {
    color: #141414;
    text-align: right;
    font-family: Manrope;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    display: block;
}

.hotline-content {
    width: 100%;
}

span {}
.btn-submit span {
    padding: 14px 22px;
    color: #333;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}
.hotline-content h4 {
    font-size: 48px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
    text-align: right
}.testimonials-swiper {
    position: relative;
    overflow: hidden;
}

.testimonials-section {
    padding: 80px 0 150px;
    background-color: var(--white)
}

.testimonial-image {
    height: 377px
}

.testimonial-image img {
    max-width: 440px;
    /* height: 100%; */
    object-fit: cover;
    border-radius: 15px
}

.testimonial-content {
    padding-left: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

.quote-icon {
    font-size: 45px;
    color: var(--primary-color);
    margin-bottom: 30px
}

.testimonial-content blockquote {
    font-size: 16px;
    line-height: 1.9;
    color: var(--secondary-color);
    margin-bottom: 70px;
    padding: 0;
    border: none;
    font-style: normal;
}

.testimonial-content cite {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    text-transform: capitalize;
    font-style: normal
}

.testimonial-pagination {
    margin-top: 30px;
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 600;
    position: relative;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.testimonial-pagination::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 49px;
    height: 2px;
    background-color: var(--primary-color)
}

.faq-section {
    padding: 0px 0 58px;
    background-color: var(--white)
}

.faq-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px
}
.faq-content .btn-view-all {
    gap: 0;
    margin-top: 46px;
}

img.icon-car {
    border-radius: 0;
    position: absolute;
    bottom: -32px;
    left: 74px;
    /* max-width: 476px; */
}

.faq-image {
    position: relative;
}

div#faqAccordion {}
.faq-content {
    padding-left: 60px
}

.accordion {
    margin-top: 40px
}

.accordion-item {
    border: none;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    background: 0 0
}

.accordion-button {
    background: 0 0;
    border: none;
    padding: 24px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: capitalize;
    box-shadow: none
}

.accordion-button:focus {
    box-shadow: none;
    border: none
}

.accordion-button:not(.collapsed) {
    background: 0 0;
    color: var(--secondary-color)
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M8.70083 10.239C8.49002 10.2096 8.28009 10.1567 8.06928 10.155C6.89814 10.1463 5.727 10.1429 4.55672 10.1533C3.9859 10.1585 3.57383 10.5785 3.58685 11.099C3.59986 11.6048 4.00152 11.9945 4.55846 11.9962C6.72724 12.0023 8.89515 12.0014 11.0639 11.991C11.6183 11.9884 11.9878 11.6152 11.9904 11.0591C12.0008 8.89402 12.0026 6.72976 11.9965 4.56463C11.9948 3.99736 11.6217 3.62843 11.0891 3.61977C10.54 3.61024 10.153 3.9887 10.1496 4.58108C10.1418 5.95118 10.1513 7.32214 10.1548 8.83253C9.96132 8.6394 9.84768 8.52595 9.73317 8.41163C6.08355 4.76728 5.39474 4.07877 1.74425 0.436161C1.27493 -0.0323734 0.920982 -0.11205 0.480286 0.14257C0.0109622 0.413644 -0.139985 0.940203 0.141957 1.40181C0.252998 1.58368 0.403945 1.74476 0.55576 1.89719C4.1516 5.4913 4.79095 6.12872 8.38939 9.72023C8.50651 9.83715 8.62449 9.95493 8.7416 10.0718C8.72859 10.1273 8.71471 10.1836 8.70083 10.239Z' fill='%23333333'/%3E%3C/svg%3E");
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: auto;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    vertical-align: middle;
}

.accordion-button:not(.collapsed)::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M8.70083 1.761C8.49002 1.79045 8.28009 1.84328 8.06928 1.84501C6.89814 1.85367 5.727 1.85713 4.55672 1.84674C3.9859 1.84155 3.57383 1.42151 3.58685 0.901013C3.59986 0.395239 4.00152 0.00551603 4.55846 0.00378393C6.72724 -0.00227843 8.89515 -0.00141238 11.0639 0.00898024C11.6183 0.0115784 11.9878 0.384847 11.9904 0.940852C12.0008 3.10598 12.0026 5.27024 11.9965 7.43537C11.9948 8.00264 11.6217 8.37157 11.0891 8.38023C10.54 8.38976 10.153 8.0113 10.1496 7.41892C10.1418 6.04882 10.1513 4.67786 10.1548 3.16747C9.96132 3.3606 9.84768 3.47405 9.73317 3.58837C6.08355 7.23272 5.39474 7.92123 1.74425 11.5638C1.27493 12.0324 0.920982 12.1121 0.480286 11.8574C0.0109622 11.5864 -0.139985 11.0598 0.141957 10.5982C0.252998 10.4163 0.403945 10.2552 0.55576 10.1028C4.1516 6.5087 4.79095 5.87128 8.38939 2.27977C8.50651 2.16285 8.62449 2.04507 8.7416 1.92815C8.72859 1.87272 8.71471 1.81643 8.70083 1.761Z' fill='%23FCD02C'/%3E%3C/svg%3E");

    transform: none
}

.accordion-body {
    padding: 0 0 20px 0;
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8
}

.blog-section {
    padding: 26px 0 40px;
    background-color: var(--white)
}

.blog-cards {
    margin-top: 0;
}

.blog-card {
    border-radius: 15px;
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
    /* box-shadow: 0 5px 15px rgba(0,0,0,.05); */
}

.blog-card:hover {
    transform: translateY(-10px);
}

.blog-image {
    height: 420px;
    overflow: hidden;
    border-radius: 15px
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition)
}

.blog-card:hover .blog-image img {
    transform: scale(1.1)
}

.blog-content {
    padding: 30px 0
}

.blog-content time {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray);
    display: block;
    margin-bottom: 15px;
    text-transform: capitalize;
    position: relative;
    margin: 0;
}

.blog-content .blog-title::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    margin-bottom: 20px;
    margin: 12px 0 28px;
}

.blog-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: capitalize;
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 60px
}

.blog-content p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8;
    margin: 0;
    -webkit-line-clamp: 2;
}

.process-section {
    padding: 40px 0;
    background-color: var(--white)
}

.process-steps {
    margin-top: 60px;
    position: relative;
}

.process-step {
    text-align: center;
    position: relative
}

.process-step.center {
    margin-top: 60px
}

.process-number {
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    background-color: var(
    --primary-color);
    color: var(
    --secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    z-index: 2
}

.process-image {
    border-radius: 50%;
    /* overflow: hidden; */
    margin: 0 auto 20px;
    position: relative;
    width: fit-content;
}.process-image img {
    max-width: 160px;
    border-radius: 500px;
}

.process-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}img.process-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.process-step h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: capitalize;
    margin-bottom: 15px;
    color: #333;
    text-align: center;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.process-step p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8;
    max-width: 324px;
    margin: 0 auto
}


.footer-section {
    background-color: var(--dark-bg);
    color: var(--white);
    padding: 60px 0 0;
    border-radius: 0 30px 30px 30px;
    position: relative;
    margin: 15px;
    overflow: hidden;
}

.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 2;
}

.map-container {
    margin-bottom: 80px
}

.map-embed {
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    position: relative
}

.map-embed img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.contact-info {
    margin-bottom: 40px;
    align-items: center
}

.contact-title {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    margin: 22px 0 0;
}

.contact-title .text-warning {
    color: var(--primary-color)!important
}

.btn-contact {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 15px 30px;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    border-radius: 10px;
    text-decoration: none
}

.btn-contact:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color)
}

.btn-contact i {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    color: #FCD02C;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.footer-divider {
    border-color: var(--primary-color);
    margin: 60px 0
}

.footer-content {
    margin-bottom: 60px
}

.footer-logo img {
    /* height: 141px; */
    max-width: 100% !important;
    margin-bottom: 20px
}

.footer-since {
    font-size: 64px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    line-height: 1
}

.footer-content h5 {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    text-transform: capitalize;
    margin-bottom: 20px
}

.footer-content p,.footer-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    text-transform: capitalize;
    margin-bottom: 15px
}

.footer-link:hover {
    color: var(--primary-color);
    text-decoration: underline
}

.footer-menu {
    list-style: none;
    padding: 0
}

.footer-menu li {
    margin-bottom: 20px;
}

.footer-menu a {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    text-transform: capitalize;
    transition: var(--transition);
    color: #FFF;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.footer-menu a:hover {
    color: var(--primary-color)
}

.social-links {
    display: flex;
    gap: 20px
}

.social-links a {
    /* width: 40px; */
    /* height: 40px; */
    /* background-color: var(--primary-color); */
    color: var(--secondary-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: var(--transition)
}

.social-links a:hover {
    background-color: var(--white);
    color: var(--secondary-color)
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 30px 0;
    text-align: center;
    position: relative
}

.copyright {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    text-transform: capitalize;
    margin: 0;
    color: #FFF;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.scroll-top {
    position: absolute;
    top: -35px;
    right: 0;
    width: 70px;
    height: 70px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition)
}

.scroll-top:hover {
    background-color: var(--white);
    color: var(--secondary-color);
    transform: translateY(-5px)
}

@media (max-width: 1024px) {
    .hero-title {
        font-size:48px
    }.head-bottom-r a.btn-contact {
    padding: 16px 20px;
}

section#services {}

.services-section {
    padding: 40px 0;
}

.why-section {
    padding-top: 40px;
}

section#news {}

    .hero-subtitle {
        font-size: 36px
    }

    .section-title {
        font-size: 28px
    }

    .stat-number {
        font-size: 72px
    }

    .contact-title {
        font-size: 28px
    }
.head-bottom-r a.btn-contact {
    display: none;
}

.w-menu .search-res {
    display: block;
}

.w-menu {
    width: fit-content;
    margin: 0;
    max-width: fit-content;
}

.head .head-bottom>.wrap-content {
    justify-content: space-between;
}

.head-bottom-r {
    display: none;
}

a.logo-head img, .fix_head a.logo-head img {max-width: 70px;}

.head-bottom-l svg {
    display: none;
}

.service-cards-swiper .swiper-custom-controls {
    margin-top: 20px;
}

.projects-section {
    padding: 40px 0;
}
}
@media (max-width: 991.98px) {
    .hero-title {
        font-size:36px
    }

    .hero-subtitle {
        font-size: 28px
    }

    .section-title {
        font-size: 24px
    }

    .about-content,.faq-content,.quote-info,.testimonial-content {
        padding-left: 0;
        margin-top: 20px;
    }

    .section-action {
        position: static;
        margin-top: 30px
    }

    .stat-number {
        font-size: 60px
    }

    .contact-title {
        font-size: 24px
    }

    .footer-since {
        font-size: 48px
    }
}

@media (max-width: 767.98px) {
.services-section::after {
    width: 100%;
}

.testimonial-image img {
    max-width: 100%;
}
    .hero-section {
        height:600px;
        padding: 20px 0
    }
    img.icon-car {
        left: 0;
        right: 0;
    }
    .hero-bg {
        height: 500px;
        margin: 0 10px
    }

    .hero-title {
        font-size: 28px
    }

    .hero-subtitle {
        font-size: 20px
    }

    .section-title {
        font-size: 24px !important;
        line-height: 1.3
    }

    .navbar-nav {
        padding: 15px 20px
    }

    .nav-link {
        margin: 5px 0
    }

    .btn-quote {
        padding: 15px;
        font-size: 14px
    }

    .service-card,.why-card {
        margin-bottom: 5px;
    }

    .project-card {
        height: 300px
    }

    .stat-number {
        font-size: 48px
    }

    .hotline-content h4 {
        font-size: 32px
    }

    .contact-title {
        font-size: 20px
    }

    .footer-since {
        font-size: 36px
    }

    .process-step.center {
        margin-top: 0
    }

    .testimonial-image {
        height: 250px;
        margin-bottom: 30px
    }

    .quote-form {
        margin-bottom: 0;
        padding: 20px;
    }
}

@media (max-width: 575.98px) {
.services-section {
    padding: 20px 0;
}

.section-header {
    margin-bottom: 32px;
}

.about-section {
    padding: 30px 0;
}

.about-section .container {
    padding: 20px;
}

.about-text p {
    font-size: 14px;
}

.about-text {
    margin-bottom: 32px;
}

.project-pagination {
    display: none;
}

.projects-header {
    margin-bottom: 32px;
}

.projects-swiper .swiper-navigation-center {
    width: 80px;
    height: 80px;
}

.stat-card h4::after {
    margin: 14px 0 4px;
}

.quote-info h2 {
    font-size: 20px !important;
}

.hotline-content a {
    font-size: 32px;
}

.hotline-box {
    padding: 20px;
}

.testimonials-section {
    padding: 40px 0 50px;
}

.testimonial-pagination {
    display: none;
}

.testimonial-content blockquote {
    margin-bottom: 40px;
}

.accordion {
    margin-top: 20px;
}

.faq-section {
    padding-bottom: 30px;
}

.faq-content .btn-view-all {
    margin-top: 32px;
}

.blog-content {
    padding: 20px 0;
}

.process-section {
    padding: 20px 0;
}

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

.footer-contact {
    margin-bottom: 32px;
}

.footer-info {
    padding-top: 20px;
}

.footer-info h5 {
    margin-bottom: 20px;
}

.footer-map {
    margin-bottom: 20px;
}
    .container-fluid {
        padding:0 15px
    }

    .hero-title {
        font-size: 24px
    }

    .hero-subtitle {
        font-size: 18px
    }

    .section-title {
        font-size: 20px !important;
        margin-bottom: 12px;
    }

    .stat-number {
        font-size: 36px
    }

    .hotline-content h4 {
        font-size: 24px
    }

    .contact-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .footer-since {
        font-size: 28px
    }
    .why-img {
        margin-bottom: 20px;
    }
}