.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: #8A0E30 !important;
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: #fff !important;
}



.card {
  position: relative;
}
.max-w-5xl{
    max-width: 80rem !important;
    margin-top: 1.5% !important;
}
.card::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transition: 0.6s;
  z-index: 0;
  background-color: #009DDE;
}
.card:hover {
  box-shadow: 0.063rem 0.063rem 1.25rem 0.375rem rgba(0, 0, 0, 0.53);
}
.card:nth-child(1)::before {
  bottom: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
}
.card:nth-child(2)::before {
  bottom: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
}
.card:nth-child(3)::before {
  top: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
}
.card:nth-child(4)::before {
  top: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
}
.card p {
  transition: 0.8s;
}

.card:hover::before {
  clip-path: circle(110vw at 100% 100%);
}

.card:hover p {
  color: #fff;
}

@media screen and (min-width: 62.5rem) {
  .circle {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}

.card:nth-child(1) .circle {
  background: url("../images/services1.jpg") no-repeat 260% 20%/ 80%;
  bottom: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
}

.card:nth-child(2) .circle {
    background:url("../images/services2.jpeg") no-repeat -44% 99% / 80%;
    bottom: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
}

.card:nth-child(3) .circle {
  background: url(../images/services3.jpeg) no-repeat 326% 162% / 92%;
 top: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
}

.card:nth-child(4) .circle {
  background: url(../images/service4.jpeg) no-repeat -125% 30% / 92%;
  top: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
}


.card2:nth-child(1) .circle {
    background: url(../images/services5.jpeg) no-repeat -46% 15% / 134%;
  bottom: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
}

.card2:nth-child(2) .circle {
    background: url("../images/services6.jpg") no-repeat -175% 1027% / 80%;
    bottom: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
}

.card2:nth-child(3) .circle {
  background: url("../images/services8.jpg") no-repeat 183% -435% / 92%;
 top: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
}

.card2:nth-child(4) .circle {
  background: url("https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat -43% -126%/90%;
  top: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
}





.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: #8A0E30 !important;
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: #fff !important;
}



.card2 {
  position: relative;
}
.max-w-5xl{
    max-width: 80rem !important;
    margin-top: 1.5% !important;
}
.card2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transition: 0.6s;
  z-index: 0;
  background-color: #009DDE;
}
.card2:hover {
  box-shadow: 0.063rem 0.063rem 1.25rem 0.375rem rgba(0, 0, 0, 0.53);
}
.card2:nth-child(1)::before {
  bottom: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
}
.card2:nth-child(2)::before {
  bottom: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
}
.card2:nth-child(3)::before {
  top: 0;
  right: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
}
.card2:nth-child(4)::before {
  top: 0;
  left: 0;
  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
}
.card2 p {
  transition: 0.8s;
}

.card2:hover::before {
  clip-path: circle(110vw at 100% 100%);
}

.card2:hover p {
  color: #fff;
}

@media screen and (min-width: 62.5rem) {
  .circle {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}


@media screen and (max-width:768px) {
.card:nth-child(1) .circle {
    background: url(../images/services1.jpg) no-repeat 50% 50% / cover;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 0;
    /* z-index: 999999999999999999; */
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
}
.card:nth-child(2) .circle{
	background: url(../images/services2.jpeg) no-repeat -44% 99% / 100%;
	position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 0;
}
.card:nth-child(3) .circle {
           background: url(../images/services3.jpeg) no-repeat 100% -20% / 92%;
	position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.card:nth-child(4) .circle {
    background:url(../images/service4.jpeg) no-repeat -140% -30% / 92%;
		position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.card2:nth-child(1) .circle {
	    background: url(../images/services5.jpeg) no-repeat 369% 100% / 90%;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 0;
}
.card2:nth-child(2) .circle{
	    background: url(../images/services6.jpg) no-repeat -142% 139% / 80%;
	position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 0;
}
.card2:nth-child(3) .circle {
	    background: url(../images/services8.jpg) no-repeat 142% -32% / 92%;
	position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.card2:nth-child(4) .circle {
	background: url(https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat 32% -10% / 100%;
		position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
}
@media screen and (max-width:480px) {
	
	.card:hover::before {
    clip-path: circle(110vw at 100% 100%) !important;
	}
	
		.card2:hover::before {
    clip-path: circle(110vw at 100% 100%) !important;
	}
		
		
		.card:nth-child(1) .circle {
        background: url(../images/services1.jpg) no-repeat 230% 50% / 80%;
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
	}
	
	.card:nth-child(1)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}


	
	.card:nth-child(2)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}
		
	.card:nth-child(3)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}
		
	.card:nth-child(4)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}
		
	.card2:nth-child(1)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}		
	.card2:nth-child(2)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}		
	.card2:nth-child(3)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}		
	.card2:nth-child(4)::before {
    bottom: 0;
    right: 0;
    clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);}
	

