* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    font-family: "Noto Sans Thai", sans-serif;
    background-color: #faf9f6;
}

:root {
    --prime-color1: #043492;
    --prime-color2: #0084e2;
    --prime-color3: #fff24e;
    --gradient-color: linear-gradient(to bottom right, #043492 , #0084e2, #fff24e);
    --text-color1: #1f1f1f;
    --text-color2: #ffffff;
    --typeface-th:font-family: "Noto Sans Thai", sans-serif;
    --gap4:4px;
    --gap8:8px;
    --gap12:12px;
    --gap16:16px;
    --gap24:24px;
    --gap32:32px;
    --gap40:40px;


}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    font-family: "Noto Sans Thai", sans-serif;
    text-align: center;
    color: #fff;
    
}

.logo {
    width:250px ;
}

.logo img {
    max-width: 100%;
    height: auto;
}

/*------------Components------------*/

#main_button {
    background-color:var(--prime-color1);
    color: var(--text-color2);
    padding: 8px 36px 8px 36px;
    margin:8px ;
    border: none;
    border-radius: 32px;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 1rem;
    cursor: pointer;
}

#main_button:hover {
    background-color:var(--prime-color2);
    transition: 0.3s;
    box-shadow: 5px 5px 15px #d3d3d3;

}

#sub_button {
    background-color:#fff;
    color: var(--prime-color2);
    padding: 8px 36px 8px 36px;
    margin:8px ;
    border: none;
    border-radius: 32px;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 1rem;
    cursor: pointer;
}

#sub_button:hover {
    background-color:var(--prime-color2);
    transition: 0.3s;
    box-shadow: 5px 5px 15px #d3d3d3;
    color: #fff

}


.nav-links {
    display: flex; /* Align items horizontally */
    align-items: center; /* Vertical alignment */
    list-style: none;
    padding: 0;
    margin: 0;
    
}


.nav-links li {
    margin: 0 16px;
    
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 8px 12px; /* Add padding for all items */
}

/* Hover effect for nav links */
.nav-links li:hover {
    color: var(--prime-color2);
    text-decoration: underline;
    
}

/* Adjust the "Open Account" button */
#opan_acc_button {
    background-color: var(--prime-color1);
    border-radius: 32px; /* Optional: makes the button rounded */
    padding: 0; /* Remove extra padding */
}

#opan_acc_button a {
    color: #ffffff;
    text-decoration: none;
    padding: 8px 24px; /* Match padding to align with other items */
    display: block; /* Makes the link fill the button area */
}


span {
    width: 25px;
    height: 3px;
    background-color: #973333;
    margin: 4px 0;
    transition: 0.4s;
}

select {
    font-family: var(--typeface-th);
    border: none;
    text-decoration: none;
    background-color: transparent;
    text-align: center;
    color: white;
    
}

option {
    color:black;
    
}

/*------------Section------------*/

.section1 {

    min-height: 60vh;
    overflow: hidden; /* Avoid scrollbars within this section */
    background-image: url(city.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 80%;
    
}

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

.section_caution{
    margin: 72px 0 0 0px;
    background-color: var(--prime-color2);
    color: #fff;
}

.section1_box1 {
    padding-left: 24px;
    padding-right: 24px;
}


.section5 {
    display: flex;
    justify-items: flex-start; /* Not necessary in this case */
    align-items: flex-start;
    
    
}




/*------------Control Section------------*/

.section1_control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 880px;
}

.section2_control {
    max-width: 880px;
    padding: 24px 24px 0px 24px;
}

.section3_control {
    padding: 24px 24px 0px 24px;
    margin: 0 auto; /* Center the entire container */
    text-align: left; /* Center text within the elements */
    max-width: 880px;
}

.sectioncaution_control {   
    padding: 0px 0px 0px 0px;
    margin: 0 auto; /* Center the entire container */
    text-align: left; /* Center text within the elements */
    max-width: 880px;

    display: flex;
}

.section5_control {
    padding: 24px 24px 0px 24px;
    text-align: left; /* Keeps text aligned to the left */
    width: 100%; /* Allows it to shrink with the screen */
    max-width: 880px;
    margin: 0; /* Remove centering effect */
    
}


/*------------Sub Section------------*/

