@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Kanit", sans-serif;
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: #d9c108;
}

:root {
    --black: #060e11;
    --orange: #d9c108;
}

::-webkit-scrollbar {
    width: 10px;
}
  
::-webkit-scrollbar-track {
    background: #d9c108;
}

::-webkit-scrollbar-thumb {
    background: #060e11;
}

::-webkit-scrollbar-thumb:hover {
    background: #060e11e8;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 5%;
    position: sticky;
    top: 0;
    background: #d9c108e7;
    z-index: 999;
    transition: 0.3s;
}

header ul{
    margin-left: -20px;
}

#name{
    cursor: pointer;
    color: var(--black);
    font-weight: 500;
    font-size: 45px;
}

.navlinks{
    display: inline;
    position: relative;
    top: 5px;
    padding: 0px 16px;
}

.navlinks a{
    color: var(--black);
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.2s ease 0s;
    padding-inline: 3px;
}

.navlinks a:hover{
    background-color: #060e11;
    color: #d9c108;
    transition: 0.2s;
}

.primary{
    padding: 7px 18px;
    background-color: #060e11;
    color: #d9c108;
    border-radius: 0px 5px;
    border: 2px solid #060e11;
    font-size: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.primary:hover{
    transition: 0.3s;
    border-color: #060e11e8;
    background-color: #060e11e8;
}

nav{
    display: none !important;
    z-index: 999 !important;
}

nav ion-icon, #canvas ion-icon{
    width: 30px;
    height: 30px;
}

#namemob{
    font-size: 35px !important;
    font-weight: 500;
    color: var(--black);
    text-decoration: none;
}

#canvas{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #d9c108 70%, #060e11 50%);
    z-index: 9999 !important;
    display: none;
}

#canvas button{
    margin-left: 4%;
    margin-top: 30px;
}

#canvasheader{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 4%;
}

#linksmobile{
    margin-left: 5%;
}

#first{
    margin-top: 35px !important;
}

#linksmobile a{
    display: block;
    margin-top: 15px;
    text-decoration: none;
    color: var(--black);
    font-size: 20px;
}

@media only screen and (min-width: 850px){
    #canvas{
        display: none !important;
    }
}

@media only screen and (min-width: 850px) and (max-width: 1000px){
    #name{
        font-size: 30px;
    }

    .navlinks a{
        font-size: 18px;
    }

    .navlinks{
        padding: 0 8px;
    }
}

@media only screen and (max-width: 850px){
    nav{
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px 4%;
        position: sticky;
        top: 0;
        background: #d9c108ea;
        transition: 0.3s;
    }

    header{
        display: none;
    }
}

#home{
    padding: 30px 5%;
    display: flex;
}

.symbols{
    width: 50%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    background-color: #060e11;
    border-radius: 0px 20px;
    z-index: -5;
}

#building{
    width: 50%;
    transition: 0.3s;
}

#settings{
    width: 28%;
    z-index: -1;
    animation: spin 7s linear infinite;
    position: relative;
    bottom: 20%;
    right: 14%;
    transition: 0.3s;
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

