@import "../css/plugin/swiper-bundle.min.css" layer(plugin);
@import "../css/chatbot.css" layer(layout);

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all components css inside @layer components 
***
* please make sure all components css inside @layer components 
* please make sure all components css inside @layer components 
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
/* ========================= ========================= ========================= ========================= ========================= =========================
***
* use base.css to reset the browser style and style basic tag, some class cannot be clasifiy also include in base css, color variable also set in base.css for global use
***
* then use @layer plugin to include all plugin related css
* then use @layer components to include all reusable  components such as button, modal, card, accordion, etc
* then use @layer components to include all reusable  components related to form, eg datepicker, custom select, form layout, checkbox, radio box
* then use @layer layout to put style the layout. @layer layout also inculde header footer, mobile menu and body area styling
* then use @layer pages to put style for specfic pages. eg login page has login.css with @layer pages
* then use @layer animate to put style for animation
* then use @layer inline_style for inline_style class. eg. width10p = width: 10%;
* then use @layer media_query to put style for mobile and responsive design
* last use @layer print_query to put style for print version
* last last use @layer greyscale to put style for greyscale
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
@layer components {
  :root {
    --tab_bg_color: var(--light_blue_200);
    --tab_text_color: var(--main_text_color);
    --tab_active_bg_color: var(--tsunami_gradient);
    --tab_active_text_color: #fff;
    --tab_row_border_color: transparent;
    --tab_row_border_width: 0;

    --tab_dropdown_bg_color: var(--light_blue_200);
    --tab_dropdown_text_color: var(--main_text_color);
    --tab_dropdown_border_bottom_color: transparent;
    --tab_dropdown_hover_bg_color: var(--tsunami_gradient);
    --tab_dropdown_hover_text_color: #fff;
    --tab_dropdown_hover_border_bottom_color: transparent;
    --tab_dropdown_hover_filter: var(--white_filter);

    --tab_dropdown_active_text_color: #fff;
    --tab_dropdown_active_bg_color: var(--tsunami_500);
    --tab_dropdown_active_border_bottom_color: transparent;
    --tab_dropdown_active_filter: var(--white_filter);

    --theme_card_element_color: var(--light_blue_300);
    --theme_card_icon_filter: var(--tsunami_500_filter);

    --btn4_bg_color: var(--light_blue_300);
    --btn4_text_color: #000;
    --btn4_hover_bg_color: var(--tsunami_400);
    --btn4_hover_text_color: #fff;

    --acc_item_border_color: #333;
    --acc_item_border_color2: #333;
  }

  :root:has(.theme2) {
    --tab_bg_color: var(--gin_400);
    --tab_text_color: var(--orange_red_500);
    --tab_active_bg_color: var(--yellow_400);
    --tab_active_text_color: var(--orange_red_500);
    --tab_row_border_color: var(--orange_red_300);
    --tab_row_border_width: .25rem;

    --tab_dropdown_bg_color: var(--gin_400);
    --tab_dropdown_text_color: var(--orange_red_500);
    --tab_dropdown_border_bottom_color: transparent;
    --tab_dropdown_hover_bg_color: var(--gin_500);
    --tab_dropdown_hover_text_color: var(--orange_red_500);
    --tab_dropdown_hover_border_bottom_color: transparent;
    --tab_dropdown_hover_filter: var(--orange_400_filter);

    --tab_dropdown_active_text_color: var(--orange_red_500);
    --tab_dropdown_active_bg_color: var(--yellow_400);
    --tab_dropdown_active_border_bottom_color: transparent;
    --tab_dropdown_active_filter: var(--orange_400_filter);

    --theme_card_element_color: var(--gin_400);
    --theme_card_icon_filter: var(--orange_400_filter);

    --btn4_bg_color: var(--gin_400);
    --btn4_text_color: #000;
    --btn4_hover_bg_color: var(--gin_500);
    --btn4_hover_text_color: #000;

    --acc_item_border_color: var(--yellow_green_400);
    --acc_item_border_color2: var(--orange_red_300);
  }
}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR document icon 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .pdfonlyicon {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
  }

  .pdfa {
    /*display: inline-block;*/
    /*vertical-align: bottom;*/
  }

  .document_icon,
  .iconExtlink {
    width: 1.5rem;
    height: 1.75rem;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: text-bottom;
    position: relative;
    display: inline-block;
  }

  .iconExtlink {
    width: 1.75rem;
  }

  .document_icon:before,
  .document_icon:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .document_icon:after {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
  }

  .iconPdf:before {
    background-image: url("../images/icon/icon_pdf.svg");
  }

  .iconDoc:before {
    background-image: url("../images/icon/icon_doc.svg");
  }

  .iconDoc:after {}

  .iconXls:before {
    background-image: url("../images/icon/icon_xls.svg");
  }

  .iconXls:after {}

  .iconPpt:before {}

  .iconPpt:after {}

  .iconCsv:before {}

  .iconCsv:after {}

  .iconExtlink:before {
    background-image: url("../images/icon/icon_extlink.svg");
    filter: var(--grey_600_filter);
  }

  .pdfa:hover .iconPdf::after,
  .pdfa:focus .iconPdf::after,
  .doca:hover .iconDoc::after,
  .doca:focus .iconDoc::after,
  .xlsa:hover .iconXls::after,
  .xlsa:focus .iconXls::after,
  .ppta:hover .iconPpt::after,
  .ppta:focus .iconPpt::after,
  .csva:hover .iconCsv::after,
  .csva:focus .iconCsv::after,
  .extlink_withtext:hover .iconExtlink::after,
  .extlink_withtext:focus .iconExtlink::after {
    opacity: 1;
  }

}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR accordion 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .big_accordion {
    list-style-type: none;
    padding-left: 0;
  }

  .big_accordion .expand_all_btn {
    font-size: 1rem;
    display: block;
    text-align: right;
    margin-bottom: .5rem;
  }

  .big_accordion .accordion_item {}

  .big_accordion .accordion_item:nth-child(odd) {
     border-bottom: 1px solid var(--acc_item_border_color);
  }

  .big_accordion .accordion_item:nth-child(even) {
    border-bottom: 1px solid var(--acc_item_border_color2);
  }

  .big_accordion .accordion_item{
    /* margin-bottom: 1.5rem;  */
  }
  .big_accordion .accordion_item .top_r a{
    font-size: 1.125rem;
  }

  .big_accordion .under_r {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
  }

  .big_accordion .under_r:has(.item_highlight) {
    overflow: visible;
  }

  .big_accordion :where(.top_r, .under_r) {
    display: flex;
  }

  .big_accordion .top_r {
    position: relative;
  }

  .big_accordion .top_r a:not(.icon) {
    color: var(--main_text_color);
    font-weight: 900;
    display: block;
    position: relative;
    text-decoration: none;
  }

  .big_accordion .top_r a:not(.icon) {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0;
    padding-right: 3rem;
  }


  .big_accordion .top_r .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
  }

  .big_accordion .accordion_item .icon::after {
    content: "";
    display: block;
    width: .5rem;
    aspect-ratio: 20 / 38;
    background-image: url("../images/icon/icon_prev4.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    transition: transform .3s ease-in-out;
  }

  .big_accordion .top_r :is(a:hover, a:focus) {
    text-decoration: none;

  }

  .big_accordion .accordion_item .top_r:has(a:hover, a:focus) .icon::after {}

  .big_accordion .cont {
    /* padding-top: 1rem; */

    padding-right: 1rem;
    padding-bottom: 1.2rem;
    width: 100%;
  }

  .big_accordion .cont *:first-child {
    margin-top: 0;
  }


  .big_accordion .cont *:last-child {
    margin-bottom: 0;
  }

  /* .big_accordion .cont a {
    margin-bottom: 1rem;
    display: inline-block;
  } */


  .big_accordion .accordion_item.active {}

  .big_accordion .accordion_item.active .top_r a {}

  .big_accordion .accordion_item .top_r .icon::after {
    filter: var(--green_400_filter)
  }

  .big_accordion .accordion_item.active .top_r .icon::after {
    transform: rotate(90deg);
  }

  .big_accordion .accordion_item.active .under_r {
    max-height: 10000px;
    opacity: 1;
  }

}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR button 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: .75rem 1rem;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    border-radius: .625rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    min-width: 10.625rem;
    background-color: var(--btn_bg_color);
    color: var(--btn_text_color);
  }


  .btn:hover,
  .btn:focus {
    cursor: pointer;
    color: var(--btn_hover_text_color);
    background-color: var(--btn_hover_bg_color);
    text-decoration: none;
  }

  .btn .document_icon {
    display: none;
  }


  .btn1 {
    --btn_bg_color: var(--tsunami_500);
    --btn_text_color: #fff;
    --btn_hover_bg_color: var(--tsunami_600);
    --btn_hover_text_color: #fff;
  }

  .btn2 {
    --btn_bg_color: var(--grey_600);
    --btn_text_color: #fff;
    --btn_hover_bg_color: var(--grey_700);
    --btn_hover_text_color: #fff;
  }

  .btn3 {
    --btn_bg_color: var(--tsunami_600);
    --btn_text_color: #fff;
    --btn_hover_bg_color: var(--tsunami_700);
    --btn_hover_text_color: #fff;
  }

  .btn3_1 {
    padding: 1.5rem 1rem;
    
  }

  .btn3_1:not(.icon_btn2){
    min-width: 270px;
    max-width: 100%;
  }

  :where(.btn1,.btn3).icon_btn2::before {
    filter: var(--white_filter);
  }

  .btn3_1.icon_btn2 {
    display: inline-flex;
    width: min(46.875rem, 100%);
    justify-content: center;
    column-gap: 1rem;
  }

  .btn4 {

    --btn_bg_color: var(--btn4_bg_color);
    --btn_text_color: var(--btn4_text_color);
    --btn_hover_bg_color: var(--btn4_hover_bg_color);
    --btn_hover_text_color: var(--btn4_hover_text_color);
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: inherit;
    border-radius: 50%;
  }

  .btn5 {
    --btn_bg_color: var(--tsunami_300);
    --btn_text_color: #fff;
    --btn_hover_bg_color: var(--tsunami_350);
    --btn_hover_text_color: #fff;

  }

  .btn6 {
    --btn_bg_color: var(--tsunami_300);
    --btn_text_color: #fff;
    --btn_hover_bg_color: var(--tsunami_350);
    --btn_hover_text_color: #fff;

  }

  .cross_btn {
    margin-left: auto;
  }

  .cross_btn a {
    color: #fff;
    font-size: 1.125rem;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    column-gap: .5rem;
  }

  .cross_btn a>span:first-child {
    display: inline-block;
  }

  .cross_btn a>span:last-child {
    position: relative;
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    font-size: 0;
  }

  .cross_btn a>span:last-child:before,
  .cross_btn a>span:last-child:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 26px;
    height: 2px;
    background-color: #fff;
  }

  .cross_btn a>span:last-child:before {
    transform: translate(0, -50%) rotate(45deg);
    margin-left: -2px;
  }

  .cross_btn a>span:last-child:after {
    transform: translate(0, -50%) rotate(-45deg);
    margin-left: -2px;
  }

  .cross_btn1 a {
    font-size: 0;
  }

  .know_more_btn {
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: bold;
    color: var(--tsunami_500);
    line-height: 1;
  }

  .know_more_btn::after {
    content: '';
    display: block;
    background-image: url('../images/icon/icon_prev.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: .5rem;
    aspect-ratio: 20 / 38;
    filter: var(--tsunami_500_filter);
    display: flex;
    align-items: center;
    transform: rotate(180deg);
  }

  .know_more_btn .document_icon {
    display: none;
  }
}

