@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Kalnia+Glaze:wght@100..700&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=Martian+Mono:wght@100..800&family=Protest+Riot&display=swap');
*{
    margin: 0;
    padding: 0;
    user-select: none;
}

.ecomain{
    width: 100%;
    margin: 0;
    padding: 0;
    float: center;
    background-color: rgb(255, 255, 255);
}

.ecomainstate{
    width: 1300px;
    margin: 0 auto;
    padding: 0;
}

.ehcomainstateplus{
    width: 100%;
    float: center;
    margin: 0 auto;
}

body{
    font-family: Kanit;
    margin: 0 auto;
}

nav{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    text-align: center;
    background: linear-gradient(to right,#29caa7,#29caa7);
    justify-content: center;
    align-items: center;
}

nav ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    transform: skewX(-20deg);
}

nav ul li:hover::before {
    animation: shine 1s forwards;
}

/* Shine keyframes */
@keyframes shine {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}
nav ul li a{
    color: black;
    text-decoration: none;
}

nav ul li:hover{
    background-color: #51d8bb;/*E78F81*/
    transform: translateX(2px);
    /*transform: translatey(2px);*/
    
}

.activenav {
    background-color: #7bf1d8;
    text-decoration: underline;
    text-decoration-color: #181C14;
    position: relative;
    overflow: hidden;
    
}

.activenav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    transform: skewX(-20deg);
}

.activenav:hover::before {
    animation: shine 1s infinite;
}

@keyframes shine {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}
nav h1{
    color:black;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    font-size: 50px;
}

nav h1:hover{
    color: red;
    animation: changecolor 1s infinite;
    z-index: 2;
    transform: translatex(1px);
}
nav p:hover{
    color: red;
    animation: changecolor 1s infinite;
    transform: translatex(1px);
}

@keyframes changecolor {
    0%{color: red;}
    40%{color: red;}
    60%{color: blue;}
    70%{color: blue;}
    100%{color: red;}
}
.headings{
    text-align: center;
    position: relative;
    left: -67px;
}

.headings p{
    color:black;
    cursor: pointer;
    position: relative;
    font-weight: 400;
    font-size: 20px;
    top: -10px;
}

footer{
    background-color: #424242;
    width: 100%;
    min-height: 160px;
    color: white;
    margin-top: 30px;
    text-align: center;
    display:grid;
    justify-content: center;
    align-items: center;
}

.infob{
    color: white;
    margin: 0 auto;
}

main{
    background-color: rgb(207, 207, 207);
}
.maintoook{
    border: 3px solid black;
}

.video-container {
    
    margin-bottom: 20px;
    display: flex;
    justify-content: center;

    position:relative;
    left: -55px;
    top: 2px;
}

#videoList {
    list-style: none;
    padding: 0;
}

#videoList li {
    cursor: pointer;
    padding: 5px;
    margin: 5px;
    background-color: #ddd;
    border-radius: 5px;
}

#videoList li:hover {
    background-color: #bbb;
}

.black{
    background-color: black;
}

.slider {
    width: 90%;
    margin: 0 auto;
    height: 600px;
    overflow: hidden;
    position: relative;
    border-radius: 30px;
}

.slides {
    display: flex;
    transition: transform 1s ease-in-out; /* Assuming three slides */
    height: 800px;
}

.slide {
    flex-shrink: 0;
}

.slide img {
    width: 1170px;
    height: 600px;
}

/* Add styles for smooth transitions */
@keyframes sliderAnimation {
    0% { transform: translateX(0); }
    33% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
    100% { transform: translateX(0); }
}
.line{
    background-color: #181C14;
    width: 100%;
    height: 2px;
    margin-top: 30px;
    margin-bottom: 30px;
}


.contents {
    position:relative; /* Allows positioning over the video */
    color: white; /* Text color for visibility */
    text-align: center; /* Center the content */
    z-index: 1; /* Ensures content appears above the video */
}

