@media (max-width:1024px) {
    :root {
        --h1: var(--h1-responsive);
        --h2: var(--h2-responsive);
        --h3: var(--h3-responsive);
        --h4: var(--h4-responsive)
    }
}

body {
    padding: 0px;
    margin: 0px;
    font-family: var(--font)
}

a {
    text-decoration: none;
    color: inherit
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--font)
}

ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none
}

ul.theme {
    margin-top: 15px;
    max-width: 100%
}

ul.theme li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 900
}

ul.theme li:before {
    content: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.38312 0 0 5.38312 0 12C0 18.6169 5.38312 24 12 24C18.6169 24 24 18.6169 24 12C24 5.38312 18.6169 0 12 0ZM12 22.2862C6.32875 22.2862 1.71375 17.6712 1.71375 12C1.71375 6.32875 6.32875 1.71375 12 1.71375C17.6712 1.71375 22.2866 6.32875 22.2866 12C22.2866 17.6712 17.6712 22.2862 12 22.2862ZM17.4625 7.71594C17.8081 8.04 17.8272 8.5825 17.5031 8.92812L10.6753 16.2431C10.5119 16.4184 10.2841 16.5169 10.0487 16.5169C10.0441 16.5169 10.0369 16.5169 10.0297 16.5169C9.78719 16.5119 9.55687 16.4016 9.39594 16.2169L6.47281 12.8016C6.16562 12.4416 6.20656 11.9016 6.56656 11.5919C6.92656 11.2847 7.46656 11.3256 7.77594 11.6856L10.0775 14.3712L16.2503 7.75687C16.5744 7.41125 17.1144 7.39187 17.4625 7.71594Z' fill='%23F15A29'/%3E%3C/svg%3E%0A");
    width: 25px;
    height: 26px
}

span {
    font-family: var(--heading-font)
}

.theme-heading {
    position: relative;
    display: inline-flex;
    width: fit-content;
    align-items: flex-start;
    gap: 0;
    flex-direction: column
}

.theme-heading h2 {
    text-transform: uppercase;
    font-family: var(--heading-font)
}

.theme-heading h2.small,
.theme-heading h2 .small {
    font-family: var(--heading-font);
    font-size: var(--h2-small)
}

.theme-heading h2.large,
.theme-heading h2 .large {
    font-family: var(--heading-font);
    font-size: var(--h2-large)
}

.theme-heading.text-center {
    display: flex;
    margin: 0px auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    font-family: var(--heading-font);
    line-height: 160%
}

h1 {
    font-size: var(--h1)
}

h2 {
    font-size: var(--h2)
}

h3 {
    font-size: var(--h3)
}

h4 {
    font-size: var(--h4)
}

h5 {
    font-size: var(--h5)
}

h6 {
    font-size: var(--h6)
}

h1.small,
h1 .small {
    font-size: var(--h2)
}

h2.small,
h2 .small {
    font-size: var(--h2-small)
}

h2.large,
h2 .large {
    font-size: var(--h2-large)
}

strong {
    font-weight: bold
}

p {
    font-size: var(--p);
    line-height: 160%;
    font-weight: 500;
    font-family: var(--font)
}

p.sub-heading {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--heading-font);
    text-transform: capitalize;
    font-style: italic
}

section {
    position: relative;
    padding: 50px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1
}

@media (max-width:1024px) {
    section {
        padding: 50px 0px
    }
}

section.dark {
    color: var(--white)
}

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

section.light {
    color: var(--black)
}

section.light p {
    color: var(--black)
}

.btn-new {
    display: flex;
    --timing: 2s;
    --width: 265px;
    font-family: "Anton";
    font-weight: 400;
    border: 0;
    width: fit-content;
    padding: 0px 15px;
    color: #fff;
    font-size: 20px;
    background: var(--secondary);
    transition: all 0.6s;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    align-items: center
}

@media (max-width:1024px) {
    .btn-new {
        font-size: 18px
    }
}

.btn-new.transparent {
    background: transparent;
    font-family: var(--font)
}

.btn-new.transparent:hover {
    color: #fff !important
}

.btn-new:hover {
    background-image: linear-gradient(to right, #fbb040, #fbb040 16.65%, #f7931e 16.65%, #f7931e 33.3%, #ef860b 33.3%, #ef860b 49.95%, #f15a29 49.95%, #f15a29 66.6%, #ef4136 66.6%, #ef4136 83.25%, #bf1e2d 83.25%, #bf1e2d 100%, #fbb040 100%);
    animation: var(--timing) linear dance6123 infinite;
    transform: scale(1.1) translateY(-1px)
}

@keyframes dance6123 {
    to {
        background-position: var(--width)
    }
}

.btn {
    padding: 0px 30px;
    text-transform: uppercase;
    width: fit-content;
    position: relative;
    min-height: 45px;
    display: flex;
    align-items: center;
    transition: 0.5s;
    color: #fff;
    font-family: var(--heading-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-transform: uppercase;
    border-radius: 5px;
    border: 1px solid #FBB040;
    background: linear-gradient(90deg, #F15A29 0%, #EF4136 100%)
}

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

.btn.secondary {
    background-color: var(--secondary)
}

.secondaryColor {
    color: var(--secondary)
}

.btn.white {
    background-color: #fff;
    color: #000
}

.btn.black {
    background-color: #000
}

.btn.full {
    display: block;
    width: 100%
}

.btn.center {
    margin: 0px auto;
    margin-top: 15px
}

.btn.plain:before {
    display: none
}

.btn.plain:after {
    display: none
}
/* 
footer {
    position: relative;
    padding: 100px 0 0;
    color: #fff
}

footer:before {
    content: "";
    background-image: url(/wp-content/uploads/2024/07/Group-1000009755.png);
    width: 100%;
    height: 293px;
    position: absolute;
    bottom: 19px;
    z-index: -1;
    mix-blend-mode: luminosity;
    opacity: 0.2
}

footer .bg {
    background-color: #000;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -2;
    border-top: 1px solid #F15A29
}

footer .inner {
    display: grid;
    grid-template-columns: 35% 20% 20% 20%;
    gap: 16px
}

@media (max-width:1024px) {
    footer .inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }
}

footer .inner .item:nth-child(1) {
    text-align: center;
    padding: 25px;
    margin-top: -100px;
    position: relative;
    z-index: 1;
    border-top: 0 !important;
    border: 1px solid #F15A29;
    border-bottom: 0
}

@media (max-width:1024px) {
    footer .inner .item:nth-child(1) {
        padding: 15px;
        border: 0
    }
}

footer .inner .item:nth-child(1):before {
    content: "";
    width: 100%;
    height: 25%;
    background: linear-gradient(180deg, #2B2B2B 0%, #000 7.13%);
    position: absolute;
    z-index: 0;
    left: 0;
    top: -98px;
    clip-path: polygon(50% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%)
}

@media (max-width:1024px) {
    footer .inner .item:nth-child(1):before {
        top: -88.1px;
        display: none
    }
}

footer .inner .item:nth-child(1):after {
    content: "";
    width: 100%;
    height: 25%;
    background: #F15A29;
    position: absolute;
    z-index: -1;
    left: 0;
    top: -99px;
    clip-path: polygon(50% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%)
}

@media (max-width:1024px) {
    footer .inner .item:nth-child(1):after {
        top: -89.1px;
        display: none
    }
}

footer .inner .item .social-icon {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px
}

footer .inner .item .footer-menu-container .menu-footer h3 {
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize
}

footer .inner .item .footer-menu-container .menu-footer ul li {
    margin-top: 12px
}

footer .inner .item .footer-menu-container .menu-footer ul li a {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%
}

footer .inner .location .box-part h4 {
    font-family: var(--font);
    color: #FFF;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%
}

footer .inner .location .box-part a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #fff;
    margin-top: 22px
}

footer .items {
    display: flex;
    gap: 40px;
    padding: 15px;
    background: #F4F4F4;
    align-items: center;
    width: 90%;
    border-radius: 0px 100px 100px 0px;
    background: #F4F4F4;
    padding-left: 100px;
    margin: 65px 0;
    justify-content: space-evenly
}

@media (max-width:1024px) {
    footer .items {
        gap: 30px;
        border-radius: 0;
        padding-left: 15px;
        margin: 48px 0;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center
    }
}

footer .items h3 {
    color: #000
}

footer .copyright {
    background: #262626;
    padding: 10px
}

footer .copyright p {
    color: #A7A7A7;
    text-align: center
} */

.blogs-page .inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    align-items: center
}

@media (max-width:1024px) {
    .blogs-page .inner {
        grid-template-columns: 1fr
    }
}

.not-found {
    padding: 50px 0px;
    position: relative
}

.not-found .page-header {
    text-align: center;
    margin-bottom: 30px
}

.not-found .page-header h1 {
    color: var(--secondary);
    font-size: 90px;
    line-height: 100%
}

.not-found .page-header h3 {
    color: var(--primary);
    font-size: 42px
}

.not-found .footer-menu {
    border-top: 2px solid var(--secondary);
    display: flex;
    list-style-type: none;
    padding: 0px;
    padding-top: 10px;
    margin: 0px;
    justify-content: space-between
}

.not-found .footer-menu li a {
    color: #000;
    margin-right: 15px
}

.not-found .footer-menu li a:hover {
    color: var(--primary);
    border-bottom: 2px solid var(--primary)
}

.blogs-one {
    padding: 100px 0px
}

.blogs-one .single-blog {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 10px 15px rgba(65, 168, 222, 0.3)
}

@media (max-width:1024px) {
    .blogs-one .single-blog {
        grid-template-columns: 1fr
    }
}

.blogs-one .single-blog .read-more {
    margin: 0px auto
}

.blogs-one .single-blog:hover img {
    opacity: 0.7
}

.blogs-one .single-blog img {
    background: var(--primary);
    width: 100%;
    display: block
}

.blogs-one .single-blog .blog-content {
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    background: #333333;
    border: 1px solid #41a8de;
    box-sizing: border-box;
    color: var(--white)
}

.blogs-one .single-blog .blog-content .theme-heading h2 {
    font-size: 18px;
    font-weight: 800
}

.blogs-one .single-blog .blog-content .content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.reviewssingle-one {
    background: var(--black)
}

.reviewssingle-one .review-tabs .tab-list {
    display: block;
    align-items: center;
    margin: 0px auto;
    width: fit-content
}

.reviewssingle-one .review-tabs .tab-list .tab-link {
    color: var(--white);
    border: 2px solid var(--white);
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: bold
}

.reviewssingle-one .review-tabs .tab-list .tab-link.active {
    background-color: var(--white);
    color: var(--primary)
}

.reviewssingle-one .review-tabs .tab-content {
    border-top: 2px solid var(--white);
    margin-top: 25px;
    padding-top: 25px
}

.reviewssingle-one .review-tabs .tab-content .single-tab-content {
    display: none
}

.reviewssingle-one .review-tabs .tab-content .single-tab-content.active {
    display: block
}

.single-blogs-one figcaption {
    display: block !important
}

.single-blogs-one .inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    align-items: center;
    width: 100%;
    margin: 0px auto;
    box-shadow: 4px 4px 100px rgba(0, 0, 0, 0.15)
}

@media (max-width:1024px) {
    .single-blogs-one .inner {
        grid-template-columns: 1fr
    }
}

.single-blogs-one .inner .single-blog {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    align-items: center;
    padding: 50px
}

@media (max-width:1024px) {
    .single-blogs-one .inner .single-blog {
        grid-template-columns: 1fr
    }
}

@media (max-width:1024px) {
    .single-blogs-one .inner .single-blog {
        padding: 15px
    }
}

.single-blogs-one .inner .single-blog .theme-heading h1 {
    font-size: 50px
}

@media (max-width:1024px) {
    .single-blogs-one .inner .single-blog .theme-heading h1 {
        font-size: 30px
    }
}

.single-blogs-one .inner .single-blog img {
    background: var(--primary)
}

.single-blogs-one .inner .single-blog .font-weight-bold {
    font-weight: bold !important
}

.single-blogs-one .inner .single-blog .blog-content {
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column
}

.single-blogs-one .inner .single-blog .blog-content .content {
    line-height: 140%;
    font-weight: 600
}

.single-blogs-one .inner .single-blog .blog-content .content h2 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 7px;
    margin-top: 35px;
    text-transform: uppercase;
    color: var(--primary);
    font-family: system-ui;
    line-height: 135%
}

