body{
    background: var(--white)!important;
}
a{
    color: var(--orange);
}
.container{
    max-width: 1240px!important;
    margin: 0 auto;
    padding: 0;
}
.hero-banner .container{
    max-width: 1140px!important;
}
.orange{
    color: var(--orange);
}
.bg-dark{
    background-color: var(--dark);
}
.bg-dark-gradient{
    background: linear-gradient(to bottom, transparent 0px, var(--dark) 30px);
}
.text-underlined{
    text-decoration: underline;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: var(--header-blue);
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
}

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

.menu-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: white;
    text-decoration: none;
}

.hamburger {
    width: 41px;
    height: 42px;
}

.hamburger svg {
    width: 100%;
    height: 100%;
}

.menu-text {
    font-size: 24px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 40px;
}

.call-center-info {
    text-align: right;
    border-right: 1px solid white;
    max-width: 330px;
    padding-right: 20px;
}

.call-center-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 7px;
    line-height: 140%;
}

.call-center-address {
    font-size: 20px;
    line-height: 140%;
}

.call-now-btn {
    background-color: #FF6600;
    color: white;
    border: none;
    height: 40px;
    padding: 0px 16px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.call-now-btn:hover {
    background-color: #E55A00;
}
.header-call-now-text{
    font-size:24px;
    color:white;
    margin-bottom: 8px;
}
.header-call-now{
    display: flex;
    flex-direction: column;
}

.phone-icon {
    font-size: 16px;
}

/* Hide mobile menu by default */
.header-right .menu-section {
    display: none;
}

.hero-banner{
    background-image: linear-gradient(to left, transparent 0%, transparent 0%, var(--dark) 100%), url('/img/scene00081_batcheditor_fotor.webp');
    background-size: cover;
    background-position: center;
    height: 420px;
}
.banner-info{
    width: 100%;
    max-width: 450px;
    padding-top: 50px;
}
.banner-slogan{
    font-size: 48px;
    font-weight: bold;
    color: white;
}
.banner-slogan-secondary{
    color: white;
    font-size: 20px;
    margin-top: 20px;
    line-height: 85%;
    display: block;
}
.banner-info .banner-slogan-secondary{
    font-size: 30px;
}

.services-carousel{
    margin-top: 10px;
}

.branch-selector{
    margin-top: 0px;
    background: #fff;
    height: 155px;
    padding: 20px 32px;
    gap: 20px;
    border-radius: 15px;
}
.branch-selector-title{
    width: 45%;
    float:left
}
.selector-branch-name{
    font-size: 32px;
    color: var(--dark);
    font-weight: bold;
    display: block;
    margin-top: 5px;
}
.selector-branch-text{
    font-size: 16px;
    color: var(--silver);
    display: block;
    margin-top: 10px;
}
.branch-selector-btn {
    background-color: #FF6600;
    display: flex;
    color: white;
    border: none;
    height: 115px;
    padding: 0;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    width: 50%;
    float: right;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.left-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 16px;
    border-right: 2px solid rgba(255, 255, 255, 0.3);
}

.phone-number {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 4px;
}

.phone-number svg {
    width: 25px;
    height: 25px;
}

.call-center-text {
    font-size: 20px;
    font-weight: bold;
    opacity: 0.9;
}

.right-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 16px;
    text-align: center;
}

.response-time {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 4px;
}

.response-text {
    font-size: 18px;
    font-weight: bold;
    opacity: 0.9;
}

.home-service-silver-text{
    font-size:40px;
}


.star-icon {
    color: #fbbc04;
}
.google-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285f4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334a853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23fbbc05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23ea4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}
.arrow-left {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 10px solid #5f6368;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.arrow-right {
    width: 0;
    height: 0;
    border-left: 10px solid #5f6368;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.carousel-track {
    transition: transform 0.3s ease;
}

#media{
    background: var(--silver);
}
.tab-faq svg{
    width: 30px;
    height: 30px;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* mobile menu */
#mobile-menu {
    z-index: 99999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh - 42px);
    transform: translateY(calc(100% - 96px)); /* 96px is the height of the header */
    transition: transform .5s ease;
}

#mobile-menu.active {
    transform: translateY(30px);
    /*overflow-y: auto;*/
}
#mobile-menu.active .upimg{
    /* rotate the image */
    transform: rotate(180deg);
}
.mobile-menu-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu-phone {
    width: calc(100vw);
    padding: 15px;
    color: white;
    display: flex;
    align-items: center;
    background: var(--orange);
    border-top-left-radius: 8px;
}

.mobile-menu-toggle {
    display: flex;
    align-items: center;
    background: #C84100;
    width: 80px;
    height: 96px;
    border-top-right-radius: 8px;
    border-left: 1px solid white;
}

.mobile-menu-toggle a {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 60px;*/
    height: 100%;
}
#mobile-menu.active .mobile-menu-toggle a{
    rotate: 180deg;
}
.mobile-menu-content{
    background: var(--white);
    height: 500px
}

.bg-blue-light{
    background: var(--blue)!important;
}
.bg-blue-light a {
    color: white;
}

.bg-blue-light img {
    /* If you want to make the SVG images white as well */
    filter: brightness(0) invert(1);
}
/* mobile-carousel */

.mobile-menu-service-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
}