.headc{
    position: relative;
    top: 110px;
    color: #15B392;
}
.headc i{
    position: relative;
    color: #15B392;
    margin-right: 20px;
}
.headctwo{
    position: relative;
    top: 130px;
    color: #15B392;
}
.headctwo i{
    position: relative;
    color: #15B392;
    margin-right: 20px;
}
.headcthree{
    position: relative;
    top: 175px;
    color: #15B392;
}
.headcthree i{
    position: relative;
    padding: 5px;
    margin-right: 20px;
    color: #15B392;
}
.headcfour{
    position: relative;
    top: 220px;
    color: #15B392;
}
.headcfour i{
    position: relative;
    padding: 5px;
    margin-right: 20px;
    color: #15B392;
}

.contents a{
    position: relative;
    top: 300px;
    background-color:#15B392 ;
    margin: 0 auto;
    color: black;
    text-decoration: none;
    padding: 20px;
    border-radius: 20px;
    transform: translateX(20px);
}

.dona:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
}
.netoneto{
    display: flex;
    margin-bottom: 10px;
    overflow-x: scroll;  /* Allow vertical scrolling if content overflows */
}
.netoneto a{
    position: relative;
    background-color:#15B392 ;
    margin: 0 auto;
    color: black;
    margin-left: 30px;
    text-decoration: none;
    padding: 20px;
    border-radius: 20px;
    transform: translateX(20px);
    z-index: 1;
}
#success-storiesmore{
    position: relative;
    background-color:#15B392 ;
    margin: 0 auto;
    color: black;
    margin-left: 30px;
    text-decoration: none;
    padding: 20px;
    border-radius: 20px;
    transform: translateX(20px);
    z-index: 1;
}
#success-storiesmore:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
    
}
.health-quiz{
    text-align: center;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
}
#next-btn{
    position: relative;
    background-color:#15B392 ;
    margin: 0 auto;
    color: black;
    text-decoration: none;
    padding: 20px;
    border-radius: 20px;
    transform: translateX(20px);
    z-index: 1;
}
#next-btn:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
}
.health-quiz {
    padding: 40px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
}

#quiz-options button {
    margin: 5px;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #29caa7;
    color: white;
    border: none;
    cursor: pointer;
}

#quiz-options button:hover {
    background-color: #229799;
}

.netonetoshare{
    width: 100%;
    height: 105px;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;  /* Allow vertical scrolling if content overflows */
}

.netonetoshare a{
    position: relative;
    background-color:#15B392 ;
    margin: 0 auto;
    color: black;
    margin-left: 45px;
    text-decoration: none;
    padding: 12px;
    top: 20px;
    border-radius: 20px;
    transform: translateX(20px);
    z-index: 1;
    height: 30px;
    text-align: center;
}
.liness{
    width: 100%;
    height: 2px;
    margin-top: 20px;
    background-color: #000000;
}

.donashare:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
    
}
.dona:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
    
}
.headcfourgg{
    position: relative;
    width: 80%;
    margin: 0 auto;
    top: -150px;
    color: #000000;
    background-color: #00cbdd41;
    border-radius: 5px;
    border: 1px solid black;
    padding: 10px 30px
}

.background-video {
    position:relative; /* Keeps the video fixed while scrolling */
    z-index: -1; /* Places the video behind other content */
    margin: 0 auto;
    top: -200px; 
}