.textside{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-direction: column;
    width: 50%;
    border-top-left-radius: 20px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='2000' height='1200' preserveAspectRatio='none' viewBox='0 0 2000 1200'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1030%26quot%3b)' fill='none'%3e%3crect width='2000' height='1200' x='0' y='0' fill='rgba(217%2c 193%2c 8%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c594.58C110.54%2c586.949%2c162.267%2c453.585%2c242.163%2c376.813C305.067%2c316.369%2c387.8%2c272.85%2c419.435%2c191.55C450.387%2c112.006%2c427.839%2c24.627%2c411.828%2c-59.212C396.489%2c-139.529%2c370.668%2c-214.587%2c328.495%2c-284.642C279.093%2c-366.706%2c239.61%2c-476.316%2c146.702%2c-499.622C53.432%2c-523.019%2c-24.007%2c-423.075%2c-116.343%2c-396.229C-209.037%2c-369.279%2c-320.983%2c-404.279%2c-394.874%2c-342.161C-470.508%2c-278.578%2c-501.202%2c-170.961%2c-501.84%2c-72.154C-502.443%2c21.18%2c-439.336%2c98.068%2c-398.259%2c181.879C-358.442%2c263.12%2c-327.473%2c346.696%2c-264.648%2c411.8C-188.661%2c490.542%2c-109.167%2c602.116%2c0%2c594.58' fill='%23b6a207'%3e%3c/path%3e%3cpath d='M2000 1886.2640000000001C2125.809 1855.642 2163.761 1693.437 2266.303 1614.376 2356.061 1545.172 2503.4809999999998 1554.098 2558.987 1455.281 2614.592 1356.287 2572.834 1231.467 2542.902 1121.942 2515.7309999999998 1022.52 2458.25 939.057 2395.551 857.2529999999999 2329.046 770.483 2267.7690000000002 673.703 2166.947 631.432 2061.071 587.042 1938.37 582.983 1829.7 620.01 1723.115 656.326 1654.299 751.665 1576.15 832.732 1493.438 918.533 1380.029 990.518 1359.38 1107.893 1338.623 1225.881 1422.722 1332.003 1468.8690000000001 1442.559 1516.757 1557.287 1539.526 1688.348 1634.935 1768.0520000000001 1735.127 1851.752 1873.151 1917.1390000000001 2000 1886.2640000000001' fill='%23f6dc0f'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1030'%3e%3crect width='2000' height='1200' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

.textside h1{
    font-size: 5vw;
    font-weight: 500;
    color: #060e11;
}

.textside h3{
    font-weight: 400;
    font-size: 1.5vw;
    color: #060e11;
    position: relative;
    bottom: 10px;
    padding-inline: 10px;
    text-align: center;
}

.textside>div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.secondary{
    padding: 7px 18px;
    background-color: transparent;
    color: #060e11;
    border-radius: 0px 5px;
    border: 2px solid #060e11;
    font-size: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.secondary:hover{
    transition: 0.3s;
    background-color: #bda808;
}

@media only screen and (max-width: 1000px) and (min-width: 722px){
    .textside h1{
        font-size: 6vw;
    }

    .textside h3{
        font-size: 2vw;
    }

    .textside button{
        font-size: 17px;
    }
}

@media only screen and (max-width: 722px){
    #home{
        flex-direction: column-reverse;
    }

    .textside, .symbols{
        width: 100%;
    }

    .textside{
        padding-top: 100px;
        padding-bottom: 100px;
        gap: 40px;
    }

    .symbols{
        height: 400px;
    }

    .textside h1{
        font-size: 50px;
    }

    .textside h3{
        font-size: 4.5vw;
    }

    .textside button{
        font-size: 17px;
    }
}

#about{
    padding: 40px 5%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
    background-color: #bda808;
}

#about h1{
    font-size: 70px;
    font-weight: 500;
}

#about p{
    padding-inline: 20px;
    font-size: 26px;
    width: 70%;
    text-align: center;
}

.features{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 27%);
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.features div{
    padding: 35px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    background-color: #060e11;
    border-radius: 0px 10px;
}

.features img{
    height: 200px;
}

.features h2{
    color: #d9c108;
    font-size: 2vw;
    font-weight: 500;
}

.features h4{
    color: white;
    text-align: center;
    font-weight: 400;
    font-size: 1vw;
}

@media only screen and (max-width: 1300px) and (min-width: 945px){
    .features{
        grid-template-columns: repeat(3, 30%);
    }

    #about p{
        width: 85%;
        font-size: 22px;
    }

    .features h2{
        font-size: 2.3vw;
    }

    .features h4{
        font-size: 1.2vw;
    }
}

@media only screen and (max-width: 945px) and (min-width: 670px){
    .features{
        grid-template-columns: repeat(2, 44%);
        row-gap: 30px;
    }

    #about p{
        width: 90%;
        font-size: 22px;
    }

    .features h2{
        font-size: 30px;
    }

    .features h4{
        font-size: 18px;
    }

    .features div:nth-child(3){
        position: relative;
        left: 60%;
        width: 110%;
    }
}

@media only screen and (max-width: 670px) and (min-width: 570px){
    .features{
        grid-template-columns: repeat(2, 48%);
        row-gap: 30px;
    }

    #about p{
        width: 90%;
        font-size: 22px;
    }

    .features h2{
        font-size: 30px;
    }

    .features h4{
        font-size: 18px;
    }

    .features div:nth-child(3){
        position: relative;
        left: 55%;
        width: 110%;
    }
}

