.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
} 

body {
    font-family: "Roboto", sans-serif;
    color: rgb(86, 88, 94);
}
.navbar {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: url('../images/slider.avif') no-repeat center center/cover;
    min-height: 98vh; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
   
}
.hero-text {
    max-width: 500px;
}
.hero-image {
    max-width: 600px;
    border-radius: 15px;
}
.slider_heading{font-weight: bold;}
.testimonial {
    background-color: #f9f6ec;
    padding: 15px;
    border-radius: 10px;
    margin-top: -50px;
}
.cmn_div{  padding: 5%;}
#service{background-color: #F2F1E6;}
.services_title{text-align: center;   }
.cmn_img{ border-radius: 15px;}
.cmn_heading{color:#000000 !important;}
.cmn_btn{    padding: 2%;
    width: 28%;
    border-radius: 50px;
    border: 2px solid #000000;}
.btn_slider{
    padding: 1%;
    width: 12%;
    border-radius: 50px;
    background-color:#31A050;
    color: #ffffff;
    
}

    .review-section {
        text-align: center;
        padding: 60px 20px;
    }
    .review-box {
        background-color: #f7f5eb; /* Matching background color */
        padding: 80px;
        border-radius: 8px;
    }
    .review-box img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .stars {
        color: black;
        font-size: 23px;
    }
    .customer-name {
        font-weight: bold;
    }
    .customer-location {
        color: #6c757d;
        font-size: 14px;
    }
p{    font-size: 18px !important;}
.ms-2{padding-left: 2%;}
footer{background-color: #1B1F1C; padding: 5% 5% 0% 5%;color:#ffffff !important;}
.footer_text{margin-top: 8%; font-size: 15px;}


.footer a {
    color: white;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.footer .form-control {
    background-color: white;
    border-radius: 8px;
}
.footer .btn-green {
    background-color: #31A050;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    border: none;
}
.footer .btn-green:hover {
    background-color:#31A050;
}
.a_r_reserved{margin-top: 8%;}
nav{padding:2% !important;}
.slider_text{font-size: 75px !important; margin-top: 10% !important;}

.navbar-nav .nav-link {
    font-size: 18px; 
    margin: 0 10px;
    position: relative;
    padding-bottom: 5px; /* Adjust spacing */
}

.navbar-nav .nav-link {
    position: relative;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: black;
    transition: width 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.active .nav-link::after {
    width: 100%;
}
#cmnt_section{
    padding: 5%;
    background-color: #31A050 !important;
    text-align: center;
}
.pic{color: #ffffff !important;
font-size: 22px !important;}
.cmnt_user_img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
#repair_services{    margin-top: 8%;
    background-color: #F2F1E6;
    padding-bottom: 10%;}
.img_text_repair{position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: #ffffff;
    text-align: center;
    width: 88%;
    padding: 5%;}

    .custom-container {
        max-width:1100px;
        margin: auto;
    }
    .form-section {
        background-color: #f5f4eb;
        padding: 20px;
        border-radius: 10px;
    }
    .btn-submit {
        background-color: #31A050;
        color: white;
        border-radius: 20px;
        padding: 10px 20px;
    }
    #mobile_secction{
        margin-top: 10%;
    }
    #get_in_touch_section{
        margin-top: 5%;
    }
    .txt_cnct{padding: 3% !important;}
    .img_text_welcome{
        position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: #f5f4eb;
    text-align: center;
    width: 88%;
    padding: 5%;
    }
    .lead{font-weight: 400 !important;}