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

* {
    font-family: 'Noto Sans Thai', sans-serif;
    font-family: 'Mitr', sans-serif;*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans Thai', sans-serif;
    font-family: 'Mitr', sans-serif;
    z-index: 0;
}

:root {
    /* --orange: #f97a60; */
    --orange: #ba2609;
    --white: #ffffff;
    --black: #2a2a2a;
    --test: #a8838300;
    --fb: rgb(26, 62, 130);
    --dc: rgb(65, 91, 197);
    --itch:rgb(224, 49, 49);
}

body {
    /* background-color: var(--white); */
    background-color: var(--black);
    /* background-color: #e95d3a; */
    width: auto;

}


wrapper {
    display: none;
    margin: 0 auto;
    width: 100%;
    align-items: stretch;
    background-color: #423f3f;
    /* background-color: #e95d3a; */
    /* background-color: #ef6526; */
    /* background-color: #cc4435; */
}

divv {
    border: var(--test);
}

banner {
    /* background-image: url(assets/bg-240127194906.PNG); */
    /* object-fit: cover; */
    z-index: 1;
    /* background-color: var(--orange); */
    /* background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.4)); */
    /* background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.64)); */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
    /* border: var(--test) solid 1px; */
    width: auto;
    height: 88vh;
    /* height: 640px; */
    /* height: calc(80%-100px); */
    box-shadow: 0px 0px 4px #444;
}

banner_bg {
    position: absolute;
    z-index: -4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* opacity: 0.5; */
    overflow: hidden;
}

.banner_bg {
    object-fit: cover;
}

banner_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -3;
    background-image: linear-gradient(357deg, #3b0300, #bf6e303d);
    /* background-image: linear-gradient(4deg, #230500, #bf6e303d); */
    /* background-image: linear-gradient(4deg, #4e2300, #bf6e303d); */
}

box {
    display: flex;
    align-items: end;
    justify-content: space-between;
    border: var(--test) solid 1px;
    width: 92%;
    height: 250px;
    margin-bottom: 48px;
}

p_picture {
    /* position: relative; */
    display: block;
    left: 64px;
    flex-shrink: 0;
    border: var(--test) solid 4px;
    width: 248px;
    height: 248px;
    border-radius: 88px;
    box-shadow: 0px 0px 4px #444;
    overflow: hidden;
    transition: 0.22s;
    /* border: #a00000 2px solid; */


}


p_picture>img {
    /* position: absolute; */
    width: 100%;
    height: 110%;
    object-fit: cover;
    clip: rect(10px, 20px, 40px, 80px);
    transform: scale(1.2);

}


t_box {
    display: flex;
    justify-content: end;
    align-items: end;
    flex-direction: column;
    margin-right: 16px;
    border: var(--test) solid 1px;
    width: 600px;
    height: 80%;
}

t_box>space_ {
    height: 8px;
}

t_box>* {
    text-align: end;
    letter-spacing: 2px;
    color: white;
}

t_box>h3 {
    letter-spacing: 5px;
    font-size: 60px;

}

mid {
    display: flex;
    justify-content: center;
    border: var(--test) solid 1px;
    width: 80%;
    margin-left: 24px;
    /* height: 388px; */
    height: 480px;
    align-items: center;
    color: white;

}

t_mid {
    display: flex;
    flex-direction: column;
    border: var(--test) solid 1px;
    width: 1000px;
    height: 240px;
}

t_mid>h1 {
    margin-top: 20px;
    font-size: 84px;
}

t_mid>h5 {
    opacity: 0.65;
}

b_connec {
    background-color: var(--white);
    border-radius: 0px 0px 40px 40px;
    display: flex;
    height: 64px;
    width: auto;
    border: var(--test) solid 1px;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 6px 4px #44444476;
}

b_icon {
    margin: 0px 48px;
    display: flex;
    height: 44px;
    width: 44px;
    transition: 0.22s;
    /* border: var(--test) solid 1px; */
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    border: 1px black solid;
}

.fb_ {
    border: 1px var(--fb) solid;
}

.dc_ {
    border: 1px var(--dc) solid;
}
.itch_{
    border: 1px var(--itch) solid; 
}
b_icon>* {
    font-size: 24px;
}

.fb {
    color: var(--fb);
}

.dc {
    color: var(--dc);
}
.itch{
    color: var(--itch);
}
footer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--test) solid 1px;
    width: auto;
    padding: 50px 0;
    /* height: 200px; */
    background-color: var(--black);
    color: var(--white);
}

.footer_aff {
    color: rgb(57, 141, 219);
    transition: 0.22s;
}

space_ {
    height: 32px;
    border: var(--test) solid 1px;
}

p_picture:hover {
    scale: 1.02;
    box-shadow: 0px 0px 2px var(--black);
}

b_icon:hover {
    scale: 1.06;
    box-shadow: 0px 0px 2px var(--black);
}

.footer_aff:hover {
    color: white;
}

/* for smaller desktop */
@media only screen and (max-width: 1000px) {
    box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: var(--test) solid 1px;
        width: 480px;
        height: 82%;
        margin-bottom: 64px;
    }

    p_picture {
        transition: 0.22s;
        margin-top: 100px;
        border: var(--test) solid 4px;
    }

    t_box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
        margin-right: 0;
        border: var(--test) solid 1px;
        width: 520px;
        height: 256px;

    }

    t_box>h3 {
        font-size: 48px;
    }

    t_mid {
        text-align: center;
        border: var(--test) solid 1px;
        width: 632px;
        height: 240px;

    }

    t_mid>h1 {
        font-size: 76px;

    }

    /* mid {
        display: flex;
        justify-content: center;
        border: var(--test) solid 1px;
        width: 80%;
        margin-left:24px ;
        height: 424px;
        align-items: center;
     */

    mid {
        margin: 0;
        width: 100%;
        height: 500px;
    }
}