@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
body {
    margin: 0;
    font-family: 'Jost', sans-serif;
    overflow-x:hidden;
}

body{
    overflow-x: hidden;
}
.p_mar{
    margin-top:-20px;
    margin-bottom:-10px;
}
.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6, p, a, li{
    font-family:jost;
}
h1, h2{
    text-shadow:5px 5px 5px rgba(0,0,0,0.2);
}
h3{
    color:brown;
}
p{
    font-size:18px;
    line-height:1.4;
    font-weight:400;
    padding:20px 0px;
}
img{
    border-radius:15px;
    box-shadow:0px 0px 30px -12px rgba(0,0,0,0.4);
}
/* General Header Styles */
/* General Header Styles */
header {
    background-color: #000;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;   
    top: 0;             
    z-index: 9999;      
    width: 100%;        
    font-family: jost;
}
/* Logo and Navigation Container */
.container_logo {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically align items */
    width: 90%;
    max-width: 1200px;
    margin: auto;
    height: 60px; /* Increase height to allow vertical centering */
}
#estimateForm{
    max-width:100%;
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0px 0px 30px -12px rgba(0,0,0, 0.3);
}
#estimateForm button{
    color:#fff;
    width:100%;
    background:brown;
    padding:7px 20px;
    border-radius:50px;
    box-shadow:0px 0px 30px -12px rgba(0,0,0, 0.3);
    transition:0.3s;
}
#estimateForm button:hover{
    color:#fff;
    background:black;
}
#estimateForm input, #estimateForm select, #estimateForm textarea{
    width:100%;
    padding:3px;
    border-radius:5px;
    margin:5px;
    border:1px solid #c1c1c1;
    resize:none;
}
/* Logo */
.logo img {
    max-height: 50px; /* Adjust the logo size */
}

/* Desktop Navigation */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 40px;
    align-items: center; /* Ensure links align in the center */
}

/* Desktop Navigation Links */
nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s;
    vertical-align: middle;
}

/* Hover Effect for Links */
nav a:hover {
    color: gold; /* Matches your theme with gold color on hover */
}

/* Call to Action Button */
.cta .btn, #gettouch {
    background-color: brown;
    color: white;
    padding: 5px 20px;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s;
    z-index:2;
    border: 2px solid #fff;
    position:relative;
}
.cta .special-btn{
    background-color: brown;
    color: white;
    padding: 5px 20px;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s;
    margin-right: 80px;
}
.cta .special-btn:hover{
    background-color: #fff;
    border: 2px solid brown;
    color: brown;
    box-shadow:0px 0px 20px -10px rgba(0,0,0,0.5) inset;
}
/* Hover Effect for CTA Button */
.cta .btn:hover, #gettouch:hover {
    background-color: transparent;
    border: 2px solid brown;
    color: brown;
}

/* Mobile Menu Icon */
.mobile-menu-icon {
    display: none; /* Initially hidden for desktop */
    font-size: 30px;
    cursor: pointer;
    color: #fff;
}

/* Mobile Menu */
.mobile-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 10px 0;
    background-color: #000; /* Match the header background */
}
.mobile-menu li {
    margin-bottom: 10px;
}

/* Mobile Navigation Links */
.mobile-menu li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    display: block; /* To make clickable in full width */
    transition: background-color 0.3s;
}