@layer components {
  .icon_btn2:not(.btn) {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
  }

  .icon_btn2 {
    display: inline-flex;
    column-gap: .25rem;
    align-items: center;
    line-height: 1;
  }

  .icon_btn2::before {
    content: '';
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    display: block;
    flex-shrink: 0;
    flex-grow: 0;
  }

  .icon_btn2.icon_next_before::before {
    order: 2;
  }
}



@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR swiper slider 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .swiperhugecontainer {
    --swiper_btn_size: 1rem;
    --swiper_btn_gap: 1rem;
  }

  .swiperbigcontainer {
    position: relative;
  }

  .swiper_nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
  }

  .nownopagin .swiper_nav {
    display: none;
  }

  .swiperpaginwrapper {
    display: inline-block;
  }

  .swiper_nav .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  .swiper-button-prev,
  .swiper-button-next {
    background: none;
    font-size: 0;
    display: inline-block;
    margin-top: 0;
    width: var(--swiper_btn_size);
    height: 2.25rem;
  }

  .swiper-button-prev:before,
  .swiper-button-next:before {
    content: "";
    background-image: url("../images/icon/icon_prev.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
  }

  .swiper-button-next:before {
    transform: rotate(180deg);
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    content: "";
  }

  .swiper_nav .swiper-button-prev,
  .swiper_nav .swiper-button-next {
    position: static;
  }

  .swiper-button-pause {
    display: inline-block;
    position: relative;
    font-size: 0;
    vertical-align: middle;
    height: 1rem;
  }

  .swiper-button-pause:hover,
  .swiper-button-pause:focus {
    cursor: pointer;
  }

  .swiper-button-pause:before,
  .swiper-button-pause:after {
    content: "";
    width: .25rem;
    height: 1rem;
    display: inline-block;
    margin-left: 2.5px;
    margin-right: 2.5px;
    background-color: #000;
  }

  .paused .swiper-button-pause:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .5rem 0 .5rem 1rem;
    /*border-color: transparent transparent transparent #00335b;*/
    border-color: transparent transparent transparent #000;
    background-color: transparent;
    margin-top: 1px;
  }

  .paused .swiper-button-pause:after {
    display: none;
  }


  .swiper-pagination-horizontal .swiper-pagination-bullet {
    --bullet_visible_size: max(0.75rem, 12px);
    box-shadow: none;
    /*dpo w3c requirement at least 24px * 24px*/
    width: var(--dpo_minimum_require_btn_size);
    height: var(--dpo_minimum_require_btn_size);
    border-radius: 0;
    position: relative;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-left: 0;
    margin-right: 0;
  }

  .swiper-pagination-horizontal .swiper-pagination-bullet::before {
    content: '';
    display: block;
    width: var(--bullet_visible_size);
    height: var(--bullet_visible_size);
    background-color: var(--grey_600);
    border-radius: 50%;
  }

  .swiper-pagination-horizontal .swiper-pagination-bullet-active::before {
    background-color: var(--tsunami_500);
  }

  .swiper-slide {
    height: auto;
  }

  .swiper-fade .swiper-slide {
    opacity: 0 !important;
    /*transition: opacity .4s ease-in-out;*/
  }

  .swiper-fade .swiper-slide-active {
    opacity: 1 !important;
  }

  .swiper_style1 {
    display: flex;
    align-items: center;
  }

  .swiper_style1 .swiper {
    order: 2;
    max-width: calc(100% - calc(var(--swiper_btn_size) * 2) - calc(var(--swiper_btn_gap) * 2));
  }

  .swiper_style1 .swiper-slide {
    display: flex;
    justify-content: center;
  }

  .swiper_style1 :where(.swiper-button-prev, .swiper-button-next) {
    position: static;
  }

  .swiper_style1 .swiper-button-next {
    order: 3;
  }

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR alert 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR badge 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/


  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR popup modal 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .modal {
    position: fixed;
    z-index: 9000;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    pointer-events: none;
    background: transparent;
    padding: 0;
    border: 0;
  }

  .modal_box {
    transition: all .4s ease-in-out;
    transform: translateY(110dvh);
    opacity: 0;
    /*transform: none;*/
    width: min(calc(100% - 40px), 800px);
    max-height: 80dvh;
    border-radius: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.3rem;
    padding-bottom: 1.5rem;
    background-color: #fff;
    z-index: 5000;
    pointer-events: none;
    position: absolute;

  }

  .modal_title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  .modal_box .modal_big_content {
    max-height: calc(80dvh - 3rem);
    overflow-y: auto;
    font-size: 1.3rem;
  }

  .modal_box .modal_content:focus {
    outline: none;
  }

  .modal_box .close_wrapper {
    /* width: 100%; */
    position: absolute;
    right: 0;
    top: -2.25rem;
    /* background-color: #fff; */
    /* border-radius: 50%; */
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal_box .close_wrapper :where(a, button) {
    display: inline-block;
    position: relative;
    font-size: 0;
    /* border-radius: 50%; */
    /* border: 2px solid #000; */
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
  }

  .modal_box .close_wrapper :where(a, button):hover,
  .modal_box .close_wrapper :where(a, button):focus {
    color: #a1fba3;
  }

  .modal_box .close_wrapper :where(a, button):before,
  .modal_box .close_wrapper :where(a, button):after {
    content: "";
    display: block;
    width: 80%;
    height: 2px;
    background-color: #fff;
    top: 45%;
    position: absolute;
    left: 10%;
  }

  .modal_box .close_wrapper :where(a, button):before {
    transform: rotate(45deg);
  }

  .modal_box .close_wrapper :where(a, button):after {
    transform: rotate(-45deg);
  }

  .modelopen {
    overflow: hidden;
  }

  .show_modal_box .modal_box {
    display: block;
  }

  .modal.modalopen {}

  .modal.modalopen .modal_box {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .modalopen .modal_bg {
    display: block;
    background-color: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
    z-index: 100;
    position: absolute;
  }

  .modal_img a:has(img) {
    display: block;
  }

  .modal_img p:has(img) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .exceed_height .modal_img * {
    height: 100%;
  }

  .modal_footer_center {
    padding-top: 1rem;
    display: flex;
    justify-content: center;
  }

  .dialog_label {
    font-size: 0;
  }


  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR component table
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .table_wrapper1 {
    position: relative;
  }

  .table_wrapper1::before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 1px);
    border: var(--main_table_border);
    border-radius: var(--main_table_border_radius);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 90;
    pointer-events: none;
  }

  .table_wrapper1 table {
    overflow: hidden;
    border-radius: var(--main_table_border_radius);
  }

  .table_wrapper1 th {
    --th_color: #fff;
    font-size: 1rem;
    font-weight: 700;
    color: var(--th_color);
    background-color: var(--grey_700);
  }

  .table_wrapper1 thead th {
    padding: .5rem;
    border: 1px solid #fff;
  }

  .table_wrapper1 th a {
    color: #fff;
  }

  .table_wrapper1 tbody :where(th, td) {
    /*padding-left: 1.5rem;
  padding-right: 1.5rem;*/
    padding-left: var(--main_table_td_pad_left);
    padding-right: var(--main_table_td_pad_right);
    padding-top: var(--main_table_td_pad_top);
    padding-bottom: var(--main_table_td_pad_bottom);
  }

  .table_wrapper1 td {
    font-size: 1rem;
    color: #333;
  }

  .table_wrapper1 :where(th, td) {
    /*text-align: center;*/
  }

  .table_wrapper1 :where(th, td) {
    border: 1px solid #d4d4d4;
  }

  .table_wrapper1 tbody tr:nth-child(even) td {
    background-color: #f3f3f3;
  }


}

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR card 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
@layer components {

  .card {
    background-color: #fff;
    border: 1px solid var(--grey_400);
    padding: 1.5rem;
  }

  .card__date {
    display: grid;
    grid-template-columns: 2px 1fr;
    column-gap: .96rem;
    font-weight: 600;
    font-size: 1.35rem;
    margin-bottom: .75rem;
  }

  .card__date::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--indigo_500);
  }

  .card__img {
    text-align: center;
    margin-bottom: .75rem;
  }

  .card__img img {
    width: 100%;
  }

  .card__description {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
  }

  .card2 {
    display: flex;
    padding: 1.75rem;
    height: 100%;
    background-color: #fff;
    box-shadow: var(--card_shadow2);
  }

  .card2 .card_inner {
    display: grid;
    grid-template-columns: 45% 1fr;
    column-gap: 1.5rem;
    row-gap: 1rem;
    width: 100%;
  }

  .card2 .card_inner img {
    width: 100%;
  }

  .card2__title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  .card2_2_title {
    margin-bottom: 3rem;
  }

  .card2 .card_inner_inner {
    display: grid;
    grid-template-rows: max-content 1fr max-content;
  }

  .card2 .under_btn_wrap {
    margin-top: 2rem;
    display: flex;
    align-items: flex-end;
  }

  .card2 .card_inner2 {
    display: grid;
    grid-template-columns: 1fr 300px;
    column-gap: 4rem;
    width: 100%;
  }

  .card2_2 {
    padding: 3rem 4rem;
    /*padding-left: clamp(2rem, 2.75vw, 3.5rem);
    padding-right: clamp(2rem, 2.75vw, 3.5rem);
    padding-top: clamp(1.5rem, 2.5vw, 3rem);
    padding-bottom: clamp(1.5rem, 2.5vw, 3rem);*/
  }
}

