@media(max-width:1550px) {
     main .banner .banner-button {
         bottom: 50px;
     }
 }

 @media(max-width:1215px) {
     main .services .main-service-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 20px;
         /* width: 100%; */
         /* border: 5px solid red; */
         width: 100%;
         position: relative;
     }

     main .services .image-serv {
         width: 100%;
         aspect-ratio: 796 / 700;
         display: flex;
         justify-content: center;
         align-items: center;
         /* Center image vertically */
         /* overflow: hidden; Avoid overflow issues */
     }

     .services .main-service-section .image-serv img {
         width: 100%;
         /* max-height: 100%; */
         object-fit: contain;
         display: block;
     }

     main .services .text-serv {
         /* border: 5px solid green; */
         width: 100%;
         display: flex;
         justify-content: center;
         flex-direction: column;
         position: relative;
     }

 }

 @media(max-width: 1175px) {
     main .why-us .main-why-us {

         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
         width: 100%;
     }

     main .why-us .why-us-text {
         width: 100%;
     }

     main .why-us .why-us-image {
         /* border: 5px solid rgb(21, 0, 255); */
         padding: 20px 30px;
         display: flex;
         justify-content: center;
         width: 100%;
         height: 450px;
     }

 }

 @media(max-width:1100px) {
     main .banner .banner-button a {
         font-size: 15px;
     }
 }

 @media(max-width:1000px) {
     main .why-us .why-us-image {
         width: 100%;
         /* border: 2px solid red; */
         height: 400px;
     }
 }



 @media(max-width:875px) {
     nav .nav-links {
         gap: 10px;
     }
 }

 @media(max-width:800px) {
     main .banner .banner-button {
         bottom: 30px;
     }

     main .banner .banner-button a {
         font-size: 12px;
     }
 }

 @media (max-width: 768px) {
     .nav-links {
         display: none !important;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: var(--secondary-color);
         flex-direction: column;
         gap: 1rem;
         padding: 1rem 2rem;
     }

     .nav-links.show {
         display: flex !important;
     }

     .menu-toggle:hover {
         color: var(--main-color);
     }

     .dropdown {
         position: static;
     }

     .services:hover .dropdown {
         display: none;
     }

     .services.open .dropdown {
         display: flex;
         flex-direction: column;
     }

     .menu-toggle {
         display: block;
     }
 }

 @media(max-width:700px) {
     nav .logo a img {
         border-radius: 50%;
         height: 70px;
     }

     main .services h1,
     main .circle-slider h1,
     main .category h1,
     .testimonials h1,
     .why-us h1 {
         font-size: 25px;
     }
 }

 @media(max-width:600px) {
     main .why-us .why-us-image {
         width: 100%;
         /* border: 2px solid red; */
         height: 300px;
     }

     main .why-us .why-us-text p {
         /* border: 3px solid red; */
         font-size: 16px;
         padding: 0;
     }

 }

 @media(max-width:550px) {
     main .banner .banner-button {
         bottom: 18px;
     }

     main .banner .banner-button a {
         font-size: 11;
         color: var(--secondary-color);
         background-color: rgba(0, 0, 0, 0.633);
         /* border: 1px solid transparent; */
         padding: 5px 20px;
         border-radius: 6px;

     }
 }

 @media(max-width:500px) {

     main .services h1,
     main .circle-slider h1,
     main .category h1,
     .testimonials h1 {
         font-size: 22px;
     }

     main .services .text-serv .first-box,
     main .services .text-serv .second-box {
         padding: 20px 10px;
     }

     main .services .text-serv .first-box h2 {
         font-size: 20px;
         color: var(--secondary-color);
     }

     main .services .text-serv .second-box .serv-head {
         gap: 20px;
     }


     main .services .text-serv .second-box h3 {
         font-size: 16px;
         color: var(--secondary-color);
     }

     main .services .text-serv .first-box p,
     main .services .text-serv .second-box p {
         font-size: 14px;
     }

     main .testimonials .testimonial-slider .owl-testimonial .owl-prev {
         left: 10px;

     }

     main .testimonials .testimonial-slider .owl-testimonial .owl-next {
         right: 10px;
     }


     main .why-us,
     main .testimonials {
         padding: 20px 10px;
     }

     main .why-us .why-us-image {
         height: 250px;
     }
 }

 @media(max-width:400px) {
     main .banner .banner-button {
         bottom: 15px;
     }

     main .banner .banner-button a {
         font-size: 10px;
         color: var(--secondary-color);
         padding: 5px 10px;
         border-radius: 6px;
     }

     main .services .text-serv .first-box h2 {
         font-size: 17px;
         color: var(--secondary-color);
     }

     main .services .text-serv .second-box h3 {
         font-size: 14px;
         color: var(--secondary-color);
     }

     main .services .text-serv .second-box .serv-head {
         gap: 10px;
     }

     main .services .text-serv .first-box p,
     main .services .text-serv .second-box p {
         font-size: 12px;
     }

     main .why-us .why-us-image {
         width: 100%;
         height: 200px;
     }
 }