.single-blogs-one .inner .single-blog .blog-content .content p {
    line-height: 170%;
    font-weight: 500
}

.single-blogs-one .inner .single-blog .blog-content .content p a {
    text-decoration: underline
}

.single-blogs-one .inner .single-blog .blog-content .content ul {
    list-style-type: unset;
    padding-left: 20px
}

.single-blogs-one .inner .single-blog .blog-content .content ul li {
    line-height: 170%;
    color: #575757
}

.single-blogs-one .inner .single-blog .blog-content .content ol {
    padding-left: 20px
}

.single-blogs-one .inner .single-blog .blog-content .content ol li {
    line-height: 170%;
    color: #575757
}

.single-blogs-one .inner .single-blog .blog-content .content img {
    width: auto;
    height: auto;
    border: 5px solid var(--black);
    margin: 15px auto
}

.single-blogs-one .inner .single-blog .blog-content .content a {
    color: var(--primary)
}

.single-blogs-one .inner .single-blog .blog-content .content .aligncenter {
    display: block;
    text-align: center
}

.single-blogs-one .inner .single-blog .blogcta {
    box-shadow: 0px 10px 15px rgba(65, 168, 222, 0.3);
    margin-bottom: 50px
}

.single-blogs-one .inner .single-blog .post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

.single-blogs-one .inner .single-blog .previous-post,
.single-blogs-one .inner .single-blog .next-post {
    width: fit-content
}

.single-blogs-one .inner .single-blog .previous-post a,
.single-blogs-one .inner .single-blog .next-post a {
    display: block;
    padding: 10px 30px;
    font-weight: 700;
    border: 2px solid var(--primary);
    text-align: center;
    text-decoration: none
}

.single-blogs-one .inner .single-blog .previous-post a:hover,
.single-blogs-one .inner .single-blog .next-post a:hover {
    color: #fff;
    background-color: var(--primary)
}

.gallery-one {
    background-color: var(--black)
}

.gallery-one .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    align-items: center;
    align-items: stretch;
    margin-top: 40px
}

@media (max-width:1024px) {
    .gallery-one .gallery-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 481px){
    .inr-pg-bnr .gallery-grid {
        grid-template-columns: unset !important;
    }
}

.gallery-one .gallery-grid a {
    display: block;
    position: relative
}

.gallery-one .gallery-grid a img {
    width: 100%;
    object-fit: cover;
    height: 100%
}

.gallery-one .gallery-grid a:before {
    content: "";
    font-family: "Material Icons";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 43, 57, 0.7);
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 260px
}

.gallery-one .gallery-grid a:hover:before {
    visibility: visible;
    opacity: 1;
    font-size: 60px
}

.contact-form select {
    -webkit-appearance: none
}

.contact-form .submit-block {
    display: flex;
    align-items: center
}

.contact-form .submit-block .wpcf7-spinner {
    position: absolute
}

.contact-form input.wpcf7-not-valid,
.contact-form textarea.wpcf7-not-valid {
    border: 1px solid red !important
}

.contact-form .wpcf7-not-valid-tip {
    display: none
}

.contact-form .wpcf7-response-output {
    display: none
}

.breadcrumb {
    padding: 60px 0px;
    background-color: #000;
    position: relative;
    overflow: hidden;
    color: var(--white)
}

.breadcrumb .right-img {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 50%
}

.breadcrumb .right-img:before {
    content: "";
    background: #6369d1;
    width: 50%;
    height: 75%;
    left: 16px;
    position: absolute;
    z-index: -1;
    bottom: 0px;
    transform: skewX(-16deg)
}

.breadcrumb .right-img img {
    width: 100%;
    clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
    top: auto;
    position: relative;
    height: 100%
}

.breadcrumb .inner {
    width: 40%
}

.breadcrumb .theme-heading {
    color: var(--white)
}

.breadcrumb ul {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px
}

.breadcrumb ul li:not(:first-child):before {
    content: " / "
}

.breadcrumb ul li a {
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase
}

.breadcrumb p {
    max-width: 100%;
    color: var(--white)
}

.img-container img {
    width: 100%;
    display: block
}

.mobile-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 15px auto
}

.mobile-dots li {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: var(--primary);
    font-size: 0;
    padding: 3px;
    border-radius: 100%;
    border: 0;
    background-color: #525252;
    color: #525252;
    margin: 0 5px;
    width: 10px;
    height: 10px
}

.mobile-dots li.slick-active {
    background-color: var(--secondary)
}

.mobile-dots li button {
    display: none
}

.mobile-arrows {
    font-size: 0;
    line-height: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px \9;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: 0 0;
    position: absolute;
    display: block;
    padding: 0;
    z-index: 2
}

.mobile-arrows.left-arrow {
    left: -10px;
    width: 30px;
    height: 30px;
    background-color: var(--primary);
    padding: 5px;
    border-radius: 50%
}

.mobile-arrows.left-arrow:before {
    content: "←";
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    color: #fff
}

.mobile-arrows.right-arrow {
    right: -10px;
    width: 30px;
    height: 30px;
    background-color: var(--primary);
    padding: 5px;
    border-radius: 50%
}

.mobile-arrows.right-arrow:before {
    content: "→";
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    color: #fff
}

.blank {
    padding-bottom: 110px
}

@media (max-width:1024px) {
    .blank {
        padding-bottom: 50px
    }
}

@media (max-width:1024px) {
    .blank h1 {
        font-size: 34px
    }
}

@media (max-width:1024px) {
    .blank h2 {
        font-size: 28px
    }
}

header {
    --menu-bg: var(--black);
    --menu-item-color: var(--white);
    --menu-item-color-hover: var(--primary);
    --menu-item-icon-color: var(--white);
    --menu-item-current-bg: var(--white);
    --menu-item-current-color: var(--black);
    --menu-dropdown-bg: var(--white);
    --menu-dropdown-item-color: var(--black);
    --menu-dropdown-item-color-bg: var(--black);
    --menu-dropdown-item-color-hover: var(--primary);
    --menu-mobile-bg: var(--black);
    --menu-mobile-item-color: var(--white);
    --menu-mobile-item-color-hover: var(--primary);
    --menu-mobile-item-icon-color: var(--white);
    --menu-mobile-item-current-bg: var(--black);
    --menu-mobile-item-current-color: var(--black);
    --menu-mobile-dropdown-bg: var(--white);
    --menu-mobile-dropdown-item-color: var(--black);
    --menu-mobile-dropdown-item-color-bg: var(--black);
    --menu-mobile-dropdown-item-color-hover: var(--primary)
}

/* header.pc .menu-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    gap: 5px;
    width: 100%
} */

/* @media (max-width:1024px) {
    header.pc .menu-container {
        display: none
    }
} */

header.pc .menu-container .menu {
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%
}

header.pc .menu-container .menu nav {
    position: relative;
    width: 100%
}

header.pc .menu-container .menu nav ul.main-menu {
    display: flex;
    align-items: stretch;
    transition: all 0.3s;
    justify-content: space-between
}

header.pc .menu-container .menu nav ul.main-menu>li {
    position: relative;
    padding: 0px 5px;
    z-index: 1;
    display: flex;
    align-items: center;
    flex: 1;
    text-align: center;
    justify-content: center
}

