/* Section3 */
   .section3 {
       display: block;
   }

   .Box3 {
       position: relative;
       width: 100%;
       z-index: 2;
       display: flex;
       grid-gap: 28px;
   }

   .item3 {
       width: 100%;
       border-radius: 4px;
       border: 1px solid rgba(31, 41, 55, 0.10);
       background: #FFF;
       overflow: hidden;
   }

   .item3:hover {
       border: 1px solid var(--color);
   }

   .title3 {
       display: flex;
       align-items: center;
       grid-gap: 15px;
       padding-right: 75px;
       position: relative;
   }

   .title3 .icon3 {
       width: 70px;
       height: 60px;
       position: relative;
       z-index: 2;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .title3 .icon3::after {
       content: "";
       position: absolute;
       z-index: -1;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--color);
       opacity: 0.4;
       filter: blur(8px);
   }

   .title3 .icon3 img {
       position: relative;
       z-index: 1;
   }

   .title3 h1 {
       color: #1F2937;
       font-size: 20px;
       font-weight: 600;
   }

   .title3 .More3 {
       position: absolute;
       right: 15px;
       width: 48px;
       height: 38px;
       border-radius: 4px;
       background: var(--color);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .text3 {
       color: rgba(31, 41, 55, 0.60);
       font-size: 18px;
       font-weight: 600;
       line-height: 1.5;
       padding: 20px 30px;
   }

   .text3 b {
       color: #1F2937;
   }

   .img3 {
       position: relative;
       width: 100%;
   }

   .img3 img {
       width: 100%;
       position: relative;
       z-index: 1;
   }

   .img3::after {
       content: "";
       position: absolute;
       z-index: 2;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(180deg, #FFF 0%, #fff0 35%);
   }

   @media (max-width: 1600px) {
       .title3 h1 {
           font-size: 20px;
       }

       .text3 {
           font-size: 16px;
       }
   }

   @media (max-width: 1440px) {
       .text3 {
           padding: 20px 20px;
       }
   }

   @media (max-width: 1200px) {
       .Box3 {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           grid-gap: 30px;
       }
   }


   @media (max-width: 600px) {
       .Box3 {
           grid-gap: 10px;
       }

       .title3 {
           position: relative;
       }

       .title3 .icon3 {
           width: 50px;
           height: 50px;
       }

       .title3 .icon3 img {
           width: 30px;
       }

       .title3 .More3 {
           width: 30px;
           height: 26px;
       }

       .title3 h1 {
           font-size: 18px;
       }

       .text3 {
           font-size: 14px;
       }
   }

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