/*.mobile-menu-service-container {*/
/*    display: flex;*/
/*    overflow-x: auto;*/
/*    scroll-snap-type: x mandatory;*/
/*    scroll-behavior: smooth;*/
/*    -webkit-overflow-scrolling: touch;*/
/*    scrollbar-width: none;*/
/*    -ms-overflow-style: none;*/
/*}*/

/*.mobile-menu-service-container::-webkit-scrollbar {*/
/*    display: none;*/
/*}*/

.mobile-menu-item {
    flex: 0 0 48%;
    scroll-snap-align: start;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--white);
    margin-right: 10px;
}

.mobile-menu-item img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;  /* Prevents image from shrinking */
}

.mobile-menu-item a {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    flex-grow: 1;  /* Allows text to take remaining space */
    text-align: left;
}

.mobile-menu-service-dots {
    display: flex;
    justify-content: center;
    gap: 13px;
    margin-top: 15px;
}

.mobile-menu-service-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    padding: 0;
    border: none;
}

.mobile-menu-service-dot.active {
    background-color: #ff6633;
}
#mobile-menu{
    display:none
}
.features-section-two {
    position: relative;
    background-color: rgb(248, 245, 241);
    padding: 40px 0px 20px;
}
.icon-dots {
    width: 730px;
    height: 565px;
    background-image: url(/img/icon-dots.png);
}
.features-section-two .icon-dots {
    position: absolute;
    top: 0px;
    left: 0px;
}
.services-section{
    position: relative;
}

/* Menu */
#main-menu {
    background: var(--blue);
    position: fixed;
    z-index: 999999;
    width: 930px;
    height: 100vh;
    top: 0;
    padding: 30px;
    left: -2000px;
    transition: left 0.5s;
    max-width: 100vw;
}
#main-menu.active{
    left: 0;
    animation: slideFromRight 0.5s forwards;
}
@keyframes slideFromRight {
    0% {
        left: -100vw;
    }
    100% {
        left: 0;
    }
}
.main-menu-icon img{
    max-width: 30px
}
.main-menu-icon img {
    filter: brightness(0) invert(1);
}

#carousel-container img,  .service-home-svg {
    filter: invert(44%) sepia(93%) saturate(3279%) hue-rotate(360deg) brightness(108%) contrast(107%);
    max-height: 50px;
}
.bg-scene-behind{
    background-image: url('/img/scene_behind.webp');
}

.content h1{
    font-size: 26px;
    font-weight: bold;
    color: var(--dark);
    margin: 20px 0;
    line-height: 120%;
}
.content h2{
    font-size: 21px;
    font-weight: bold;
    color: var(--dark);
    line-height: 120%;
    margin: 20px 0;
}
.content h3{
    font-size: 18px;
    font-weight: bold;
    color: var(--dark);
    line-height: 120%;
    margin: 20px 0;
}
.content p{
    font-size: 16px;
    color: var(--silver);
    margin-bottom: 20px;
    line-height: 140%;
}
.content p:nth-child(odd) {
    background-color: white;
    padding: 15px 20px;
}

.content a{
    font-size: 16px;
    color: var(--orange);
    text-decoration: none;
}
.content a:hover{
    text-decoration: underline;
}
.content ul{
    list-style: square;
    padding-left: 20px;
}
.content ol{
    list-style: decimal;
    padding-left: 20px;
}
.content ul li, .content ol li{
    font-size: 16px;
    color: var(--silver);
    margin-bottom: 20px;
    line-height: 140%;
}

/* Mobile and Tablet Layout */
@media (max-width: 768px) {
    #main-menu{
        padding: 0
    }
    .mobile-services-list{
        display:none
    }
    .features-section-two .icon-dots {
        display: none!important;
    }
    #mobile-menu{
        display: block;
    }
    /* Hide desktop elements */
    .call-center-info {
        display: none;
    }
    .header-call-now{
        display: none;
    }
    .call-now-btn {
        display: none;
    }

    /* Hide desktop menu */
    .header-left .menu-section {
        display: none;
    }

    /* Show mobile menu */
    .header-right .menu-section {
        display: flex;
    }
    .header-right{
        padding-right: 0
    }
    .container{
        padding: 15px;
    }
    .hero-banner{
        height: 480px;
    }
    .service-carousel-holder{
        display:none;
    }
    .banner-slogan{
        font-size: 24px;
        margin-top: 10px;
    }
    .banner-slogan-secondary, .banner-info .banner-slogan-secondary{
        font-size: 20px;
        margin-top: 7px;
    }
    .branch-selector{
        margin: 25px 0;
        height: auto;
        padding: 20px 20px;
    }
    .branch-selector-title {
        width: 100%;
        float: none;
    }
    .selector-branch-name{
        font-size:20px
    }
    .selector-branch-text a{
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .ghn{
        font-size: 17px;
        margin-top: 1px;
        display: inline;
        font-weight: normal;
    }
    .ghn:nth-child(1){
        float: left;
        margin-left: 3px;
    }
    .ghn:nth-child(2){
        float:right;
        margin-right: 3px;
    }
    .ghn svg{
        height: 24px;
        margin: 0
    }
    .branch-selector-btn{
        width: auto;
        float: none;
        height: 65px;
        margin-top: 20px;
        padding: 10px;
    }
    .right-section{
        display: none;
    }
    .home-service-silver-text{
        display: none;
    }
    .nptb-logo{
        display: none;
    }
}