*body{
    background-color: #F5F5F5;
}
.title-seperator{
    width: 15%;
    height: 2px;
    background-color: #ea7979;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 30px;
}
h1, h2{
    /* font-family: 'Rubik', sans-serif; */
    font-family: 'Kanit', sans-serif
}
/* ----------------------------- Navbar CSS----------------------------- */


.home-header-container{
    background-color: black;
}
.head-navBar{
    /* background-color: #0097B2; */
    background-color: transparent;
    top: 0;
    left: 0;
    height: 4.2rem;
    /* color: white; */
    /* position: fixed; */
}
.header-scrolled {
    /* background-color: #0097B2; */
     background-color: #fff;
    /* opacity: 0.8; */
    /* color: #0097B2; */
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    transition: background-color 0.2s ease-in-out;
}
/* .header-scrolled.header-navBar-items li a{
    color: rgb(0, 0, 0);
} */

.navBarForMobile.Collapse_nabBar_scrolled {
    background-color: white;
    transition: background-color 0.3s ease-in-out;
  }

.main-logo{
    width: 4.5rem;
    /* height: 3rem; */
}
.main-logo img{
    width: 100%;
}

.navbar-homeIcon i{
    zoom: 85%;
    color: rgb(244, 239, 239);
}

.header-navBar-items li a{
    /* color: #1EBE58; */
    color:rgb(244, 239, 239);
    /* color: black; */
    font-weight: 500;
    font-size: 17px;
    transition: 0.2s;
}
.header-navBar-items li a:hover{
    color: rgb(244, 239, 239);
    border-bottom: 1px solid white;
    transform: 0.2s;
}
.download-button{
    background-color: #1EBE58;
    color: white;
    font-weight: 500;
    padding: 8px 40px 12px 40px;
    border: none;
}
.download-button:hover{
    background-color: #029E3B;
    transition: 0.2s;
}
.footer{
    padding: 20px;
    background-color: black;
    color: white;
}
.footer_logo{
    width: 6rem;
    margin: auto;
}
.footer_logo img{
    width: 100%;
}
.footer_menu{
    list-style: none;
    text-decoration: none;
}
.footer_menu a{
    text-decoration: none;
    color: white;
}
.footer_menu a:hover{
    /* zoom: 110%; */
    color: #73faa0;
}
.downolad_app_img{
    width: 18rem;
    margin: auto;
    border: 1px solid rgb(78, 73, 73);
}
.downolad_app_img img{
    width:100%;
    cursor: pointer;
}
.become_a_partner_button{
    padding: 10px 40px;
    background-color: black;
    color: white;
    border: 1px solid white;
    margin-top: 2rem;
    margin-left: 20%;
    transition: 0.2s;
}
.become_a_partner_button:hover{
    color: black;
    background-color: white;
    transition: 0.4s;
}
.footer_button{
    width: 100%;
}
.our_product_img{
    width: 80%;
    margin: auto;
    /* box-shadow: rgba(188, 181, 185, 0.4) 5px 5px, rgba(231, 231, 231, 0.3) 10px 10px,rgba(190, 187, 189, 0.2)) 10px 10px, rgba(240, 46, 170, 0.1) 10px 10px, rgba(240, 46, 170, 0.05) 2px 2px; */
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;

}
.our_product_img img{
    width: 100%;
}

.home_social_container{
    text-align: left;
}

.home_social_container a{
    padding: 0.6rem 0.5em 0.6rem 0.7rem;
    border-radius: 100%;
    /* width: 4rem;
    height: 4rem; */
}
.social_fb{
    background-color: #4D68A1;
}
.social_ldn{
    background-color: #1883BB;
}
.social_ins{
    background-color: #3A3A3A;
}
.social_yt{
    background-color: #D13534;

}
.social_wp{
    background-color: #39D674;
}

/* ----------------------------------- Hero Section CSS ---------------------------------- */

.home-hero-section{
    width: 100%;
    height: 90vh;
    background-image: linear-gradient(rgba(21, 21, 25, 0.7),rgba(4,9,30,0.7)),url('./assets/home-banner.jpg');
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    /* opacity: 0.4; */
    /* background-color: black;*/
} 

.home-header-welcome-text{
    margin-top: 7rem;
    color: white;
    font-weight: bold;
}
.title {
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    width: 100%;
    margin: auto;
    /* height: 5rem; */
    /* padding-bottom: 1rem; */
    /* padding-top: -0.5rem; */
    margin-top: -1.4rem;
    margin-bottom: 1rem;
    /* text-shadow: 0 0 2px #FFD700, 0 0 4px #FFD700, 0 0 6px #FFD700; */
    text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0 0 6px #ffffff;
    /* background-color: #fafafa; */
    /* margin-top: 5rem; */
}