@layer components {
  .card3 {
    --border_height: .625rem;
    position: relative;
    background-color: #fff;
    box-shadow: var(--card_shadow2);
  }

  .card3::before {
    content: "";
    width: 100%;
    height: var(--border_height);
    background-color: var(--light_blue_300);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card3 {
    /*padding-left: clamp(1.5rem, 2.5vw, 3rem);
    padding-right: clamp(1.5rem, 2.5vw, 3rem);
    padding-top: clamp(calc(1.5rem + var(--border_height)), calc(2.5vw + var(--border_height)), calc(3rem + var(--border_height)));
    padding-bottom: clamp(1.5rem, 2.5vw, 3rem);*/
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 3rem;

    padding-top: calc(3rem + var(--border_height));
  }

  .card3 .card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .25rem;
    line-height: 1.2;
  }

  .card3 .card__title2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
  }

  .card3 .card__subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--grey_600);
  }

  .card3 .card_sec_content *:first-child {
    margin-top: 0;
  }

  .card3 .card_sec_content *:last-child {
    margin-bottom: 0;
  }

  .card3 .card_sec_title {
    margin-bottom: .75rem;
  }

  .card3 .card_section:not(:last-child) {
    margin-bottom: 2.5rem;
  }

  .card3 .card_sec_content>:where(ul, ol) {
    padding-left: 1.2rem;
  }
}

