.logo {
  width: 25px;

}
.hero-section {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 10px;
}
.trapezoid {
        position: relative;
        border-bottom: 45vw solid #128d4f;
        border-left: 0 solid transparent;
        border-right: 46vw solid transparent;
        height: 0;
        width: 100%;
        transform: rotateX(180deg);
    }
    .trapezoid::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 92vw;
        height: 45vw;
        background: #128d4f;
        border-top-right-radius: 15px;
        z-index: -1;
    }
    .show-image {
        width: 80%;
    }
    @media (max-width: 600px) {
        .trapezoid {
            border-bottom: 210vw solid #128d4f;
            border-right: 60vw solid transparent;
            width: 100vw;
        }
        .trapezoid::before {
            top: 0;
            right: 0;
            width: 120vw;
            height: 210vw;
        }
        .show-image {
            width: 100%;
        }
    }

    .secound-bg {
        position: absolute;
        top: 100px;
        width: 98%;
    }
    .service-icon {
        margin-right: 10px;
        margin: 20px 10px;
        color: #28a745;
        font-size: 3em;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    .container {
        border-radius: 15px;
        padding: 20px;
    }
    .parallelogram {
        position: absolute;
        width: 250px;
        height: 200px;
        transform: skew(160deg);
        background: linear-gradient(180deg, rgba(12, 119, 96, 0.2) 0%, rgba(255, 255, 255, 0.2) 90%);
        border-radius: 25px;
        z-index: -1;
    }
    .parallelogram2 {
        position: absolute;
        width: 250px;
        height: 200px;
        transform: skew(160deg);
        background: linear-gradient(0deg, rgba(12, 119, 96, 0.2) 0%, rgba(255, 255, 255, 0.2) 90%);
        border-radius: 25px;
        z-index: -1;
    }
    .top-left {
        top: 0%;
        left: 5%;
        transition: all 0.3s ease;
    }
    .top-left2 {
        top: 25%;
        left: -11%;
        transition: all 0.3s ease;
    }
    .bottom-right {
        bottom: -5%;
        right: 3%;
        transition: all 0.3s ease;
    }
    .bottom-right-2 {
        bottom: 25%;
        right: -11%;
        transition: all 0.3s ease;
    }
  
  
    @media (max-width: 600px) {
        .parallelogram{
    position: absolute;
  width: 150px;
  height: 100px;
  transform: skew(160deg);
  background: linear-gradient(180deg, rgba(18, 141, 79, 0.5) 0%, rgba(255, 255, 255,0.2) 90%);
    border-radius: 15px;
    z-index: -1; /* SENDS THE POLYGON TO THE BACK */
    }
    .parallelogram2{
    position: absolute;
  width: 100px;
  height: 50px;
  transform: skew(160deg);
  background: linear-gradient(0deg, rgba(18, 141, 79, 0.5) 0%, rgba(255, 255, 255,0.2) 90%);
    border-radius: 15px;
    z-index: -1; /* SENDS THE POLYGON TO THE BACK */
    }
    .top-left {
     top:-1%;
     left:10%;
     transition: all 0.3s ease; /* ADD TRANSITION FOR SMOOTHER HOVER EFFECT */
    
    }
    .top-left2 {
    display: none;
}
    .bottom-right {
        bottom: -1%;
        right: 7%;
        transition: all 0.3s ease; /* ADD TRANSITION FOR SMOOTHER HOVER EFFECT */
      
    }
    .bottom-right-2 {
        display: none;
    }
    }
    @media (max-width: 900px) {
        .parallelogram{
    position: absolute;
  width: 200px;
  height: 150px;
  transform: skew(160deg);
  background: linear-gradient(180deg, rgba(18, 141, 79, 0.5) 0%, rgba(255, 255, 255,0.2) 90%);
    border-radius: 15px;
    z-index: -1; /* SENDS THE POLYGON TO THE BACK */
    }
    .parallelogram2{
    position: absolute;
  width: 200px;
  height: 150px;
  transform: skew(160deg);
  background: linear-gradient(0deg, rgba(18, 141, 79, 0.5) 0%, rgba(255, 255, 255,0.2) 90%);
    border-radius: 15px;
    z-index: -1; /* SENDS THE POLYGON TO THE BACK */
    }
    .top-left {
     top:-1%;
     left:10%;
     transition: all 0.3s ease; /* ADD TRANSITION FOR SMOOTHER HOVER EFFECT */
    
    }
    .top-left2 {
    display: none;
}
    .bottom-right {
        bottom: -1%;
        right: 7%;
        transition: all 0.3s ease; /* ADD TRANSITION FOR SMOOTHER HOVER EFFECT */
      
    }
    .bottom-right-2 {
        display: none;
    }
    }
    
    .service-icon {
     
     color: green;
 }

 li.service-icon {
     margin-bottom: 20px;
   
 }
 @media (max-width: 600px) {
    .service-icon{
        display: none;
    }
 }
 .car-Service-main{
   position: relative;
   margin-top: 100px;
 }

.car-Service{
padding: 5px;
background: rgba(255, 255, 255, 0.295); 
border-radius: 15px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(10px); 

}
.footer{
margin-top: 100px;
}
/* .fs-6{
text-align: justify;
} */
.icon-wrapper {
display: inline-block;
border-radius: 10px;
padding: 5px;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* HOVER EFFECT FOR ICON WRAPPER */
.icon-wrapper:hover {
background-color: #cccccc; /* DARK BACKGROUND COLOR */
transform: scale(1.1); /* SCALE UP ICON */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* SHADOW EFFECT */
}

/* CSS FOR SOCIAL ICONS */
.social-icon {
display: block;
width: 100%;
height: auto;
transition: opacity 0.3s ease;
}

/* HOVER EFFECT FOR SOCIAL ICONS */
.icon-wrapper:hover .social-icon {
opacity: 0.9; /* SLIGHTLY LESS OPAQUE */
}
.custom-col {
padding: 0; /* EXAMPLE OVERRIDE */
margin: 0;  /* EXAMPLE OVERRIDE */
}

.custom-link {
font-size: inherit;    /* REMOVE FONT-SIZE */
color: inherit;        /* REMOVE COLOR */
text-decoration: none; /* REMOVE TEXT DECORATION */
display: block;        /* MAKE EACH LINK A BLOCK ELEMENT */
/* margin-bottom: 15px;   */
}
@media (max-width: 480px) {
  .sub{
    font-size: 15px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
    .sub{
    font-size: 15px;
  }

}

@media (min-width: 769px) and (max-width: 1024px) {
    .sub{
    font-size: 10px;
  }

}

@media (min-width: 1025px) and (max-width: 1200px) {
    .sub{
    font-size: 15px;
  }

}

@media (min-width: 1201px) {
    .sub{
    font-size: 25px;
  }

}