.seterment{
    background: linear-gradient(to right,#29caa7,#17f0c1,#29caa7);
}
.seterment ul{
    list-style: none;
    display: flex;
    margin: 0 auto;
}
.seterment ul li{
    margin: 10px auto;
}
.seterment ul li a{
    text-decoration: none;
    color: black;
    background-color: #17f0c1;
    padding: 10px;
    border-radius: 10px;
}

.seterment ul li a:hover{
    color: white;
    background-color: #229799;
}

.reeed{
    background-color: #29caa7;
}

table {
    border: 2px solid black;
    margin: 80px;
    margin-bottom: 40px;
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Slightly moved down */
    transition: all 0.6s ease-out;
}
/* The class to be added when the section is visible */
table.visible {
    opacity: 1;
    transform: translateY(0);
}
table tr td{
    padding: 50px;
    padding-top: 10px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
}
.hellohead{
    width: 90%;
    text-align: center;
    margin: 50px;
}

table tr td a{
    text-decoration: none;
    color: black;
    background-color: #17f0c1;
    padding: 30px;
    width: 280px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 10px;
    border: 2px solid black;
}

table tr td a:hover{
    color: white;
    background-color: #229799;
}

.profiles {
    display: flex;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%; /* Set the width of the container */
}

.profile-cont{
    display: flex;
    overflow-x: scroll;
    overflow-y:hidden;
    transition: transform 0.3s ease; /* Smooth transition */
    text-align: center;
}
.profile-card{
    padding: 30px;
    min-width: 550px; /* Set width of individual cards */
    min-height: 340px;
    margin: 0 10px; /* Space between cards */
    border: 2px solid #000000 ;
    background: linear-gradient(to right,#29caa7,#17f0c1,#29caa7);
}
.profile-card img {
    width: 100%; /* Make images responsive */
    border-radius: 10px; /* Optional: rounded corners */
}

.profiles button {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background:#bbb;
    border: none;
    cursor: pointer;
    padding: 15px;
    font-size: 20px;
    border-radius: 5px;
}

.prev {
    left: 30px; /* Positioning for previous button */
}

.next {
    right: 30px; /* Positioning for next button */
}

.donaimg{
    position: relative;
    background-color:#15B392 ;
    color: black;
    text-decoration: none;
    padding: 15px;
    margin: 6px;
    border-radius: 20px;
    transform: translateX(20px);
}

.donaimg:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
}
.donaimgdonateb{
    position: relative;
    background-color:#15B392 ;
    color: black;
    text-decoration: none;
    padding: 15px;
    margin: 6px;
    border-radius: 20px;
}

.donaimgdonateb:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
}
.unverified{
    color: red;
}
#Activeness{
    background-color: #229799;
    color: white;
    border: 3px solid black;
}
.hamazon{
color: black; 
background-color:#79e779; 
width: 30%; 
margin: 0 auto; 
border-radius: 10px; 
border: 3px solid black;
}
.hamazon:hover{
    background-color:#4ab34a; 
    color: white;
}
.weblinkshere{
    width: 20px;
    height: 20px;
}
.displysexercise{
    display: flex;
}
.howtodow{
    position: relative;
    text-align: left;
}
.onlyforwidthset{
    min-width: 1150px;
}
.otherimage{
    position: relative;
    left: 100px;
}
.push-up-image{
    position: relative;
    left: 150px;
}
.planksimage{
    position: relative;
    left: 210px;
}
.lungesimage{
    position: relative;
    left: 10px;
}
.bicycleimage{
    position: relative;
    left: -50px;
}
.jumpingjackimage{
    position: relative;
    left: 210px;
}
.burpeeimage{
    position: relative;
    left: 160px;
}
.jumpingropeimage{
    position: relative;
    left: 220px;
}
.legimage{
    position: relative;
    left: 270px;
}
#translation-btn{
    position: relative;
    background-color:#153ab3 ;
    left: 310px;
    margin: 0 auto;
    color: white;
    text-decoration: none;
    padding: 20px;
    border-radius: 20px;
    transform: translateX(20px);
}

#translation-btn:hover{
    background-color: #229799;
    color: white;
    transform: translateX(20px);
}
.progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 20px;
    margin: 20px 0;
    height: 25px;
    border: 2px solid black;
}