header.pc .menu-container .menu nav ul.main-menu>li a {
    display: flex;
    padding: 10px 0px;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: #fff;
    font-family: var(--heading-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

header.pc .menu-container .menu nav ul.main-menu>li.menu-item-has-children {
    display: flex;
    align-items: center
}

header.pc .menu-container .menu nav ul.main-menu>li.menu-item-has-children:after {
    content: "";
    font-family: "Material Icons";
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center
}

header.pc .menu-container .menu nav ul.main-menu>li.current-menu-item:before {
    transform: scale(1)
}

header.pc .menu-container .menu nav ul.main-menu>li:hover:before,
header.pc .menu-container .menu nav ul.main-menu>li:focus-within:before,
header.pc .menu-container .menu nav ul.main-menu>li.active:before {
    transform: scale(1)
}

header.pc .menu-container .menu nav ul.main-menu>li:hover.menu-item-has-children:after,
header.pc .menu-container .menu nav ul.main-menu>li:focus-within.menu-item-has-children:after,
header.pc .menu-container .menu nav ul.main-menu>li.active.menu-item-has-children:after {
    color: var(--menu-item-color-hover)
}

header.pc .menu-container .menu nav ul.main-menu>li:hover>ul,
header.pc .menu-container .menu nav ul.main-menu>li:focus-within>ul,
header.pc .menu-container .menu nav ul.main-menu>li.active>ul {
    visibility: visible;
    opacity: 1;
    bottom: 0px
}

header.pc .menu-container .menu nav ul.main-menu>li:hover>ul ul,
header.pc .menu-container .menu nav ul.main-menu>li:focus-within>ul ul,
header.pc .menu-container .menu nav ul.main-menu>li.active>ul ul {
    visibility: visible;
    opacity: 1
}

header.pc .menu-container .menu nav ul.main-menu>li>ul {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    bottom: -30px;
    transform: translateY(100%);
    transition: top 0.3s ease-in-out;
    background-color: var(--menu-dropdown-bg);
    width: fit-content;
    min-width: 200px;
    left: 0px;
    display: flex;
    align-items: flex-start;
    padding: 15px;
    text-align: left;
    gap: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), -10px 0px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease-in-out
}

header.pc .menu-container .menu nav ul.main-menu>li>ul>li>a {
    padding-left: 5px;
    padding: 15px 0px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--primary);
    width: 100%;
    color: var(--menu-dropdown-item-color)
}

header.pc .menu-container .menu nav ul.main-menu>li>ul>li>a:hover {
    color: var(--menu-item-color-hover)
}

header.pc .menu-container .menu nav ul.main-menu>li>ul>li a[href="#"] {
    display: none
}

header.pc .menu-container .menu nav ul.main-menu>li>ul ul {
    visibility: hidden;
    opacity: 0;
    position: relative;
    flex-direction: column;
    top: 0px;
    padding-left: 0px;
    width: max-content;
    min-width: 200px
}

header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li {
    padding: 10px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li a {
    padding: 0px;
    color: var(--menu-dropdown-item-color);
    display: block;
    text-align: left;
    display: flex;
    align-items: center
}

header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li a:before {
    content: "";
    font-family: "Material Icons"
}

header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li:hover,
header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li:focus-within,
header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li.active {
    transition: all 0.3s;
    background-color: var(--secondary);
    color: #fff
}

header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li:hover>a,
header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li:focus-within>a,
header.pc .menu-container .menu nav ul.main-menu>li>ul ul>li.active>a {
    color: #fff
}

header.mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: var(--secondary);
    color: #000;
    width: 100%
}

@media (max-width:1024px) {
    /* header.mobile {
        display: block;
        position: sticky;
        top: 0;
        z-index: 9
    } */
}

header.mobile.active {
    display: flex
}

header .sidenav {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    background: var(--black);
    overflow-x: hidden;
    transition: 0.5s;
    transform: translateX(100%);
    display:none;
}

header .sidenav.active {
    display: block;
    transform: translateX(0%)
}

header .sidenav .social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

header .sidenav .social-links ul {
    display: flex;
    gap: 10px
}

header .sidenav .social-links ul li img {
    width: 50px
}

header .bottom-header {
    border: 0.843px solid #D7D7D7;
    background: #000;
    color: #fff;
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px
}

header .bottom-header a {
    font-size: 12px;
    font-weight: 500
}

header .bottom-header .logo-container {
    width: 135px;
    margin-top: -2px
}

header .bottom-header .logo-container img {
    width: 100%
}

header .bottom-header .right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.hamburger {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    position: relative;
    border-radius: 5px;
    padding: 5px 0px;
    color: #fff;
    border-radius: 50%;
    background: var(--secondary);
    width: 52px;
}

.hamburger .checkbox {
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer
}

 .right .line {
    transition: 0.5s;
    stroke-width: 6px;
    stroke: #fff
}

.right .lineTop {
    stroke-dasharray: 40 40;
    stroke-dashoffset: 25
}

.right .lineBottom {
    stroke-dasharray: 40 40;
    stroke-dashoffset: 60
}

.right .lineMid {
    stroke-dasharray: 40 40
}

.hamburger .checkbox:checked+svg .line {
    stroke: #fff
}

.hamburger .checkbox:checked+svg .lineTop {
    stroke-dashoffset: 0;
    transform-origin: left;
    transform: rotateZ(45deg) translate(-7px, -5px)
}

.hamburger .checkbox:checked+svg .lineMid {
    stroke-dashoffset: 40

}

.hamburger .checkbox:checked+svg .lineBottom {
    stroke-dashoffset: 0;
    transform-origin: left;
    transform: rotateZ(-45deg) translate(-5px, 5px)
}

header .btn-blocks {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #FFF9E3;
    padding: 5px;
    position: relative
}