@media only screen and (max-width: 570px){
    .features{
        grid-template-columns: repeat(1, 100%);
        row-gap: 30px;
    }

    #about h1{
        font-size: 50px;
    }

    #about p{
        width: 100%;
        font-size: 20px;
    }

    .features h2{
        font-size: 30px;
    }

    .features h4{
        font-size: 18px;
    }
}

#manager, #reception, #service{
    padding: 50px 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reception{
    flex-direction: row-reverse;
    background-color: #bda808;
}

.manimg, .mantext{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
}

#manager img{
    width: 100%;
}

#reception img{
    width: 80%;
    border-radius: 0px 10px;
}

#service img{
    width: 50%;
}

.mantext h1{
    font-size: 60px;
    font-weight: 500;
}

.mantext ul{
    list-style: url("./assets/square.png");
}

.mantext li{
    font-size: 25px;
    font-weight: 400;
}

@media only screen and (max-width: 1200px) and (min-width: 750px){
    .mantext li{
        font-size: 18px;
    }

    #manager img{
        width: 110%;
    }

    .mantext h1{
        font-size: 40px;
    }
}

@media only screen and (max-width: 750px){
    #manager .manimg{
        padding-left: 40px;
    }

    #manager img{
        width: 110%;
    }

    #manager, #reception, #service{
        flex-direction: column;
    }

    .manimg, .mantext{
        width: 100%;
    }

    .mantext h1{
        font-size: 40px;
        margin-top: 20px;
    }

    .mantext li{
        font-size: 18px;
    }
}

#partners{
    padding: 40px 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#partnertext, #partnerimg{
    width: 50%;
}

#partnertext{
    display: flex;
    flex-direction: column;
    align-items: space-between;
    justify-content: flex-start;
    gap: 50px;
}

#partnertext h3{
    font-weight: 500;
    font-size: 35px;
}

#partnertext h1{
    color: rgba(50, 50, 50, 0.39);
    font-size: 50px;
    font-weight: 500;
}

#partnerimg{
    display: grid;
    grid-template-columns: repeat(2, 48%);
    grid-column-gap: 4%;
    grid-row-gap: 30px;
}

#partnerimg div{
    background-color: #bda808;
    border-radius: 0px 10px;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 200px;
}

#partnerimg h2{
    font-size: 32px;
    width: 80%;
    text-align: center;
    font-weight: 500;
}

#partnerimg ion-icon{
    position: relative;
    top: 6px;
    width: 25px;
    height: 25px;
}

#partnerimg p{
    font-size: 18px;
}

@media only screen and (max-width: 1600px) and (min-width: 1000px){
    #partnerimg{
        width: 65%;
    }

    #partnertext{
        width: 35%;
    }

    #partnertext h1{
        font-size: 40px;
    }
}

@media only screen and (max-width: 1000px) and (min-width: 570px){
    #partnertext, #partnerimg{
        width: 100%;
    }

    #partnertext{
        justify-content: center;
        align-items: center;
    }

    #partnertext h3{
        font-size: 70px;
        margin-bottom: 30px;
    }

    #partnerimg h2{
        width: 95%;
    }

    #partners{
        flex-direction: column;
    }

    #partnertext h1{
        display: none;
    }
}

@media only screen and (max-width: 570px){
    #partnertext, #partnerimg{
        width: 100%;
    }

    #partnertext{
        justify-content: center;
        align-items: center;
    }

    #partnerimg{
        grid-template-columns: repeat(1, 100%);
        gap: 20px;
    }

    #partnertext h3{
        font-size: 50px;
        margin-bottom: 30px;
    }

    #partnerimg h2{
        width: 95%;
    }

    #partners{
        flex-direction: column;
        padding: 30px 5%;
    }

    #partnertext h1{
        display: none;
    }
}

#price{
    background-color: #060e11;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 250px;
    gap: 10px;
}

#price h3{
    color: #d9c108;
    font-weight: 400;
    font-size: 24px;
    padding-inline: 10px;
    text-align: center;
}

#price h1{
    color: white;
    font-weight: 400;
    font-size: 50px;
}

#price span{
    color: #d9c108;
}

#price button{
    border: 2px solid #d9c108;
    color: white;
    background-color: #060e11;
    padding: 10px 17px;
    border-radius: 0px 7px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

