.elms-34802 .elms-element.elms-element-2b9ffdc{--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-34802 .elms-element.elms-element-0c34b75{--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-34802 .elms-element.elms-element-b5f5610{--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-34802 .elms-element.elms-element-ef89ce5{--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-34802 .elms-element.elms-element-c46e2ef{--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-34802 .elms-element.elms-element-0bdbf9c{--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-34802 .elms-element.elms-element-41b8a8e{--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-34802 .elms-element.elms-element-a25a5a4{--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-34802 .elms-element.elms-element-4ef4946{--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-34802 .elms-element.elms-element-609b6df{--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-34802 .elms-element.elms-element-570cdb1{--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-34802 .elms-element.elms-element-4ec1bee{--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-34802 .elms-element.elms-element-c08ecb2{--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;}.weather-seasons-section {
max-width: 900px;
margin: 40px auto;
padding: 25px;
background-color: #e0f7f4;
border-radius: 12px;
border: 3px solid #2a9d8f;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 12px rgba(42, 157, 143, 0.15);
}
.season-heading {
text-align: center;
font-size: 1.8rem;
color: #1c5950;
margin-bottom: 15px;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
}
.season-intro {
text-align: center;
font-size: 1rem;
color: #333;
margin-bottom: 30px;
line-height: 1.6;
}
.season-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.season-box {
background-color: #ffffff;
padding: 20px;
border-left: 5px solid #2a9d8f;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(42, 157, 143, 0.1);
}
.season-box h3 {
color: #00695c;
font-size: 1.2rem;
margin-bottom: 10px;
}
.season-box p {
font-size: 0.95rem;
color: #333;
line-height: 1.5;
}
.weather-widget-container {
margin-top: 40px;
text-align: center;
}
.best-months-haputale {
max-width: 900px;
margin: 40px auto;
padding: 25px;
background-color: #e0f7f4;
border-left: 6px solid #2a9d8f;
border-radius: 12px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 12px rgba(42, 157, 143, 0.15);
}
.bm-heading {
text-align: center;
font-size: 1.8rem;
color: #1c5950;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
margin-bottom: 20px;
}
.bm-intro {
text-align: center;
font-size: 1rem;
color: #333;
margin-bottom: 30px;
line-height: 1.6;
}
.month-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.month-box {
background-color: #b2dfdb;
border-left: 4px solid #2a9d8f;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(42, 157, 143, 0.1);
}
.month-box h3 {
margin-bottom: 10px;
color: #1c5950;
font-size: 1.2rem;
}
.month-box p {
color: #222;
font-size: 0.95rem;
line-height: 1.5;
}
.haputale-season-chart {
max-width: 900px;
margin: 40px auto;
padding: 25px;
background-color: #e0f7f4;
border-radius: 12px;
font-family: 'Segoe UI', sans-serif;
border: 3px solid #2a9d8f;
box-shadow: 0 4px 12px rgba(42, 157, 143, 0.15);
}
.chart-heading {
text-align: center;
font-size: 1.8rem;
color: #1c5950;
margin-bottom: 30px;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
}
.season-comparison {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.season-block {
flex: 1 1 42%;
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 8px rgba(42, 157, 143, 0.1);
border-left: 6px solid #2a9d8f;
}
.dry-season {
background-color: #b2dfdb;
border-left-color: #2a9d8f;
}
.rainy-season {
background-color: #c8ede5;
border-left-color: #00695c;
}
.season-block h3 {
font-size: 1.3rem;
color: #00695c;
margin-bottom: 15px;
}
.season-block ul {
list-style-type: none;
padding-left: 0;
}
.season-block li {
margin-bottom: 10px;
font-size: 1rem;
color: #333;
}
.best-time-haputale {
max-width: 900px;
margin: 40px auto;
padding: 30px;
background-color: #e0f7f4;
border-radius: 12px;
border: 3px solid #2a9d8f;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 12px rgba(42, 157, 143, 0.15);
}
.btc-heading {
text-align: center;
font-size: 1.8rem;
color: #1c5950;
margin-bottom: 20px;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
}
.btc-intro {
text-align: center;
font-size: 1rem;
color: #333;
line-height: 1.6;
margin-bottom: 30px;
}
.btc-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.btc-box {
background-color: #b2dfdb;
padding: 20px;
border-left: 6px solid #2a9d8f;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(42, 157, 143, 0.1);
}
.btc-box h3 {
color: #00695c;
font-size: 1.2rem;
margin-bottom: 10px;
}
.btc-box p {
color: #333;
font-size: 0.95rem;
line-height: 1.5;
}
.special-box {
background-color: #c8ede5;
border-left-color: #00bfa5;
box-shadow: 0 6px 16px rgba(0, 191, 165, 0.3);
transform: scale(1.02);
transition: transform 0.3s ease;
}
.special-box:hover {
transform: scale(1.04);
}
.haputale-travel-guide {
max-width: 900px;
margin: 40px auto;
padding: 30px;
background-color: #e0f7f4;
border-radius: 12px;
border: 3px solid #2a9d8f;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 12px rgba(42, 157, 143, 0.15);
}
.highlight-box {
background-color: #c8ede5;
border-radius: 10px;
padding: 20px;
box-shadow: 0 6px 18px rgba(0, 191, 165, 0.2);
border-left: 6px solid #00bfa5;
transition: transform 0.3s ease;
}
.highlight-box:hover {
transform: scale(1.01);
}
.ctg-heading {
text-align: center;
font-size: 1.9rem;
color: #1c5950;
margin-bottom: 20px;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
}
.ctg-intro {
font-size: 1rem;
color: #333;
text-align: center;
line-height: 1.6;
margin-bottom: 30px;
}
.ctg-section {
margin-bottom: 25px;
}
.ctg-section h3 {
font-size: 1.3rem;
color: #00695c;
margin-bottom: 10px;
}
.ctg-section p,
.ctg-section ul {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
.ctg-section ul {
list-style-type: square;
padding-left: 20px;
}
.ctg-section ul li {
margin-bottom: 8px;
}
.haputale-chart {
max-width: 900px;
margin: 40px auto;
padding: 25px;
background-color: #e0f7f4;
border: 3px solid #2a9d8f;
border-radius: 12px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 10px rgba(42, 157, 143, 0.15);
}
.chart-title {
text-align: center;
font-size: 1.8rem;
color: #1c5950;
margin-bottom: 15px;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
}
.chart-description {
text-align: center;
font-size: 1rem;
color: #333;
margin-bottom: 25px;
}
.weather-chart-table {
width: 100%;
border-collapse: collapse;
background-color: #ffffff;
}
.weather-chart-table thead {
background-color: #2a9d8f;
color: white;
}
.weather-chart-table th, .weather-chart-table td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
font-size: 1rem;
}
.weather-chart-table tbody tr:nth-child(even) {
background-color: #b2dfdb;
}
.visit-haputale-section {
max-width: 900px;
margin: 40px auto;
padding: 30px;
background-color: #e0f7f4;
border: 3px solid #2a9d8f;
border-radius: 12px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 12px rgba(42, 157, 143, 0.15);
}
.visit-heading {
text-align: center;
font-size: 1.8rem;
color: #1c5950;
margin-bottom: 20px;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
}
.visit-intro {
text-align: center;
font-size: 1rem;
color: #333;
margin-bottom: 30px;
line-height: 1.6;
}
.visit-months {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.visit-box {
background-color: #b2dfdb;
border-left: 6px solid #2a9d8f;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(42, 157, 143, 0.1);
}
.visit-box h3 {
color: #00695c;
font-size: 1.2rem;
margin-bottom: 10px;
}
.visit-box p {
color: #333;
font-size: 0.95rem;
line-height: 1.5;
}
.visit-box.best {
border-left-color: #4CAF50;
background-color: #e8f5e9;
}
.visit-box.transitional {
border-left-color: #00bfa5;
background-color: #d9fdf7;
}
.visit-box.monsoon {
border-left-color: #2a9d8f;
background-color: #c8ede5;
}
.haputale-vacation-planner {
max-width: 950px;
margin: 40px auto;
padding: 30px;
background: #e0f7f4;
border: 3px solid #2a9d8f;
border-radius: 12px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 14px rgba(42, 157, 143, 0.15);
}
.planner-heading {
text-align: center;
font-size: 1.9rem;
color: #1c5950;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 10px;
margin-bottom: 20px;
}
.planner-intro {
text-align: center;
font-size: 1rem;
color: #333;
margin-bottom: 30px;
line-height: 1.6;
}
.planner-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.planner-box {
background: #ffffff;
border-left: 5px solid #2a9d8f;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(42, 157, 143, 0.1);
}
.planner-box h3 {
font-size: 1.3rem;
color: #00695c;
margin-bottom: 10px;
}
.planner-box p,
.planner-box ul {
font-size: 0.95rem;
color: #333;
line-height: 1.5;
}
.planner-box ul {
list-style-type: disc;
padding-left: 20px;
}
.planner-box ul li {
margin-bottom: 8px;
}
.travel-container {
max-width: 950px;
margin: 40px auto;
padding: 30px;
background: #e0f7f4;
border: 3px solid #2a9d8f;
border-radius: 12px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 4px 14px rgba(42, 157, 143, 0.15);
}
.title-box {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 25px;
}
.title-icon {
font-size: 1.8rem;
}
.section-title-text {
font-size: 1.8rem;
color: #1c5950;
border-bottom: 3px solid #2a9d8f;
padding-bottom: 6px;
}
.travel-description h3 {
margin-top: 20px;
color: #00695c;
}
.travel-description p {
font-size: 1rem;
color: #333;
line-height: 1.6;
margin-bottom: 15px;
}
.route-table table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: #ffffff;
border: 1px solid #2a9d8f;
border-radius: 8px;
overflow: hidden;
}
.route-table thead {
background-color: #2a9d8f;
color: white;
}
.route-table th,
.route-table td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
}
.route-table tbody tr:nth-child(even) {
background-color: #c8ede5;
}
.map-section {
margin-top: 40px;
text-align: center;
}
.map-heading {
font-size: 1.3rem;
color: #00695c;
margin-bottom: 15px;
}
iframe {
width: 100%;
height: 400px;
border: none;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}