.ofs1
{MARGIN-LEFT:1cm;MARGIN-BOTTOM:0cm}
.ofs15
{MARGIN-LEFT:1.5cm}
.ofs2
{MARGIN-LEFT:2cm}
.ofs3
{MARGIN-LEFT:3cm}
.cite
{COLOR:#229966;FONT-STYLE:italic}
.term
{COLOR:#990000;FONT-WEIGHT:bold}
.termh
{COLOR:#000099;}
body { FONT-FAMILY: Times New Roman; COLOR:#000033 }
.ant
{MARGIN-LEFT:2cm;COLOR:#BB0000}
.hyp
{COLOR:#0000FF}
.hyp_bg
{BACKGROUND-COLOR:#777777}
.hypo
{COLOR:#00AA00}
.hypo_bg
{BACKGROUND-COLOR:#00AA00}
.mer
{COLOR:#770077}
.mer_bg
{BACKGROUND-COLOR:#770077}
.hol
{COLOR:#888800}
.hol_bg
{BACKGROUND-COLOR:#888800}
.per
{MARGIN-LEFT:2cm;COLOR:#777777}
.dert
{COLOR:#777777}
.der
{COLOR:#777777}
.derpos
{COLOR:#000077;FONT-STYLE:italic}
.samt
{COLOR:#777777}
.sam
{MARGIN-LEFT:3cm;COLOR:#669922;FONT-STYLE:italic}
.formbut
{BACKGROUND-COLOR: #FFFFFF; vertical-align: middle; font-size: 10px; font-family: Verdana; border: 1px solid #53C3E3; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px}
.textst
{margin-left: 10px; margin-right: 10px; vertical-align: middle; border: 1px solid #53C3E3; padding: 0}
.tdst
{font-style: normal; font-variant: normal; font-weight: normal; font-size: x-small; font-family: arial}

/* General Styles */
body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Carousel Wrapper */
.carousel-wrapper {
    position: relative;
    padding-bottom: 400px; /* Aspect ratio: 2.5:1 */
    height: 0;
    overflow: hidden;
    margin-bottom: 40px;
}

.carousel-wrapper.half-width {
    width: 50%;
    padding-bottom: 200px; /* Aspect ratio: 2.5:1 */
}

.carousel-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Headings */
h2 {
    margin: 40px 0 20px;
    color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 14px;
        width: 90%;
    }

    .carousel-wrapper {
        padding-bottom: 300px; /* Adjust aspect ratio for smaller screens */
    }

    .carousel-wrapper.half-width {
        width: 100%; /* Make it full width on smaller screens */
        padding-bottom: 150px; /* Adjust aspect ratio */
    }

    h2 {
        font-size: 18px;
        margin: 20px 0;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }

    .carousel-wrapper {
        padding-bottom: 200px; /* Further adjust aspect ratio */
    }

    h2 {
        font-size: 16px;
    }
}