@layer components {
  .logo_card {
    display: grid;
    grid-template-columns: 65% 1fr;
    column-gap: 1rem;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }

  .logo_card .card_content {
    grid-column: 1 / -1;
    margin-top: 2rem;
  }

  .logo_card .under_btn_wrap {
    grid-column: 1 / -1;
    margin-top: 2rem;
    text-align: right;
  }

  .logo_card:has(.card__title2) {
    grid-template-columns: 75% 1fr;
  }

  .logo_card .btn_row {
    grid-column: 1 / -1;
  }

  .logo_card .card_logo img {
    max-height: 100px;
  }
}

@layer components {
  .card4 {
    --card4_bg_color: var(--tsunami_500);
    --card4_text_color: #fff;
    --card4_icon_filter: var(--white_filter);

    background: var(--card4_bg_color);
    color: var(--card4_text_color);
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .3s ease-in-out;
    transform: scale(1);
  }

  .card4 .card_inner {
    padding-top: .75rem;
    padding-right: 1rem;
    padding-bottom: .5rem;
    padding-left: 1rem;

  }

  .card4 .card_icon {
    margin-bottom: .75rem;
  }

  .card4 .card_icon img {
    filter: var(--card4_icon_filter);
  }

  .card4 .card_icon_title {
    margin-bottom: .25rem;
    font-weight: 700;
  }

  .card4 .card_img img {
    width: 100%;
    max-width: none;
  }


  .card4:hover,
  .card4:focus {
    transform: scale(1.05);
  }
}