.first-text {
    /* color: #55D9AA; */
    color: #16A34A;
}

.second-text {
    /* color: #2E8FB4; */
    color: #DC2626;
}

.third-text {
    /* color: #5EB8D8; */
    color: black;
}
.home-left-part{
    width: 70%;
    text-align: center;
}
.home-right-part{
    width: 30%;
}
.home-hero-subTitle{
    font-size: 24px;
    font-weight: 600;
    margin-top: -1rem;
}
.home-hero-subTitle-2{
    font-size: 20px;
    font-weight: 500;
}
.home-download-img{
    width: 11rem;
    margin: auto;
}
.home-download-img img{
    width: 100%;
    padding-top: 10px;
}
.home-qr-img{
    width: 70%;
    /* height: 80%; */
    margin-top: 5rem;
}
.home-qr-img img{
    width: 100%;
}
/* ----------------------- TYPE CSS------------------------- */
    .autotyping{
    font-family: 'Playfair Display', serif;
    color: #FFF;
    font-size:2.5em;
    font-weight: 800;
    text-align: center;
    margin-top: -20px;
    }
    .autotyping>span{
    color: #FFDC00;
    font-size:0.6em;
    font-weight: 700;
    }
    @media (min-width: 481px) and (max-width: 768px) {
    .autotyping{
    font-size:2.0em;
    font-weight: 800;
    
    }
    .autotyping>span{
    font-size:0.5em;
    font-weight: 700;
    }
    }
    @media (max-width: 480px) {
    .autotyping{
    font-size:1.9em;
    font-weight: 800;
    text-align: center;
    }
    .autotyping>span{
    font-size:0.4em;
    font-weight: 700;
    }
    }