header .btn-blocks:before {
    content: "";
    width: 1px;
    height: 13.537px;
    position: absolute;
    background: #FBB040;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

header .btn-blocks a {
    color: #383838;
    font-size: 17.622px;
    font-style: normal;
    font-weight: 400;
    line-height: 122%;
    text-transform: uppercase;
    font-family: var(--heading-font);
    display: flex;
    gap: 6px;
    align-items: center
}

header .btn-blocks a span {
    color: var(--secondary)
}

header .mobile-nav {
    transition: all 0.3s;
    margin: 0px 15px;
    margin-top: 15px;
    padding-bottom: 210px
}

header .mobile-nav li {
    margin-bottom: 5px
}

header .mobile-nav li a {
    text-decoration: none;
    font-size: 16px;
    color: var(--menu-mobile-item-color);
    display: block;
    transition: 0.3s;
    font-weight: 500;
    padding: 10px 15px;
    text-transform: uppercase
}

header .mobile-nav li a[href="#"] {
    display: none
}

header .mobile-nav li.current-menu-item>a {
    background: var(--primary) !important;
    color: var(--white)
}

header .mobile-nav li.current-menu-item .next {
    background-color: var(--menu-mobile-item-current-bg) !important;
    color: var(--menu-mobile-item-color) !important
}

header .mobile-nav li.menu-item-has-children {
    position: relative;
    display: block;
    align-items: center;
    justify-content: space-between
}

header .mobile-nav li.menu-item-has-children>a {
    background: none
}

header .mobile-nav li.menu-item-has-children .next {
    background-color: var(--secondary);
    height: 30px;
    width: 30px;
    color: var(--white);
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    right: 15px;
    top: 5px
}

header .mobile-nav li.menu-item-has-children .next:after {
    content: "";
    font-family: "Material Icons";
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

header .mobile-nav li.menu-item-has-children .sub-menu {
    transition: all 0.3s;
    top: 0px;
    left: 15px;
    position: relative;
    visibility: hidden;
    width: 100%;
    max-height: 0;
    opacity: 0
}

header .mobile-nav li.menu-item-has-children .sub-menu.active {
    visibility: visible;
    max-height: 100%;
    opacity: 1
}

header .mobile-nav li.menu-item-has-children .sub-menu.active>li>a {
    background: none;
    color: var(--menu-mobile-item-color)
}

header .mobile-nav li.menu-item-has-children .sub-menu.active ul {
    visibility: visible;
    opacity: 1;
    max-height: 100%;
    left: 20px
}

header .mobile-nav li.menu-item-has-children .sub-menu.active ul a {
    font-size: 14px
}

header .mobile-nav li.menu-item-has-children .sub-menu li.go-back {
    position: relative
}

header .mobile-nav li.menu-item-has-children .sub-menu li.go-back a {
    color: var(--menu-mobile-item-color)
}

header .mobile-nav li.menu-item-has-children .sub-menu li:last-child {
    border-bottom: 0px
}

header.pc {
    position: relative;
    width: 100%;
    z-index: 999;
    top: 0;
    margin: 0px auto;
    position: sticky;
    border-bottom: 2px solid #F9BB1B;
    background: #000
}

/* @media (max-width:1024px) {
    header.pc {
        display: none
    }
} */

header.pc.active .top-bar {
    display: none
}

header.pc .top-bar {
    background-color: #EF4136;
    color: #fff;
    padding: 5px;
    text-align: center
}

header.pc .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 0 0px 15px;
    padding-left: 50px;
    background: #000
}

header.pc .header-inner .logo-container {
    height: 100%;
    z-index: 9;
    position: relative;
    width: 230px;
    margin-top: 10px
}

header.pc .header-inner .logo-container img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

header.pc .header-inner .middle {
    display: flex;
    gap: 24px;
    align-items: center
}

header.pc .header-inner .middle h3 {
    background: var(--2, linear-gradient(182deg, #EF4136 17.02%, #FF9942 45.2%, #FFC40C 84.91%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 45.003px;
    font-weight: 900;
    line-height: 98.9%;
    text-transform: uppercase
}

header.pc .header-inner .right {
    display: flex;
    gap: 50px;
    align-items: center;
    padding-right: 30px
}

header.pc .header-inner .right .call-btn {
    border-radius: 5px;
    border: 1px solid #F04535;
    background: #F15A29;
    padding: 10px 20px;
    position: relative;
    color: #FFF;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase
}

header.pc .header-inner .right .call-btn svg {
    position: absolute;
    left: -17px;
    top: 15%
}

header.pc .header-inner .right .schedule-btn {
    border-radius: 5px;
    font-family: sans-serif !important;
    border: 2px solid var(--1, #F15A29);
    color: #EF4136;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding: 10px 20px;
    background-color: #F15A29;
    color: #fff
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1150px
    }
}

@media (min-width:1400px) {
    .container {
        width: 1150px
    }
}

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

.text-secondary {
    color: var(--secondary)
}

.text-tertiary {
    color: var(--tertiary)
}

.text-black {
    color: var(--black)
}

.text-white {
    color: var(--white) !important
}

.position-relative {
    position: relative
}

.bg-primary {
    background-color: var(--primary);
    padding: 0px 5px;
    color: var(--white)
}

.bg-secondary {
    background-color: var(--secondary);
    padding: 0px 5px
}

.bg-white {
    background-color: var(--white)
}

.bg-black {
    background-color: var(--black)
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.w-100 {
    width: 100%
}

.align-items-center {
    align-items: center !important
}

.align-items-stretch {
    align-items: stretch !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-items-end {
    align-items: flex-end !important
}

.gap-0 {
    gap: 0px !important
}

.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 50px;
    align-items: center
}

.row .row {
    grid-gap: 15px
}

@media (max-width:1024px) {
    .row {
        grid-gap: 15px
    }
}

.col-md-1 {
    grid-column: span 1
}

@media (max-width:1024px) {
    .col-1 {
        grid-column: span 1
    }
}

.col-md-2 {
    grid-column: span 2
}

@media (max-width:1024px) {
    .col-2 {
        grid-column: span 2
    }
}

.col-md-3 {
    grid-column: span 3
}

@media (max-width:1024px) {
    .col-3 {
        grid-column: span 3
    }
}

.col-md-4 {
    grid-column: span 4
}

@media (max-width:1024px) {
    .col-4 {
        grid-column: span 4
    }
}

.col-md-5 {
    grid-column: span 5
}

@media (max-width:1024px) {
    .col-5 {
        grid-column: span 5
    }
}

.col-md-6 {
    grid-column: span 6
}

@media (max-width:1024px) {
    .col-6 {
        grid-column: span 6
    }
}

.col-md-7 {
    grid-column: span 7
}

@media (max-width:1024px) {
    .col-7 {
        grid-column: span 7
    }
}

.col-md-8 {
    grid-column: span 8
}

@media (max-width:1024px) {
    .col-8 {
        grid-column: span 8
    }
}

.col-md-9 {
    grid-column: span 9
}

@media (max-width:1024px) {
    .col-9 {
        grid-column: span 9
    }
}

.col-md-10 {
    grid-column: span 10
}

@media (max-width:1024px) {
    .col-10 {
        grid-column: span 10
    }
}

.col-md-11 {
    grid-column: span 11
}

@media (max-width:1024px) {
    .col-11 {
        grid-column: span 11
    }
}

.col-md-12 {
    grid-column: span 12
}

@media (max-width:1024px) {
    .col-12 {
        grid-column: span 12
    }
}

.m-1 {
    margin: 1rem
}

.mt-1 {
    margin-top: 1rem
}

.mb-1 {
    margin-bottom: 1rem
}

.ml-1 {
    margin-left: 1rem
}

.mr-1 {
    margin-right: 1rem
}

.p-1 {
    margin: 1rem
}

.pt-1 {
    margin-top: 1rem
}

.pb-1 {
    margin-bottom: 1rem
}

.pl-1 {
    margin-left: 1rem
}

.pr-1 {
    margin-right: 1rem
}

.m-2 {
    margin: 2rem
}

.mt-2 {
    margin-top: 2rem
}

.mb-2 {
    margin-bottom: 2rem
}

.ml-2 {
    margin-left: 2rem
}

.mr-2 {
    margin-right: 2rem
}

.p-2 {
    margin: 2rem
}

.pt-2 {
    margin-top: 2rem
}

.pb-2 {
    margin-bottom: 2rem
}

.pl-2 {
    margin-left: 2rem
}

.pr-2 {
    margin-right: 2rem
}

.m-3 {
    margin: 3rem
}

.mt-3 {
    margin-top: 3rem
}

.mb-3 {
    margin-bottom: 3rem
}

.ml-3 {
    margin-left: 3rem
}

.mr-3 {
    margin-right: 3rem
}

.p-3 {
    margin: 3rem
}

.pt-3 {
    margin-top: 3rem
}

.pb-3 {
    margin-bottom: 3rem
}

.pl-3 {
    margin-left: 3rem
}

.pr-3 {
    margin-right: 3rem
}

.m-4 {
    margin: 4rem
}

.mt-4 {
    margin-top: 4rem
}

.mb-4 {
    margin-bottom: 4rem
}

.ml-4 {
    margin-left: 4rem
}

.mr-4 {
    margin-right: 4rem
}

.p-4 {
    margin: 4rem
}

.pt-4 {
    margin-top: 4rem
}

.pb-4 {
    margin-bottom: 4rem
}

.pl-4 {
    margin-left: 4rem
}

.pr-4 {
    margin-right: 4rem
}

.m-5 {
    margin: 5rem
}

.mt-5 {
    margin-top: 5rem
}

.mb-5 {
    margin-bottom: 5rem
}

.ml-5 {
    margin-left: 5rem
}

.mr-5 {
    margin-right: 5rem
}

.p-5 {
    margin: 5rem
}

.pt-5 {
    margin-top: 5rem
}

.pb-5 {
    margin-bottom: 5rem
}

.pl-5 {
    margin-left: 5rem
}

.pr-5 {
    margin-right: 5rem
}

@media (min-width:1024px) {
    .order-md-1 {
        order: 1
    }
}

@media (max-width:1024px) {
    .order-1 {
        order: 1
    }
}

@media (min-width:1024px) {
    .order-md-2 {
        order: 2
    }
}

@media (max-width:1024px) {
    .order-2 {
        order: 2
    }
}

@media (min-width:1024px) {
    .order-md-3 {
        order: 3
    }
}

@media (max-width:1024px) {
    .order-3 {
        order: 3
    }
}

@media (min-width:1024px) {
    .order-md-4 {
        order: 4
    }
}

@media (max-width:1024px) {
    .order-4 {
        order: 4
    }
}

@media (min-width:1024px) {
    .order-md-5 {
        order: 5
    }
}

@media (max-width:1024px) {
    .order-5 {
        order: 5
    }
}

@media (min-width:1024px) {
    .order-md-6 {
        order: 6
    }
}

@media (max-width:1024px) {
    .order-6 {
        order: 6
    }
}

@media (min-width:1024px) {
    .order-md-7 {
        order: 7
    }
}

@media (max-width:1024px) {
    .order-7 {
        order: 7
    }
}

@media (min-width:1024px) {
    .order-md-8 {
        order: 8
    }
}

@media (max-width:1024px) {
    .order-8 {
        order: 8
    }
}

@media (min-width:1024px) {
    .order-md-9 {
        order: 9
    }
}

@media (max-width:1024px) {
    .order-9 {
        order: 9
    }
}

@media (min-width:1024px) {
    .order-md-10 {
        order: 10
    }
}

@media (max-width:1024px) {
    .order-10 {
        order: 10
    }
}

@media (min-width:1024px) {
    .order-md-11 {
        order: 11
    }
}

@media (max-width:1024px) {
    .order-11 {
        order: 11
    }
}

@media (min-width:1024px) {
    .order-md-12 {
        order: 12
    }
}

@media (max-width:1024px) {
    .order-12 {
        order: 12
    }
}

section.hero {
    display: block;
    padding-top: 0
}

section.hero:before {
    content: "";
    background-image: url(/wp-content/uploads/2024/06/Frame-1000011912.png);
    background-size: 100% 100%;
    position: absolute;
    bottom: 9%;
    width: 100%;
    height: 21px;
    transform: rotate(-1.9deg)
}

@media (max-width:1024px) {
    section.hero:before {
        bottom: 12%;
        transform: rotate(-6.9deg)
    }
}

section.hero .inner {
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%)
}

section.hero .inner .item {
    position: relative
}

section.hero .inner .item img {
    width: 100%
}

@media (max-width:1024px) {
    section.hero .inner .item img {
        height: 100%;
        object-fit: cover
    }
}

section.hero .inner .item:before {
    content: "";
    background: #00000061;
    position: absolute;
    width: 100%;
    height: 100%
}

@media (max-width:1024px) {
    section.hero .inner .item {
        height: 450px
    }
}

section.hero .inner .item .content-box {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: 1s
}

section.hero .inner .item .content-box .main-heading {
    background-size: 100% 100%;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 50px
}

section.hero .inner .item .content-box h1,
section.hero .inner .item .content-box h2 {
    color: #FFF;
    text-align: center;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    text-transform: uppercase
}

@media (max-width:1024px) {

    section.hero .inner .item .content-box h1,
    section.hero .inner .item .content-box h2 {
        font-size: 29px
    }
}

section.hero .inner .item.slick-current .content-box {
    opacity: 1;
    transition: 1s
}

.testimonials {
    display: block;
    padding: 0;
    margin-top: -70px;
    padding-bottom: 150px
}

@media (max-width:1024px) {
    .testimonials {
        margin-top: 0
    }
}

.testimonials .marquee {
    white-space: nowrap;
    display: flex;
    width: 100%;
    overflow: hidden;
    will-change: transform;
    position: absolute;
    bottom: 0;
    z-index: -1
}

.testimonials .form-container {
    background: #FFC40C;
    box-shadow: -25px 24px 24px 0px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-top: -18px
}

.testimonials .form-container h2 {
    color: #272020;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center
}

@media (max-width:1024px) {
    .testimonials .form-container h2 {
        font-size: 45px
    }
}

.testimonials .form-container .flex-part {
    display: flex;
    gap: 18px;
    align-items: center;
    border-top: 1px solid #272020;
    border-bottom: 1px solid #272020;
    padding: 10px 0;
    margin: 10px 0
}

@media (max-width:1024px) {
    .testimonials .form-container .flex-part {
        flex-wrap: wrap;
        align-content: center;
        justify-content: center
    }

    .testimonials .form-container .flex-part p {
        text-align: center
    }
}

.testimonials .form-container .flex-part img {
    width: 170px
}

.testimonials .form-container .gform_button.button {
    background: var(--1, linear-gradient(90deg, #F15A29 0%, #EF4136 100%)) !important;
    width: 100% !important;
    color: #FFF;
    font-size: 25px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 0 !important;
    padding: 10px !important
}

.testimonials img.car-image {
    position: absolute;
    bottom: 0;
    width: 400px;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 0.5s infinite alternate
}

@keyframes mover {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-1px)
    }
}

@media (max-width:1024px) {
    .testimonials img.car-image {
        width: 280px
    }
}

section.about-us {
    display: block;
    background-color: #000;
    padding-bottom: 0
}

@media (max-width:1024px) {
    section.about-us {
        padding: 1px 0px
    }
}

section.about-us img.backheading {
    position: absolute;
    width: 100%;
    top: 0px
}

@media (max-width:1024px) {
    section.about-us img.backheading {
        top: 5px
    }
}

section.about-us .theme-heading {
    margin: 75px auto
}

@media (max-width:1024px) {
    section.about-us .theme-heading {
        margin: 75px auto 0
    }
}

section.about-us .theme-heading h2 {
    font-family: Anton;
    font-size: 130px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
    background: var(--2, linear-gradient(182deg, #EF4136 17.02%, #FF9942 45.2%, #FFC40C 84.91%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width:1024px) {
    section.about-us .theme-heading h2 {
        font-size: 70px
    }
}

section.about-us-second {
    display: block;
    background-color: #000;
    padding-top: 0;
    padding-bottom: 60px
}

@media (max-width:1024px) {
    section.about-us-second {
        padding-bottom: 158px
    }
}

section.about-us-second:before {
    content: "";
    background-image: url(/wp-content/uploads/2024/08/Frame-1000012106.png);
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 407px;
    bottom: 0px;
    z-index: -1
}

@media (max-width:1024px) {
    section.about-us-second:before {
        height: 200px
    }
}

section.about-us-second .content {
    position: relative;
    padding: 10px 0px
}

@media (max-width:1024px) {
    section.about-us-second .content {
        padding: 10px
    }
}

section.about-us-second .content .text {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    text-transform: capitalize
}

@media (max-width:1024px) {
    section.about-us-second .content .text {
        font-size: 16px
    }
}

section.about-us-second .image-container {
    position: relative;
    background-size: 100% 100%
}

section.about-us-second .image-container img.backimage {
    opacity: 0.25;
    mix-blend-mode: luminosity;
    width: 100%;
    transform: scale(1.1)
}

section.about-us-second .owner {
    display: grid;
    grid-template-columns: 23% 34% 38%;
    gap: 12px;
    margin-bottom: 55px;
    align-items: center
}

@media (max-width:1024px) {
    section.about-us-second .owner {
        grid-template-columns: 100%;
        align-items: center;
        justify-items: center
    }
}

section.about-us-second .owner .btn-new {
    height: 50px;
    width: 100%
}

section.about-us-second h2 {
    background: var(--2, linear-gradient(182deg, #EF4136 17.02%, #FF9942 45.2%, #FFC40C 84.91%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-align: left
}

section.about-us-second p.president {
    color: #B5B5B5;
    font-size: 26.201px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

section.about-us-second .items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 5px;
    gap: 6px
}

@media (max-width:1024px) {
    section.about-us-second .items {
        flex-wrap: wrap;
        gap: 14px
    }
}

.partners {
    padding: 0
}

.partners .flex-part {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 20px
}

.partners .theme-heading h2 {
    color: #0F0F0F;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width:1024px) {
    .partners .theme-heading h2 {
        font-size: 38px
    }
}

.partners .items,
.partners .items2 {
    width: 100%
}

.partners .items img,
.partners .items2 img {
    margin: 10px 0;
    width: 100%
}

.commercial {
    display: block;
    overflow: hidden;
    padding-bottom: 0px;
    padding-top: 0
}

.commercial .pinWrapper {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 11
}

.commercial .scrollmagic-pin-spacer {
    position: absolute !important;
    clip: rect(auto, auto, auto, auto)
}

.commercial .event {
    position: relative;
    overflow: hidden;
    height: 80vh;
    width: 100vw;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.commercial .event::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.79) 0%, rgba(34, 34, 34, 0.67) 100%)
}

.commercial .image {
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    position: absolute;
    background-size: cover;
    background-position: center center;
    transition: width 1s, height 1s;
    -webkit-transition: width 1s, height 1s;
    box-shadow: 2px 2px 10px 10px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 2px 2px 10px 10px rgba(0, 0, 0, 0.12);
    transform-origin: center;
    -webkit-transform-origin: center;
    z-index: 8888;
    overflow: hidden;
    border-radius: 0
}

@media (max-width:1024px) {
    .commercial .image {
        display: none
    }
}

.commercial .image {
    top: -50%;
    width: 500px;
    height: 500px;
    left: auto;
    right: 100px;
    position: absolute;
    border-radius: 12px;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%)
}

.commercial #section1 .image video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0;
    left: 0
}

.commercial .text {
    top: -50%;
    left: 0;
    position: absolute;
    transform: translate(100px, -50%);
    -webkit-transform: translate(100px, -50%);
    width: 43%
}

.commercial .text h2 {
    display: flex;
    gap: 12px;
    align-items: center
}

.commercial .text .content p {
    color: #EAEAEA;
    font-family: var(--font);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.2px
}

.commercial .text .content ul li {
    color: #FFF;
    font-family: Anton;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.2px
}

.commercial #section1 .text {
    top: 50%
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px)
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px)
    }
}