.section1_sub {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

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


.section1_box1 {
    padding-left: 12px;
    padding-right: 12px;
    text-shadow: 2px 2px 4px #a7a7a7;
}


.section1_box3 {
    display: flex;
}

.section3_control_container {
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}


.section3_control_container h3{
    color: var(--prime-color1);
    padding: 8px;
    display: inline-block;
}

.section3_control_container_sub {
    padding: 8px;
    border-radius: 16px;
    margin-top: 24px;
}

.section3_control .nav {
    border:solid 1px #1f1f1f;
    border-radius: 16px;
    padding: 8px;
    margin: 16px;
}

.nav td {
    padding: 0 10px; /* Add horizontal padding to create space */
}

.space {
    padding-left: 24px; /* Extra space for the specific cell */
}

.sectioncaution_control_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;

}


/*------------low components------------*/
.sectioncaution_control_caution_box {
    background-color: #ffffff; /* White box */
    color: #1f1f1f;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.sectioncaution_control_caution_box img {
    width: 70%;
    
}

.sectioncaution_control_caution_box p{   
    margin: 24px 0px 24px 0px;
}

.fund_type {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

#fund_name {
    margin-left: 16px;
}

.number {
    background-color: #043492;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 100px;
    width: 3em; /* Responsive width: 3 times the font size */
    height: 3em; /* Responsive height: matches the width for a circle */
    

}

.ggmap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0 24px 0;
}


/*------------Responsive------------*/

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes moveUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start 20px lower */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at the original position */
    }
}

.slide_head {
    animation: moveUpFadeIn 1.7s ease forwards; /* Apply animation */
}

#main_button {
    animation: moveUpFadeIn 1.7s ease forwards; /* Apply animation */
    color: #fff;
    margin-bottom: 24px;
}

#sub_button {
    animation: moveUpFadeIn 1.7s ease forwards; /* Apply animation */
    margin-bottom: 24px;
}

a #addfriend {
    background-color: green;
    color:#973333;
    text-decoration: none;
}

/*------------------------*/

.circle {
    height: 120px;
    width: 120px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.section3_control_sub {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.fund_details {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
}


.section3_control_right table td {
    margin-left: 24px;
}




.box1 {
    flex: 1;
    padding: 4px;
    margin-top: 10%;
}

.box1 img {
    width: 70%;
}

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


.footer {
    padding: 24px;
    background-color: var(--prime-color1);
    color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 24px;

}

.footer_control {
    display: flex;
    max-width: 880px;
    flex-direction: row;
    justify-content: flex-start;
}


.footer_control img{
    width: 80%;  
}

.socialmedia a{
    text-decoration: none;

}


@media (min-width: 1246px) {
    .section1 {
        height: 70vh;
    }
}

@media (max-width: 1245px) {
    .nav-links {
        position: fixed; /* Change to fixed */
        top: 0;          /* Start from the top of the viewport */
        left: -100%;     /* Hidden off-screen initially */
        flex-direction: column;
        background-color: #ffffff;
        width: 100%;     /* Full width */
        height: 100%;    /* Full height */
        padding-top: 8%;
        transition: 0.3s;
        z-index: 1000;   /* Ensure it appears above other content */
    }
    
    .nav-links li {
        text-align: center;
        margin: 10px 0;
    }


    .logo {
        width:200px ;
    }

    
}



@media (max-width: 800px) {
    .section1 {
        flex-direction: column;
    }

    .box1:nth-child(1) {
        order: 2;
    }
    
    .box1:nth-child(2) {
        order: 1;
    }

    .box1 {
        margin-top: 12px
    }
    
    .footer_control {
        flex-direction: column;
    }

    .section3_control_sub {
        flex-direction: column;
        gap: 24px;
    }
    
    .sectioncaution_control {
        display: flex;
        flex-direction: column;
        max-width: 500px;
        align-items: center;
        justify-items: center;
    }

    .sectioncaution_control_caution_box {
        width: 60%;
    }

    .sectioncaution_control_caution_box img {
        width: 60%;
        
    }

    .sectioncaution_control_text {   
        margin: 24px 24px 24px 24px;
    }

    .sectioncaution_control #main_button {
        margin-bottom: 8px;
    }

    .footer_control_left {
        padding-bottom: 8px;
    }

    .footer_control img{
        width: 40%;  
    }

}