/* ------------------------------------------------ */
.messgae-container{
    width: 100%;
    display: flex;
    margin-top: 50px;
    margin-bottom: 70px;
}
.home-messgae-container-text-section{
    width: 90%;
    padding: 10px 80px;
}
.founder-message-img{
    width: 10%;
}
.founder-message-img img{
    margin-top: 70px;
    width: 100%;
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
    /* position: absolute; */
}
.home-founder-message-texts{
    font-size: 20px;
}
.home-about-us-section{
    width: 100%;
    height: 80vh;
    padding: 12% 1% 1% 1%;
    background-image: linear-gradient(rgba(21, 21, 25, 0.7),rgba(4,9,30,0.7)),url('./assets/saynocash-bg-1.jpg');
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    margin-bottom: 100px;
}
.home-about-us-section h2{
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.home-about-us-section p{
    margin-bottom: 2.5rem;
}
/* ------------------------------------------------ */
/* .home-feature-container{
    display: flex;
    margin-top: 50px;
} */
.home-feature-left-section{
    width: 50%;
}
.home-feature-left-section img{
    width: 100%;
}
.home-feature-left-section{
    width: 50%;
}
.home-feature-section h2{
    font-weight: bold;
}
.home-feature-box{
    max-width: 50%;
    height: 18%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: inline-block;
    padding: 10px;
    padding-top: 16px;
    border-radius: 20px;
    background-color: white;
    margin-top: 10px;
}
.home-feature-right-section h5{
    font-weight: bold;
    margin-bottom: 20px;
}
.leftAligns{
    margin-left: -50px;
}
.rightAligns{
    margin-right: -50px;
}
/* -------------------------------- Social Media---------------- */
.home_soicial_media_section{
    width: 100%;
    display: flex;
    margin-top: 190px;
}
.home_soicial_media_section_left{
    width: 35%;
    text-align: left;
    padding-right: 20px;
    margin-right: 10px;
}
.home_soicial_media_section_left h2{
    font-weight: bold;
    margin-top: 8%;
}
.home_soicial_media_section_right{
    width: 65%;
}
.home_social_media_img_box, .home_social_media_img_box{
    width: 100%;
}
.home_social_media_img_box1{
    width: 100%;
    /* padding-right: 20px; */
}
.home_social_media_img_box1_img1{
    width: 60%;
    padding: 15px;
    margin: 15px;
}
.home_social_media_img_box1_img1 img{
    width: 90%;
}
.home_social_media_img_box1_img2{
    width: 40%;
    margin: 30px 5px;
}
.home_social_media_img_box1_img2 img{
    width: 90%;
}
.home_social_media_img_box2{
    width: 100%;
    /* background-color: red; */
    /* padding-right: 20px; */
}
.home_social_media_img_box2_img1{
    width: 50%;
    padding: 15px;
    margin: 15px;
}
.home_social_media_img_box2_img1 img{
    width: 80%;
    margin-top: -64%;
    margin-left: 14%;
}
.home_social_media_img_box2_img2{
    width: 50%;
    margin: 30px 5px;
}
.home_social_media_img_box2_img2 img{
    width: 100%;
    margin-top: -12%;
}
/* ===================== <<< RSETAURANT PAGE >>> ====================== */

.restaurant_hero_section{
    width: 100%;
    height: 90vh;
    background-image: linear-gradient(rgba(21, 21, 25, 0.7),rgba(4,9,30,0.7)),url('./assets/saynocash-bg-1.jpg');
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}

.restaurant_hero_section p{
    font-size: 20px;
    font-weight: bold;
    margin: 15px 10px;
}

.rt_mission{
    width: 100%;
    display: flex;
    margin-top: 5%;
    margin-bottom: 7%;
}
.rt_mission_left{
    width: 50%;
    text-align: left;
    padding-right: 60px;
    margin-right: 10px;
}
.rt_mission_left h2{
    font-weight: bold;
    margin-top: 1%;
}
.rt_mission_right{
    width: 50%;
}
.mission_img{
    width: 90%;
    margin: auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.mission_img img{
    width: 100%;
}
.rt_features{
    width: 100%;
    margin-bottom: 5rem;
}
.rt_feature_box{
    width: 100%;
    margin-bottom: 5rem;
}
.rt_feature_container{
    width: 32%;
    border-radius: 50%;
    padding: 4.5rem 3rem;
    margin: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.influencer_box{
    width: 100%;
}
.influencer_box_left{
    width: 50%;
}
.influencer_box_left h2{
    font-weight: bold;
}
.influencer_box_right{
    width: 50%;
}
.influencer_social_link_text{
    font-size: 14px;
    text-align: center;
    margin-top: 4px;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.mySwiper {
    width: 300px;
    height: 340px;
  }

  .influencer_img_slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
  }

  .influencer_img_box{
    width: 100%;
  } 
  .influencer_img_box img{
    width: 100%;
  }

  .invest_hero_section{
    width: 100%;
    height: 90vh;
    background-image: linear-gradient(rgba(21, 21, 25, 0.7),rgba(4,9,30,0.7)),url('./assets/invest-banner-2.jpg');
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
  }

  .terms_conditions_hero_section{
    width: 100%;
    height: 40vh;
    background-image: linear-gradient(rgba(21, 21, 25, 0.7),rgba(4,9,30,0.7)),url('./assets/invest-banner-2.jpg');
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
  }

/* ==================================================================== */
/* ----------------------- Invest Features---------------------------- */
  .invest_feature_box{
    width: 100%;
  }
  .invest_header_content{
    text-align: center;
}
.invest_header_content p{
    font-size: 20px;
    font-weight: 500;
    margin: 15px 10px;
}
  .invest_featue_single_container{
    width: 32%;
    min-height: 450px;
    margin: 1.3%;
    padding: 1.5rem;
    text-align: center;
    border-radius: 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  }
  .invest_featue_single_container h5{
    font-weight: bold;
  }
  .invest_feature_img{
    width: 100%;
  }
  .invest_feature_img img{
    width: 100%;
  }

  /* -----------------------gift page------------------------------------ */
  .gifts-section {
    background-color: #f9f9f9;
    padding: 40px 0;
  }
  
  .gifts-section h2 {
    font-family: 'Rubik', sans-serif;
    color: #333;
    margin-bottom: 20px;
  }
  
  .gift-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
  }
  
  .gift-item:hover {
    transform: translateY(-10px);
  }
  
  .gift-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .gift-item h3 {
    font-size: 1.5rem;
    margin: 15px 0;
    color: #333;
  }
  
  .gift-item p {
    color: #777;
    margin-bottom: 10px;
  }
  
  .gift-item .coins {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff9800;
  }
  
  /* .claim-gift-btn {
    margin-top: 20px; 
  } */

/* .claim-gift-button {
    background-color: #ff9800;
    color: #fff;
    border: none;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .claim-gift-button:hover {
    background-color: #e68900;
    transform: scale(1.05);
  }
  
  .claim-gift-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.5);
  } */


.claim-gift-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #FF9900;
    /* background-color: #ff4081; */
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Hover and Focus Effects */
  .claim-gift-button:hover,
  .claim-gift-button:focus {
    background-color: #FF9900;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    outline: none;
  }
  
  /* Animation */
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .claim-gift-button {
    animation: pulse 1.5s infinite;
  }
  
 
  
/* ------------------------------------------------------------------- */

@media only screen and (max-width:480px){
    /* earlier 495px */
    .title{
        font-size: 40px
    }
    .become_a_partner_button{
        margin-left: 10%;
    }
    .home-left-part{
        width: 100%;
        text-align: center;
        padding: 15px;
    }
    .home-hero-section{
        height: 80vh;
    }
    .home-hero-subTitle{
        font-size: 18px;
    }
    .home-hero-subTitle-2{
        font-size: 14px;
    }
    .founder-message-img img{
        margin-top: 0px;
    }
    .founder-message-img{
        width: 30%;
        margin: auto;
        margin-bottom: 10px;
    }
    .restaurant_hero_section{
        width: 100%;
        height: 80vh;
    }
    .restaurant_hero_section h1{
        font-size: 22px;
    }
    .restaurant_hero_section p{
        font-size: 15px;
    }
    .home-right-part{
        width: 0%;
        display: none;
    }
    .messgae-container{
        display: block;
    }
    .home-messgae-container-text-section{
        width: 100%;
    }
    .home-messgae-container-text-section{
        width: 90%;
        padding: 10px;
    }
    .leftAligns{
        margin-left: 0px;
    }
    .rightAligns{
        margin-right: 0px;
    }

    .home-founder-message-texts{
        font-size: 15px;
    }

    .home_soicial_media_section{
        display: block;
    }
    .home_soicial_media_section_left{
        width: 100%;
    }
    .home_soicial_media_section_right{
        width: 100%;
    }
    .rt_mission{
        display: block;
    }
    .rt_mission_left{
        width: 100%;
        padding: 10px;
    }
    .rt_mission_right{
        width: 100%;
        padding: 10px;
    }
    .home-about-us-section{
        padding: 20% 3% 2% 1%;
        height: 60vh;
    }
    .invest_hero_section{
        height: 80vh;
    }
    .invest_header_content p{
        font-size: 15px;
    }
    .invest_featue_single_container{
        width: 100%;
    }
    .rt_feature_container{
        width: 100%;
    }
    .influencer_box_right{
        width: 100%;
    }
    .influencer_box_left{
        width: 100%;
    }
    .navBarForMobile {
        background-color: rgb(46, 46, 46); 
        margin: 0;
        padding: 2rem 1rem;
        margin-top: -1rem;

    }
    .nav_menu_background{
        /* background-color: #0097B2; */
        padding: 0px !important;
        margin-top: -1rem;
    }

}
@media only screen and (min-width: 481px) and (max-width: 766px) {
    .home-right-part{
        width: 0%;
        display: none;
    }
    .home-messgae-container-text-section{
        width: 90%;
        padding: 10px;
    }
    .leftAligns{
        margin-left: 0px;
    }
    .rightAligns{
        margin-right: 0px;
    }

    .home-founder-message-texts{
        font-size: 15px;
    }

    .rt_mission{
        display: block;
    }
    .rt_mission_left{
        width: 100%;
        padding: 10px;
    }
    .rt_mission_right{
        width: 100%;
        padding: 10px;
    }
    .home-about-us-section{
        padding: 18% 3% 2% 1%;
        height: 60vh;
    }
    .invest_featue_single_container{
        width: 100%;
    }
    .rt_feature_container{
        width: 100%;
    }
    .navbar-collapse {
        /* background-color: white;  */
        margin: 0;
        padding: 2rem 1rem;
        margin-top: -1rem;

    }
    .nav_menu_background{
        /* background-color: #0097B2; */
        padding: 0px !important;
        margin-top: -1rem;
    }
}
@media only screen and (min-width: 769px) and (max-width: 991px) {
    .home-qr-img{
        width: 70%;
        /* height: 80%; */
        margin-top: 5rem;
    }
    .leftAligns{
        margin-left: 0px;
    }
    .rightAligns{
        margin-right: 0px;
    }
    .navbar-collapse {
        /* background-color: white;  */
        margin: 0;
        padding: 2rem 1rem;
        margin-top: -1rem;

    }
    .nav_menu_background{
        /* background-color: #0097B2; */
        padding: 0px !important;
        margin-top: -1rem;
    }
    .home-about-us-section{
        /* padding: 18% 3% 2% 1%; */
        height: 60vh;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1024px) {
    .home-qr-img{
        width: 70%;
        /* height: 80%; */
        margin-top: 5rem;
    }
}
@media only screen and (min-width: 1025px) {
    .home-qr-img{
        width: 70%;
        /* height: 80%; */
        margin-top: 5rem;
    }
}