@-webkit-keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px)
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px)
    }
}

@media screen and (max-width:1399px) {
    .commercial h2 {
        font-size: 22px
    }

    .commercial .text {
        transform: translate(60px, -50%);
        -webkit-transform: translate(60px, -50%)
    }

    .commercial .image:not(#loaderVideo) {
        height: 450px;
        width: 450px;
        right: 80px;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%)
    }
}

@media screen and (max-width:1199px) {
    .commercial h2 {
        font-size: 20px
    }

    .commercial .text {
        transform: translate(40px, -50%);
        -webkit-transform: translate(40px, -50%);
        width: 50%
    }

    .commercial .image:not(#loaderVideo) {
        height: 400px;
        width: 400px;
        right: 60px;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%)
    }
}

@media screen and (max-width:991px) {
    .commercial h2 {
        font-size: 23px
    }

    .commercial .text {
        transform: translate(24px, -50%);
        -webkit-transform: translate(24px, -50%);
        width: 50%
    }

    .commercial .image:not(#loaderVideo) {
        height: 310px;
        width: 310px;
        right: 40px;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%)
    }
}

@media screen and (max-width:767px) {
    .commercial h2 {
        font-size: 21px
    }

    .commercial .image:not(#loaderVideo) {
        height: 220px;
        width: 220px
    }
}

@media screen and (max-width:576px) {
    .commercial .text {
        top: -54%;
        width: 100%;
        width: calc(100% - 80px)
    }

    .commercial #section1 .text {
        top: 45%
    }

    .commercial .image:not(#loaderVideo) {
        top: -75%;
        left: 24px;
        right: auto;
        transform: translate(0%, -25%);
        -webkit-transform: translate(0%, -25%)
    }
}

.commercial .images {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px
}

@media (max-width:1024px) {
    .commercial .images {
        padding: 20px;
        gap: 15px;
        flex-wrap: wrap
    }

    .commercial .images img {
        width: 155px;
        gap: 9px
    }
}

.commercial .images .item img {
    width: 293px
}

.commercial .images .item:nth-child(2) img {
    width: 200px
}

.residential {
    background: linear-gradient(181deg, rgba(239, 65, 54, 0.05) 7.34%, rgba(255, 153, 66, 0.05) 28.23%, rgba(241, 90, 41, 0.05) 44.62%, rgba(239, 65, 54, 0.05) 73.67%, rgba(191, 30, 45, 0.05) 98.47%), #FFF
}

.residential img.backheading {
    position: absolute;
    width: 100%;
    top: 30px;
    z-index: -1
}

.residential .theme-heading {
    margin: 30px auto 50px
}

@media (max-width:1024px) {
    .residential .theme-heading {
        margin: 0 auto 0
    }
}

.residential .theme-heading h2 {
    color: #000;
    font-size: 50px
}

@media (max-width:1024px) {
    .residential .theme-heading h2 {
        font-size: 30px
    }
}

.residential .inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 30px
}

@media (max-width:1024px) {
    .residential .inner {
        grid-template-columns: 1fr
    }
}

@media (max-width:1024px) {
    .residential .inner .item {
        margin-top: 12px
    }
}

.residential .inner .item .img-con {
    overflow: hidden;
    transition: 1s
}

.residential .inner .item .img-con img.main-image {
    width: 100%;
    transition: 1s;
    height: 100%;
    transform: scale(1.1)
}

.residential .inner .item .img-con:hover {
    transition: 1s
}

.residential .inner .item .img-con:hover img.main-image {
    transition: 1s;
    transform: scale(1.3)
}