@layer components {
  .icon_info_list {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .icon_info_list>li {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .5rem;
  }

  .icon_info_list>li::before {
    content: '';
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .icon_info_list>li:not(:last-child) {
    margin-bottom: 2rem;
  }

  .icon_info_list .list_title {
    font-weight: 900;
    color: var(--tsunami_500);
  }

  .icon_info_list .list_inner {
    margin-top: .3rem;
  }

  .icon_info_list .list_inner *:first-child {
    margin-top: 0;
  }

  .icon_info_list .list_inner *:last-child {
    margin-bottom: 0;
  }

  .icon_info_list1>li::before {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .4rem;
  }
}

@layer components {
  .icon_info_list2>li {
    column-gap: 1rem;
  }

  .icon_info_list2>li::before {
    width: 2.5rem;
    height: 2.5rem;
    background-position-y: top;
    margin-top: 0;
  }
}

@layer components {
  .table_wrapper2 {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    background: #fff;
  }

  .table_wrapper2 thead {
    background: var(--tsunami_gradient);
  }

  .table_wrapper2 th {
    color: #fff;
    vertical-align: middle;
    padding-top: .875rem;
    padding-bottom: .875rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }


  .table_wrapper2 td {
    padding-top: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--grey_200);
  }

  .table_wrapper2 tr:hover td {
    background-color: var(--light_blue_200);
  }
}


@layer components {

  /*.icon_ball_row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: max(2.5rem, 2.5vw);
    row-gap: max(2.5rem, 2.5vw);
  }*/
  .icon_ball {
    position: relative;
    width: 16rem;
    aspect-ratio: 1 / 1;

    color: var(--tsunami_500);
    display: flex;
    justify-content: center;
    align-items: center;
    /*transition: .5s cubic-bezier(0.77, 0, .175, 1);
    transition-property: all;*/
    background-color: var(--light_blue_300);
    box-shadow: 3px 3px 8px 0 rgba(79, 75, 63, .16);
    border-radius: 50%;
    transition: all .3s ease-in-out;
  }

  .icon_ball:hover,
  .icon_ball:focus {
    transform: translateY(-.85rem);
  }

  .icon_ball .icon__title {
    display: block;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .icon_ball .icon__img {
    filter: var(--tsunami_500_filter);
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }

  .icon_ball .inner {
    display: block;
  }
}

@layer components {
  .weather_row {
    grid-area: stack;
    z-index: 1100;
    align-self: flex-start;
  }

  .weather_row .container {
    padding-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
  }

  .weather_row ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 1.5rem;
    row-gap: 1rem;
    color: #fff;

  }

  .weather_row .weather__item {
    display: grid;
    grid-template-columns: 1fr max-content;

    margin-bottom: 0;
    position: relative;
  }

  .weather_row .weather__item:not(:last-child) {
    column-gap: max(12px, 1.2vw);
  }

  .weather_row .weather__item:not(:last-child):after {
    content: "";
    display: block;
    width: 1px;
    height: 1.75rem;
    background-color: #fff;
    box-shadow: 0 0 .3rem #000;
    align-self: center;
  }

  .weather_row .weather__item__inner {
    display: grid;
    grid-template-columns: max-content 1fr;

    align-items: center;
    
  }

  .weather_row .bottom_item{
    text-shadow: 1px 1px .6rem #000;
    position: absolute;
        top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #000;
    z-index: -50;
  }

  .weather_row .true_item :where(.weather_label,.weather_info){
    /*fake that w3c checker in wcms as wcms w3c checker use sources code to check color contrast which is not correct*/
    color: #000;
    background: transparent;
    filter: var(--white_filter);
    -webkit-text-stroke: clamp(.2px, .02vw, .3px) currentColor;
  }


  .weather_row .weather__item__inner:has(.weather_icon_wrap) {
    column-gap: 1rem;
  }

  .englishVersion .weather__item__inner:not(:has(.weather_icon_wrap)) {
    column-gap: .5rem;
  }

  .weather_row .weather_icon_wrap img {
    --icon_shadow: drop-shadow(0 0 .1rem rgba(0, 0, 0, .5));
    width: 1.85rem;
    -webkit-filter: var(--icon_shadow);
    filter: var(--icon_shadow);
  }
}

@layer components {
  .section_shortcut_nav {
    position: fixed;
    pointer-events: none;
    right: 0;
    opacity: 0;
    top: 50%;
    z-index: 4600;
    transition: right .3s ease-in-out, opacity .3s ease-in-out;
  }

  .section_shortcut_nav.shortcut_active {
    right: 1rem;
    opacity: 1;
    pointer-events: all;
  }

  .section_shortcut_nav ul {
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr max-content;
    row-gap: .5rem;

  }

  .shortcut__item {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: center;
    column-gap: 1rem;
    margin-bottom: 0;
    row-gap: 0;
  }

  .shortcut___btn___wrap {}

  .shortcut___btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dpo_minimum_require_btn_size);
    height: var(--dpo_minimum_require_btn_size);
  }

  .shortcut___btn::before {
    content: '';
    display: block;
    width: max(.75rem, 12px);
    height: max(.75rem, 12px);
    display: block;
    background: #000;
    opacity: .4;
    border-radius: 50%;
    border: 1px solid #fff;
  }

  .shortcut___btn.is_active:before {
    opacity: 1;
  }

  .shortcut___label {
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .5rem .75rem;
    background: #fff;
    box-shadow: 0 3px 4px rgba(150, 150, 150, .2);
    text-align: right;
    width: fit-content;
    margin-left: auto;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    pointer-events: none;

  }

  .shortcut__item:has(.shortcut___btn:hover) .shortcut___label {
    opacity: 1;
  }
}