/* Mobile Navigation Hover Effect */
.mobile-menu li a:hover {
    background-color: gold;
    color: #000;
    border-radius: 10px;
}
.blog-table{
    border:1px solid black;
    box-shadow:0px 0px 30px -12px rgba(0,0,0,0.5);
}
.blog-table td{
    border:1px solid brown;
}
.blog-table th{
    border:1px solid #fff;
}
.blog-table thead{
    background:brown;
    color:#fff;
}
.blog-table tr:nth-child(even){
    background:antiquewhite;
}
/* Mobile Styles */
@media screen and (max-width: 768px) {
    .mobile-nav{
    display: block !important;
}
    .container_logo {
        flex-direction: row;
        justify-content: space-between;
    }

    /* Hide desktop navigation on mobile */
    nav ul {
        display: none;
    }

    /* Show mobile menu icon on mobile */
    .mobile-menu-icon {
        display: block; /* Show the mobile menu icon */
    }

    /* When the mobile menu is toggled */
    .mobile-menu.open {
        display: flex;
    }

    /* Hide CTA button on mobile */
    .cta {
        display: none;
    }
}
.mobile-nav{
    display: none;
}
.banner_main{
    margin-top:-50px;
    background:url('../img/photo_2021-11-30_09-01-00.webp') !important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.banner_main_ridgefield{
    margin-top:-50px;
    background:url('/../christmas-light-installation-washington/img/ridgefield christmas.jfif')!important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main_ridgefield h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.banner_main_vancouver{
    margin-top:-50px;
    background:url('/../christmas-light-installation-washington/img/christmas-tree-house.avif')!important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main_vancouver h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.banner_main_portland{
    margin-top:-50px;
    background:url('/../christmas-light-installation-washington/img/house-with-blue-house-with-christmas-light.avif')!important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main_portland h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.banner_main_west{
    margin-top:-50px;
    background:url('/../christmas-light-installation-washington/img/photo_2021-12-10_11-04-15.webp')!important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main_west h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.banner_main_lake{
    margin-top:-50px;
    background:url('/../christmas-light-installation-washington/img/photo_2021-11-30_09-01-43.webp')!important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main_lake h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.banner_main_inman{
    margin-top:-50px;
    background:url('/../christmas-light-installation-washington/img/photo_2021-12-10_11-04-15.webp')!important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main_inman h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.banner_main_spartanburg{
    margin-top:-50px;
    background:url('/../christmas-light-installation-washington/img/spartanburg.webp')!important;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:95vh;
    vertical-align:middle;
    overflow:hidden;
}
.banner_main_spartanburg h1{
    color:#fff;
    text-align:center;
    padding-top:18%;
    font-size:60px;
    position: relative; 
    z-index: 2; font-family:jost;
}
.total_overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: rgba(0, 0, 0, 0.5); */
    z-index: 1;
    height:100vh;
    overflow:hidden;
}
.section1, .why-choose-us, .location_serve, .total_service, .footer{
    padding:50px 0px 0px 0px;
}
.why-choose-us h2{
    padding:0px 0px 60px 0px;
}
.sec1_para{
    padding:0px 0px 0px 40px;
}
.icon-box{
    border-radius:15px;
    box-shadow:0px 0px 30px -12px rgba(0,0,0,0.2);
}
.icon-box h4{
    color:brown;
}
.icon-box img{
    border-radius:15px;
    box-shadow:none;
    width:60px;
    padding-bottom:15px;
}
.scrolling-column {
    height: 65vh;
    overflow-y: scroll;
    overflow-x:hidden;
    background-color: #a1a1; 
    width:80vw;
    box-shadow:0px 0px 30px -12px rgba(0,0,0,0.2);
    border:1px solid brown;
    border-radius:8px;
}
.scrolling-column::-webkit-scrollbar-track {
    background: #a1a1;
}
.scrolling-column::-webkit-scrollbar-thumb {
    background-color: brown;
    border-radius:15px;
}
.scrolling-column::-webkit-scrollbar {
    width: 8px; 
}
.flow_border{
    border:1px solid #ccc;
    padding:20px 120px !important;
}
.flow_border h6{
    color:brown;
    font-size:22px;
}
.structure-heading{
    padding-bottom:20px;
}
.total_service{
    padding-bottom:100px;
}
.total_service h2{
    padding-bottom:60px;
}

        .total_service .nav-tabs {
            display: flex;
            flex-direction: column;
            border-right: none;
            margin-right: 0;
        }

       .total_service .nav-tabs .nav-link {
            border-radius: 0;
            padding: 30px 20px;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            background-color: #fff;
            text-align: left;
            color: #333;
            font-size:24px;
        }

       .total_service .nav-tabs .nav-link.active {
            background-color: brown;
            color: white;
        }

      .total_service  .tab-content {
            padding-left: 30px;
            background-color: #fff;
            padding: 0px;

        }
.tab_style{
    border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
        /* For box shadow */
      .total_service  .nav-link {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        
#personal-info {
    background:url('../img/photo_2021-12-10_11-04-15.webp')!important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 80px 10px;
    border-radius: 10px;
    z-index: 2;
    position: relative;
}

#personal-info h3, #personal-info p, #confirm-booking h3, #confirm-booking p, #reviews h3, #reviews p, #bookings h3, #bookings p {
    position: relative;
    z-index: 999 !important; /* Use proper z-index */
}

.total_overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 1; /* This should stay below the text */
    height: 100%;
    overflow: hidden;
}
#confirm-booking {
    background:url('../img/photo_2021-12-10_11-04-15.webp')!important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 80px 10px;
    border-radius: 10px;
    z-index: 2;
    position: relative;
}
#reviews {
    background:url('../img/photo_2021-12-10_11-04-15.webp')!important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 65px 10px;
    border-radius: 10px;
    z-index: 2;
    position: relative;
    margin:10px;
}
#bookings {
    background:url('../img/photo_2021-12-10_11-04-15.webp')!important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 80px 10px;
    border-radius: 10px;
    z-index: 2;
    position: relative;
}

.footer {
            background-color: black;
            color: white;
            padding: 30px 0;
            position: relative;
            line-height:2.5;
        }

        .footer p, .footer a {
            color: white;
            margin: 0;
            text-align: left;
        }

        .footer a:hover {
            color: #ccc;
        }

        .footer .quick-links, .footer .address {
            margin-bottom: 15px;
        }

        .social-icons a {
            color: white;
            font-size: 24px;
            margin-right: 10px;
        }

        .social-icons a:hover {
            color: #ccc;
        }
        .footer p{
            line-height:2.5;
        }
        .social-icon{
            margin:0px 10px 0px 0px;
        }
        
        
        
        
        
        
        
        /*varsha*/
        .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #000; /* Adjust as needed */
    color: #fff;
}

.logo h1 {
    margin: 0;
    font-size: 24px;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 70px;
    margin: 0;
    padding: 0;
    
}

.main-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.quote-button .btn {
    background-color: #b33030; /* Button background color */
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
}

.mobile-menu-icon {
    display: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .main-nav ul {
        display: none; /* Hide menu on mobile */
        flex-direction: column;
        width: 100%;
        background-color: #000;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 10px 0;
    }

    .main-nav ul.show {
        display: flex;
    }

    .mobile-menu-icon {
        display: block;
    }

    .quote-button {
        display: none; /* Hide quote button on mobile */
    }

    .site-header {
        
       align-items: end;
    }
}


/*for header*/

@media (min-width: 320px) and (max-width: 575px) { 
            .cta .special-btn{
                display: none;
            }
    
    .banner_main h1, .banner_main_ridgefield h1, .banner_main_vancouver h1, .banner_main_portland h1,  .banner_main_spartanburg h1, .banner_main_inman h1, .banner_main_lake h1, .banner_main_west h1{
        font-size:38px !important;
    }
    .banner_main , .banner_main_vancouver, .banner_main_portland, .banner_main_ridgefield, .banner_main_spartanburg, .banner_main_inman, .banner_main_lake, .banner_main_west{
        height: auto;   
    }
    .total_overlay{
        height: 55vh;
    }
    .section1, .why-choose-us, .location_serve, .total_service, .footer{
    padding:10px 13px 10px 13px;
}
.why-choose-us h2{
    padding:0px 0px 30px 0px;
}
.mob_img {
    margin:20px 0px;
}
.why-choose-us .serv_mar{
    margin-top:20px;
}
    
    
    
    

         }
        @media (min-width: 576px) and (max-width: 2560px) { 
       .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        margin-left: 170px;
        column-gap: 50px;
        font-size: 16px;
        font-weight: 600;                                   
    }                

         }

.btn_style:hover{
            background-color: white;
            color: black;   
        }

        .nav-item{
            font-family: 'Jost', sans-serif;
        }
        
.line-height-li li{
    line-height:2;
}
.summer-christmas{
    padding:80px 0px 0px 0px;
}
.sticky-lg-top{
    top:100px !important;
}
.container-fluid.section1 {
    margin-top: -40px;
}