.residential .inner .item .content-box {
    background: linear-gradient(90deg, #F15A29 0%, rgba(239, 65, 54, 0.76) 86.21%);
    padding: 20px;
    height: 280px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-direction: column
}

.residential .inner .item .content-box img {
    width: 50px
}

.residential .inner .item .content-box .flex-part {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #E0E0E0;
    padding: 10px 0px 0px
}

.residential .inner .item .content-box .flex-part:before {
    content: "";
    width: 1px;
    background: #E0E0E0;
    height: 40px;
    position: absolute
}

.residential .inner .item:nth-child(odd) .content-box {
    flex-direction: column-reverse
}

.residential .inner .item:nth-child(odd) .flex-part {
    border-bottom: 1px solid #E0E0E0;
    border-top: 0px;
    padding: 0px 0px 10px
}

.residential .inner .item:nth-child(2) {
    display: grid
}

.residential .inner .item:nth-child(2) .img-con {
    order: 2
}

@media (max-width:1024px) {
    .residential .inner .item:nth-child(2) .img-con {
        order: 1
    }
}

@media (max-width:1024px) {
    .residential .inner .item:nth-child(2) .content-box {
        order: 2
    }
}

.residential .inner .item:nth-child(4) {
    display: grid
}

.residential .inner .item:nth-child(4) .img-con {
    order: 2
}

@media (max-width:1024px) {
    .residential .inner .item:nth-child(4) .img-con {
        order: 1
    }
}

@media (max-width:1024px) {
    .residential .inner .item:nth-child(4) .content-box {
        order: 2
    }
}

.commercial-materials {
    margin-top: -50px;
    background-size: 100% 100%;
    padding: 150px 0 70px;
    display: block
}

@media (max-width:1024px) {
    .commercial-materials {
        background-size: cover;
        padding: 85px 0;
        background-position: top;
        margin-top: 0px
    }
}

.commercial-materials .theme-heading h2 {
    background: var(--2, linear-gradient(182deg, #EF4136 17.02%, #FF9942 45.2%, #FFC40C 84.91%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 85.417px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase
}

@media (max-width:1024px) {
    .commercial-materials .theme-heading h2 {
        font-size: 36px
    }
}

.commercial-materials .inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 50px
}

@media (max-width:1024px) {
    .commercial-materials .inner {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }
}

.commercial-materials .inner .item {
    position: relative;
    transition: 1s
}

.commercial-materials .inner .item img {
    border-radius: 200px
}

.commercial-materials .inner .item .content-box {
    position: absolute;
    top: 55%;
    transform: translate(-50%, -50%);
    left: 50%
}

.commercial-materials .inner .item .content-box h3 {
    color: #FFF;
    font-size: 54px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    transform: rotate(-90deg)
}

@media (max-width:1024px) {
    .commercial-materials .inner .item .content-box h3 {
        font-size: 30px;
        font-weight: 300
    }
}

.commercial-materials .inner .item .content-box svg {
    position: absolute;
    top: -130px;
    left: 50%;
    border-radius: 124.346px;
    border: 2px solid #FBB040;
    background: linear-gradient(90deg, rgba(241, 90, 41, 0.85) 0%, rgba(239, 65, 54, 0.85) 100%);
    padding: 12px;
    opacity: 0;
    transition: 1s;
    transform: translateX(-50%)
}

@media (max-width:1024px) {
    .commercial-materials .inner .item .content-box svg {
        top: -105px;
        width: 50px;
        height: 50px
    }
}

.commercial-materials .inner .item:hover {
    transition: 1s
}

.commercial-materials .inner .item:hover:before {
    transition: 1s;
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #F9BB1B 100%);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 200px
}

.commercial-materials .inner .item:hover:nth-child(2) {
    transition: 1s
}

.commercial-materials .inner .item:hover:nth-child(2):before {
    transition: 1s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #FF9942 100%)
}

.commercial-materials .inner .item:hover:nth-child(3) {
    transition: 1s
}

.commercial-materials .inner .item:hover:nth-child(3):before {
    transition: 1s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #F15A29 100%)
}

.commercial-materials .inner .item:hover:nth-child(4) {
    transition: 1s
}

.commercial-materials .inner .item:hover:nth-child(4):before {
    transition: 1s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #F00 100%)
}

.commercial-materials .inner .item:hover .content-box svg {
    opacity: 1;
    transition: 1s
}

.commercial-materials .premium-roofs {
    border-radius: 26px;
    border: 1px solid var(--2, #EF4136);
    background: rgba(245, 245, 245, 0.95);
    display: grid;
    grid-template-columns: 40% 15% 15% 15% 15%;
    gap: 0;
    justify-items: center;
    align-items: center;
    margin-top: 75px;
    padding: 20px
}

@media (max-width:1024px) {
    .commercial-materials .premium-roofs {
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 25px
    }
}

.commercial-materials .premium-roofs h3 {
    color: #201D1D;
    font-family: Anton;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
}

.commercial-materials .premium-roofs img {
    width: 150px
}

.commercial-materials .premium-roofs img:nth-child(4) {
    width: 92px
}

.commercial-materials .premium-roofs img:nth-child(5) {
    width: 80%
}

.commercial-materials .images {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 75px
}

@media (max-width:1024px) {
    .commercial-materials .images {
        padding: 20px;
        gap: 15px;
        flex-wrap: wrap
    }

    .commercial-materials .images img {
        width: 155px;
        gap: 9px
    }
}

.commercial-materials .images .item img {
    width: 293px
}

.commercial-materials .images .item:nth-child(2) img {
    width: 200px
}

.materials {
    background-size: 100% 100%;
    padding: 150px 0
}

@media (max-width:1024px) {
    .materials {
        background-size: cover;
        padding: 85px 0;
        background-position: top
    }
}

.materials .theme-heading h2 {
    background: var(--2, linear-gradient(182deg, #EF4136 17.02%, #FF9942 45.2%, #FFC40C 84.91%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 85.417px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase
}

@media (max-width:1024px) {
    .materials .theme-heading h2 {
        font-size: 36px
    }
}

.materials .inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 50px
}

@media (max-width:1024px) {
    .materials .inner {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }
}

.materials .inner .item {
    position: relative;
    transition: 1s
}

.materials .inner .item img {
    border-radius: 200px
}

.materials .inner .item .content-box {
    position: absolute;
    top: 55%;
    transform: translate(-50%, -50%);
    left: 50%
}

.materials .inner .item .content-box h3 {
    color: #FFF;
    font-size: 54px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    transform: rotate(-90deg)
}

@media (max-width:1024px) {
    .materials .inner .item .content-box h3 {
        font-size: 30px;
        font-weight: 300
    }
}

.materials .inner .item .content-box svg {
    position: absolute;
    top: -130px;
    left: 50%;
    border-radius: 124.346px;
    border: 2px solid #FBB040;
    background: linear-gradient(90deg, rgba(241, 90, 41, 0.85) 0%, rgba(239, 65, 54, 0.85) 100%);
    padding: 12px;
    opacity: 0;
    transition: 1s;
    transform: translateX(-50%)
}

@media (max-width:1024px) {
    .materials .inner .item .content-box svg {
        top: -105px;
        width: 50px;
        height: 50px
    }
}

.materials .inner .item:hover {
    transition: 1s
}

.materials .inner .item:hover:before {
    transition: 1s;
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #F9BB1B 100%);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 200px
}

.materials .inner .item:hover:nth-child(2) {
    transition: 1s
}

.materials .inner .item:hover:nth-child(2):before {
    transition: 1s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #FF9942 100%)
}

.materials .inner .item:hover:nth-child(3) {
    transition: 1s
}

.materials .inner .item:hover:nth-child(3):before {
    transition: 1s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #F15A29 100%)
}

.materials .inner .item:hover:nth-child(4) {
    transition: 1s
}

.materials .inner .item:hover:nth-child(4):before {
    transition: 1s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #F00 100%)
}

.materials .inner .item:hover .content-box svg {
    opacity: 1;
    transition: 1s
}

.materials .premium-roofs {
    border-radius: 26px;
    border: 1px solid var(--2, #EF4136);
    background: rgba(245, 245, 245, 0.95);
    display: grid;
    grid-template-columns: 60% 19% 19%;
    gap: 10px;
    justify-items: center;
    align-items: center;
    margin-top: 75px;
    padding: 20px
}

@media (max-width:1024px) {
    .materials .premium-roofs {
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 25px
    }
}

.materials .premium-roofs h3 {
    color: #201D1D;
    font-family: Anton;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
}

.materials .premium-roofs img {
    width: 150px
}

.materials .premium-roofs img:nth-child(4) {
    width: 92px
}

.materials .premium-roofs img:nth-child(5) {
    width: 80%
}

.materials .images {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 75px
}

@media (max-width:1024px) {
    .materials .images {
        padding: 20px;
        gap: 15px;
        flex-wrap: wrap
    }

    .materials .images img {
        width: 155px;
        gap: 9px
    }
}

.materials .images .item img {
    width: 293px
}

.materials .images .item:nth-child(2) img {
    width: 200px
}

.solar {
    background: linear-gradient(181deg, rgba(239, 65, 54, 0.05) 7.34%, rgba(255, 153, 66, 0.05) 28.23%, rgba(241, 90, 41, 0.05) 44.62%, rgba(239, 65, 54, 0.05) 73.67%, rgba(191, 30, 45, 0.05) 98.47%), #FFF;
    margin-top: -55px;
    z-index: 0
}

@media (max-width:1024px) {
    .solar {
        margin-top: 0px;
        z-index: 1
    }
}

.solar .items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

@media (max-width:1024px) {
    .solar .items {
        grid-template-columns: 1fr;
        gap: 15px
    }
}

.solar .items .item {
    border-radius: 10px;
    border: 2px solid var(--2, #EF4136);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    height: 220px;
    gap: 15px;
    position: relative;
    flex-direction: column
}

@media (max-width:1024px) {
    .solar .items .item {
        height: 290px
    }
}

.solar .items .item img.icon {
    width: 95px;
    height: 75px
}

.solar .items .item img.link-icon {
    position: absolute;
    right: 15px;
    bottom: 15px;
    transition: 0.6s
}

.solar .items .item img.link-icon:hover {
    transform: rotate(45deg)
}

.exteriors {
    display: block;
    background: linear-gradient(180deg, rgba(50, 120, 201, 0.03) 0%, #DFEEFF 100%);
    padding-bottom: 0
}

@media (max-width:1024px) {
    .exteriors .theme-heading h2 {
        font-size: 35px
    }
}

.exteriors .content {
    margin-bottom: 50px;
    display: flex;
    padding: 0 20%
}

.exteriors .image .image-container img {
    display: none
}

.exteriors .image .image-container.active img {
    display: block;
    width: 100%
}

@media (max-width:1024px) {
    .exteriors .image .image-container.active img {
        height: 200px;
        object-fit: cover
    }
}

.exteriors .items {
    background: #D21C1C;
    padding: 10px
}

@media (max-width:1024px) {
    .exteriors .items {
        padding: 10px 5px
    }
}

.exteriors .items .container {
    display: flex;
    justify-content: space-between;
    padding: 10px 0
}

@media (max-width:1024px) {
    .exteriors .items .container {
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
        justify-content: center
    }
}

.exteriors .items .container .item {
    position: relative
}

.exteriors .items .container .item:before {
    content: "";
    position: absolute;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5492 21.3267L7.17627 25.4266C8.99287 26.3919 11.0552 26.9525 13.2454 26.9936C13.3309 26.9953 13.4159 27.0002 13.502 27.0002C15.877 27.0002 18.1066 26.3854 20.045 25.3087L13.7022 21.2285L13.5492 21.3267Z' fill='%23BF1E2D'/%3E%3Cpath d='M13.5502 15.2672L3.04004 22.0283C4.17432 23.4182 5.58065 24.5772 7.1773 25.4262L13.5502 21.3263L13.7038 21.2276L20.0465 25.3077C21.618 24.4351 22.9947 23.258 24.1015 21.8567L13.7038 15.1685L13.5502 15.2672Z' fill='%23EF4136'/%3E%3Cpath d='M13.5488 9.20713L0.61377 17.5282C1.13264 19.189 1.96415 20.7116 3.03865 22.0279L13.5488 15.2668L13.7024 15.1681L24.1001 21.8568C25.1538 20.5218 25.9612 18.9844 26.4532 17.3104L13.7024 9.1084L13.5488 9.20713Z' fill='%23F15A29'/%3E%3Cpath d='M26.853 11.5098L13.7002 3.04834L13.5466 3.14706L0.111343 11.7901C0.0405878 12.3501 0 12.9199 0 13.4986C0 14.9022 0.214459 16.2547 0.611566 17.5277L13.5466 9.2067L13.7002 9.10797L26.451 17.31C26.8064 16.1011 27 14.8226 27 13.4986C27 12.8229 26.949 12.1592 26.853 11.5098Z' fill='%23F7931E'/%3E%3Cpath d='M13.7036 3.04957L26.8564 11.511C25.8943 4.99888 20.2838 0 13.5033 0C12.8534 0 12.2144 0.0488019 11.5891 0.137656C5.59795 0.988906 0.875991 5.77171 0.115234 11.7913L13.5505 3.14829L13.7036 3.04957Z' fill='%23FBB040'/%3E%3C/svg%3E%0A");
    background-size: 100% 100%;
    width: 27px;
    height: 27px;
    left: -64px;
    top: 8px
}

@media (max-width:1024px) {
    .exteriors .items .container .item:before {
        display: none
    }
}

.exteriors .items .container .item:nth-child(1):before {
    display: none
}

.exteriors .items .container a {
    color: #FFF;
    font-size: 38px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    text-transform: uppercase;
    font-family: var(--heading-font)
}

@media (max-width:1024px) {
    .exteriors .items .container a {
        font-size: 18px;
        font-weight: 400;
        text-decoration: underline
    }
}

.exteriors .items .container a:hover {
    text-decoration: underline
}

.service-areas {
    display: block;
    color: #fff
}

.service-areas svg.logo {
    display: block;
    margin-top: 50px
}

.service-areas .theme-heading {
    position: relative
}

.service-areas .theme-heading h2 {
    font-size: 64px;
    margin-bottom: 6px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

@media (max-width:1024px) {
    .service-areas .theme-heading h2 {
        font-size: 32px
    }
}

.service-areas .box-part {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    overflow: hidden
}

.service-areas .areas {
    padding-top: 12px
}

.service-areas .areas .left .items::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5
}

.service-areas .areas .left .items::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5
}

.service-areas .areas .left .items::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #DADADA
}

.service-areas .areas .left .items {
    display: flex;
    gap: 16px;
    flex-direction: column;
    overflow-y: scroll;
    height: 335px
}

@media (max-width:1024px) {
    .service-areas .areas .left .items {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        overflow-y: hidden;
        height: 172px
    }
}

.service-areas .areas .left .items .item {
    border-radius: 5px;
    border: 1px solid #4F4F4F;
    box-shadow: 4px 4px 24px 0px rgba(0, 0, 0, 0.15);
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    transition: 0.4s;
    width: 95%;
    cursor: pointer
}

@media (max-width:1024px) {
    .service-areas .areas .left .items .item {
        border: 1px solid #D62929;
        padding: 15px 2px;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%
    }
}

.service-areas .areas .left .items .item h4 {
    font-family: var(--font);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: capitalize
}

@media (max-width:1024px) {
    .service-areas .areas .left .items .item h4 {
        color: #fff;
        font-size: 14px
    }
}

@media (max-width:1024px) {
    .service-areas .areas .left .items .item svg path {
        fill: #000
    }
}

.service-areas .areas .left .items .item.active {
    background: #D21C1C;
    border: 1px solid #D38285
}

.service-areas .areas .left .items .item.active svg path {
    fill: #fff
}

.service-areas .areas .left .items .item.active h4 {
    color: #fff
}

.service-areas .areas p {
    color: #000
}

@media (max-width:1024px) {
    .service-areas .areas p {
        font-size: 14px;
        line-height: 130%
    }
}

.service-areas .theme-heading {
    position: relative
}

.service-areas .theme-heading h3 {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    margin-top: 20px;
    line-height: 140%;
    letter-spacing: 0.16px
}

.service-areas .citi {
    display: grid;
    grid-template-areas: "stack"
}

.service-areas .citi h3 {
    color: #000
}

.service-areas .cities-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5
}

.service-areas .cities-container::-webkit-scrollbar {
    width: 6px;
    background-color: #fff
}

.service-areas .cities-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #DADADA
}

.service-areas .cities-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 20px;
    grid-area: stack;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.5s ease;
    overflow-y: scroll;
    height: 335px;
    justify-content: center;
    align-content: center;
    align-items: start;
    gap: 45px
}

@media (max-width:1024px) {
    .service-areas .cities-container {
        margin-top: 0px;
        height: 255px;
        gap: 0px 10px
    }
}

.service-areas .cities-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.service-areas .cities-container h5 {
    color: #000;
    font-size: 17px;
    font-style: normal;
    line-height: 120%;
    text-align: center;
    display: flex;
    float: left;
    align-items: center;
    gap: 10px;
    transition: 0.4s;
    justify-content: center;
    font-family: var(--font);
    font-weight: 600;
    border-bottom: 3px solid #EF4136;
    transition: 0.4s;
    background-color: #fff;
    padding: 10px;
    width: 100%
}

@media (max-width:1024px) {
    .service-areas .cities-container h5 {
        font-size: 14px;
        padding: 6px;
        margin: 10px 2px
    }
}

.service-areas .cities-container h5:hover {
    transition: 0.4s
}

.service-areas .cities-container h5:hover svg path {
    fill: var(--primary)
}

.emergency {
    background: linear-gradient(181deg, rgba(239, 65, 54, 0.05) 7.34%, rgba(255, 153, 66, 0.05) 28.23%, rgba(241, 90, 41, 0.05) 44.62%, rgba(239, 65, 54, 0.05) 73.67%, rgba(191, 30, 45, 0.05) 98.47%), #FFF
}

@media (max-width:1024px) {
    .emergency {
        background-image: url(/wp-content/uploads/2024/08/sfdaf.png) !important
    }
}

.emergency .container {
    padding: 0;
    padding-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    position: relative
}

@media (max-width:1024px) {
    .emergency .container {
        padding: 0px;
        border-radius: 0
    }
}

.emergency video {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    object-fit: cover;
    height: 100%;
    z-index: -2
}

@media (max-width:1024px) {
    .emergency video {
        display: none
    }
}

.emergency img.main-logo {
    width: 200px;
    position: absolute;
    left: 80%;
    top: 25px
}

@media (max-width:1024px) {
    .emergency img.main-logo {
        position: relative;
        left: 8%
    }
}

.emergency img.car-image {
    width: 341px;
    position: absolute;
    left: 46%;
    bottom: 27%
}

@media (max-width:1024px) {
    .emergency img.car-image {
        position: relative;
        left: 8%
    }
}

.emergency .theme-heading {
    display: block;
    margin-top: 25px;
    margin-left: 25px
}

.emergency .theme-heading:before {
    content: "";
    background-image: url(/wp-content/uploads/2024/06/Group-1000009538.png);
    background-size: 100% 100%;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0px 30px 0 55px;
    left: -37px;
    z-index: 0
}

@media (max-width:1024px) {
    .emergency .theme-heading:before {
        left: -28px
    }
}

.emergency .theme-heading h2 {
    color: #FFF;
    font-size: 80.653px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    text-transform: uppercase;
    z-index: 1;
    position: relative
}

@media (max-width:1024px) {
    .emergency .theme-heading h2 {
        font-size: 62px
    }
}

.emergency .content {
    margin-left: 25px
}

.emergency .content h3 {
    color: #FFF;
    font-size: 52.114px;
    font-style: normal;
    font-weight: 400;
    line-height: 82%;
    text-transform: uppercase;
    margin: 22px 0
}

@media (max-width:1024px) {
    .emergency .content h3 {
        font-size: 47px
    }
}

.emergency .content h3 span {
    color: #FFF;
    font-size: 31.02px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    text-transform: uppercase
}

.emergency .img-block {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    margin: 30px 0px;
    justify-content: flex-end
}

.emergency .img-block .car-holder {
    display: flex;
    align-items: center
}

.emergency .img-block .car-holder svg {
    width: 75px;
    position: relative;
    right: 320px
}

.emergency .img-block .car-holder .car-image .line {
    transform-origin: center right;
    stroke-dasharray: 22;
    animation: line 0.8s ease-in-out infinite;
    animation-fill-mode: both
}

.emergency .img-block .car-holder .car-image .line.top {
    animation-delay: 0s
}

.emergency .img-block .car-holder .car-image .line.middle {
    animation-delay: 0.2s
}

.emergency .img-block .car-holder .car-image .line.bottom {
    animation-delay: 0.4s
}

@keyframes shake {
    0% {
        transform: translateY(-1%)
    }

    100% {
        transform: translateY(2%)
    }
}

@keyframes line {
    0% {
        stroke-dashoffset: 22
    }

    22% {
        stroke-dashoffset: 22
    }

    50% {
        stroke-dashoffset: 0
    }

    51% {
        stroke-dashoffset: 0
    }

    80% {
        stroke-dashoffset: -22
    }

    100% {
        stroke-dashoffset: -22
    }
}

.emergency .img-block .car-holder .truck {
    width: 320px;
    animation: shake 0.2s ease-in-out infinite alternate;
    position: absolute;
    right: 25px
}

.emergency .items {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    background: rgba(27, 27, 27, 0.9);
    border: 2px solid var(--2, #EF4136);
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 14px;
    border-right: 0
}

@media (max-width:1024px) {
    .emergency .items {
        flex-wrap: wrap;
        justify-content: center;
        border-right: 2px solid var(--2, #EF4136);
        border-radius: 0
    }
}

.emergency .items .item h3 {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 140%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font)
}

@media (max-width:1024px) {
    .emergency .items .item h3 {
        font-size: 15px
    }
}

.emergency .items .call-btn-inner {
    background: #BF1E2D
}

.financing {
    padding-bottom: 0
}

.financing .theme-heading h2 {
    color: #FFF;
    font-size: 57px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-transform: uppercase
}

@media (max-width:1024px) {
    .financing .theme-heading h2 {
        font-size: 35px
    }
}

.financing .content {
    margin-top: 20px
}

.financing .content p {
    color: #F0F0F0;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%
}

@media (max-width:1024px) {
    .financing img.main-image {
        width: 100%
    }
}

section.reviews {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(181deg, rgba(239, 65, 54, 0.05) 7.34%, rgba(255, 153, 66, 0.05) 28.23%, rgba(241, 90, 41, 0.05) 44.62%, rgba(239, 65, 54, 0.05) 73.67%, rgba(191, 30, 45, 0.05) 98.47%), #FFF
}

section.reviews .container {
    padding: 25px;
    border-radius: 38px;
    border: 5px solid var(--2, #EF4136);
    background: linear-gradient(182deg, rgba(239, 65, 54, 0.05) 17.02%, rgba(255, 153, 66, 0.05) 45.2%, rgba(255, 196, 12, 0.05) 84.91%)
}

section.reviews .theme-heading h2 {
    color: #3A3A3A;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
}

@media (max-width:1024px) {
    section.reviews .theme-heading h2 {
        font-size: 38px
    }
}

section.reviews .items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    margin-top: 30px
}

@media (max-width:1024px) {
    section.reviews .items {
        grid-template-columns: 1fr;
        margin-top: 130px
    }
}

section.reviews .items .item img {
    width: 400px !important
}

@media (max-width:1024px) {
    section.reviews .items .item img {
        width: 300px !important
    }
}

section.reviews .stack {
    position: relative
}

@media (max-width:1024px) {
    section.reviews .stack {
        grid-area: stacked;
        margin-top: 100px
    }
}

section.reviews .card {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 80%;
    border-radius: 2rem;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25), 0 15px 20px 0 rgba(0, 0, 0, 0.125);
    transition: transform 0.6s;
    user-select: none
}

@media (max-width:1024px) {
    section.reviews .card {
        position: absolute;
        left: 45%
    }
}

section.reviews .card img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover
}

section.reviews .card:nth-last-child(n+5) {
    --x: calc(-50% + 90px);
    transform: translate(var(--x), -50%) scale(0.85);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.01)
}

