@font-face {
    font-family: domaine;
    src: url(./domainedispcond.ttf);
}
@font-face {
    font-family: canopee;
    src: url(./canopee.ttf);
}
@font-face {
    font-family: editorial;
    src: url(./editorialnewlight.ttf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}
html,body{
    height: 100%;
    width: 100%;
}
#main{
    background-color: #1D1D1B;
    overflow-x: hidden;
}
#page1{
    height: 132.5vh;
    width: 100vw;
    background-color: #C4BCB2;
    position: relative;
    /* overflow: hidden; */
    border: none;
}
#nav{
    height: 11vh;
    width: 100%;
    /* background-color: yellow; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    border-bottom: 1px solid #827e77;
}
#nav img{
    height: 3vh;
    width: 30%;
    cursor: pointer;
}
#nav i{
    width: 30%;
    text-align: right;
}
#nav h5{
    font-size: 1vw;
    font-weight: 200;
    width: 30%;
    font-family: editorial;
}

#elems{
    height: 45vh;
    width: 100%;
    /* background-color: yellow; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 3vw;
}
#elem1{
    height: 100%;
    width: 30%;
    cursor: pointer;
}
#elem1 #img-div{
    height: 60%;
    border: 1.5px solid #1B1B19;
    overflow: hidden;
}
#elem1 #img-div img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: all ease 0.5s;
}
#img-div:hover img{
    transform: scale(1.1);
}
#elem1 h3{
    font-family: canopee;
    color: #1B1B19;
    font-size: 1.5vw;
    margin: 12px 0;
    display: inline-block;
    transform: scaleY(1.2);
}
#elem1 h3 span{
    background-color: #B73C12;
    padding: 3px 5px;
    color: #C1B9B0;
    font-size: 1.1vw;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    transform: scaleY(0.8);
}
#elem1 p{
    font-family: editorial;
    color: #1B1B19;
    font-weight: 500;
    font-size: 1.2vw;
}
#elem2{
    height: 100%;
    width: 30%;
    text-align: center;
    border-right: 2px solid #827e77;
    border-left: 2px solid #827e77;
}
#elem2 h2{
    font-size: 4vw;
    font-family: canopee;
    font-weight: 300;
    /* padding-top: 10px; */
    letter-spacing: -2px; 
    display: inline-block;
    transform: scaleY(1.1);
}
#elem2 h5{
    font-size: 2.5vw;
    font-family: editorial;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 2.8vw;
    padding: 0 4vw;
    margin-top: 1.2vw;
    color: #343431;
}
#elem2 p{
    font-size: 1.1vw;
    font-family: editorial;
    margin-top: 2vw;
}
#elem2 p span{
    font-weight: 600;
    letter-spacing: 1px;
}
#elem3{
    height: 100%;
    width: 30%;
    cursor: pointer;   
}
#elem3 #img-div{
    height: 60%;
    border: 1.5px solid #1B1B19;
    overflow: hidden; 
}
#elem3 #img-div img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: all ease 0.5s;
}
#img-div:hover img{
    transform: scale(1.1);
}
#elem3 h3{
    font-family: canopee;
    color: #1B1B19;
    font-size: 1.6vw;
    letter-spacing: 0.8px;
    margin: 12px 0;
    display: inline-block;
    transform: scaleY(1.2);
}
#elem3 h3 span{
    background-color: #B73C12;
    padding: 3px 5px;
    color: #C1B9B0;
    font-size: 1.1vw;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    transform: scaleY(0.8);
}
#elem3 p{
    font-family: editorial;
    color: #1B1B19;
    font-weight: 500;
    font-size: 1.2vw;
}
#hero-text-div{
    height: 70vh;
    width: 94%;
    background-color: red;
    position: absolute;
    background-color: #1B1B19;
    left: 2.8%;
    margin-top: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero-text-div h1{
    color: #C4BCB2;
    font-family: canopee;
    font-size: 36vw;
    font-weight: 300;
    letter-spacing: -1.8vw;
    /* display: inline-block;
    transform: scaleY(1.09); */
}
#page2{
    height: 160vh;
    width: 100%;
    background-color: #C4BCB2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 3vw 3vw;
    border: none;
    overflow: hidden;
}
#page2-left{
    /* height: 80%; */
    width: 35%;
    /* background-color: red; */
    /* margin-top: 5vw; */
    padding-right: 3vw;
    border-right: 1px solid #827e77;
}
#page2-left img{
    height: 45%;
    width: 100%;
    object-fit: cover;
    margin-top: 2vw;
}
#line-sathicha-div{
    border-bottom: 1px solid #827e77;
}
#page2-left h2{
    font-size: 7vw;
    font-family: canopee;
    text-align: center;
    color: #1C1C19;
}
#page2-left h2 span{
    font-size: 8vw;
    line-height: 8vw;
    display: inline-block;
    transform: scale(1.5);
}
#page2-left p{
    font-size: 2.2vw;
    font-family: editorial;
    font-weight: 100;
    line-height: 2.5vw;
    margin-top: 1vw;
    color: #1C1B19;
}
#page2-right{
    /* height: 80%; */
    width: 65%;
    /* background-color: blue; */
    padding-left: 3vw;
}
#page2-right img{
    width: 100%;
    object-fit: cover;
}
#page2-right h4{
    font-family: canopee;
    font-size: 7vw;
    font-weight: 100;
    line-height: 6.9vw;
    color: #1C1B19;
    display: inline-block;
    transform: scaleY(1.2);
}