.progress-bar {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(to right,#086450,#2adab4);
}

.success-stories {
    padding: 40px;
    text-align: center;
}

.success-stories h2 {
    color: #29caa7;
    margin-bottom: 30px;
}

.success-stories .story {
    margin: 10px 0;
    font-size: 18px;
    font-style: italic;
}
#google_translate_element{
    position: relative;
    left: 550px;
    color: black;
    width: 150px;
    height: 50px;
}
.donation-tracker {
    text-align: center;
    padding: 20px;
    background-color: #f3f3f3;
    margin: 20px 0;
}

.donation-tracker h2 {
    font-size: 24px;
    color: #29caa7;
}
.faq-section {
    text-align: center;
    background-color: #f7f7f7;
    padding: 40px;
}

.faq-title {
    cursor: pointer;
    color: #29caa7;
    font-size: 20px;
    margin-bottom: 10px;
}

.faq-content {
    display: none;
    margin-bottom: 20px;
    font-size: 16px;
}

.faq.active .faq-content {
    display: block;
}
.testimonial-carousel {
    position: relative;
    top: -65px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 40px;
    text-align: center;
    animation: boderani 4s infinite;
}

@keyframes boderani{
    0%{border-left: 1px solid blue;}
    10%{border-left: 1px solid blue;}
    20%{border-top: 1px solid red;}
    30%{border-top: 1px solid red;}
    40%{border-right: 1px solid green;}
    50%{border-right: 1px solid green;}
    60%{border-bottom: 1px solid blue;}
    70%{border-bottom: 1px solid blue;}
    80%{border-left: 1px solid red;}
    90%{border-left: 1px solid red;}
    100%{border-top: 1px solid green;}
}

.testimonial {
    display: none;
    font-size: 18px;
}

.testimonial.active {
    display: block;
}
.event-countdown {
    text-align: center;
    padding: 40px;
    background-color: #ffefef;
}

#countdown-timer {
    font-size: 24px;
    color: #e74c3c;
}
.impact-report {
    background-color:rgba(255, 255, 255, 0.2);
    padding: 30px;
    text-align: center;
}

.impact-report h2 {
    color: #29caa7;
}

.impact-report ul {
    list-style: none;
    padding: 0;
}

.impact-report ul li {
    font-size: 18px;
    margin-bottom: 10px;
}
.health-tips {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 40px;
    text-align: center;
}

.health-tips h2 {
    color: #29caa7;
    font-size: 24px;
}

.health-tips p {
    font-size: 18px;
    color: #333;
}
#chat-interface {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
}

#chat-log {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 10px;
}

#chat-input {
    width: 70%;
    padding: 5px;
}

#send-btn {
    padding: 5px;
}
.event-calendar {
    text-align: center;
    background-color: #f3f3f3;
    padding: 40px;
    text-align: center;
}

.event-calendar ul {
    list-style-type: none;
    padding: 0;
}
.health-quiz {
    padding: 40px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
}

#quiz-options button {
    margin: 5px;
}
.personalized-health-tips {
    padding: 40px;
    background-color: #e3f2fd;
    text-align: center;
    border-radius: 10px;
}

.personalized-health-tips form {
    display: inline-block;
    margin-bottom: 20px;
}
.personalized-health-tips {
    padding: 40px;
    background-color: #e3f2fd;
    text-align: center;
    border-radius: 10px;
}

.personalized-health-tips form {
    display: inline-block;
    margin-bottom: 20px;
}

#user-name, #email {
    padding: 10px;
    margin: 10px 0;
    width: 250px;
    display: block;
}

button {
    padding: 10px 20px;
    background-color: #29caa7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #229799;
}

#personalized-result h3 {
    color: #29caa7;
}

#health-tips-list {
    list-style-type: none;
    padding: 0;
}

#health-tips-list li {
    margin: 10px 0;
    font-size: 16px;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

label {
    display: block;
    margin: 5px 0;
}

#save-preferences {
    margin-top: 20px;
    background-color: #ffcc80;
    color: #000;
}
/* Hide "Powered by Google" text */
.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

/* Hide unnecessary Google branding */
.goog-te-gadget span {
    display: none !important;
}