section.reviews .card:nth-last-child(4) {
    --x: calc(-50% + 60px);
    transform: translate(var(--x), -50%) scale(0.9)
}

section.reviews .card:nth-last-child(3) {
    --x: calc(-50% + 30px);
    transform: translate(var(--x), -50%) scale(0.95)
}

section.reviews .card:nth-last-child(2) {
    --x: calc(-50%);
    transform: translate(var(--x), -50%) scale(1)
}

section.reviews .card:nth-last-child(1) {
    --x: calc(-50% - 30px);
    transform: translate(var(--x), -50%) scale(1.05)
}

section.reviews .card:nth-last-child(1) img {
    box-shadow: 0 1px 5px 5px rgba(255, 193, 111, 0.5)
}

section.reviews .swap {
    animation: swap 1.3s ease-out forwards
}

@keyframes swap {
    30% {
        transform: translate(calc(var(--x) - 250px), -50%) scale(0.85) rotate(-5deg) rotateY(65deg)
    }

    100% {
        transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
        z-index: -1
    }
}

@media (max-width:1200px) {
    @keyframes swap {
        30% {
            transform: translate(calc(var(--x) - 200px), -50%) scale(0.85) rotate(-5deg) rotateY(65deg)
        }

        100% {
            transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
            z-index: -1
        }
    }
}