#price button:hover{
    transition: 0.3s;
    background-color: #3b350333;
}

@media only screen and (max-width: 768px){
    #price h1{
        font-size: 40px;
        padding-inline: 10px;
        text-align: center;
    }

    #price h3{
        font-size: 20px;
    }
}

@media only screen and (max-width: 555px){
    #price{
        height: 300px;
    }

    #price h3{
        font-size: 18px;
    }
}

#contactsection{
    display: flex;
    margin-top: 60px;
    margin-bottom: 60px;
}

#contacttext{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    padding: 30px;
    background-color: #060e11;
    color: var(--orange);
    width: 45%;
}

#contacttext div h1{
    font-size: 70px;
    font-weight: 500;
    margin-bottom: 10px;
}

#contacttext div h3{
    width: 90%;
    font-weight: 400;
}

#contacttext div div{
    display: flex;
    margin-top: 10px;
}

#contacttext h2{
    font-weight: 400;
    font-size: 23px;
}

.contacticons{
    width: 25px;
    height: 25px;
    margin-right: 10px;
    position: relative;
    top: 5px;
}

#contactinfo{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 55%;
    padding-inline: 30px;
    gap: 30px;
}

#contactinfo h1{
    font-size: 60px;
    font-weight: 500;
}

#contactinfo input{
    width: 70%;
}

#contactinfo input[type=text]{
    padding: 7px 0;
    font-size: 18px;
    border: none;
    border-bottom: 2px solid #060e11;
    background: transparent;
    outline: none;
    border-radius: 0 !important;
}

#contactinfo button[type=submit]{
    border: 2px solid #060e11;
    border-radius: 0px 10px;
    background-color: #060e11;
    color: var(--orange);
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: 0.3s;
    width: 70%;
}

#contactinfo button[type=submit]:hover{
    background-color: #060e11e7;
    transition: 0.3s;
}

#contactmessage{
    height: 100px;
    width: 70%;
    resize: none;
    padding: 7px 0;
    font-size: 18px;
    border: none;
    border-bottom: 2px solid #060e11;
    background: transparent;
    outline: none;
    border-radius: 0 !important;
}

input::placeholder, textarea::placeholder{
    color: #060e11d3;
}

@media only screen and (max-width: 920px) and (min-width: 660px){
    #contacttext div h1{
        font-size: 50px;
    }

    #contacttext div h2{
        font-size: 20px;
    }

    #contactinfo h1{
        font-size: 40px;
    }

    #contactinfo input, #contactmessage{
        width: 100%;
    }
}

@media only screen and (max-width: 659px){
    #contacttext, #contactinfo{
        width: 100%;
    }

    #contactsection{
        flex-direction: column;
    }

    #contacttext div h1{
        font-size: 50px;
    }

    #contacttext div h2{
        font-size: 20px;
    }

    #contactinfo h1{
        font-size: 50px;
        margin-top: 30px;
    }

    #contactinfo input, #contactmessage{
        width: 100%;
    }
}

.requestform{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 70px;
    padding: 50px 3%;
}

.head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 30%;
}

.requestform ion-icon{
    width: 28px;
    height: 28px;
    color: #060e11;
    cursor: pointer;
}

.requestform .form{
    width: 30%;
    background-color: #bda808;
    padding: 40px;
    border-radius: 0px 7px;
}

.requestform h1{
    font-weight: 500;
    font-size: 45px;
}

.requestform input{
    border: none;
    border-bottom: 2px solid #060e11;
    background-color: transparent;
    outline: none;
    font-size: 18px;
    width: 100%;
    border-radius: 0 !important;
    margin-top: 20px;
}

@media only screen and (max-width: 1440px) and (min-width: 1000px){
    .requestform .form, .head{
        width: 45%;
    }
}

@media only screen and (max-width: 1000px) and (min-width: 700px){
    .requestform .form, .head{
        width: 65%;
    }
}

@media only screen and (max-width: 700px) and (min-width: 550px){
    .requestform .form, .head{
        width: 75%;
    }
}

@media only screen and (max-width: 550px){
    .requestform .form, .head{
        width: 95%;
        padding: 20px;
    }

    
    .requestform h1{
        font-size: 30px;
    }
}

footer{
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #060e11;
    color: #d9c108;
    font-size: 20px;
}