@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");
: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); }
    }



    .learn_about_us{
        width: 100%;

    }



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



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


      .learn_first b{
        color: #ffcb05;
         font-weight: 500;
      }


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

  .p_tag p{
    font-weight: 400;
    color: #1d1d1de5;
    font-size: 13px;
  }



  
  .spare_a_word{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
 
    row-gap: 2rem;
    column-gap:  1.5rem;
  }
        
  .dots_effective_phase{
    display: grid;
    align-items: center;
    gap: 1rem;
    place-content: center;
    place-items: center;
  }



      .dots_effective_phase i{
        background-color: #ffcb05;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        border-radius: 5px;
      }


  
    .dots_effective_phase h5{
        color: #080808f6;
        font-size: 14px;
        font-weight: 500;
          text-align: center;

        
    }

    .dots_effective_phase p{
        font-size: 12.5px;
        color: #1d1c1c9f;
        text-align: center;
    }
      
 

    .good_match{
        width: 100%;
        margin-top: 6rem;
    }


     


    .h2_div{
        display: flex;
        align-items: center;
        justify-content: center;
    }




    
    .unknown_tips{
        display: flex;
        align-items: center;
        justify-content: center;
    }


   .unknown_tips p{
     font-weight: 400;
    color: #1d1d1de5;
    text-align: center;
    font-size: 14px;}







    .div_visibility{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
       margin-top: 3rem;
    }


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



    .main_box_show{
        width: 95%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 0.5rem;
        row-gap: 1rem;
        place-content: center;
        place-items: center;
    }



    .suitable_box{
        width:95%;
        height: 25rem;
     
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
        border-radius: 30px;
    }


    .img_stare{
        width: 100%;
        height: 14rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #faf3d627;
          border-radius: 30px;
    }


    .img_stare img{
        width: 90%;
        height: 100%;
    }

  
    .h4_text{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
    }


       .h4_text h4{
        color: #161616e5;
        font-weight: 500;
        text-align: center;
       }


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


       .text_pp p{
        font-size: 13px;
        color: #1d1d1de5;
        text-align: center;
       }  

    

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


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


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

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

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

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


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

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


  @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); }
    }


    }


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

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

    @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); }
    }

      }
      
      
      @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); }
    }

        
        
        }


          @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); }
    }



    .learn_about_us{
        width: 100%;

    }



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



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


      .learn_first b{
        color: #ffcb05;
         font-weight: 500;
      }



      .p_tag p{
    font-weight: 400;
    color: #1d1d1de5;
    font-size: 14px;
  }


  .spare_a_word{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    gap: 3rem;
  }
        
  .dots_effective_phase{
    display: flex;
    align-items: center;
    gap: 1rem;
  }



      .dots_effective_phase i{
        background-color: #ffcb05;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        border-radius: 5px;
      }

    .dots_effective_phase h5{
        color: #080808f6;
        font-size: 14px;
        font-weight: 500;
        text-align: start;
    }

    .dots_effective_phase p{
        font-size: 13.5px;
        color: #1d1c1c9f;
           text-align: start;
    }




      .h2_div{
        display: flex;
        align-items: center;
        justify-content: center;


        font-size: 30px;
        font-weight: 500;

    }


    .unknown_tips{
        display: flex;
        align-items: center;
        justify-content: center;
    }


   .unknown_tips p{
     font-weight: 400;
    color: #1d1d1de5;
    font-size: 14px;}







    .div_visibility{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
       margin-top: 3rem;
    }


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



    .main_box_show{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        row-gap: 2rem;
        place-content: center;
        place-items: center;
    }



    .suitable_box{
        width:36rem;
        height: 30rem;
     
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
        border-radius: 30px;
    }


    .img_stare{
        width: 100%;
        height: 18rem;
        display: flex;
        align-items: center;
        justify-content: center;
         background-color: #faf3d627;
          border-radius: 30px;
    }


    .img_stare img{
        width: 70%;
        height: 100%;
    }




    .h4_text{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
    }


       .h4_text h4{
        color: #161616e5;
        font-weight: 500;
       }


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


       .text_pp p{
        font-size: 15px;
        color: #1d1d1de5;
        text-align: center;
       }


          }