@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap');

body,
html {
font-family: 'Cairo', sans-serif;
overflow-x: hidden;

}

p{
text-align: left;
font-size: 16px;
}

p4{
    font-family: 'Noto Sans Thai', sans-serif;
    text-align: justify;
    font-size: 16px;
    margin-left: 2.5em;
    }

h1{
    font-family: 'Noto Sans Thai', sans-serif;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    }

    h3{
        font-family: 'Noto Sans Thai', sans-serif;
        
        margin-right: auto;
        margin-bottom: -4px;
        margin-top: -1px;
        font-size: 18px;
        padding-top: 1em;
       
        }

*, *::before, *::after {
box-sizing: border-box;
}

.no-scroll {
overflow: hidden;
}

.container {
    background-color: #5B2C6F;
padding-left: 2em;
padding-right: 2em;
display: flex;
}

.container2 {
background-color: rgb(9, 255, 0);
display: flex;
}

.container3 {
    
    background-color: #5B2C6F;
    text-align: justify;
    padding-left: 2em;
    padding-right: 2em;
    color: white;
    }

.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}

.center-image, .card__background img {
width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
-o-object-fit: cover;
object-fit: cover;
}

.slick-slide {
padding: 2em 0.5em;
}

.card-slider {
margin: auto;
width: 100%;
}

.card {
background: #fff;
display: flex;
padding-bottom: 2em;
flex-direction: column;
/*align-items: flex-start;*/
justify-content: flex-end;
border-radius: 20px;
overflow: hidden;
position: relative;
z-index: 1;
height: 200px;
box-shadow: 0 30px 50px -25px rgba(0, 0, 0, 0.25);
}

.card > * {
transition: opacity 350ms;
}

.card--opened > * {
opacity: 0;
}

.card__background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
text-align: left;
}

.card__background::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to top, #fff 0, rgba(255, 255, 255, 0) 70%);
}

.card__title {
margin: 0.5em 0;
color: #000;
font-weight: bold;
text-align: center !important;
    font-size: 28px;
}



h3.card__title{
font-size: 20px;
padding-left: 35px;
padding-right: 35px;
margin-bottom: -20px;
}

.card__duration {
color: darkgray;
text-align:left;
}

.modal-wrapper, .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.modal-wrapper {
display: flex;
}

.overlay {
background: rgba(0, 0, 0, 0.5);
transition: opacity 150ms ease;
}

.modal {
overflow: hidden;
position: relative;
margin: auto;
width: 90vw;
height: 60vh;
max-width: 500px;
background: #fff;
border-radius: 20px;
}

.modal__scroll-area {
height: inherit;
overflow: auto;
border-radius: inherit;
position: relative;
z-index: 1;
}

.modal__close-button {
background: transparent;
border: none;
margin-bottom: auto;
color: #524545;
position: absolute;
top: 0;
right: 0;
padding: 2em;
z-index: 2;
}

.modal__header {
text-align: center;
position: relative;
display: flex;
padding: 0.5em;
flex-direction: column;
justify-content: flex-end;
align-items: center;
min-height: 300px;
z-index: 1;
}

.modal__content {
padding: 2em;
color: #666;
line-height: 1.5;
text-align: right;
}

[data-modal-state=closed] .modal-wrapper {
pointer-events: none;
}
[data-modal-state=closed] .overlay {
pointer-events: none;
}
[data-modal-state=closed] .modal {
opacity: 0;
}
[data-modal-state=closed] .overlay {
opacity: 0;
}

[data-modal-state=opening] .modal__header, [data-modal-state=opening] .modal__content, [data-modal-state=opening] .modal__close-button, [data-modal-state=closing] .modal__header, [data-modal-state=closing] .modal__content, [data-modal-state=closing] .modal__close-button {
opacity: 0;
}

[data-modal-state=opening] .overlay {
transition: opacity 500ms ease;
}

[data-modal-state=closing] .overlay {
opacity: 0;
transition: opacity 500ms ease;
}

[data-modal-state=open] .modal__header, [data-modal-state=open] .modal__content {
transition: opacity 450ms;
}


@media only screen and (max-width: 600px) {



.img1,p {
padding-left: 35px;
padding-right: 35px;
}

.modal__content{
padding: unset;
}

h1.card__title{
font-size: 20px;
padding-left: 35px;
padding-right: 35px;
}
}