.links--container {

   width: 100%;
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   grid-template-columns: repeat(3, 1fr);
 }

 .uat-main--link-container {
   width: 100%;
   height: 300px;

   position: relative;
   z-index: 10;

 }

 .uat-main--green {
   width: 100%;
   height: 300px;
   flex-shrink: 0;
   border-radius: 35px;
   border: 10px solid rgba(56, 143, 100, 0.78);
   background: #fff;
 }

 .uat-main--green-gray--bg {
   width: 100%;
   height: 230px;
   background: #E0DADA;
   flex-shrink: 0;
   position: absolute;
   top: 9%;
 }

 .top-layer {
   width: calc(100% - 16px);
   height: 280px;
   display: flex;
   flex-direction: column;

   align-items: center;
   margin-top: -290px;
   flex-shrink: 0;
   border-radius: 23px;
   background: #FFFFFF;
   color: #000;
   position: relative;
   margin-left: 8px;
   margin-right: 8px;
   padding: 2rem 16px;
 }


 .grid-container {
   padding: 0 4rem;
   ;
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 30px;
   margin-top: 4rem;
   background-color: #F8FFFD;

 }

 .grid-item {
   height: 322.954px;
   text-align: center;
   margin-bottom: 3rem;
 }

 .title--text {
   color: #B02328;
   font-family: Inter;
   font-size: 24px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   text-align: center;
   margin-bottom: 16px;
 }

 .sub--text {
   color: rgba(0, 0, 0, 0.83);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   text-align: justify;
 }

 .long--button {
   width: 180px;
   height: 40px;
   color: #FFFFFF;
   transition: all .2s ease-in-out;
   outline: none;
   border: none;
   flex-shrink: 0;
   border-radius: 5px;
   background: rgba(56, 143, 100, 0.98);
   margin-top: 24px;
   display: flex;
  justify-content: center;
  align-items: center;
 }

 .long--button:hover {
   cursor: pointer;
   background: rgba(16, 78, 47, 0.9);
 }

 .shot--button--solid {
   width: 40%;
   height: 40px;
   color: #FFFFFF;
   transition: all .2s ease-in-out;
   outline: none;
   border: none;
   flex-shrink: 0;
   border-radius: 5px;
   background: rgba(56, 143, 100, 0.98);
   display: flex;
  justify-content: center;
  align-items: center;
 }

 .shot--button--outline {
   width: 40%;
   height: 40px;
   color: rgba(56, 143, 100, 0.98);
   transition: all .2s ease-in-out;
   outline: none;
   border: 1px solid rgba(56, 143, 100, 0.98);
   flex-shrink: 0;
   border-radius: 5px;
   background: transparent;
   display: flex;
  justify-content: center;
  align-items: center;
 }

 .shot--button--solid:hover {
   cursor: pointer;
   background: rgba(16, 78, 47, 0.9);
 }

 .shot--button--outline:hover {
   cursor: pointer;
   color: #FFFFFF;
   background: rgba(16, 78, 47, 0.9);
 }

 .bottom-content--div {
   display: flex;
   width: 100%;
   justify-content: space-around;
   margin-top: 24px;
 }

 /*
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .links--container {

    width: 100%;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }

  .uat-main--link-container {
    width: 100%;
    height: 300px;

    position: relative;
    z-index: 10;

  }

  .uat-main--green {
    width: 100%;
    height: 300px;
    flex-shrink: 0;
    border-radius: 35px;
    border: 10px solid rgba(56, 143, 100, 0.78);
    background: #fff;
  }

  .uat-main--green-gray--bg {
    width: 100%;
    height: 240px;
    background: #E0DADA;
    flex-shrink: 0;
    position: absolute;
    top: 12%;
  }

  .top-layer {
    width: calc(100% - 16px);
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -290px;
    flex-shrink: 0;
    border-radius: 23px;
    background: #FFFFFF;
    color: #000;
    position: relative;
    margin-left: 8px;
    margin-right: 8px;
    padding: 2rem 16px;
  }


  .grid-container {
    padding: 0 4rem;
    ;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    margin-top: 4rem;
    background-color: #F8FFFD;

  }

  .grid-item {
    height: 322.954px;
    text-align: center;
    margin-bottom: 3rem;
  }

  .title--text {
    color: #388F64;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin-bottom: 16px;
  }

  .sub--text {
    color: rgba(0, 0, 0, 0.83);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }

  .long--button {
    width: 180px;
    height: 40px;
    color: #FFFFFF;
    transition: all .2s ease-in-out;
    outline: none;
    border: none;
    flex-shrink: 0;
    border-radius: 5px;
    background: rgba(56, 143, 100, 0.98);
    margin-top: 24px;
  }

  .long--button:hover {
    cursor: pointer;
    background: rgba(16, 78, 47, 0.9);
  }

  .shot--button--solid {
    width: 40%;
    height: 40px;
    color: #FFFFFF;
    transition: all .2s ease-in-out;
    outline: none;
    border: none;
    flex-shrink: 0;
    border-radius: 5px;
    background: rgba(56, 143, 100, 0.98);

  }

  .shot--button--outline {
    width: 40%;
    height: 40px;
    color: rgba(56, 143, 100, 0.98);
    transition: all .2s ease-in-out;
    outline: none;
    border: 1px solid rgba(56, 143, 100, 0.98);
    flex-shrink: 0;
    border-radius: 5px;
    background: transparent;

  }

  .shot--button--solid:hover {
    cursor: pointer;
    background: rgba(16, 78, 47, 0.9);
  }

  .shot--button--outline:hover {
    cursor: pointer;
    color: #FFFFFF;
    background: rgba(16, 78, 47, 0.9);
  }

  .bottom-content--div {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 24px;
  }
}



@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .links--container {

    width: 100%;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }

  .uat-main--link-container {
    width: 100%;
    height: 300px;

    position: relative;
    z-index: 10;

  }

  .uat-main--green {
    width: 100%;
    height: 300px;
    flex-shrink: 0;
    border-radius: 35px;
    border: 10px solid rgba(56, 143, 100, 0.78);
    background: #fff;
  }

  .uat-main--green-gray--bg {
    width: 100%;
    height: 240px;
    background: #E0DADA;
    flex-shrink: 0;
    position: absolute;
    top: 12%;
  }

  .top-layer {
    width: calc(100% - 16px);
    height: 280px;
    display: flex;
    flex-direction: column;

    align-items: center;
    margin-top: -290px;
    flex-shrink: 0;
    border-radius: 23px;
    background: #FFFFFF;
    color: #000;
    position: relative;
    margin-left: 8px;
    margin-right: 8px;
    padding: 2rem 16px;
  }


  .grid-container {
    padding: 0 4rem;
    ;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    margin-top: 4rem;
    background-color: #F8FFFD;

  }

  .grid-item {
    height: 322.954px;
    text-align: center;
    margin-bottom: 3rem;
  }

  .title--text {
    color: #388F64;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin-bottom: 16px;
  }

  .sub--text {
    color: rgba(0, 0, 0, 0.83);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }

  .long--button {
    width: 180px;
    height: 40px;
    color: #FFFFFF;
    transition: all .2s ease-in-out;
    outline: none;
    border: none;
    flex-shrink: 0;
    border-radius: 5px;
    background: rgba(56, 143, 100, 0.98);
    margin-top: 24px;
  }

  .long--button:hover {
    cursor: pointer;
    background: rgba(16, 78, 47, 0.9);
  }

  .shot--button--solid {
    width: 40%;
    height: 40px;
    color: #FFFFFF;
    transition: all .2s ease-in-out;
    outline: none;
    border: none;
    flex-shrink: 0;
    border-radius: 5px;
    background: rgba(56, 143, 100, 0.98);

  }

  .shot--button--outline {
    width: 40%;
    height: 40px;
    color: rgba(56, 143, 100, 0.98);
    transition: all .2s ease-in-out;
    outline: none;
    border: 1px solid rgba(56, 143, 100, 0.98);
    flex-shrink: 0;
    border-radius: 5px;
    background: transparent;

  }

  .shot--button--solid:hover {
    cursor: pointer;
    background: rgba(16, 78, 47, 0.9);
  }

  .shot--button--outline:hover {
    cursor: pointer;
    color: #FFFFFF;
    background: rgba(16, 78, 47, 0.9);
  }

  .bottom-content--div {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 24px;
  }
}*/

 @media screen and (min-width: 220px) and (orientation: portrait) {

   .links--container {

     width: 100%;
     display: grid;
     grid-template-rows: repeat(1, 1fr);
     grid-template-columns: repeat(1, 1fr);
   }

   .uat-main--link-container {
     width: 100%;
     height: 350px;
     position: relative;
     z-index: 10;

   }

   .uat-main--green {
     width: 100%;
     height: 350px;
     flex-shrink: 0;
     border-radius: 35px;
     border: 10px solid rgba(56, 143, 100, 0.78);
     background: #fff;
   }

   .uat-main--green-gray--bg {
     width: 100%;
     height: 280px;
     background: #E0DADA;
     flex-shrink: 0;
     position: absolute;
     top: 12%;
   }

   .top-layer {
     width: calc(100% - 16px);
     height: 310px;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: -320px;
     flex-shrink: 0;
     border-radius: 23px;
     background: #FFFFFF;
     color: #000;
     position: relative;
     margin-left: 8px;
     margin-right: 8px;
     padding: 2rem 16px;
   }

   .grid-container {
     padding: 0 2rem;
     ;
     display: grid;
     grid-template-rows: repeat(1, 1fr);
     grid-template-columns: repeat(1, 1fr);
     grid-gap: 30px;
     margin-top: 4rem;
     background-color: #F8FFFD;

   }

   .grid-item {
     text-align: center;
     margin-bottom: 3rem;
   }

 }










 /* //Teessss */

 /* xs */
 @media (min-width: 475px) and (orientation: portrait) {
   .links--container {

     width: 100%;
     display: grid;
     grid-template-rows: repeat(1, 1fr);
     grid-template-columns: repeat(1, 1fr);
   }

   .uat-main--link-container {
     width: 100%;
     height: 350px;
     position: relative;
     z-index: 10;

   }

   .uat-main--green {
     width: 100%;
     height: 350px;
     flex-shrink: 0;
     border-radius: 35px;
     border: 10px solid rgba(56, 143, 100, 0.78);
     background: #fff;
   }

   .uat-main--green-gray--bg {
     width: 100%;
     height: 280px;
     background: #E0DADA;
     flex-shrink: 0;
     position: absolute;
     top: 12%;
   }

   .top-layer {
     width: calc(100% - 16px);
     height: 310px;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: -320px;
     flex-shrink: 0;
     border-radius: 23px;
     background: #FFFFFF;
     color: #000;
     position: relative;
     margin-left: 8px;
     margin-right: 8px;
     padding: 2rem 16px;
   }

   .grid-container {
     padding: 0 4rem;
     ;
     display: grid;
     grid-template-rows: repeat(1, 1fr);
     grid-template-columns: repeat(1, 1fr);
     grid-gap: 30px;
     margin-top: 4rem;
     background-color: #F8FFFD;

   }

   .grid-item {
     text-align: center;
     margin-bottom: 3rem;
   }

 }

 /* sm */
 @media (min-width: 630px) {
   .links--container {

     width: 100%;
     display: grid;
     grid-template-rows: repeat(2, 1fr);
     grid-template-columns: repeat(2, 1fr);
   }

   .uat-main--link-container {
     width: 100%;
     height: 350px;

     position: relative;
     z-index: 10;

   }

   .uat-main--green {
     width: 100%;
     height: 350px;
     flex-shrink: 0;
     border-radius: 35px;
     border: 10px solid rgba(56, 143, 100, 0.78);
     background: #fff;
   }

   .uat-main--green-gray--bg {
     width: 100%;
     height: 290px;
     background: #E0DADA;
     flex-shrink: 0;
     position: absolute;
     top: 9%;
   }

   .top-layer {
     width: calc(100% - 16px);
     height: 330px;
     display: flex;
     flex-direction: column;

     align-items: center;
     margin-top: -340px;
     flex-shrink: 0;
     border-radius: 23px;
     background: #FFFFFF;
     color: #000;
     position: relative;
     margin-left: 8px;
     margin-right: 8px;
     padding: 2rem 16px;
   }


   .grid-container {
     padding: 0 4rem;
     ;
     display: grid;
     grid-template-rows: repeat(2, 1fr);
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 30px;
     margin-top: 4rem;
     background-color: #F8FFFD;

   }

   .grid-item {
     height: 322.954px;
     text-align: center;
     margin-bottom: 3rem;
   }

   .title--text {
    color: #B02328;
     font-family: Inter;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-align: center;
     margin-bottom: 16px;
   }

   .sub--text {
     color: rgba(0, 0, 0, 0.83);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: left;
   }

   .long--button {
     width: 180px;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     margin-top: 24px;
     display: flex;
        justify-content: center;
        align-items: center;
   }

   .long--button:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--solid {
     width: 40%;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--outline {
     width: 40%;
     height: 40px;
     color: rgba(56, 143, 100, 0.98);
     transition: all .2s ease-in-out;
     outline: none;
     border: 1px solid rgba(56, 143, 100, 0.98);
     flex-shrink: 0;
     border-radius: 5px;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--solid:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--outline:hover {
     cursor: pointer;
     color: #FFFFFF;
     background: rgba(16, 78, 47, 0.9);
   }

   .bottom-content--div {
     display: flex;
     width: 100%;
     justify-content: space-around;
     margin-top: 24px;
   }

 }

 /* md */
 @media (min-width: 768px) {

   .links--container {

     width: 100%;
     display: grid;
     grid-template-rows: repeat(2, 1fr);
     grid-template-columns: repeat(2, 1fr);
   }

   .uat-main--link-container {
     width: 100%;
     height: 300px;

     position: relative;
     z-index: 10;

   }

   .uat-main--green {
     width: 100%;
     height: 300px;
     flex-shrink: 0;
     border-radius: 35px;
     border: 10px solid rgba(56, 143, 100, 0.78);
     background: #fff;
   }

   .uat-main--green-gray--bg {
     width: 100%;
     height: 240px;
     background: #E0DADA;
     flex-shrink: 0;
     position: absolute;
     top: 12%;
   }

   .top-layer {
     width: calc(100% - 16px);
     height: 280px;
     display: flex;
     flex-direction: column;

     align-items: center;
     margin-top: -290px;
     flex-shrink: 0;
     border-radius: 23px;
     background: #FFFFFF;
     color: #000;
     position: relative;
     margin-left: 8px;
     margin-right: 8px;
     padding: 2rem 16px;
   }


   .grid-container {
     padding: 0 4rem;
     ;
     display: grid;
     grid-template-rows: repeat(2, 1fr);
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 30px;
     margin-top: 4rem;
     background-color: #F8FFFD;

   }

   .grid-item {
     height: 322.954px;
     text-align: center;
     margin-bottom: 3rem;
   }

   .title--text {
    color: #B02328;
     font-family: Inter;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-align: center;
     margin-bottom: 16px;
   }

   .sub--text {
     color: rgba(0, 0, 0, 0.83);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: justify;
   }

   .long--button {
     width: 180px;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     margin-top: 24px;
     display: flex;
    justify-content: center;
    align-items: center;
   }

   .long--button:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--solid {
     width: 40%;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--outline {
     width: 40%;
     height: 40px;
     color: rgba(56, 143, 100, 0.98);
     transition: all .2s ease-in-out;
     outline: none;
     border: 1px solid rgba(56, 143, 100, 0.98);
     flex-shrink: 0;
     border-radius: 5px;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--solid:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--outline:hover {
     cursor: pointer;
     color: #FFFFFF;
     background: rgba(16, 78, 47, 0.9);
   }

   .bottom-content--div {
     display: flex;
     width: 100%;
     justify-content: space-around;
     margin-top: 24px;
   }
 }

 /* lg */
 @media (min-width: 1280px) {
   .links--container {

     width: 100%;
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
   }

   .uat-main--link-container {
     width: 100%;
     height: 300px;

     position: relative;
     z-index: 10;

   }

   .uat-main--green {
     width: 100%;
     height: 300px;
     flex-shrink: 0;
     border-radius: 35px;
     border: 10px solid rgba(56, 143, 100, 0.78);
     background: #fff;
   }

   .uat-main--green-gray--bg {
     width: 100%;
     height: 230px;
     background: #E0DADA;
     flex-shrink: 0;
     position: absolute;
     top: 12%;
   }

   .top-layer {
     width: calc(100% - 16px);
     height: 280px;
     display: flex;
     flex-direction: column;

     align-items: center;
     margin-top: -290px;
     flex-shrink: 0;
     border-radius: 23px;
     background: #FFFFFF;
     color: #000;
     position: relative;
     margin-left: 8px;
     margin-right: 8px;
     padding: 2rem 16px;
   }


   .grid-container {
     padding: 0 4rem;
     ;
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 30px;
     margin-top: 4rem;
     background-color: #F8FFFD;

   }

   .grid-item {
     height: 322.954px;
     text-align: center;
     margin-bottom: 3rem;
   }

   .title--text {
    color: #B02328;
     font-family: Inter;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-align: center;
     margin-bottom: 16px;
   }

   .sub--text {
     color: rgba(0, 0, 0, 0.83);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: justify;
   }

   .long--button {
     width: 180px;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     margin-top: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .long--button:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--solid {
     width: 40%;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--outline {
     width: 40%;
     height: 40px;
     color: rgba(56, 143, 100, 0.98);
     transition: all .2s ease-in-out;
     outline: none;
     border: 1px solid rgba(56, 143, 100, 0.98);
     flex-shrink: 0;
     border-radius: 5px;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--solid:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--outline:hover {
     cursor: pointer;
     color: #FFFFFF;
     background: rgba(16, 78, 47, 0.9);
   }

   .bottom-content--div {
     display: flex;
     width: 100%;
     justify-content: space-around;
     margin-top: 24px;
   }
 }

 /* xl */
 @media (min-width: 1280px) {

   .links--container {

     width: 100%;
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
   }

   .uat-main--link-container {
     width: 100%;
     height: 300px;

     position: relative;
     z-index: 10;

   }

   .uat-main--green {
     width: 100%;
     height: 300px;
     flex-shrink: 0;
     border-radius: 35px;
     border: 10px solid rgba(56, 143, 100, 0.78);
     background: #fff;
   }

   .uat-main--green-gray--bg {
     width: 100%;
     height: 230px;
     background: #E0DADA;
     flex-shrink: 0;
     position: absolute;
     top: 12%;
   }

   .top-layer {
     width: calc(100% - 16px);
     height: 280px;
     display: flex;
     flex-direction: column;

     align-items: center;
     margin-top: -290px;
     flex-shrink: 0;
     border-radius: 23px;
     background: #FFFFFF;
     color: #000;
     position: relative;
     margin-left: 8px;
     margin-right: 8px;
     padding: 2rem 16px;
   }


   .grid-container {
     padding: 0 4rem;
     ;
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 30px;
     margin-top: 6rem;
     background-color: #F8FFFD;

   }

   .grid-item {
     height: 322.954px;
     text-align: center;
     margin-bottom: 3rem;
   }

   .title--text {
    color: #B02328;
     font-family: Inter;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-align: center;
     margin-bottom: 16px;
   }

   .sub--text {
     color: rgba(0, 0, 0, 0.83);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: justify;
   }

   .long--button {
     width: 180px;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     margin-top: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .long--button:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--solid {
     width: 40%;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--outline {
     width: 40%;
     height: 40px;
     color: rgba(56, 143, 100, 0.98);
     transition: all .2s ease-in-out;
     outline: none;
     border: 1px solid rgba(56, 143, 100, 0.98);
     flex-shrink: 0;
     border-radius: 5px;
     background: transparent;
     display: flex;
        justify-content: center;
        align-items: center;

   }

   .shot--button--solid:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--outline:hover {
     cursor: pointer;
     color: #FFFFFF;
     background: rgba(16, 78, 47, 0.9);
   }

   .bottom-content--div {
     display: flex;
     width: 100%;
     justify-content: space-around;
     margin-top: 24px;
   }
 }

 /* 2xl */
 @media (min-width: 1536px) {
   .links--container {

     width: 100%;
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
   }

   .uat-main--link-container {
     width: 100%;
     height: 300px;

     position: relative;
     z-index: 10;

   }

   .uat-main--green {
     width: 100%;
     height: 300px;
     flex-shrink: 0;
     border-radius: 35px;
     border: 10px solid rgba(56, 143, 100, 0.78);
     background: #fff;
   }

   .uat-main--green-gray--bg {
     width: 100%;
     height: 230px;
     background: #E0DADA;
     flex-shrink: 0;
     position: absolute;
     top: 12%;
   }

   .top-layer {
     width: calc(100% - 16px);
     height: 280px;
     display: flex;
     flex-direction: column;

     align-items: center;
     margin-top: -290px;
     flex-shrink: 0;
     border-radius: 23px;
     background: #FFFFFF;
     color: #000;
     position: relative;
     margin-left: 8px;
     margin-right: 8px;
     padding: 2rem 16px;
   }


   .grid-container {
     padding: 0 8rem;
     ;
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 30px;
     margin-top: 4rem;
     background-color: #F8FFFD;

   }

   .grid-item {
     height: 322.954px;
     text-align: center;
     margin-bottom: 3rem;
   }

   .title--text {
    color: #B02328;
     font-family: Inter;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-align: center;
     margin-bottom: 16px;
   }

   .sub--text {
     color: rgba(0, 0, 0, 0.83);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: justify;
   }

   .long--button {
     width: 180px;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     margin-top: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .long--button:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--solid {
     width: 40%;
     height: 40px;
     color: #FFFFFF;
     transition: all .2s ease-in-out;
     outline: none;
     border: none;
     flex-shrink: 0;
     border-radius: 5px;
     background: rgba(56, 143, 100, 0.98);
     display: flex;
    justify-content: center;
    align-items: center;
   }

   .shot--button--outline {
     width: 40%;
     height: 40px;
     color: rgba(56, 143, 100, 0.98);
     transition: all .2s ease-in-out;
     outline: none;
     border: 1px solid rgba(56, 143, 100, 0.98);
     flex-shrink: 0;
     border-radius: 5px;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .shot--button--solid:hover {
     cursor: pointer;
     background: rgba(16, 78, 47, 0.9);
   }

   .shot--button--outline:hover {
     cursor: pointer;
     color: #FFFFFF;
     background: rgba(16, 78, 47, 0.9);
   }

   .bottom-content--div {
     display: flex;
     width: 100%;
     justify-content: space-around;
     margin-top: 24px;
   }
 }