#page2-right #pahila{
    margin-top: 2vw;
}
#page3 {
    height: 75vh;
    /* padding-bottom: 100px; */
    position: relative;
    background-color: #C4BCB2;
    padding: 5vw 3vw;
    border: none;
    overflow: hidden;
}

#page3 h2 {
    font-size: 28vw;
    font-weight: 100;
    letter-spacing: -1vw;
    background-color: #1C1B19;
    width: fit-content;
    color: #C4BCB2;
    padding: 0 2vw;
    line-height: 25vw;
    font-family: canopee;
    display: inline-block;
    transform: scaleY(1.09);
}

#page3 img {
    height: 25vw;
    position: absolute;
    top: 10%;
    right: 2.5%;

}
#page4 {
    height: 160vh;
    width: 100%;
    background-color: #C4BCB2;
    padding: 0 3vw;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
#page4-left{
    height: 150vh;
    width: 65%;
    /* background-color: indigo; */
    overflow: hidden;
    padding-right: 3vw;
    border-right: 2px solid #827e77;
}
#page4-left-top{
    height: 45vh;
    width: 100%;
    /* background-color: aqua; */
}
#page4-elems{
    height: 100%;
    width: 100%;
    /* background-color: yellow; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 2vw 3vw; */
}
#page4-elem1{
    height: 100%;
    width: 45%;
    /* text-align: center; */
    border-right: 2px solid #827e77;
}
#page4-elem1 h2{
    font-size: 3.8vw;
    font-family: canopee;
    /* font-weight: 300; */
    /* padding-top: 10px; */
    /* letter-spacing: -2px;  */
    display: inline-block;
    transform: scaleY(1.2);
}
#page4-elem1 h5{
    font-size: 2.8vw;
    font-family: editorial;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 3vw;
    padding-right: 2vw;
    margin-top: 1.2vw;
    color: #343431;
}
#page4-elem1 p{
    font-size: 1.1vw;
    font-family: editorial;
    margin-top: 2vw;
}
#page4-elem1 p span{
    font-weight: 600;
    letter-spacing: 1px;
}

#page4-elem2{
    height: 100%;
    width: 55%;
    padding-left: 2vw;
    cursor: pointer;
}
#page4-elem2 #img-div{
    height: 60%;
    border: 1.5px solid #1B1B19;
    overflow: hidden;
}
#page4-elem2 #img-div img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: all ease 0.5s;
}
#page4-elem2 img-div:hover img{
    transform: scale(1.1);
}
#page4-elem2 h3{
    font-family: canopee;
    color: #1B1B19;
    font-size: 1.5vw;
    margin: 12px 0;
    display: inline-block;
    transform: scaleY(1.2);
}

#page4-elem2 p{
    font-family: editorial;
    color: #1B1B19;
    font-weight: 500;
    font-size: 1.2vw;
}
#page4-left-bottom{
    height: 105vh;
    width: 100%;
    /* background-color: magenta; */
    margin-top: 2vw;
}
#page4-left-bottom img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#page4-right{
    height: 150vh;
    width: 35%;
    /* background-color: yellowgreen; */
    padding-left: 4vw;
}
#page4-line-sathicha-div{
    border-bottom: 1px solid #827e77;
}
#page4-right h2{
    font-size: 6vw;
    font-family: canopee;
    text-align: center;
    color: #1C1C19;
    display: inline-block;
    transform: scaleY(1.1);
}
#page4-right h2 span{
    font-size: 8vw;
    line-height: 8vw;
    display: inline-block;
    transform: scale(1.5);
}
#page4-right p{
    font-size: 2.2vw;
    font-family: editorial;
    font-weight: 500;
    line-height: 2.5vw;
    margin-top: 4vw;
    color: #1C1B19;
}
#page4-right #anda{
    height: 30vh;
    width: 29vw;
    border-radius: 50%;
    background-color: #C1B9B0;
    margin-top: 5vw;
    border: 1px solid #1C1B19;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
    cursor: pointer;
}
#anda h2{
    font-family: canopee;
    font-size: 5vw;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(33%);
    transition: all ease 0.3s;
    transition-delay: 0.5s;
    /* background-color: red; */
}
#anda img{
    height: 8vh;
    transform: translateX(-300%);
    transition: all ease 0.3s;
    transition-delay: 0.5s;
}
#anda:hover h2{
    transform: translateX(200%)
}
#anda:hover img{
    transform: translateX(-85%)
}

#page5{
    min-height: 30vh;
    width: 100%;
    background-color: #C4BCB2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3vw;
    border: none;
    overflow: hidden;
    
}
#page5 #scrolling-div{
    height: 25vh;
    width: 100%;
    /* background-color: yellow; */
    border-top: 1px solid #827e77;
    border-bottom: 1px solid #827e77;
    display: inline-block;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: pointer;
}
#page5 #scrolling-div h2{
    font-family: editorial;
    font-size: 6vw;
    font-weight: 100;
    display: inline-block;
    white-space: nowrap;
    margin-right: 30px;
    animation-name: scroll;
    animation-duration: 3.55s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#scrolling-div::-webkit-scrollbar {
    display: none;
}
#page5 #scrolling-div h2 span{
    font-family: canopee;
    background-color: #1C1B19;
    color: #C4BCB2;
    padding: 0.5vw;
}
@keyframes scroll {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-100%);
    }
}
#scrolling-div:hover h2{
    animation-play-state: paused;
}