@media (max-width:1050px) {
    @keyframes swap {
        30% {
            transform: translate(calc(var(--x) - 150px), -50%) scale(0.85) rotate(-5deg) rotateY(65deg)
        }

        100% {
            transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
            z-index: -1
        }
    }
}

section.contact {
    padding-bottom: 100px
}

section.contact .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center
}

@media (max-width:1024px) {
    section.contact .inner {
        grid-template-columns: 1fr
    }
}

@media (max-width:1024px) {
    section.contact .inner {
        gap: 20px
    }
}

section.contact .left {
    position: relative
}

section.contact .left .img-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    position: relative
}

section.contact .left .img-block h2 {
    font-weight: 500;
    line-height: 140%
}

section.contact .left .img-block:before {
    content: "";
    background: linear-gradient(182deg, #EF4136 17.02%, #FF9942 45.2%, #FFC40C 84.91%);
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0
}

section.contact .left p.heading {
    color: #FFF;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    text-transform: uppercase;
    font-size: 24px
}

section.contact .left h3 {
    font-style: normal;
    font-weight: 500;
    font-size: 23px;
    margin: 0px;
    border-top: 2px solid var(--primary);
    padding-top: 5px
}

section.contact .left .items {
    margin-top: 30px
}

section.contact .left .items .item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 30px
}

section.contact .left .items .item span.number {
    flex-shrink: 0;
    border: 2px solid #EF4136;
    border-radius: 500px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 500;
    font-size: 20px
}

section.contact .left .items .item h4 {
    font-style: normal;
    font-size: 20px
}

section.contact .right .contact-form {
    z-index: 4;
    border: 2px solid var(--2, #EF4136);
    background: #EF4136;
    position: relative;
    width: 100%;
    padding: 20px
}

section.contact .right .contact-form .top {
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 25px
}

@media (max-width:1024px) {
    section.contact .right .contact-form .top {
        flex-wrap: wrap
    }
}

section.contact .right .contact-form .top h2 {
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
    text-align: left
}

@media (max-width:1024px) {
    section.contact .right .contact-form .top h2 {
        text-align: center
    }
}

section.contact .right .contact-form input,
section.contact .right .contact-form textarea,
section.contact .right .contact-form select {
    background: #fff;
    border: 0;
    border-radius: 5px;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    font-size: 16px;
    margin-left: auto;
    font-weight: 500;
    color: #7E7E7E;
    position: relative
}

section.contact .right .contact-form input::placeholder,
section.contact .right .contact-form textarea::placeholder,
section.contact .right .contact-form select::placeholder {
    text-transform: capitalize;
    color: #7E7E7E
}

section.contact .right .contact-form textarea {
    padding: 15px;
    width: 100%;
    position: relative
}

section.contact .right .contact-form .gform_button.button {
    background: var(--primary) !important;
    border-radius: 5px !important;
    width: 100% !important;
    padding: 15px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 0 !important
}

section.contact .right .contact-form img {
    margin-top: 30px;
    width: 100%
}

@media (max-width:1024px) {
    section.contact .right .contact-form img {
        width: 100%
    }
}

.gform-theme--api,
.gform-theme--foundation {
    --gf-form-gap-x: 12px !important;
    --gf-form-gap-y: 12px !important
}

.gform_title {
    display: none
}

.gform_wrapper.gravity-theme .gform_validation_errors {
    display: none
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: left;
    margin: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 5px !important
}

.gfield_description.instruction.validation_message {
    display: none
}

.gfield_required.gfield_required_text {
    display: none !important
}

#gform_confirmation_message_1 {
    color: #fff;
    text-align: center
}

.blog-content .content p {
    padding-bottom: 16px
}

/* contact css start */
    .contact-one .icons {
        flex-wrap: wrap !important;
        gap: 15px;
    }
	.contact-one .social-part {
		display: flex;
		gap: 15px;
		margin-top: 10px;
        justify-content:center;
		align-items: center;
        margin-top:20px;
        flex-wrap: wrap !important;
	}
	.contact-one .social-part p {
        text-transform: uppercase;
        
    }
	.contact-one .social-part a {
        text-decoration: none;
		color: inherit;
        width: 32px;
        height: 32px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 !important
	}
	.contact-one .social-part img {
		width: 22px;
        height: 22px;
        object-fit: contain;
	}
/* contact css end */