*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: Nunito, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    /* line-height: 1.5;
    color: #1e2022;
    text-align: left;
    background-color: #fff; */
}


.mainsec{
    background: linear-gradient(135deg, #a4e07cb2, #76ad37);
    /* height: 700px; */

}
  .myscroll{
    overflow-x: hidden;
  }
.middle-sec{
    position: relative;
    display: flex;
    justify-content: center;
    bottom: 60px;
}
.middle-container{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: #fff;
    position: absolute;
    border-top-left-radius: 65px ;
    border-bottom-right-radius: 65px;
    border-top-right-radius: 8px;
    border-right: 10px solid #8bc34a;
    border-left: 10px solid #8bc34a;
    border-bottom-left-radius: 8px;
   
}
.vakeel>div>img{
    height: 40px;
    width: 40px;
}
.vakeel>div>p{
margin: 0px;
}
.swiper-slide{
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.left-bannimg{
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
            border-radius: 10px;
}
         /* Optional custom styling for cards */
         .main-carr{
            background-color: #e9f5e9;
         }
         .service-card {
            border-radius: 10px;
            overflow: hidden; /* Prevent image from overflowing */
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            position: relative; /* Ensure proper layering */
        }
        
        .service-card img {
            width: 100%; /* Ensure the image takes full width of the card */
            height: 214px !important; /* Maintain consistent height */
            object-fit: cover; /* Crop the image to fit */
            transition: transform 0.3s ease; /* Smooth zoom effect */
        }
        
        .service-card:hover img {
            transform: scale(1.1); /* Zoom the image on hover */
            cursor: pointer;
        }
        
 
        .service-title {
            font-size: 1rem;
            font-weight: bold;
        }
        .service-subtitle {
            color: gray;
        }
        .mobile-image{
            width: 50%;
        }
        .mob-main-img{
            display: flex;
            justify-content: center;
        }

        /* Utility classes */
        p{
            color: #77838f;
            line-height: 1.7;
            margin-top: 0;
            margin-bottom: 1rem;
        }
        h3{
            font-weight: 500;
            font-size: 1.5rem;
        }



.my-shad{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 10px;
    margin: 9px 0px;
}
        .gradient-half-primary-v1{
            background-image: linear-gradient(60deg, #CDDC39 0, #206d66 100%);
            background-repeat: repeat-x;
            
        }
        .btn-apple{
                background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDUgMzA1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDUgMzA1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnIGlkPSJYTUxJRF8yMjhfIj4KCTxwYXRoIGlkPSJYTUxJRF8yMjlfIiBkPSJNNDAuNzM4LDExMi4xMTljLTI1Ljc4NSw0NC43NDUtOS4zOTMsMTEyLjY0OCwxOS4xMjEsMTUzLjgyQzc0LjA5MiwyODYuNTIzLDg4LjUwMiwzMDUsMTA4LjIzOSwzMDUgICBjMC4zNzIsMCwwLjc0NS0wLjAwNywxLjEyNy0wLjAyMmM5LjI3My0wLjM3LDE1Ljk3NC0zLjIyNSwyMi40NTMtNS45ODRjNy4yNzQtMy4xLDE0Ljc5Ny02LjMwNSwyNi41OTctNi4zMDUgICBjMTEuMjI2LDAsMTguMzksMy4xMDEsMjUuMzE4LDYuMDk5YzYuODI4LDIuOTU0LDEzLjg2MSw2LjAxLDI0LjI1Myw1LjgxNWMyMi4yMzItMC40MTQsMzUuODgyLTIwLjM1Miw0Ny45MjUtMzcuOTQxICAgYzEyLjU2Ny0xOC4zNjUsMTguODcxLTM2LjE5NiwyMC45OTgtNDMuMDFsMC4wODYtMC4yNzFjMC40MDUtMS4yMTEtMC4xNjctMi41MzMtMS4zMjgtMy4wNjZjLTAuMDMyLTAuMDE1LTAuMTUtMC4wNjQtMC4xODMtMC4wNzggICBjLTMuOTE1LTEuNjAxLTM4LjI1Ny0xNi44MzYtMzguNjE4LTU4LjM2Yy0wLjMzNS0zMy43MzYsMjUuNzYzLTUxLjYwMSwzMC45OTctNTQuODM5bDAuMjQ0LTAuMTUyICAgYzAuNTY3LTAuMzY1LDAuOTYyLTAuOTQ0LDEuMDk2LTEuNjA2YzAuMTM0LTAuNjYxLTAuMDA2LTEuMzQ5LTAuMzg2LTEuOTA1Yy0xOC4wMTQtMjYuMzYyLTQ1LjYyNC0zMC4zMzUtNTYuNzQtMzAuODEzICAgYy0xLjYxMy0wLjE2MS0zLjI3OC0wLjI0Mi00Ljk1LTAuMjQyYy0xMy4wNTYsMC0yNS41NjMsNC45MzEtMzUuNjExLDguODkzYy02LjkzNiwyLjczNS0xMi45MjcsNS4wOTctMTcuMDU5LDUuMDk3ICAgYy00LjY0MywwLTEwLjY2OC0yLjM5MS0xNy42NDUtNS4xNTljLTkuMzMtMy43MDMtMTkuOTA1LTcuODk5LTMxLjEtNy44OTljLTAuMjY3LDAtMC41MywwLjAwMy0wLjc4OSwwLjAwOCAgIEM3OC44OTQsNzMuNjQzLDU0LjI5OCw4OC41MzUsNDAuNzM4LDExMi4xMTl6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBpZD0iWE1MSURfMjMwXyIgZD0iTTIxMi4xMDEsMC4wMDJjLTE1Ljc2MywwLjY0Mi0zNC42NzIsMTAuMzQ1LTQ1Ljk3NCwyMy41ODNjLTkuNjA1LDExLjEyNy0xOC45ODgsMjkuNjc5LTE2LjUxNiw0OC4zNzkgICBjMC4xNTUsMS4xNywxLjEwNywyLjA3MywyLjI4NCwyLjE2NGMxLjA2NCwwLjA4MywyLjE1LDAuMTI1LDMuMjMyLDAuMTI2YzE1LjQxMywwLDMyLjA0LTguNTI3LDQzLjM5NS0yMi4yNTcgICBjMTEuOTUxLTE0LjQ5OCwxNy45OTQtMzMuMTA0LDE2LjE2Ni00OS43N0MyMTQuNTQ0LDAuOTIxLDIxMy4zOTUtMC4wNDksMjEyLjEwMSwwLjAwMnoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
        }
        .jj{
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            padding: 12px;
            height: 130px;
            border-radius: 4px;
        }
        .btn-market{
            display: inline-block;
            padding: 1rem;
            padding-left: 3rem;
            border-radius: 1rem;
            background-position: center left .75rem;
            background-color: #37384e;
            background-size: 1.5rem 1.5rem;
            background-repeat: no-repeat;
            text-decoration: none;
            white-space: nowrap;
        }


        /* Footer */
        
ul{
    list-style: none;
  }
  .footer{
    background-color: #24262b;
  }
  .footer-col{
     width: 30%;
     padding: 0 15px;
  }
  .footer-col h4{
    font-size: 15px;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: 500;
    margin-left: 30px;
    position: relative;
  }
  .footer-col ul li:not(:last-child){
    margin-bottom: 10px;
  }
  .footer-col ul li a{
    font-size: 16px;
    text-transform: capitalize;
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    color: #bbbbbb;
    display: block;
    transition: all 0.3s ease;
  }
  .footer-col ul li a:hover{
    color: #ffffff;
    padding-left: 8px;
  }
  .social-img{
      max-width: 500px;
  }
  .social-img .img{
      width: 100%;
      margin: 10px 0 10px;
  }
  .social-links{
  margin-top: 10px;
  }
  .footer-col .social-links a{
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: rgba(255,255,255,0.2);
    margin:0 4px 4px 0;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.5s ease;
  
  }
  .footer-col .social-links a:hover{
    color: #24262b;
    background-color: #ffffff;
  }
  .footer-hr{
        width: 50%;
        margin: 0 auto;
        border: 0;
        border-top: 2px solid #fff;
  }
  .copyright{
      color:#bbbbbb;
      text-align: center;
  }
  
  /*responsive*/
  @media(max-width: 767px){
    .footer-col{
      width: 50%;
      margin-bottom: 30px;
  }
  }
  @media(max-width: 574px){
    .footer-col{
      width: 100%;
  }
  }
  
  
  

      /* Make the slider responsive */
.swiper-container {
    width: 100%;
    max-width: 600px; /* Adjust as per your design */
    height: auto;
    overflow: hidden;
    margin: auto;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}


/* Login popup */
.login-intro{
    background-color: rgb(1, 100, 1);
    color: #fff;
}
.intro-box{
    border: 1px solid #fff;
    padding: 12px 15px;
    margin: 15px 0;
    font-size: 18px;
}
.modal-dialog {
    max-width: 55%; /* Set to 80% of the viewport width */
  }