@layer components {


  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR tab 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

  /*Style Guide [Tab]
  
  <div class="mytab_bigcontainer">
      <div class="typerow">
          <div><a href="#">your text</a></div>
          <div><a href="#">your text</a></div>
      </div>
      <div class="mytab_container">
          <div class="mytab">your text</div>
          <div class="mytab">your text</div>
      </div>
  </div>

 ========================= ========================= ========================= ========================= ========================= =========================*/

  .overflow_tab_container .typerow {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .overflow_tab_container .typerow::-webkit-scrollbar {
    display: none;
  }


  .overflow_tab_container {
    display: grid;

  }

  .overflow_tab_container .mytab_container {
    grid-column: 1 / -1;
  }

  .overflow_tab_container .btn_wrap {
    display: none;
    align-items: center;
  }

  .overflow_tab_container .btn_wrap.show_overflow_btn {
    display: flex;
  }

  .overflow_tab_container .btn_wrap button {
    height: 100%;
    border-radius: 0;
  }


  .overflow_tab_container.reach_end {
    grid-template-columns: max-content 1fr;
  }

  .overflow_tab_container.reach_first {
    grid-template-columns: 1fr max-content;
  }

  .overflow_tab_container.reach_middle {
    grid-template-columns: max-content 1fr max-content;
  }




  .mytab_bigcontainer {
    container-type: inline-size;
    container-name: tab_container;
  }


  .mytab_bigcontainer .typerow {

    display: flex;
    min-width: 100%;


  }

  .mytab_bigcontainer .typerow>* {
    width: 100%;
  }


  .mytab_bigcontainer .typerow a {



    display: flex;
    padding-top: .5rem;
    padding-right: 1rem;
    padding-bottom: .5rem;
    padding-left: 1rem;

    font-weight: 900;
    color: var(--tab_text_color);
    background: var(--tab_bg_color);
    text-align: center;
    align-items: center;
    height: 100%;
    justify-content: center;
    border-bottom: var(--tab_row_border_width) solid var(--tab_row_border_color);
  }

  .mytab_bigcontainer .typerow a {}

  .englishVersion .mytab_bigcontainer .typerow a {
    line-height: 1.4;
  }

  .mytab_bigcontainer .typerow a>* {
    text-align: center;
  }

  .mytab_bigcontainer .typerow .selected a {
    background: var(--tab_active_bg_color);
    color: var(--tab_active_text_color);
    border-bottom-color: transparent;
  }

  .mytab_bigcontainer .typerow .selected a::after {
    content: "";
    border-left: .625rem solid transparent;
    border-right: .625rem solid transparent;
    border-top: .625rem solid var(--tab_element_color);
    position: absolute;
    bottom: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    display: block;
  }

  .mytab_bigcontainer .typerow .document_icon {
    display: none;
  }

  .mytab_container:not(:has(.tab_dropdown:first-child)) {
    margin-top: 2rem;
  }

  .tab_dropdown {
    display: none;
  }

  .tab_dropdown br {
    display: none;
  }

  .tab_dropdown a {

    font-weight: 900;
    position: relative;
    display: block;
    padding: 1rem .5rem;
    background: var(--tab_dropdown_bg_color);
    color: var(--tab_dropdown_text_color);
    border-bottom: var(--tab_row_border_width) solid var(--tab_dropdown_border_bottom_color);
    height: 100%;
    text-decoration: none;
    text-align: center;
  }

  .tab_dropdown a:after {
    content: "";
    /*display: block;
    width: 1.2rem;
    height: .75rem;
    background-image: url(../images/icon/icon_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .3s ease-in-out;*/
  }

  .tab_dropdown a:hover,
  .tab_dropdown a:focus {
    text-decoration: none;
    color: var(--tab_dropdown_hover_text_color);
    background: var(--tab_dropdown_hover_bg_color);
    border-bottom-color: var(--tab_dropdown_hover_border_bottom_color);
  }

  .tab_dropdown.drop_active a {
    color: var(--tab_dropdown_active_text_color);
    background: var(--tab_dropdown_active_bg_color);
    border-bottom-color: var(--tab_dropdown_active_border_bottom_color);
  }

  .tab_dropdown.drop_active a::after {
    transform: translateY(-50%) rotate(180deg);
    filter: var(--tab_dropdown_active_filter);
  }

  .tab_dropdown a:hover::after,
  .tab_dropdown a:focus::after {
    filter: var(--tab_dropdown_hover_filter);
  }

  .mytab {
    display: none;
    padding-top: 1.5rem;
    padding-bottom: 1.25rem;
  }

  .mytab.active {
    display: block;
  }

  .mytab *:first-child {
    margin-top: 0;
  }

  .mytab *:last-child {
    margin-bottom: 0;
  }

  .mytab_bigcontainer3 .typerow {
    border-radius: var(--border_radius1);
    overflow: hidden;
    max-width: 800px;
    min-width: inherit;
    margin-left: auto;
    margin-right: auto;
  }

  .mytab_bigcontainer3 .typerow a {
    --tab_bg_color: var(--tsunami_300);
    --tab_text_color: #fff;

    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .tab_intro {
    margin-bottom: 1rem;
  }
}


@layer components {
  .list_style_Circle {
    list-style-type: circle;
  }

  .list_style_Square {
    list-style-type: square;
  }

  .list_style_LowAlpha {
    list-style-type: lower-alpha;
  }

  .list_style_LowGreek {
    list-style-type: lower-greek;
  }

  .list_style_LowRoman {
    list-style-type: lower-roman;
  }

  .list_style_UpAlpha {
    list-style-type: upper-alpha;
  }

  .list_style_UpRoman {
    list-style-type: upper-roman;
  }


  .list_style_chinese {
    list-style-type: cjk-ideographic;
    padding-left: 4rem;
  }

  .list_style_hyphen,
  .list_style_UpRoman_one_bracket,
  .list_style_UpRoman_two_bracket,
  .list_style_LowRoman_one_bracket,
  .list_style_LowRoman_two_bracket,
  .list_style_chinese_number_one_bracket,
  .list_style_chinese_number_two_bracket,
  .list_style_LowAlpha_one_bracket,
  .list_style_LowAlpha_two_bracket,
  .list_style_UpperAlpha_one_bracket,
  .list_style_UpperAlpha_two_bracket,
  .list_style_number_one_bracket,
  .list_style_number_two_bracket {
    list-style: none;
    counter-reset: list;
    display: grid;
    grid-template-columns: fit-content(30%) 1fr;
  }

  .list_style_hyphen>li,
  .list_style_UpRoman_one_bracket>li,
  .list_style_UpRoman_two_bracket>li,
  .list_style_LowRoman_one_bracket>li,
  .list_style_LowRoman_two_bracket>li,
  .list_style_chinese_number_one_bracket>li,
  .list_style_chinese_number_two_bracket>li,
  .list_style_LowAlpha_one_bracket>li,
  .list_style_LowAlpha_two_bracket>li,
  .list_style_UpperAlpha_one_bracket>li,
  .list_style_UpperAlpha_two_bracket>li,
  .list_style_number_one_bracket>li,
  .list_style_number_two_bracket>li {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: .5rem;
    grid-column: span 2;
  }

  .list_style_UpRoman_one_bracket>li:before {
    content: counter(list, upper-roman) ") ";
    counter-increment: list;
  }

  .list_style_UpRoman_two_bracket>li:before {
    content: "(" counter(list, upper-roman) ") ";
    counter-increment: list;
  }

  .list_style_LowRoman_one_bracket>li:before {
    content: counter(list, lower-roman) ") ";
    counter-increment: list;
  }


  .list_style_LowRoman_two_bracket>li:before {
    content: "(" counter(list, lower-roman) ") ";
    counter-increment: list;
  }

  .list_style_chinese_number_one_bracket>li:before {
    content: counter(list, cjk-ideographic) ") ";
    counter-increment: list;
  }

  .list_style_chinese_number_two_bracket>li:before {
    content: "(" counter(list, cjk-ideographic) ") ";
    counter-increment: list;
  }

  .list_style_LowAlpha_one_bracket>li:before {
    content: counter(list, lower-alpha) ") ";
    counter-increment: list;
  }

  .list_style_LowAlpha_two_bracket>li:before {
    content: "(" counter(list, lower-alpha) ") ";
    counter-increment: list;
  }

  .list_style_UpperAlpha_one_bracket>li:before {
    content: counter(list, upper-alpha) ") ";
    counter-increment: list;
  }

  .list_style_UpperAlpha_two_bracket>li:before {
    content: "(" counter(list, upper-alpha) ") ";
    counter-increment: list;
  }


  .list_style_number_one_bracket>li:before {
    content: counter(list, decimal) ") ";
    counter-increment: list;
  }

  .list_style_number_two_bracket>li:before {
    content: "(" counter(list, decimal) ") ";
    counter-increment: list;
  }

  .list_style_none {
    padding-left: 0;
  }

  .list_style_none>li {
    list-style-type: none;
  }

  .list_style_hyphen>li::before {
    content: "-";
    display: inline-block;
  }

  .list_style_disc>li {
    list-style-type: disc;
  }
}

@layer components {
  .img_card {
    height: 20rem;

    display: grid;
    grid-template-areas: 'stack4';

    color: #fff;
  }

  .img_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-area: stack4;
    z-index: 100;
  }

  .img_card .card__inner {
    z-index: 600;
    padding: 3rem;
    grid-area: stack4;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;
  }

  .img_card .img__title {
    font-size: 2.125rem;
    font-weight: 600;
    text-shadow: 0 0 1rem #000;
  }
}

@layer components {
  .theme_card {
    display: grid;

    column-gap: clamp(2.5rem, 4vw, 4.375rem);
    background-color: #fff;
    box-shadow: var(--card_shadow2);
    font-size: 1.125rem;
  }

  .theme_card .sme_icon_wrap {
    --clip_path_size: 75%;
    position: relative;

  }

  .theme_card .sme_icon_wrap::before {
    content: '';
    clip-path: polygon(0% 0%, var(--clip_path_size) 0%, 90% 64%, 78% 100%, 0% 100%);
    background: var(--theme_card_element_color);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .theme_card .sme_icon_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-right: calc(100% - var(--clip_path_size));
    /*margin-right: calc((100% - var(--clip_path_size)) / 2);*/
    color: var(--tsunami_500);
    position: relative;
    z-index: 50;
  }

  .theme_card .sme_icon_inner img {

    margin-bottom: 1rem;
    filter: var(--theme_card_icon_filter);
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .theme_card .sme_icon_title {
    font-weight: 700;
    text-align: center;

    margin-left: auto;
    margin-right: auto;
  }

  .englishVersion .theme_card .sme_icon_title {
    width: 75%;
  }

  .theme_card .theme_card_content {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    padding-right: 4.5rem;
  }

  .theme_card .theme_card_sub_title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: .5rem;
  }

  .theme_card .theme_card_content {
    display: grid;

    column-gap: clamp(2rem, 2.5vw, 3rem);
    row-gap: clamp(2rem, 2.5vw, 3rem);
  }

  .theme_card .col2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .theme_card .col3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .theme_card .col4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .theme_card .theme_card_content :where(ol, ul) {
    padding-left: .5rem;
    margin-top: 0;

  }

  .theme_card .theme_card_content :where(ol, ul)>li {
    margin-bottom: 0;
  }

  .theme_card .theme_card_content :where(ol, ul):not(:last-child) {
    margin-bottom: .5rem;
  }

  .theme_card .theme_card_content *:last-child {
    margin-bottom: 0;
  }

  .theme_card .theme_card_btn_row {
    grid-column: 1 / -1;
  }

  .theme_card_grid .theme_card {
    --arrow_graphic_size: 20%;
  }

  .theme_card_grid .theme_card:nth-child(odd) {
    grid-template-columns: var(--arrow_graphic_size) 1fr;
  }

  .theme_card_grid .theme_card:nth-child(even) {
    grid-template-columns: 1fr var(--arrow_graphic_size);
  }

  .theme_card_grid .theme_card:nth-child(even) .theme_card_content {
    order: 1;
    padding-left: 3.5rem;
    padding-right: 0;
  }

  .theme_card_grid .theme_card:nth-child(even) .sme_icon_wrap {
    order: 2;
  }

  .theme_card_grid .theme_card:nth-child(even) .sme_icon_wrap::before {
    transform: scaleX(-1) scaleY(-1);
  }

  .theme_card_grid .theme_card:nth-child(even) .sme_icon_inner {
    margin-left: calc(100% - var(--clip_path_size));
    margin-right: 0;
  }
}

@layer components {
  .icon_box {
    width: 9.3rem;
    padding: .75rem;
  }

  .icon_box img {
    width: 100%;
  }

  .icon_box:has(+section) {
    margin-bottom: 3rem;
  }

  .icon_box1 {
    background: var(--orange_red_400);

  }

  .icon_box1 img {
    filter: var(--white_filter);

  }
}


@layer components {
  .icon_title {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .75rem;
    font-size: 1.5rem;
    font-weight: 600;

  }

  .icon_title::before {
    content: '';
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: .2rem;
    filter: var(--tsunami_500_filter);
  }

  .icon_title1 {
    color: var(--tsunami_500);
  }

  .icon_title1::before {
    filter: var(--tsunami_500_filter);
  }
}

@layer components {
  .btn_row {
    margin-top: 3rem;
    display: flex;
    column-gap: 2rem;
    row-gap: 1rem;
  }

  .btn_row_center {

    justify-content: center;

  }

  .btn_row3 {
    column-gap: 7rem;
  }
}

@layer components {
  .qrcode_wrap {
    display: none;
  }
}

@layer components {
  .dropdown_wrap {
    position: relative;
  }

  .dropdown_menu {
    padding: .5rem;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    min-width: 10rem;
    background: #fff;
    border-radius: .25rem;
    border: 1px solid rgba(0, 0, 0, .15);
  }

  .dropdown_menu ul{
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .dropdown_item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: var(--main_text_color);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;

  }

  .dropdown_item {
    cursor: pointer;
  }

  .dropdown_item:hover,
  .dropdown_item:focus {
    text-decoration: none;
    background-color: var(--light_blue_200);
  }
}

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all components css inside @layer components 
***
* please make sure all components css inside @layer components 
* please make sure all components css inside @layer components 
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/