@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap");
:root {
  --swiper-theme-color: #ff4931;
}


/* Mobile-first styles */

* {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  font-family: "Kanit", sans-serif;
  --swiper-theme-color: rgb(211, 145, 3);
}









       
    .carousel {
      position: relative;
      width: 100%;
        height: 39rem;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay-text {
      /* position: absolute;
      bottom: 10%;
      left: 5%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      font-size: 24px;
      max-width: 70%;
      z-index: 2;
      animation: fadeIn 1.5s ease-in-out; */


top: 2rem;
      width: 100%;
      height: 100%;
        background: linear-gradient(
      to top,
      #1d1d1de5 55%,
      /* Greenish color */ rgba(231, 39, 5, 0) 80%,
      /* Lighter green fading out */ rgba(231, 39, 5, 0) 100%
        /* Shadow effect on the right */
    );

      z-index: 12;
      position: absolute;

      padding-top: 17rem;
      padding-left: 1rem;
    }

.image{
  width: 100%;

}
    
    .overlay-text img{
      width: 20px;
      height: 20px;
    }

    .overlay-text h2{
      color: #fff;
      font-size: 20px;
      width: 90%;
      font-weight: 500;
   
    }

    .overlay-text h4{
color: #ffcb05;
font-weight: 500;
font-size: 15px;
    }


       .overlay-text article{
        color: #ffffffb6;
        font-size: 13px;
        margin-top: 1rem;
      }


      .view_more{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;
            color: #fff;
      }


         .get_started a{
          color: #fff;
          font-size: 13px;
          cursor: pointer;
         }
    .dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.911);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #ffcb05;
      border: solid 2px #1d1c1c9f;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }





    

    .what_we_do{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .what_we_do h2{
        font-weight: 500;
        font-size: 20px;
    }



    .write_a_text_about_it{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 1rem;
        
    }

        .write_a_text_about_it article{
            text-align:start;
            font-size: 13.6px;
            color: #535353;
            width: 100%;
            margin-top: 1rem;
        }



        .Read_more{
            background-color: #ffcb05;
            height: 2.4rem;
            width: 11rem;
            border-radius: 30px;
            font-weight: 400;
            cursor: pointer;
            margin-top: 0.5rem;
            color: #fff;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
        }




        
        
  .Read_more_pop{
         background: #001f3edc;
    width: 100%;
         height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
 
  transform: translate(-50%, -50%);
  opacity: 0;



  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
     padding-top: 7rem;


        display: flex;
  align-items: center;
  justify-content: start;



    
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


.Read_more_pop h2{
color: #0a0a0a;
font-size: 24px;
background-color: #ffcb05;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 30px;
margin-left: 1rem;
position: absolute;
margin-top:-28rem;
}


.read_more_text{
display: flex;
align-items: center;
justify-content: center;
  width: 100%;
  height: 25rem;
  
  margin-top: 1rem;
}




.text_menu{
  background-color: #f0f0f0;
  height: 100%;
  width: 98%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: auto;

 
  padding-left: 0rem;
 
}


.text_major{
  width: 80%;
   margin-top: 4rem;
 
}


.text_menu p{
  font-size: 11px;
 

  

}



/* ===== WebKit (Chrome, Edge, Safari) ===== */
.text_menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.text_menu::-webkit-scrollbar-track {
  background: #ffcb05; /* yellow track */
  border-radius: 4px;
}

.text_menu::-webkit-scrollbar-thumb {
  background: #727272d8; /* yellow thumb */
  border-radius: 4px;
 
  transition: background-color 0.2s ease;
}

.text_menu::-webkit-scrollbar-thumb:hover {
  background: #e6b800; /* darker yellow on hover */
}

/* ===== Firefox ===== */
.text_menu {
  scrollbar-width: thin;                                
  scrollbar-color: #ffcb05 transparent; /* thumb | track */
}

/* ===== Optional: hide scrollbar until hover ===== */
.text_menu.hide-scrollbar {
  /* Firefox */
  scrollbar-width: none;
}

/* WebKit: hide */
.text_menu.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Show on hover (both engines) */
.text_menu.hide-scrollbar:hover {
  scrollbar-width: thin; /* Firefox shows again */
}

.text_menu.hide-scrollbar:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}









           .Why_partner_with_us{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


        .Why_partner_with_us  h2{
        font-weight: 500;
        font-size: 20px;
    }






    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 1rem;
        


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 10rem;
          height: 16rem;
          border-radius: 11px;
          
    }


      .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }






        .post_intent{
        
        position: absolute;
        background-color: transparent;
           width: 10rem;
          height: 16rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }


    

    .trust h3{
        font-size: 15px;
        font-weight: 500;
        width: 99%;
        
    }


    .text_trust{
        width: 100%;
         text-align: start;
    }

    .text_trust article{
        font-size: 13.5px;
            color: #535353;
            margin-top: 0.5rem;
           
                  
    }



    .icons_spare {
        display: flex;
        align-items: center;
        gap: 3rem;
        margin-top: 1rem;
    }


    .icons_spare i{
        font-size: 40px;
     color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
    }
    .icons_spare h4{
font-family: "Rubik Doodle Shadow", system-ui;
font-size: 25px;
color: #ffcb05;
     color: #535353;
    }




    

    .Our_strategic_intent{
        width: 100%;
        height: auto;
    }






    
    .h2_intent{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .h2_intent h2{
        font-weight: 500;
        font-size: 20px;
    }



    .text_strategic{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 1rem;
        
    }

        .text_strategic article{
            text-align:start;
            font-size: 13.6px;
            color: #535353;
            width: 100%;
            margin-top: 1rem;
        }



        .text_strategic article b{
            font-size: 13.6px;
        
        }









     
        .strategic_intent_icons{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;

        }
        

        .icons_stra{
             display: grid;
            place-content: center;
            place-items: center;
            width: 100%;
            margin-top: 1rem;
        }


         .icons_stra i{
            font-size: 60px;
            color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
         }

         .icons_stra h3{
            text-align: center;
            font-weight: 500;
            font-size: 13.7px;
                width: 90%;
         }




  @media (min-width: 375px) {}


  @media (min-width: 390px) {

    
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 11rem;
          height: 16rem;
          border-radius: 11px;
          
    }


      .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }






        .post_intent{
        
        position: absolute;
        background-color: transparent;
          width: 11rem;
          height: 16rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }

  }


  @media (min-width: 412px) {
     .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 12rem;
          height: 16rem;
          border-radius: 11px;
          
    }


      .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }






        .post_intent{
        
        position: absolute;
        background-color: transparent;
           width: 12rem;
          height: 16rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }

  }

  @media (min-width: 414px) {}

  @media (min-width: 428px) {
      .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
         width: 12.6rem;
          height: 15rem;
          border-radius: 11px;
          
    }


      .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }






        .post_intent{
        
        position: absolute;
        background-color: transparent;
           width: 12.6rem;
          height: 15rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }
  }

  @media (min-width: 430px) {}


  @media (min-width: 500px) {
     .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
           width: 14rem;
          height: 16rem;
          border-radius: 11px;
          
    }


      .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }






        .post_intent{
        
        position: absolute;
        background-color: transparent;
           width: 14rem;
          height: 16rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }
  }

  @media (min-width: 540px) {

     .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
             width: 15rem;
          height: 13rem;
          border-radius: 11px;
          
    }


      .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }






        .post_intent{
        
        position: absolute;
        background-color: transparent;
           width: 15rem;
          height: 13rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }
  }


  @media (min-width: 640px) {
    html{
        font-size: 10px;
      }


          .carousel {
      position: relative;
      width: 100%;
        height: 39rem;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay-text {
      /* position: absolute;
      bottom: 10%;
      left: 5%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      font-size: 24px;
      max-width: 70%;
      z-index: 2;
      animation: fadeIn 1.5s ease-in-out; */


top: 2rem;
      width: 100%;
      height: 100%;
        background: linear-gradient(
      to top,
      #1d1d1de5 55%,
      /* Greenish color */ rgba(231, 39, 5, 0) 80%,
      /* Lighter green fading out */ rgba(231, 39, 5, 0) 100%
        /* Shadow effect on the right */
    );

      z-index: 12;
      position: absolute;

      padding-top: 17rem;
      padding-left: 1rem;
    }

.image{
  width: 100%;

}
    
    .overlay-text img{
      width: 20px;
      height: 20px;
    }

    .overlay-text h2{
      color: #fff;
      font-size: 15px;
      width: 60%;
      font-weight: 500;
   
    }

    .overlay-text h4{
color: #ffcb05;
font-weight: 500;
font-size: 10px;
    }


       .overlay-text article{
        color: #ffffffb6;
        font-size: 10px;
        margin-top: 1rem;
      }


      .view_more{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;
            color: #fff;
      }


         .get_started a{
          color: #fff;
          font-size: 10px;
          cursor: pointer;
         }
    .dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.911);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #ffcb05;
      border: solid 2px #1d1c1c9f;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }








    

    .what_we_do{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .what_we_do h2{
        font-weight: 500;
        font-size: 18px;
    }



    .write_a_text_about_it{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 1rem;
        
    }

        .write_a_text_about_it article{
            text-align:start;
            font-size: 11.6px;
            color: #535353;
            width: 100%;
            margin-top: 1rem;
        }



        .Read_more{
            background-color: #ffcb05;
            height: 2.4rem;
            width: 11rem;
            border-radius: 30px;
            font-weight: 400;
            cursor: pointer;
            margin-top: 0.5rem;
            color: #fff;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


      

            .Why_partner_with_us{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


        .Why_partner_with_us  h2{
        font-weight: 500;
        font-size: 20px;
    }






    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 15rem;
          height: 19rem;
          border-radius: 11px;
          
         box-sizing: border-box; /* Ensure padding is included in the box dimensions */
        overflow: hidden; /* This ensures the image stays inside the box */
          
    }



    .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }


      .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }






        .post_intent{
        
        position: absolute;
        background-color: transparent;
          width: 15rem;
          height: 19rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }


    

    .trust h3{
        font-size: 13px;
        font-weight: 500;
        width: 100%;
        
    }


    .text_trust{
        width: 100%;
         text-align: start;
    }

    .text_trust article{
        font-size: 11px;
            color: #535353;
            margin-top: 0.5rem;
           
                  
    }



    .icons_spare {
        display: flex;
        align-items: center;
        gap: 5rem;
      
        position: absolute;
        top: 14rem;

    }


    .icons_spare i{
        font-size: 26px;
     color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
    }
    .icons_spare h4{
font-family: "Rubik Doodle Shadow", system-ui;
font-size: 26px;
color: #ffcb05;
     color: #535353;
    }













    .Our_strategic_intent{
        width: 100%;
        height: auto;
    }






    
    .h2_intent{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .h2_intent h2{
        font-weight: 500;
        font-size: 20px;
    }



    .text_strategic{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 1rem;
        
    }

        .text_strategic article{
            text-align:start;
         font-size: 11.6px;
            color: #535353;
            width: 100%;
            margin-top: 1rem;
        }



        .text_strategic article b{
   font-size: 11.6px;
        
        }




          .strategic_intent_icons{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;

        }
        

        .icons_stra{
             display: grid;
            place-content: center;
            place-items: center;
            width: 100%;
            margin-top: 1rem;
        }


         .icons_stra i{
            font-size: 30px;
            color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
         }

         .icons_stra h3{
            text-align: center;
            font-weight: 500;
            font-size: 11.7px;
                width: 90%;
         }

    }


    @media (min-width: 768px) {
      
   .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 18rem;
          height: 19rem;
          border-radius: 11px;
          
         box-sizing: border-box; /* Ensure padding is included in the box dimensions */
        overflow: hidden; /* This ensures the image stays inside the box */
          
    }



    .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }


   





        .post_intent{
        
        position: absolute;
        background-color: transparent;
          width: 18rem;
          height: 19rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }
    }

    @media (min-width: 820px) {
      .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 19rem;
          height: 19rem;
          border-radius: 11px;
          
         box-sizing: border-box; /* Ensure padding is included in the box dimensions */
        overflow: hidden; /* This ensures the image stays inside the box */
          
    }



    .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }


   





        .post_intent{
        
        position: absolute;
        background-color: transparent;
            width: 19rem;
          height: 19rem;
          border-radius: 11px;
          padding-left: 0.5rem;
          padding-top: 2rem;
          
    }
    }

    @media (min-width: 853px) {
      html{
          font-size: 14px;
        }





        


    .carousel {
      position: relative;
      width: 100%;
      height: 40rem;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      background: rgba(0, 0, 0, 0.6);
    }

    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay-text {
      /* position: absolute;
      bottom: 10%;
      left: 5%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      font-size: 24px;
      max-width: 70%;
      z-index: 2;
      animation: fadeIn 1.5s ease-in-out; */


top: 2rem;
      width: 100%;
      height: 100%;
        background: linear-gradient(
      to right,
      #1d1d1de5 55%,
      /* Greenish color */ rgba(231, 39, 5, 0) 80%,
      /* Lighter green fading out */ rgba(231, 39, 5, 0) 100%
        /* Shadow effect on the right */
    );

      z-index: 12;
      position: absolute;

      padding-top: 17rem;
      padding-left: 3rem;
    }

.image{
  width: 100%;

}
    
    .overlay-text img{
      width: 20px;
      height: 20px;
    }


    .overlay-text h4{
color: #ffcb05;
font-weight: 500;
font-size: 15px;
    }


       .overlay-text article{
        color: #ffffffb6;
        font-size: 16px;
      }

    .overlay-text h2{
      color: #fff;
      font-size: 35px;
      width: 70%;
      font-weight: 500;
   
    }


      .overlay-text article{
        color: #ffffffb6;
        font-size: 16px;
        margin-top: 0.5rem;
      }



      .view_more{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;


                color: #fff;
      }



      .get_started{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;
      }


         .get_started a{
          color: #fff;
          font-size: 13px;
          cursor: pointer;
         }
    .dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.911);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #ffcb05;
      border: solid 2px #1d1c1c9f;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }



    .what_we_do{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .what_we_do h2{
        font-weight: 500;
        font-size: 30px;
    }



    .write_a_text_about_it{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

        .write_a_text_about_it article{
            text-align:start;
            font-size: 15.6px;
            color: #535353;
            width: 80%;
            margin-top: 1rem;
        }



        .Read_more{
            background-color: #ffcb05;
            height: 2.4rem;
            width: 11rem;
            border-radius: 30px;
            font-weight: 400;
            cursor: pointer;
            margin-top: 0.5rem;
            color: #fff;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
        }






        .Why_partner_with_us{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


        .Why_partner_with_us  h2{
        font-weight: 500;
        font-size: 30px;
    }






    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 2rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
                     width: 14rem;
          height: 19rem;
          border-radius: 11px;
          
    }



        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }



    .post_intent{
        
        position: absolute;
        background-color: transparent;
      width: 14rem;
          height: 19rem;
          border-radius: 11px;
          padding-left: 1rem;
          padding-top: 4rem;
          
    }


    .trust h3{
        font-size: 14px;
        font-weight: 500;
        width: 70%;
        
    }



    .text_trust article{
        font-size: 13.6px;
            color: #535353;
            margin-top: 1rem;
    }



    .icons_spare {
        display: flex;
        align-items: center;
        gap: 5rem;
        margin-top: 1rem;
        position: static;
        
    }


    .icons_spare i{
        font-size: 26px;
     color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
    }
    .icons_spare h4{
font-family: "Rubik Doodle Shadow", system-ui;
        font-size: 26px;
color: #ffcb05;
     color: #535353;
    }


    #br1{
        display: none;
    }





    .Our_strategic_intent{
        width: 100%;
        height: auto;
    }






    
    .h2_intent{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .h2_intent h2{
        font-weight: 500;
        font-size: 30px;
    }



    .text_strategic{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
            padding-left: 0rem;
        
    }

        .text_strategic article{
            text-align:start;
            font-size: 15.6px;
            color: #535353;
            width: 80%;
            margin-top: 1rem;
        }



        .text_strategic article b{
            font-size: 20px;
        
        }




        .strategic_intent_icons{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;

        }
        

        .icons_stra{
             display: grid;
            place-content: center;
            place-items: center;
            width: 100%;
            margin-top: 1rem;
        }


         .icons_stra i{
            font-size: 90px;
            color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
         }

         .icons_stra h3{
            text-align: center;
            font-weight: 500;
            font-size: 17px;
                width: 80%;
         }

      }
      
      
      @media (min-width: 980px) {
        html{
            font-size: 16px;
          }
        




             
   

    .carousel {
      position: relative;
      width: 100%;
      height: 40rem;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      background: rgba(0, 0, 0, 0.6);
    }

    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay-text {
      /* position: absolute;
      bottom: 10%;
      left: 5%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      font-size: 24px;
      max-width: 70%;
      z-index: 2;
      animation: fadeIn 1.5s ease-in-out; */


top: 2rem;
      width: 100%;
      height: 100%;
        background: linear-gradient(
      to right,
      #1d1d1de5 55%,
      /* Greenish color */ rgba(231, 39, 5, 0) 80%,
      /* Lighter green fading out */ rgba(231, 39, 5, 0) 100%
        /* Shadow effect on the right */
    );

      z-index: 12;
      position: absolute;

      padding-top: 17rem;
      padding-left: 3rem;
    }

.image{
  width: 100%;

}
    
    .overlay-text img{
      width: 20px;
      height: 20px;
    }


    .overlay-text h4{
color: #ffcb05;
font-weight: 500;
font-size: 15px;
    }


       .overlay-text article{
        color: #ffffffb6;
        font-size: 16px;
      }

    .overlay-text h2{
      color: #fff;
      font-size: 35px;
      width: 70%;
      font-weight: 500;
   
    }


      .overlay-text article{
        color: #ffffffb6;
        font-size: 16px;
        margin-top: 0.5rem;
      }



      .view_more{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;


                color: #fff;
      }



      .get_started{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;
      }


         .get_started a{
          color: #fff;
          font-size: 13px;
          cursor: pointer;
         }
    .dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.911);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #ffcb05;
      border: solid 2px #1d1c1c9f;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }



    .what_we_do{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .what_we_do h2{
        font-weight: 500;
        font-size: 30px;
    }



    .write_a_text_about_it{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

        .write_a_text_about_it article{
            text-align:start;
            font-size: 15.6px;
            color: #535353;
            width: 80%;
            margin-top: 1rem;
        }



        .Read_more{
            background-color: #ffcb05;
            height: 2.4rem;
            width: 11rem;
            border-radius: 30px;
            font-weight: 400;
            cursor: pointer;
            margin-top: 0.5rem;
            color: #fff;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
        }






        .Why_partner_with_us{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


        .Why_partner_with_us  h2{
        font-weight: 500;
        font-size: 30px;
    }






    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 2rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
                    width: 13rem;
         height: 16rem;
          border-radius: 11px;
          
    }



        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }



    .post_intent{
        
        position: absolute;
        background-color: transparent;
       width: 13rem;
          height: 16rem;
          border-radius: 11px;
          padding-left: 1rem;
          padding-top: 4rem;
          
    }


    .trust h3{
        font-size: 14px;
        font-weight: 500;
        width: 70%;
        
    }



    .text_trust article{
        font-size: 13.6px;
            color: #535353;
            margin-top: 1rem;
    }



    .icons_spare {
        display: flex;
        align-items: center;
        gap: 5rem;
        margin-top: 1rem;
        position: static;
        
    }


    .icons_spare i{
        font-size: 26px;
     color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
    }
    .icons_spare h4{
font-family: "Rubik Doodle Shadow", system-ui;
        font-size: 26px;
color: #ffcb05;
     color: #535353;
    }


    #br1{
        display: none;
    }





    .Our_strategic_intent{
        width: 100%;
        height: auto;
    }






    
    .h2_intent{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .h2_intent h2{
        font-weight: 500;
        font-size: 30px;
    }



    .text_strategic{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
            padding-left: 0rem;
        
    }

        .text_strategic article{
            text-align:start;
            font-size: 15.6px;
            color: #535353;
            width: 80%;
            margin-top: 1rem;
        }



        .text_strategic article b{
            font-size: 20px;
        
        }




        .strategic_intent_icons{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;

        }
        

        .icons_stra{
             display: grid;
            place-content: center;
            place-items: center;
            width: 100%;
            margin-top: 1rem;
        }


         .icons_stra i{
            font-size: 90px;
            color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
         }

         .icons_stra h3{
            text-align: center;
            font-weight: 500;
            font-size: 17px;
                width: 80%;
         }


          
        
        
        }


          @media (min-width: 1024px) {}

  

          @media (min-width: 1280px) {

       
            
   

    .carousel {
      position: relative;
      width: 100%;
      height: 95vh;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      background: rgba(0, 0, 0, 0.6);
    }

    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay-text {
      /* position: absolute;
      bottom: 10%;
      left: 5%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      font-size: 24px;
      max-width: 70%;
      z-index: 2;
      animation: fadeIn 1.5s ease-in-out; */


top: 2rem;
      width: 100%;
      height: 100%;
        background: linear-gradient(
      to right,
      #1d1d1de5 55%,
      /* Greenish color */ rgba(231, 39, 5, 0) 80%,
      /* Lighter green fading out */ rgba(231, 39, 5, 0) 100%
        /* Shadow effect on the right */
    );

      z-index: 12;
      position: absolute;

      padding-top: 17rem;
      padding-left: 3rem;
    }

.image{
  width: 100%;

}
    
    .overlay-text img{
      width: 20px;
      height: 20px;
    }


    .overlay-text h4{
color: #ffcb05;
font-weight: 500;
font-size: 15px;
    }


       .overlay-text article{
        color: #ffffffb6;
        font-size: 16px;
      }

    .overlay-text h2{
      color: #fff;
      font-size: 35px;
      width: 70%;
      font-weight: 500;
   
    }


      .overlay-text article{
        color: #ffffffb6;
        font-size: 16px;
        margin-top: 0.5rem;
      }



      .view_more{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;


                color: #fff;
      }



      .get_started{
        width: 12rem;
    background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
           height: 3rem;
           border-radius: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 1rem;
           cursor: pointer;
           border: solid #ffcb05 1.5px;
      }


         .get_started a{
          color: #fff;
          font-size: 13px;
          cursor: pointer;
         }
    .dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.911);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #ffcb05;
      border: solid 2px #1d1c1c9f;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }



    .what_we_do{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .what_we_do h2{
        font-weight: 500;
        font-size: 30px;
    }



    .write_a_text_about_it{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

        .write_a_text_about_it article{
            text-align:start;
            font-size: 15.6px;
            color: #535353;
            width: 80%;
            margin-top: 1rem;
        }



        .Read_more{
            background-color: #ffcb05;
            height: 2.4rem;
            width: 11rem;
            border-radius: 30px;
            font-weight: 400;
            cursor: pointer;
            margin-top: 0.5rem;
            color: #fff;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
        }




        .text_menu p{
  font-size: 13px;
 

  

}




      



        .Why_partner_with_us{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


        .Why_partner_with_us  h2{
        font-weight: 500;
        font-size: 30px;
    }






    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 2rem;
        row-gap: 1rem;
        margin-top: 1rem;


    }


    .extra_box{
          box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 18rem;
          height: 19rem;
          border-radius: 11px;
          
    }



        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }



    .post_intent{
        
        position: absolute;
        background-color: transparent;
       width: 18rem;
          height: 19rem;
          border-radius: 11px;
          padding-left: 2rem;
          padding-top: 4rem;
          
    }


    .trust h3{
        font-size: 19px;
        font-weight: 500;
        width: 70%;
        
    }



    .text_trust article{
        font-size: 13.6px;
            color: #535353;
            margin-top: 1rem;
    }



    .icons_spare {
        display: flex;
        align-items: center;
        gap: 7rem;
        margin-top: 1rem;
        position: static;
        
    }


    .icons_spare i{
        font-size: 60px;
     color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
    }
    .icons_spare h4{
font-family: "Rubik Doodle Shadow", system-ui;
font-size: 40px;
color: #ffcb05;
     color: #535353;
    }


    #br1{
        display: none;
    }





    .Our_strategic_intent{
        width: 100%;
        height: auto;
    }






    
    .h2_intent{
        width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4rem;
    }


    .h2_intent h2{
        font-weight: 500;
        font-size: 30px;
    }



    .text_strategic{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
            padding-left: 0rem;
        
    }

        .text_strategic article{
            text-align:start;
            font-size: 15.6px;
            color: #535353;
            width: 80%;
            margin-top: 1rem;
        }



        .text_strategic article b{
            font-size: 20px;
        
        }




        .strategic_intent_icons{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;

        }
        

        .icons_stra{
             display: grid;
            place-content: center;
            place-items: center;
            width: 100%;
            margin-top: 1rem;
        }


         .icons_stra i{
            font-size: 90px;
            color: #ffcb05;
           text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); /* shadow that follows icon shape */
         }

         .icons_stra h3{
            text-align: center;
            font-weight: 500;
            font-size: 17px;
                width: 80%;
         }
          }