.service_role_sec .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
 }

 .service_role_sec .card {
   background-color: var(--white);
   border: 1px solid var(--border);
   padding: 30px;
   box-shadow: 20px 20px 70px 0px #00000033;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   transition: all 0.3s ease-in-out;
   position: relative;
 }

 .service_role_sec .card .small_text {
   font-size: 54px;
   font-weight: 700;
   color: var(--darkChoco);
   position: absolute;
   right: 24px;
   top: 17px;
   opacity: 0.2;
 }

 .service_role_sec .card h3 {
   max-width: 80%;
 }

 .service_role_sec .card .desc {
   /* font-size: 18px; */
   /* line-height: 1.5; */
 }

 .service_role_sec .card:hover {
   border-color: var(--orange);
   box-shadow: 0px 0px 23.17px 3.31px #ff600026;
 }

 .service_role_sec .card .h4 {
   line-height: 1.4;
 }

 /* Media Query */
 @media (max-width: 1920px) {
   .service_role_sec .card .small_text {
     top: 20px;
   }
 }

 @media (max-width: 1560px) {
   .service_role_sec .grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 1279px) {
   .service_role_sec .grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
   }
 }

 @media (max-width: 991px) {
   .service_role_sec .grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
   }
 }

 @media (max-width: 767px) {
   .service_role_sec .grid {
     grid-template-columns: repeat(1, 1fr);
     gap: 20px;
   }

   .service_role_sec .card {
     padding: 20px;
   }
 }