.elms-34417 .elms-element.elms-element-921ce83{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-d8ebea5{width:100%;max-width:100%;}.elms-34417 .elms-element.elms-element-a9310a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-c892c33{width:100%;max-width:100%;}.elms-34417 .elms-element.elms-element-57760a6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-8d80fdd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-01b47cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-d79f1ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-8d5f823{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-12dbbfa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-d00057f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-6388241{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-b4c1fb3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-1d60ec8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elms-widget-text-editor.elms-drop-cap-view-stacked .elms-drop-cap{background-color:var( --e-global-color-primary );}.elms-widget-text-editor.elms-drop-cap-view-framed .elms-drop-cap, .elms-widget-text-editor.elms-drop-cap-view-default .elms-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elms-34417 .elms-element.elms-element-1eb8df6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-0becf7f{width:100%;max-width:100%;}.elms-34417 .elms-element.elms-element-eed9fa1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-e5a11b5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-0e2c813{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elms-34417 .elms-element.elms-element-14ff2ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.yala-nature-section {
max-width: 850px;
margin: 40px auto;
padding: 30px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
font-family: 'Lucida Sans Unicode', sans-serif;
color: #333;
line-height: 1.7;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
.section-title {
text-align: center;
font-size: 1.6rem;
color: #006c6c;
border-bottom: 2px solid #0077b6;
padding-bottom: 10px;
margin-bottom: 25px;
}
.intro {
font-size: 1.05rem;
margin-bottom: 20px;
text-align: center;
color: #444;
}
.yala-nature-section p {
margin-bottom: 15px;
font-size: 1rem;
}
.tip-box {
background-color: #e6f4f1;
border-left: 4px solid #0077b6;
padding: 15px;
border-radius: 6px;
color: #555;
font-style: italic;
margin-top: 20px;
}
.yala-toc {
max-width: 850px;
margin: 30px auto;
padding: 20px;
border-left: 5px solid #0077b6;
background: #fefefe;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
font-family: 'Lucida Sans Unicode', sans-serif;
color: #333;
border-left-style: groove;
border-left-color: green;
border-left-width: 7px;
border-right-style: groove;
border-right-color: green;
border-right-width: 7px;
}
.yala-toc h2 {
color: black;
font-size: 1.3rem;
border-bottom: 2px solid navy;
padding-bottom: 10px;
margin-bottom: 20px;
}
.yala-toc ul {
list-style: none;
padding-left: 0;
line-height: 2;
font-size: 1rem;
color: #333;
}
.yala-toc a {
color: #0077b6;
text-decoration: none;
transition: all 0.3s ease;
padding: 5px 10px;
display: inline-block;
border-radius: 6px;
}
.yala-toc a:hover {
color: navy;
transform: translateX(6px);
}
.yala-history-section {
max-width: 900px;
margin: 40px auto;
padding: 25px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
font-family: 'Lucida Sans Unicode', sans-serif;
color: #333;
border-left-style: groove;
border-left-color: green;
border-left-width: 7px;
}
.section-title1{
text-align: center;
font-size: 1.6rem;
color: #2c3e50;
border-bottom: 2px solid #0077b6;
padding-bottom: 10px;
margin-bottom: 25px;
}
.intro {
font-size: 1rem;
line-height: 1.7;
text-align: center;
margin-bottom: 30px;
}
.history-point {
margin-bottom: 25px;
padding: 15px;
background-color: #f9f9f9;
border-left: 4px solid #0077b6;
border-radius: 6px;
}
.history-point h3 {
margin-bottom: 8px;
font-size: 1.15rem;
color: #2c3e50;
}
.history-point p {
font-size: 0.96rem;
line-height: 1.6;
}
.yala-chart-section {
max-width: 850px;
margin: 40px auto;
padding: 30px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
font-family: 'Lucida Sans Unicode', sans-serif;
color: #333;
border-left-style: groove;
border-left-color: green;
border-left-width: 7px;
}
.section-title {
text-align: center;
font-size: 1.6rem;
color: #2c3e50;
border-bottom: 2px solid #0077b6;
padding-bottom: 10px;
margin-bottom: 25px;
}
.intro {
text-align: center;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 30px;
}
.chart-container {
max-width: 600px;
height: 350px;
margin: 20px auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.season-block {
background: #f9f9f9;
padding: 15px 20px;
margin: 20px 0;
border-left: 4px solid #ccc;
border-radius: 6px;
}
.season-dry { border-left-color: #0077b6; }
.season-morning { border-left-color: #4CAF50; }
.season-evening { border-left-color: #f4a261; }
.season-full { border-left-color: #e67e22; }
.season-block h3 {
font-size: 1.1rem;
color: #2c3e50;
margin: 0 0 8px 0;
}
.tip-box {
margin-top: 30px;
padding: 15px;
background: #eaf6ff;
border-left: 4px solid #0077b6;
border-radius: 6px;
font-style: italic;
color: #555;
}
.legend-text {
text-align: center;
margin-top: 25px;
font-size: 0.95rem;
color: #444;
}
@media (max-width: 600px) {
.yala-chart-section {
padding: 20px;
}
.section-title {
font-size: 1.3rem;
}
}
.yala-climate-section {
max-width: 850px;
margin: 40px auto;
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
font-family: 'Lucida Sans Unicode', sans-serif;
color: #333;
border-left-style: groove;
border-left-color: green;
border-left-width: 7px;
}
.section-title {
text-align: center;
font-size: 1.6rem;
color: #2c3e50;
border-bottom: 2px solid #0077b6;
padding-bottom: 10px;
margin-bottom: 25px;
}
.intro {
text-align: center;
font-size: 1rem;
line-height: 1.7;
margin-bottom: 30px;
}
.clothing-guide h3 {
font-size: 1.2rem;
margin-bottom: 15px;
color: #0077b6;
}
.clothing-guide ul {
list-style: none;
padding: 0;
line-height: 1.8;
}
.clothing-guide ul li {
margin-bottom: 10px;
padding-left: 1.2em;
position: relative;
}
.clothing-guide ul li::before {
content: "🧳";
position: absolute;
left: 0;
top: 2px;
}
.yala-age-safety {
max-width: 880px;
margin: 40px auto;
padding: 30px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
font-family: 'Lucida Sans Unicode', sans-serif;
color: #333;
border-left-style: groove;
border-left-color: green;
border-left-width: 7px;
}
.section-title {
text-align: center;
font-size: 1.6rem;
color: #2c3e50;
border-bottom: 2px solid #0077b6;
padding-bottom: 10px;
margin-bottom: 30px;
}
.age-groups, .safety-tips {
margin-bottom: 30px;
}
.age-groups h3,
.safety-tips h3 {
font-size: 1.2rem;
color: #0077b6;
margin-bottom: 15px;
}
.age-groups ul,
.safety-tips ul {
list-style: none;
padding-left: 0;
line-height: 1.8;
}
.age-groups ul li,
.safety-tips ul li {
position: relative;
padding-left: 1.5em;
margin-bottom: 12px;
}
.age-groups ul li::before {
content: "👤";
position: absolute;
left: 0;
top: 2px;
}
.safety-tips ul li::before {
content: "✔️";
position: absolute;
left: 0;
top: 2px;
}
@media (max-width: 600px) {
.yala-age-safety {
padding: 20px;
}
.section-title {
font-size: 1.3rem;
}
.age-groups h3,
.safety-tips h3 {
font-size: 1rem;
}
}
.yala-map-section {
max-width: 900px;
margin: 50px auto;
padding: 25px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
font-family: 'Lucida Sans Unicode', sans-serif;
color: #333;
border-left: 7px groove green;
}
.yala-map-section .section-title {
text-align: center;
font-size: 1.5rem;
color: #2c3e50;
border-bottom: 2px solid #0077b6;
padding-bottom: 10px;
margin-bottom: 25px;
}
.yala-map-section .transport-block {
margin-bottom: 20px;
}
.yala-map-section .transport-block h3 {
font-size: 1.2rem;
margin-bottom: 8px;
color: #005f8c;
}
.yala-map-section .route-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
.yala-map-section .route-table th,
.yala-map-section .route-table td {
border: 1px solid #ccc;
padding: 12px;
text-align: left;
font-size: 0.95rem;
}
.yala-map-section .route-table th {
background-color: #f0f8ff;
font-weight: bold;
}
.yala-map-section .route-table button {
padding: 8px 14px;
background-color: #0077b6;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.yala-map-section .route-table button:hover {
background-color: #005f8c;
}
.yala-map-section .interactive-map-title {
text-align: center;
margin-bottom: 15px;
font-size: 1.3rem;
color: #2c3e50;
}
.yala-map-section .iframe-container {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.yala-map-section .iframe-container iframe {
width: 100%;
height: 420px;
border: 0;
border-radius: 10px;
}
@media (max-width: 767px) {
.yala-map-section .iframe-container iframe {
height: 300px;
}
}