/* ==============================================
         css for the service section
============================================== */
.main-about img {
   width: 95%;
}

.specilaisation img {
   width: 95%;
}

/* ==============================================
         css for the service section
============================================== */
.service-card {
   border: 1px solid var(--primary-color);
   padding: 20px;
   border-radius: 40px;
   height: 100%;
   box-shadow: 0px 0px 4px rgba(216, 100, 131, 0.3);
}

.service-card .image-wrapper {
   height: 170px;
   border-radius: 30px;
   overflow: hidden;
}

.service-card button {
   display: block;
   margin: auto;
}

.model-casting .middle-image-col .image-wrapper {
   height: 100%;
   overflow: hidden;
   border-radius: 45%;
}

.left-col .image-wrapper,
.right-col .image-wrapper {
   width: 80%;
   height: 150px;
   overflow: hidden;
   border-radius: 30px;
   z-index: 88;
}

.left-col .image-wrapper {
   margin-top: 40px;
   margin-left: 45%;
}


.right-col .image-wrapper {
   margin-bottom: 40px;
   margin-left: -30%;
}

.model-casting .middle-image-col {
   padding: 0px 35px;
}

.model-casting .left-col {
   align-self: flex-start;
}

.model-casting .right-col {
   align-self: flex-end;
}

.middle-image-col {
   position: relative;
}

.middle-image-col .float-image {
   position: absolute;
   width: 50%;
   height: 150px;
   background: green;
}

.middle-image-col .float-left {
   left: 0px;
   bottom: 0px;
}


/* =========================================
css for the extra specification section 
========================================= */
.extra-spec .image-wrapper {
   width: 90%;
   height: 300px;
   background: blue;
   overflow: hidden;
}

.extra-spec .image-wrapper.right {
   border-radius: 80px;
}

.extra-spec .image-wrapper.left {
   border-radius: 80px;
   float: right;
}

@media screen and (max-width:768px) {
   .extra-spec {
      padding: 90px 0px;
   }

   .extra-spec .image-wrapper {
      width: 100%;
      height: 250px;
   }
}




@media screen and (max-width:1200px) {
   .model-casting .middle-image-col {
      padding: 0px;
   }
}

@media screen and (max-width:992px) {
   .model-casting .middle-image-col .image-wrapper {
      height: 400px;
      border-radius: 40px;
   }

   .model-casting .middle-image-col .image-wrapper img {
      object-position: top center;
   }

}


/* ==============================================
      why-us section 
============================================== */

.why-us .image-wrapper {
   height: 450px;
}

.why-us .content {
   background: white;
   border-radius: 40px;
   padding: 30px;
   margin-right: -15%;
   position: relative;
   z-index: 10;
}

@media only screen and (max-width:992px) {
   .why-us {
      margin-top: -40px;
   }

   .why-us .content {
      margin-right: 0px;
      margin-bottom: -35px;
   }

   .why-us>div>.row {
      justify-content: center !important;
   }
}