@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}


/* Font Classes */
.roboto {
    font-family: "Roboto", serif;
}

.roboto_co {
    font-family: "Roboto Condensed", serif;
}

.saira {
    font-family: "Saira Condensed", serif;
}

.poppins {
    font-family: "Poppins", serif;
}

.wraper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

nav,
.sidebar {
    background-color: #F2E4F2;
}


.roboto {
    font-family: "Roboto", serif;
}

.roboto_co {
    font-family: "Roboto Condensed", serif;
}

.pink {
    background-color: #F4EEFF;
}


.saira {
    font-family: "Saira Condensed", serif;
}

.poppins {
    font-family: "Poppins", serif;
}

.heading-2 {
    color: #818181;
}


.btn-trial {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(#f4e4f1, #f4e4f1) padding-box, linear-gradient(90deg, #CB0576 0%, #412972 100%) border-box;
    border-radius: 10px;
    font-size: 22px;
    padding: 7px 35px;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: "Saira Condensed";
    font-weight: 600;
}

.text-gradient {
    background: linear-gradient(90deg, #CB0576 0%, #412972 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: inherit;
    font-family: "Saira Condensed";
    font-weight: 600;
}

.btn-request {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #CB0576 0%, #412972 100%) border-box;
    border-radius: 10px;
    font-size: 22px;
    padding: 7px 35px;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: "Saira Condensed";
    font-weight: 600;
}





.carousel-container {
    width: 100%;
    /* max-width: 900px; */
    margin: auto;
    padding: 100px 0;
}

.swiper {
    width: 100%;
    height: 100%;
}

.custom-swiper {
    width: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    /* width: auto; */
    /* Ensures flexibility */
    /* max-width: 50%; */
}

.carousel-image {
    width: 100%;
    max-width: 500px;
    max-height: 500px;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
    background-image: none !important;
}

.business-owner {
    background: linear-gradient(90deg, #494389 0%, #C30370 50%, #3F2A72 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: "Roboto Condensed", serif !important;
}

.services-bgClr {

    background-color: #F9F9F9;
    box-shadow: 0 2px 12.1px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.4s;
    position: relative;
}

.services-bgClr::after {
    content: '';
    position: absolute;
    left: 2%;
    bottom: 0;
    width: 96%;

    height: 5px;
    /* Adjust border thickness */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: linear-gradient(to right, #CB0576 0%, #412972 100%);
}



.services-bgClr:hover {

    .svgHover {
        fill: #3937DB;
        stroke: white;
        rotate: -45deg;
        transition: all 0.4s;
    }
}

.services-bgClr:hover {
    scale: 1.01;
    cursor: pointer;
    transition: all 0.4s;
}

.services-bgClr:hover {
    transition: all 0.4s;

    h3 {
        font-size: 25px;
        transition: all 2.4s !important;
    }
}

.custom-box-shadow {
    box-shadow: 0 -1px 10px 4px #FFDEFF !important;
}

@media (max-width:575px) {

    .are-here {
        padding-top: 50px;
    }
}

.specific-req {
    box-shadow: 0 2px 12.1px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.4s;
    position: relative;
}


.text-gradient-req {
    background: linear-gradient(90deg, #CB0576 0%, #412972 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: inherit;
    font-family: "Roboto Condensed", serif;
    font-weight: 400;
}

.btn-request {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #CB0576 0%, #412972 100%) border-box;
    border-radius: 10px;
    font-size: 22px;
    padding: 10px 35px;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: "Roboto Condensed", serif;
    font-weight: 400;
}

/* .custom-clip-path {
    clip-path: polygon(0 0, 20% 0, 30% 10%, 70% 10%, 80% 0, 100% 0, 100% 100%, 0 100%);
  } */

@media (min-width:1024px) {
    .service-clip-path {
        clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
    }
}

.wavy-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 80% 100%, 50% calc(100% - 20px), 20% 100%, 0 calc(100% - 30px));
  }

  .ring-gradient-border {
    --tw-ring-color: linear-gradient(to right, #494389, #C30370, #3F2A72); 
  }
  
  .hover\:ring-gradient-border:hover {
    --tw-ring-color: rgb(180 174 253);
  }


@media (max-width:475px) {
  .btn-request {
    padding: 10px 30px !important;
  }
}


.invalid-feedback {
    display: none;
    color: #ef4444; /* Red color for error messages */
}

.border-red-500 {
    border-color: #ef4444; /* Red border for invalid fields */
}

.logoSwiper {
  visibility: hidden;
}

.logoSwiper.swiper-initialized {
  visibility: visible;
}