.card:nth-child(2) .circle {
        background: url(../images/services2.jpeg) no-repeat 300% 112% / 80%;
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }
	
    .card:nth-child(3) .circle {
        background: url(../images/services3.jpeg)300% 112% / 80%;
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
	}
	    .card:nth-child(4) .circle {
        background: url(../images/service4.jpeg) 295% 2175% / 80%;
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }
	.card2:nth-child(1) .circle {
        background: url(../images/services5.jpeg) no-repeat 157% 155% / 70%;
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        bottom: 0;
	}
	.card2:nth-child(2) .circle {
        background: url(../images/services6.jpg) no-repeat 155% 175% / 65%;
		   clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        position: absolute;
	}
	    .card2:nth-child(4) .circle {
			   clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        background: url(https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
		no-repeat 180% 130% / 60%;
		}
		.card2:nth-child(3) .circle {
			   clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
			       background:   url(../images/services8.jpg) no-repeat 100% 140% / 65%;
		}
		    .flip-box {
        background-color: transparent;
        width: 100%;
        height: 370px;
        margin: 1% 0;
    }


}


@media screen and (max-width:460px) {
    .card:nth-child(2) .circle {
        background: url(../images/services2.jpeg) no-repeat 145% 110% / 80%;
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        bottom: 0;
    }
	   .card:nth-child(3) .circle {
        background: url(../images/services3.jpeg) no-repeat 100% 132% / 100%;
    }
        .card2:nth-child(2) .circle {
        background: url(../images/services6.jpg) no-repeat 200% 170% / 75%;
    }
			  .card2:nth-child(4) .circle {
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        background: url(https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat 224% 135% / 70%;
    }
	.card:nth-child(4) .circle {
        background: url(../images/service4.jpeg) 320% -5% / 60%;
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }
	}
	
	
@media screen and (max-width:380px) {
	.card2:nth-child(4) .circle {
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        background: url(https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat 224% 120% / 70%;
    }
	
	.card:nth-child(1) .circle {
        background: url(../images/services1.jpg) no-repeat 235% -5% / 80%;
	}
	.card:nth-child(2) .circle {
        background: url(../images/services2.jpeg) no-repeat 135% 100% / 80%;
	}
	.card:nth-child(4) .circle {
        background: url(../images/service4.jpeg) 320% 20% / 60%;
	}
	    .card2:nth-child(1) .circle {
        background: url(../images/services5.jpeg) no-repeat 157% 110% / 70%;
        position: absolute;
        display: block;
        width: 100%;
		}
		.card2:nth-child(2) .circle {
        background: url(../images/services6.jpg) no-repeat 200% 135% / 75%;
    }
	.card2:nth-child(3) .circle {
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        background: url(../images/services8.jpg) no-repeat 100% 110% / 65%;
    }

}


@media screen and (max-width:340px) {
	    .card:nth-child(1) .circle {
        background: url(../images/services1.jpg) no-repeat 235% 883% / 80%;
    }
	    .card:nth-child(2) .circle {
        background: url(../images/services2.jpeg) no-repeat 135% 100% / 85%;
    }
	.card:nth-child(4) .circle {
        background: url(../images/service4.jpeg) 305% 0% / 60%;
    }
	.card2:nth-child(2) .circle {
        background: url(../images/services6.jpg) no-repeat 200% 115% / 75%;
    }
	    .card2:nth-child(3) .circle {
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        background: url(../images/services8.jpg) no-repeat 100% 105% / 65%;
    }
	.card2:nth-child(4) .circle {
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
        background: url(https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat 315% 115% / 80%;
    }
}