/* 



Template The Standard



https://thestandard.co/thestandardeconomicforum2025/



*/





/* 

---------------------------------------------

font & reset css

--------------------------------------------- 

*/

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

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

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

@font-face {

font-family: 'Galyon Regular';

font-style: normal;

font-weight: normal;

src: local('Galyon Regular'), url('../fonts/Galyon-Regular.woff') format('woff');

}





@font-face {

font-family: 'Galyon Italic Italic';

font-style: normal;

font-weight: normal;

src: local('Galyon Italic Italic'), url('../fonts/Galyon-Italic.woff') format('woff');

}





@font-face {

font-family: 'Galyon Bold Bold';

font-style: normal;

font-weight: normal;

src: local('Galyon Bold Bold'), url('../fonts/Galyon-Bold.woff') format('woff');

}



@font-face {

    font-family: 'DB HeaventRounded';

    src: url('../fonts/DBHeaventRounded-Bold.woff2') format('woff2'),

        url('../fonts/DBHeaventRounded-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'DB HeaventRounded';

    src: url('../fonts/DBHeaventRounded.woff2') format('woff2'),

        url('../fonts/DBHeaventRounded.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'DB HeaventRounded Cond';

    src: url('../fonts/DBHeaventRounded-Cond.woff2') format('woff2'),

        url('../fonts/DBHeaventRounded-Cond.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'DB Heavent Med';

    src: url('../fonts/DBHeavent-Med.woff2') format('woff2'),

        url('../fonts/DBHeavent-Med.woff') format('woff');

    font-weight: 500;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'DB Heavent';

    src: url('../fonts/DBHeavent.woff2') format('woff2'),

        url('../fonts/DBHeavent.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'DB Heavent';

    src: url('../fonts/DBHeavent-Thin.woff2') format('woff2'),

        url('../fonts/DBHeavent-Thin.woff') format('woff');

    font-weight: 100;

    font-style: normal;

    font-display: swap;

}

/* 

---------------------------------------------

reset

--------------------------------------------- 

*/

:root {

--color-white: #FFFFFF;

--color-black: #000000;

--color-gray: #d9d9d9;

--color-darkgray: #333333;

--color-blue: #100c72;

--color-red: #f33611;

--color-yellow: #ffce00;

--color-orange: #f33611;



--fontfamily1: 'DB Heavent';

--fontfamily2: 'DB Heavent Med';

--fontfamily3: 'DB HeaventRounded';

--fontfamily4: 'DB HeaventRounded Cond';

}





html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div

pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,

s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,

figure, header, nav, section, article, aside, footer, figcaption {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

}



/* clear fix */

.grid:after {

  content: '';

  display: block;

  clear: both;

}



/* ---- .grid-item ---- */



.grid-sizer,

.grid-item {

  width: 50%;

}



.grid-item {

  float: left;

}



.grid-item img {

  display: block;

  max-width: 100%;

}



.clearfix:after {

  content: ".";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

}



.clearfix {

  display: inline-block;

}



html[xmlns] .clearfix {

  display: block;

}



* html .clearfix {

  height: 1%;

}



ul, li {

  padding: 0;

  margin: 0;

  list-style: none;

}



header, nav, section, article, aside, footer, hgroup {

  display: block;

}



* {

  box-sizing: border-box;

}



html, body {

  /*font-family: 'Poppins', sans-serif;

  font-weight: 400;*/

  font-family: 'Galyon Bold Bold';

  font-weight: bold;

  background-color: #022783;

  -ms-text-size-adjust: 100%;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



a {

  text-decoration: none !important;

}



h1, h2, h3, h4, h5, h6 {

  margin-top: 0px;

  margin-bottom: 0px;

}



ul {

  margin-bottom: 0px;

}



p {

  font-size: 15px;

  line-height: 30px;

  color: #2a2a2a;

}



img {

  width: 100%;

  overflow: hidden;

}



/* 

---------------------------------------------

global styles

--------------------------------------------- 

*/

html,

body {

  background: var(--color-orange);

/*  font-family: 'Poppins', sans-serif;*/

  font-family: 'Galyon Bold Bold';

  font-weight: bold;

}



::selection {

  background: #03a4ed;

  color: #fff;

}



::-moz-selection {

  background: #03a4ed;

  color: #fff;

}



@media (max-width: 991px) {

  html, body {

    overflow-x: hidden;

  }

  .mobile-top-fix {

    margin-top: 30px;

    margin-bottom: 0px;

  }

  .mobile-bottom-fix {

    margin-bottom: 30px;

  }

  .mobile-bottom-fix-big {

    margin-bottom: 60px;

  }

}



.page-section {

  margin-top: 120px;

}



.section-heading .headline {

  font-size: 30px;

  text-transform: capitalize;

  color: #2a2a2a;

  font-weight: 700;

  letter-spacing: 0.25px;

  position: relative;

  z-index: 2;

  line-height: 44px;



  font-family: var(--fontfamily2);

}



.section-heading .headline em {

  font-style: normal;

  color: #03a4ed;

}



.section-heading .headline span {

  color: #fe3f40;

}



.main-blue-button a {

  display: inline-block;

  background-color: #03a4ed;

  font-size: 15px;

  font-weight: 400;

  color: #fff;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 30px;

  letter-spacing: 0.25px;

}



.main-red-button a {

  display: inline-block;

  background-color: #fe3f40;

  font-size: 15px;

  font-weight: 400;

  color: #fff;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 30px;

  letter-spacing: 0.25px;

}



.main-white-button a {

  display: inline-block;

  background-color: #fff;

  font-size: 15px;

  font-weight: 400;

  color: #fe3f40;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 30px;

  letter-spacing: 0.25px;

}



.main-buy-button a {

  display: inline-block;

  background-color: var(--color-orange);

  font-size: 22px;

  font-family: var(--fontfamily2);

  font-weight: 700;

  color: var(--color-white);

  text-transform: capitalize;

  padding: 8px 25px;

  border-radius: 30px;

  letter-spacing: 0.25px;



  -webkit-transition: background-color .3s ease-out;

  -moz-transition: background-color .3s ease-out;

  -o-transition: background-color .3s ease-out;

  transition: background-color .3s ease-out;

  

  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);

  margin-bottom: 20px;

}

.main-buy-button a:hover {background-color: #ffdf58; color: var(--color-blue);}



.main-more-button {margin-top: 3em;}



.main-more-button a {

  display: inline-block;

  background-color: var(--color-yellow);

  font-size: 16px;

  font-weight: 700;

  color: var(--color-red);

  text-transform: capitalize;

  padding: 5px 40px;

  border-radius: 30px;

  letter-spacing: 0.25px;



  -webkit-transition: background-color .3s ease-out;

  -moz-transition: background-color .3s ease-out;

  -o-transition: background-color .3s ease-out;

  transition: background-color .3s ease-out;

}

.main-more-button a:hover {background-color: #ffdf58; color: var(--color-blue);}



.main-landing-button a {

  display: inline-block;

  background-color: var(--color-red);

  font-size: 22px;

  font-weight: 700;

  color: var(--color-white);

  text-transform: capitalize;

  padding: 8px 0;

  border-radius: 30px;

  letter-spacing: 0.25px;



  width: 365px;

  margin-top: 1em;

  font-family: var(--fontfamily2);



  -webkit-transition: background-color .3s ease-out;

  -moz-transition: background-color .3s ease-out;

  -o-transition: background-color .3s ease-out;

  transition: background-color .3s ease-out;



  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);

}

.main-landing-button a:hover {background-color: #ffdf58; color: var(--color-blue);}





/* 

---------------------------------------------

header

--------------------------------------------- 

*/



.background-header {

  background-color: #fff!important;

  height: 80px!important;

  position: fixed!important;

  top: 0px;

  left: 0px;

  right: 0px;

  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;

}



.background-header .logo,

.background-header .main-nav .nav li a {

  color: #1e1e1e!important;

}



.background-header .main-nav .nav li:hover a {

  color: #fe3f40!important;

}



.background-header .nav li a.active {

  color: #fe3f40!important;

}



.header-area {

/*  background-color: var(--color-yellow);*/

  position: absolute;

  top: 0px;

  left: 0px;

  right: 0px;

  z-index: 100;

  height: 100px;

  -webkit-transition: all .5s ease 0s;

  -moz-transition: all .5s ease 0s;

  -o-transition: all .5s ease 0s;

  transition: all .5s ease 0s;

}



.header-area .main-nav {

  min-height: 80px;

  background: transparent;

}



.header-area .main-nav .logo {

  color: #fff;

  font-size: 26px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}



.header-area .main-nav .logo h4 {

    font-size: 26px;

    font-weight: 700;

    text-transform: uppercase;

    color: #03a4ed;

    line-height: 100px;

    float: left;

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.header-area .main-nav .logo img {width: 100%; max-width: 150px;}

.header-area.background-header .main-nav .logo {line-height: 80px;}







.logo h4 span {

  color: #fe3f40;

}



.background-header .main-nav .logo h4 {

  line-height: 80px;

}



.background-header .main-nav .nav {

  margin-top: 20px !important;

}



.header-area .main-nav .nav {

  width: fit-content;

  height: fit-content;

  background-color: transparent;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

  position: relative;

  z-index: 2;



  font-family: var(--fontfamily2);

  font-weight: 500;

}



.header-area .main-nav .nav li {

  padding-left: 8px;

  padding-right: 8px;

}



/*.header-area .main-nav .nav li:first-child {

  padding-left: 0;

}



.header-area .main-nav .nav li:last-child {

  padding-right: 0px;

}*/



/*.header-area .main-nav .nav li:last-child a ,

.background-header .main-nav .nav li:last-child a {

  color: #fff !important;

  padding: 0px 20px;

  font-weight: 400;

}*/



/*.header-area .main-nav .nav li:last-child a:hover,

.header-area .main-nav .nav li:last-child a.active {

  color: #fff !important;

}*/



/*.header-area .main-nav .nav li a:after{

  content: " |";

  color: #000;

}*/



/*.header-area .main-nav .nav li.last a:after {

  content: unset;

}*/





.header-area .main-nav .nav li a {

  display: block;

  font-weight: 500;

  font-size: 24px;

  color: var(--color-white);

  text-transform: uppercase;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

/*  height: 40px;*/

  line-height: 40px;

  border: transparent;

  letter-spacing: 0.5px;

}



.header-area .main-nav .nav li:hover a,

.header-area .main-nav .nav li a.active {

  color: var(--color-red)!important;

}



.background-header .main-nav .nav li:hover a,

.background-header .main-nav .nav li a.active {

  color: #fe3f40!important;

  opacity: 1;

}



/*.header-area .main-nav .nav li:last-child a:hover ,

.background-header .main-nav .nav li:last-child a:hover {

  background-color: #03a4ed;

}*/



.header-area .main-nav .nav li.submenu {

  position: relative;

  padding-right: 30px;

}



.header-area .main-nav .nav li.submenu:after {

  font-family: FontAwesome;

  content: "\f107";

  font-size: 12px;

  color: #2a2a2a;

  position: absolute;

  right: 18px;

  top: 12px;

}



.background-header .main-nav .nav li.submenu:after {

  color: #2a2a2a;

}



.header-area .main-nav .nav li.submenu ul {

  position: absolute;

  width: 200px;

  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);

  overflow: hidden;

  top: 50px;

  opacity: 0;

  transform: translateY(+2em);

  visibility: hidden;

  z-index: -1;

  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

}



.header-area .main-nav .nav li.submenu ul li {

  margin-left: 0px;

  padding-left: 0px;

  padding-right: 0px;

}



.header-area .main-nav .nav li.submenu ul li a {

  opacity: 1;

  display: block;

  background: #f7f7f7;

  color: #2a2a2a!important;

  padding-left: 20px;

  height: 40px;

  line-height: 40px;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

  position: relative;

  font-size: 13px;

  font-weight: 400;

  border-bottom: 1px solid #eee;

}



.header-area .main-nav .nav li.submenu ul li a:hover {

  background: #fff;

  color: #fe3f40!important;

  padding-left: 25px;

}



.header-area .main-nav .nav li.submenu ul li a:hover:before {

  width: 3px;

}



.header-area .main-nav .nav li.submenu:hover ul {

  visibility: visible;

  opacity: 1;

  z-index: 1;

  transform: translateY(0%);

  transition-delay: 0s, 0s, 0.3s;

}



.header-area .main-nav .menu-trigger {

  cursor: pointer;

  display: block;

  position: absolute;

  top: 25px;

  width: 32px;

  height: 40px;

  text-indent: -9999em;

  z-index: 99;

  left: 25px;

  display: none;

}



.background-header .main-nav .menu-trigger {

  top: 23px;

}



.header-area .main-nav .menu-trigger span,

.header-area .main-nav .menu-trigger span:before,

.header-area .main-nav .menu-trigger span:after {

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  background-color: var(--color-black);

  display: block;

  position: absolute;

  width: 30px;

  height: 2px;

  left: 0;

}



.background-header .main-nav .menu-trigger span,

.background-header .main-nav .menu-trigger span:before,

.background-header .main-nav .menu-trigger span:after {

  background-color: var(--color-black);

}



.header-area .main-nav .menu-trigger span:before,

.header-area .main-nav .menu-trigger span:after {

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  background-color: var(--color-black);

  display: block;

  position: absolute;

  width: 30px;

  height: 2px;

  left: 0;

  width: 75%;

}



.background-header .main-nav .menu-trigger span:before,

.background-header .main-nav .menu-trigger span:after {

  background-color: var(--color-black);

}



.header-area .main-nav .menu-trigger span:before,

.header-area .main-nav .menu-trigger span:after {

  content: "";

}



.header-area .main-nav .menu-trigger span {

  top: 16px;

}



.header-area .main-nav .menu-trigger span:before {

  -moz-transform-origin: 33% 100%;

  -ms-transform-origin: 33% 100%;

  -webkit-transform-origin: 33% 100%;

  transform-origin: 33% 100%;

  top: -10px;

  z-index: 10;

}



.header-area .main-nav .menu-trigger span:after {

  -moz-transform-origin: 33% 0;

  -ms-transform-origin: 33% 0;

  -webkit-transform-origin: 33% 0;

  transform-origin: 33% 0;

  top: 10px;

}



.header-area .main-nav .menu-trigger.active span,

.header-area .main-nav .menu-trigger.active span:before,

.header-area .main-nav .menu-trigger.active span:after {

  background-color: transparent;

  width: 100%;

}



.header-area .main-nav .menu-trigger.active span:before {

  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);

  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);

  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);

  transform: translateY(6px) translateX(1px) rotate(45deg);

  background-color: var(--color-red);

}



.background-header .main-nav .menu-trigger.active span:before {

  background-color: var(--color-red);

}



.header-area .main-nav .menu-trigger.active span:after {

  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);

  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);

  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);

  transform: translateY(-6px) translateX(1px) rotate(-45deg);

  background-color: var(--color-red);

}



.background-header .main-nav .menu-trigger.active span:after {

  background-color: var(--color-black);

}



.header-area.header-sticky {

  min-height: 60px;

}



.header-area .nav {

  /*margin-top: 50px;*/

  height: 90px;

}



.header-area.header-sticky .nav li a.active {

  color: #fe3f40;

}



@media (max-width: 1200px) {

  .header-area .main-nav .nav li {

    padding-left: 12px;

    padding-right: 12px;

  }

  .header-area .main-nav:before {

    display: none;

  }

}







/* 

---------------------------------------------

preloader

--------------------------------------------- 

*/



.js-preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #fff;

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    -webkit-box-pack: center;

    justify-content: center;

    opacity: 1;

    visibility: visible;

    z-index: 9999;

    -webkit-transition: opacity 0.25s ease;

    transition: opacity 0.25s ease;

}



.js-preloader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}



@-webkit-keyframes dot {

    50% {

        -webkit-transform: translateX(96px);

        transform: translateX(96px);

    }

}



@keyframes dot {

    50% {

        -webkit-transform: translateX(96px);

        transform: translateX(96px);

    }

}



@-webkit-keyframes dots {

    50% {

        -webkit-transform: translateX(-31px);

        transform: translateX(-31px);

    }

}



@keyframes dots {

    50% {

        -webkit-transform: translateX(-31px);

        transform: translateX(-31px);

    }

}



.preloader-inner {

    position: relative;

    width: 142px;

    height: 40px;

    background: #fff;

}



.preloader-inner .dot {

    position: absolute;

    width: 16px;

    height: 16px;

    top: 12px;

    left: 15px;

    /*background: #fe3f40;*/

    background: #020024;

    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);

    border-radius: 50%;

    -webkit-transform: translateX(0);

    transform: translateX(0);

    -webkit-animation: dot 2.8s infinite;

    animation: dot 2.8s infinite;

}



.preloader-inner .dots {

    -webkit-transform: translateX(0);

    transform: translateX(0);

    margin-top: 12px;

    margin-left: 31px;

    -webkit-animation: dots 2.8s infinite;

    animation: dots 2.8s infinite;

}



.preloader-inner .dots span {

    display: block;

    float: left;

    width: 16px;

    height: 16px;

    margin-left: 16px;

    /*background: #fe3f40;*/

    background: #020024;

    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);

    border-radius: 50%;

}







/* 

---------------------------------------------

Banner Style

--------------------------------------------- 

*/



.main-banner {

  /*background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  padding: 226px 0px 120px 0px;*/

  position: relative;

  overflow: hidden;

}



/*.main-banner:after {

  content: '';

  background-image: url(../images/baner-dec-left.png);

  background-repeat: no-repeat;

  position: absolute;

  left: 0;

  top: 100px;

  width: 193px;

  height: 467px;

}*/



/*.main-banner:before {

  content: '';

  background-image: url(../images/baner-dec-right.png);

  background-repeat: no-repeat;

  position: absolute;

  right: 0;

  top: 100px;

  width: 98px;

  height: 290px;

}*/



.main-banner .left-content {

  margin-right: 45px;

}



.main-banner .left-content h6 {

  text-transform: uppercase;

  font-size: 18px;

  color: #fe3f40;

  margin-bottom: 15px;

}



.main-banner .left-content h2 {

  font-size: 50px;

  font-weight: 700;

  color: #2a2a2a;

  line-height: 72px;

}



.main-banner .left-content h2 em {

  color: #03a4ed;

  font-style: normal;

}



.main-banner .left-content h2 span {

  color: #fe3f40;

}



.main-banner .left-content p {

  margin: 20px 0px;

}



.main-banner .left-content form {

  margin-top: 30px;

  width: 470px;

  height: 66px;

  position: relative;

}



.main-banner .left-content form button {

  position: absolute;

  right: 10px;

  top: 10px;

  display: inline-block;

  background-color: #fff;

  font-size: 15px;

  font-weight: 500;

  color: #fe3f40;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 30px;

  letter-spacing: 0.25px;

  outline: none;

  border: none;

}



.main-banner .left-content form input {

  width: 470px;

  height: 66px;

  background-color: #03a4ed;

  border-radius: 33px;

  border: none;

  outline: none;

  padding: 0px 25px;

  color: #fff;

  letter-spacing: 0.25px;

  font-size: 15px;

  font-weight: 300;

}



.main-banner .left-content form input::placeholder {

  color: #fff;

}







/* 

---------------------------------------------

About Us Style

--------------------------------------------- 

*/



#about {padding: 45px 0 5px;}



#about .container {padding: 0 8vw;}



.about-us {

  background-image: url(../images/bg/bg-about-highlight-desktop.webp);

  background-repeat: no-repeat;

  background-position: top center;

  background-size: 100% 100%;

}



.about-us .left-image {

  margin-right: 45px;

}





.about-us .services .item .icon {

  float: left;

  margin-right: 25px;

}



.about-us .services .item .icon img {

  max-width: 65px;

}



.about-us .services .item h4 {

  color: var(--color-red);

  font-size: 30px;

  font-weight: 700;

}



.about-us .services .item p {

  color: var(--color-black);

}



.about-us .section-heading {text-align: center!important; margin-bottom: 3em;}

.about-us .section-img {}

.about-us .section-img img {width: 100%; max-width: 450px; padding: 15px 15px 0;}



.about-block {display: grid; grid-template-columns: 1fr 1fr; text-align: left;}

.about-block .left p {color: var(--color-red)!important; font-size: 28px!important;}

.about-block .right h4 {font-size: 24px; color: var(--color-white); font-family: var(--fontfamily1); font-weight: 600;}

.about-block .right h5 {font-size: 20px; color: var(--color-white); font-family: var(--fontfamily1); font-weight: 500; margin-top: 1rem;}



.about-score-block {margin-bottom: 4rem; width: 80%; margin-left: auto; margin-right: auto;}



/* 

---------------------------------------------

About Us Style

--------------------------------------------- 

*/





.ticket-phase {

  background-image: url(../images/bg/bg-ticket-phasing-desktop.webp);

  background-repeat: no-repeat;

  background-position: bottom center;

  background-size: 100% 100%;



/*  padding: 60px 0px 200px;*/

  padding: 60px 0px;

}



.ticket-phase .left-image {

  margin-right: 45px;

}





.ticket-phase .services .item .icon {

  float: left;

  margin-right: 25px;

}



.ticket-phase .services .item .icon img {

  max-width: 65px;

}



.ticket-phase .services .item h4 {

  color: var(--color-red);

  font-size: 30px;

  font-weight: 700;

}



.ticket-phase .services .item p {

  color: var(--color-black);

}



/* 

---------------------------------------------

HIGHLIGHT Us Style

--------------------------------------------- 

*/





.highlight {

  /*background-color: #ffce00;*/

  padding: 45px 0px;

  overflow: hidden;

}



.highlight .left-image {

  margin-right: 45px;

}





.highlight .services .item .icon {

  float: left;

  margin-right: 25px;

}



.highlight .services .item .icon img {

  max-width: 65px;

}



.highlight .services .item h4 {

  color: var(--color-red);

  font-size: 30px;

  font-weight: 700;

}



.highlight .services .item p {

  color: var(--color-black);

}



.highlight .remark {font-size: 20px; margin-top: 2em; text-align: left; font-family: var(--fontfamily1); font-weight: 500; line-height: 1.25;}



.highlight-block {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px;}



.highlight-text {text-align: left;}

#about .highlight-text img {border-radius: 20px;}



.agenda-block {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 15px;}



/* 

---------------------------------------------

PAST EVENT Us Style

--------------------------------------------- 

*/





.past-event {

  padding: 60px 0px;

  background-image: url(../images/bg/bg-past-events-desktop.webp);

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;

}



.past-event .left-image {

  margin-right: 45px;

}





.past-event .services .item .icon {

  float: left;

  margin-right: 25px;

}



.past-event .services .item .icon img {

  max-width: 65px;

}



.past-event .services .item h4 {

  color: var(--color-red);

  font-size: 30px;

  font-weight: 700;

}



.past-event .services .item p {

  color: var(--color-black);

}



.past-event .remark {font-size: 18px; margin-top: 2em; text-align: left; font-family: var(--fontfamily1); font-weight: 500;}



/*.past-event-block {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px;}*/



.past-event-block {display: flex; flex-wrap: wrap; gap: 35px; row-gap: 50px; justify-content: center;}

.past-event-block > div {flex: 50%;}

.past-event-text {border-radius: 10px; overflow: hidden; width: 100%; max-width: 250px;}



/* 

---------------------------------------------

Services Style

--------------------------------------------- 

*/



.our-services {

  margin-top: 0px;

  padding-top: 120px;

}



.our-services .left-image {

  margin-right: 45px;

}



.our-services .section-heading .headline {

  margin-right: 100px;

}



.our-services .section-heading p {

  margin-top: 30px;

  margin-bottom: 60px;

}



.our-services .progress-skill-bar {

  margin-bottom: 30px;

  position: relative;

  width: 100%;

}



.our-services .progress-skill-bar span {

  position: absolute;

  top: 0;

  font-size: 18px;

  font-weight: 600;

  color: #03a4ed;

}



.our-services .first-bar span {

  left: 69%;

}



.our-services .second-bar span {

  left: 81%;

}



.our-services .third-bar span {

  left: 88%;

}



.our-services .progress-skill-bar h4 {

  font-size: 18px;

  font-weight: 700;

  color: #2a2a2a;

  margin-bottom: 14px;

}



.our-services .progress-skill-bar .full-bar {

  width: 100%;

  height: 6px;

  border-radius: 3px;

  background-color: #f7eff1;

  position: relative;

  z-index: 1;

}



.our-services .progress-skill-bar .filled-bar {

  background: rgb(255,77,30);

  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);

  height: 6px;

  border-radius: 3px;

  margin-bottom: -6px;

  position: relative;

  z-index: 2;

}



.our-services .first-bar .filled-bar {

  width: 71%;

}



.our-services .second-bar .filled-bar {

  width: 83%;

}



.our-services .third-bar .filled-bar {

  width: 90%;

}





/* 

---------------------------------------------

Portfolio

--------------------------------------------- 

*/



.our-portfolio {

  padding-top: 120px;

  margin-top: 0px;

}



.our-portfolio .section-heading .headline {

  text-align: center;

  margin: 0px 90px 0px 90px;

  margin-bottom: 120px;

  position: relative;

  z-index: 1;

}



.our-portfolio .item {

  position: relative;

}



.our-portfolio .item:hover .hidden-content {

  top: -100px;

  opacity: 1;

  visibility: visible;

}



.our-portfolio .item:hover .showed-content {

  top: 90px;

}



.our-portfolio .hidden-content {

  background: rgb(255,77,30);

  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);

  padding: 30px;

  border-radius: 20px;

  text-align: center;

  opacity: 0;

  top: 0;

  visibility: hidden;

  position: absolute;

  z-index: 2;

  transition: all 0.5s;

}



.our-portfolio .hidden-content:after {

  width: 20px;

  height: 20px;

  position: absolute;

  background: rgb(255,77,30);

  content: '';

  left: 50%;

  bottom: -8px;

  margin-left: -5px;

  transform: rotate(45deg);

  background: linear-gradient(105deg, rgba(255,52,69,1) 0%, rgba(255,51,78,1) 100%);

  z-index: -1;

}



.our-portfolio .hidden-content h4 {

  font-size: 20px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 20px;

}



.our-portfolio .hidden-content p {

  color: #fff;

}



.our-portfolio .showed-content {

  top: 0px;

  position: relative;

  z-index: 3;

  background-color: #fff;

  text-align: center;

  padding: 50px;

  border-radius: 20px;

  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

  transition: all 0.5s;

}



.our-portfolio .showed-content img {

  max-width: 100px;

}





/* 

---------------------------------------------

Blog

--------------------------------------------- 

*/



.our-blog {

  position: relative;

  margin-top: 80px;

  padding-top: 120px;

}



.our-blog .section-heading .headline {

  margin-right: 180px;

}



.our-blog .top-dec {

  text-align: right;

  margin-top: -80px;

}



.our-blog .top-dec img {

  max-width: 270px;

}



.our-blog .left-image {

  position: relative;

}



.our-blog .left-image img {

  border-radius: 20px;

  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);

}



.our-blog .left-image .info {

  position: relative;

}



.our-blog .left-image .info .inner-content {

  background-color: #fff;

  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);

  border-radius: 20px;

  margin-right: 75px;

  position: absolute;

  margin-top: -100px;

  padding: 30px;

}



.our-blog .left-image ul li {

  display: inline-block;

  font-size: 15px;

  color: #afafaf;

  font-weight: 300;

  margin-right: 20px;

}



.our-blog .left-image ul li:last-child {

  margin-right: 0px;

}



.our-blog .left-image ul li i {

  color: #ff4d61;

  font-size: 16px;

  margin-right: 8px;

}



.our-blog .left-image h4 {

  font-size: 20px;

  font-weight: 700;

  color: #2a2a2a;

  margin: 20px 0px 15px 0px;

}



.our-blog .left-image .info .main-blue-button {

  position: absolute;

  bottom: -80px;

  left: 0;

}



.our-blog .right-list {

  margin-left: 30px;

}



.our-blog .right-list ul li {

  display: inline-flex;

  width: 100%;

  margin-bottom: 30px;

}



.our-blog .right-list .left-content {

  margin-right: 45px;

}



.our-blog .right-list .left-content span {

  font-size: 15px;

  color: #afafaf;

  font-weight: 300;

}



.our-blog .right-list .left-content span i {

  color: #ff4d61;

  font-size: 16px;

  margin-right: 8px;

}



.our-blog .right-list .left-content h4 {

  font-size: 20px;

  font-weight: 700;

  color: #2a2a2a;

  margin: 20px 0px 15px 0px;

}





.our-blog .right-list .right-image img {

  width: 250px;

  border-radius: 20px;

}





/* 

---------------------------------------------

contact

--------------------------------------------- 

*/



/*.contact-us {

  padding: 160px 0px;

  background-image: url(../images/contact-bg.png);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

}*/



.contact-us .section-heading .headline,

.contact-us .section-heading .headline em,

.contact-us .section-heading .headline span {

  color: #fff;

}



.contact-us .section-heading p {

  color: #fff;

  margin-top: 30px;

}



.phone-info {

  margin-top: 40px;

}



.phone-info h4 {

  font-size: 20px;

  font-weight: 700;

  color: #fff;

}



.phone-info h4 span i {

  width: 46px;

  height: 46px;

  display: inline-block;

  text-align: center;

  line-height: 46px;

  background-color: #fff;

  border-radius: 50%;

  color: #ff3b2c;

  font-size: 22px;

  margin-left: 30px;

  margin-right: 15px;

}



.phone-info h4 span a {

  color: #fff;

  font-size: 15px;

  font-weight: 400;

}



/*.contact-info {

  margin: 15px auto 40px;

}*/



.contact-info h4 {

  font-size: 20px;

  font-weight: 700;

  color: #fff;

}



.contact-info h4 span i {

  width: 46px;

  height: 46px;

  display: inline-block;

  text-align: center;

  line-height: 46px;

  background-color: #fff;

  border-radius: 50%;

  color: #ff3b2c;

  font-size: 22px;

  margin-left: 30px;

  margin-right: 15px;

}



.contact-info h4 span a {

  color: #fff;

  font-size: 15px;

  font-weight: 400;

}



form#contact .contact-dec {

  position: absolute;

  right: -166px;

  bottom: 0;

}



form#contact .contact-dec img {

  max-width: 178px;

}



form#contact {

  margin-left: 30px;

  position: relative;

  background-color: #fff;

  padding: 60px 30px;

  border-radius: 20px;

}



form#contact input {

  width: 100%;

  height: 46px;

  border-radius: 33px;

  background-color: #d1f3ff;

  border: none;

  outline: none;

  font-size: 15px;

  font-weight: 300;

  color: #2a2a2a;

  padding: 0px 20px;

  margin-bottom: 20px;

}



form#contact input::placeholder {

  color: #2a2a2a;

}



form#contact textarea {

  width: 100%;

  min-width: 100%;

  max-width: 100%;

  max-height: 180px;

  min-height: 140px;

  height: 140px;

  border-radius: 20px;

  background-color: #d1f3ff;

  border: none;

  outline: none;

  font-size: 15px;

  font-weight: 300;

  color: #2a2a2a;

  padding: 15px 20px;

  margin-bottom: 20px;

}



form#contact textarea::placeholder {

  color: #2a2a2a;

}



form#contact button {

  display: inline-block;

  background-color: #03a4ed;

  font-size: 15px;

  font-weight: 400;

  color: #fff;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 30px;

  letter-spacing: 0.25px;

  border: none;

  outline: none;

  transition: all .3s;

}



form#contact button:hover {

  background-color: #fe3f40;

}





/* 

---------------------------------------------

Footer Style

--------------------------------------------- 

*/

footer {background-color: var(--color-black);}



footer p {

  font-size: 18px;

  font-weight: 900;

  color: #FFF;

  text-align: center;

  margin: 0 0 80px;

  font-family: var(--fontfamily1);

}



footer p a {

  color: #FFF;

}







/* 

---------------------------------------------

responsive

--------------------------------------------- 

*/



@media (max-width: 1645px) {

  form#contact .contact-dec {

    display: none;

  }

}



@media (max-width: 992px) {

  /*.main-banner {

    padding-top: 196px;

  }*/

  .main-banner .left-content {

    margin-right: 0px;

    text-align: center;

    margin-bottom: 45px;

  }

  .main-banner:after {

    top: 76px;

    z-index: -1;

  }

  .main-banner .left-content form,

  .main-banner .left-content form input {

    width: 100%!important;

  }



  .about-us {

    position: relative;

    background-image: none;

  }

  .about-us .left-image {

    margin-right: 0px;

    position: absolute;

    bottom: -220px;

    right: 0;

  }

  .about-us .services {

    text-align: center;

  }















  .highlight {

    position: relative;

    background-image: none;

  }

  .highlight .left-image {

    margin-right: 0px;

    position: absolute;

    bottom: -220px;

    right: 0;

  }

  .highlight .services {

    text-align: center;

  }



  #pastevent {

    margin-top: 0px;

  }

  .past-event {

    position: relative;

    background-image: none;

  }

  .past-event .left-image {

    margin-right: 0px;

    position: absolute;

    bottom: -220px;

    right: 0;

  }

  .past-event .services {

    text-align: center;

  }





  /*.about-us .services .item  {

    background: rgb(255,77,30);

    background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);

    padding: 30px;

    border-radius: 20px;

    display: inline-block;

  }

  .about-us .services .item .right-text {

    text-align: left;

  }*/

  .our-services {

    margin-top: 200px;

  }

  .our-services .left-image {

    margin-right: 0px;

    margin-bottom: 45px;

  }

  .our-services .section-heading .headline,

  .our-services .section-heading p {

    margin-right: 0px;

    text-align: center;

  }

  .our-portfolio .section-heading .headline {

    margin: 0px 0px 80px 0px;

  }

  .our-portfolio .item {

    margin-bottom: 15px;

  }

  .our-blog {

    margin-top: 0px;

  }

  .our-blog .top-dec {

    display: none;

  }

  .our-blog .section-heading .headline {

    margin-right: 0px;

    text-align: center;

    margin-bottom: 45px;

  }

  .our-blog .left-image .info .inner-content {

    position: relative;

    margin-right: 0px;

  }

  .our-blog .left-image .info .main-blue-button {

    position: relative;

    bottom: 0px;

    margin-top: 30px;

  }

  .our-blog .left-image {

    margin-bottom: 45px;

  }

  /*.contact-us {

    margin-top: 60px;

    padding: 120px 0px;

  }*/

  .contact-us .section-heading {

    text-align: center;

  }

  form#contact {

    margin-left: 0px;

    margin-top: 30px;

  }

  form#contact .contact-dec {

    display: none;

  }

  footer p {

/*    margin: 15px 0px 30px 0px;*/

  }

}









/* AOTE EDIT 05/07/2024 */

.hidden-xs {display: block!important;}

.visible-xs {display: none!important;}



footer {text-align: center;}

img.logo-footer {width: 100%; max-width: 185px; float: left;}



#contact {background-color: var(--color-black); padding: 40px 0px;}

#contact .section-heading {text-align: center;}

#contact .section-heading img {width: 100%;}



#contact .section-heading .contact-info {text-align: center; font-family: var(--fontfamily1); font-weight: normal;}

#contact .section-heading .contact-info > div {text-align: left; min-width: 250px;}



#contact .section-heading .contact-info img {width: 100%; max-width: 27px; margin-bottom: 5px;}

#contact .section-heading .contact-info a {color: var(--color-white);}

#contact .section-heading .contact-info a:hover {color: var(--color-red);

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}



#contact .section-heading .contact-info {display: flex; justify-content: center;}



#contact .section-heading .headline {color: var(--color-red)!important; font-size: 30px;}



.contact-info-block {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px; margin-top: 1em; align-items: start;}

.contact-info-image {text-align: right;}







.poster-highlight-block {

  background-image: url(../images/bg/poster-highlight-desktop.webp);

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;



  padding-top: 130px;

  height: 100vh;



  position: relative;

}



.poster-rerun-block {

  background-image: url(../images/bg-rerun-desktop-v2.jpg);

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;



  padding: calc((243px - 113px) / 2) 0;

}

.poster-rerun-block h2 {font-size: 30px; color: #FFF; text-align: center; margin-bottom: 0.5em;}



.poster-rerun-block .main-buy-button a {

  background-color: var(--color-white);

  color: var(--color-black);

  width: 225px;

  padding: 15px 0;

}

.poster-rerun-block .main-buy-button a:hover {

  background-color: #ffdf58; color: var(--color-blue);

}





.about-us .services .item h4 {padding-top: 20px;}

.about-us .services .section-heading p,

.about-us .services .item p,

.speaker .section-heading p {font-family: var(--fontfamily1); font-weight: 500; line-height: 24px;}



.about-us .services .section-heading p,

.speaker .section-heading p,

.about-us .services .item p {font-size: 24px;}

/*.about-us .services .section-heading {margin-bottom: 2em;}*/

#about .section-heading {text-align: center;}

#about .section-heading .headline {

    color: var(--color-white)!important;

    font-size: 30px;

    margin-bottom: 25px;

}

#about .section-heading h3 {

    color: var(--color-white)!important;

    font-size: 30px;

    font-family: var(--fontfamily1);

    font-weight: 600;

    line-height: 1;

}





#about .section-heading p {

    font-size: 22px;

    font-family: var(--fontfamily1)!important;

    font-weight: 400!important;

    line-height: 1;

    color: var(--color-white);

}



#about hr {color: #FFF; padding: 0; margin: 0; height: 2px;}



.ticket-phase .services .item h4 {padding-top: 20px;}

.ticket-phase .services .section-heading p,

.ticket-phase .services .item p {font-family: var(--fontfamily1); font-weight: 500; line-height: 24px;}



.ticket-phase .services .section-heading p,

.ticket-phase .services .item p {font-size: 22px;}



#ticketphase .section-heading {text-align: center;}

#ticketphase .section-heading .headline {

    color: var(--color-white)!important;

    font-size: 30px;

    margin-bottom: 25px;

}

#ticketphase .section-heading h3 {

    color: var(--color-red)!important;

    font-size: 26px;

    font-family: var(--fontfamily2);

}



.highlight .services .item h4 {padding-top: 20px;}

.highlight .services .section-heading p,

.highlight .services .item p {font-family: var(--fontfamily1); font-weight: 500; line-height: 24px;}



.highlight .services .section-heading p,

.highlight .services .item p {font-size: 22px;}



#highlight .section-heading {text-align: center;}

#highlight .section-heading .headline {

    color: var(--color-white)!important;

    font-size: 30px;

    margin-bottom: 25px;

}

#highlight .section-heading h3 {

    color: var(--color-white)!important;

    font-size: 26px;

    font-family: var(--fontfamily2);

    text-transform: uppercase;

    font-weight: 900;

    margin-top: 15px;

    line-height: 1;

}

#highlight .section-heading h4 {

    color: var(--color-white)!important;

    font-size: 22px;

    font-family: var(--fontfamily1);

    text-transform: uppercase;

    font-weight: 600;

    margin-top: 10px;

    margin-bottom: 10px;

    padding-top: 0;

}





.past-event .services .item h4 {padding-top: 20px;}

.past-event .services .section-heading p,

.past-event .services .item p {font-family: var(--fontfamily1); font-weight: 500; line-height: 24px;}



.past-event .services .section-heading p,

.past-event .services .item p {font-size: 20px;}



#pastevent .section-heading {text-align: center;}

#pastevent .section-heading .headline {

    color: var(--color-white)!important;

    font-size: 30px;

    margin-bottom: 25px;

}

#pastevent .section-heading h3 {

    color: var(--color-black)!important;

    font-size: 26px;

    font-family: var(--fontfamily2);

    text-transform: uppercase;

    font-weight: 900;

    margin-top: 20px;

}





.speaker .section-heading p {text-align: center; color: var(--color-white); margin-bottom: 1.5em;}



/*.solution {

  background-color: #e0e0e0;

  padding: 15px 0 40px;

  overflow: hidden;

}



.solution-block {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px; width: 85%; margin: auto;}

.solution-block .item {background-color:

background: rgb(221,68,16);

background: -moz-linear-gradient(0deg, rgba(221,68,16,1) 0%, rgba(224,103,24,1) 25%, rgba(229,136,32,1) 50%, rgba(233,164,38,1) 75%, rgba(238,189,44,1) 100%);

background: -webkit-linear-gradient(0deg, rgba(221,68,16,1) 0%, rgba(224,103,24,1) 25%, rgba(229,136,32,1) 50%, rgba(233,164,38,1) 75%, rgba(238,189,44,1) 100%);

background: linear-gradient(0deg, rgba(221,68,16,1) 0%, rgba(224,103,24,1) 25%, rgba(229,136,32,1) 50%, rgba(233,164,38,1) 75%, rgba(238,189,44,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dd4410",endColorstr="#eebd2c",GradientType=1);



height: 100%;

min-height: 135px;

border-radius: 10px;

box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);



display: grid; align-items: center; justify-items: center; text-align: center;

}

.solution-info h4 {font-size: 40px; color: var(--color-white); font-weight: bold; line-height: 20px;}

.solution-info p {font-size: 24px; color: var(--color-white); font-weight: 300; font-family: var(--fontfamily1); font-weight: normal; margin-top: 10px;}*/



#solution .container-fluid {padding: unset;}



#speaker .section-heading .headline {

    color: var(--color-white)!important;

    font-size: 30px;

    text-align: center;

    margin-bottom: 25px;

}

.speaker {

  /* เพิ่ม background image */

  background-image: url(../images/bg/bg-speaker-desktop.webp);

  background-position: top center;

  background-repeat: repeat-x;

  background-size: contain;



  padding: 45px 0px;

  overflow: hidden;

}



.speaker-info {font-family: var(--fontfamily1); text-align: left; color: var(--color-black); margin-bottom: 20px; max-width: calc((100% - 75px) / 6);}

.speaker-image {width: 100%; height: auto; margin: 0 auto 5px; background-color: #ffd239;}

.speaker-name {font-size: 22px; font-weight: 600; line-height: 1; margin-bottom: 5px;}



.speaker-block {display: flex; flex-wrap: wrap; grid-gap: 15px; justify-content: center;}





.speaker-position, .speaker-company {font-size: 18px; font-weight: 400; line-height: 1;}



.landing {background-color: #FFF; padding: 40px 0px;}



.landing .section-heading {text-align: center;}

.landing .section-heading img {width: 100%; max-width: 320px; margin: auto;}



.btn-landing-block {display: grid; grid-template-columns: 1fr; margin-top: 1em;}



.landing-block {background-color: #ffcb00; border-radius: 10px; padding: 4em 0; overflow: hidden;}





.logo-tss-footer {text-align: center;}

.footer-container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    align-items: center;

    justify-items: center;



    font-family: var(--fontfamily1); font-weight: normal;

}

.footer-container .follow-us {

  color: var(--color-white);

    text-align: left;

}

.footer-container .follow-us a {

  color: var(--color-white);

}

.follow-us {text-align: left;}

.contact-info span a {

    font-size: 22px;

    font-weight: 500;

    text-align: left;

    font-family: var(--fontfamily2);

    padding-left: 10px;

}

.follow-us h5,

.contact-info h5 {

    color: var(--color-white);

    font-size: 22px;

    font-family: var(--fontfamily2);

    font-weight: 900;

    margin: 0 15px 0 0;

}

.follow-us a {

    color: var(--color-white);

}

.follow-us a:hover {

    color: var(--color-red);

}

.btn-tsd {

    color: var(--color-white);

    border: 1px solid var(--color-white);

    border-radius: 5px;

    background-color: unset;

}

.btn-tsd:hover {

  color: var(--color-orange);

  border: 1px solid var(--color-orange);

}

.btn-footer {

    padding: 3px 5px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 12px;

    transition-duration: 0.4s;

    cursor: pointer;

}







#agenda {background-color: var(--color-white); padding: 60px 0;}

#agenda .section-heading .headline {color: var(--color-black)!important; font-size: 30px; text-align: center; margin-bottom: 25px;}



#partners {padding: 40px 0; background-color: var(--color-white);}

#partners .section-heading .headline {color: var(--color-black)!important; font-size: 30px; text-align: center; margin-bottom: 25px;}

#partners .section-heading h3 {color: var(--color-black)!important; font-size: 24px; text-align: center; margin-bottom: 1em; margin-top: 1em; font-family: var(--fontfamily1); font-weight: 600;}

#partners h4 {color: var(--color-yellow)!important; font-size: 22px; text-align: center; margin-bottom: 1em; font-family: var(--fontfamily1); font-weight: 600;}



/* drop */

/*.partners-block {display: grid; grid-gap: 15px; margin-bottom: 3em;}*/

/*.partners-block.principle {grid-template-columns: repeat(6, 1fr); width: 100%; margin-left: auto; margin-right: auto;}*/



/* use */

.partners-block {

  display: flex;

  flex-wrap: wrap;

  grid-gap: 15px;

  justify-content: center;

  margin-bottom: 4rem;

}



.partners-block img {

  max-width: calc((100% - 75px) / 6);

}



/*.partners-block.principle {grid-template-columns: repeat(6, 1fr); width: fit-content; margin-left: auto; margin-right: auto;}*/







/*.partners-block img {border-radius: 50%;}*/





/*.partners-block.principle {grid-template-columns: repeat(4, 1fr);}

.partners-block.association,

.partners-block.media {grid-template-columns: repeat(5, 1fr);}*/









/*.partners-block.principle.platinum {grid-template-columns: repeat(6, 1fr); width: calc((160px * 6) + 50px);}

.partners-block.principle.gold {grid-template-columns: repeat(4, 1fr); width: calc((160px * 4) + 30px);}

.partners-block.principle.silverplus {grid-template-columns: repeat(3, 1fr); width: calc((160px * 3) + 30px);}

.partners-block.principle.bronze {grid-template-columns: repeat(1, 1fr);}*/



/*.partners-block.principle.exhibitors {grid-template-columns: repeat(4, 1fr); width: calc((160px * 4) + 30px);}

.partners-block.principle.life-selection {grid-template-columns: repeat(4, 1fr); width: calc((160px * 4) + 30px);}*/





.partners-block.principle {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));

    gap: 45px;

    margin: 0 auto 2em;

}



.partners-block.principle img {

    width: 100%;

    height: auto;

}





/*.partners-block.principle img {width: 100%; max-width: 160px; margin: auto;}*/

/*.partners-block.association {grid-template-columns: repeat(3, 1fr); width: 135px; margin-left: auto; margin-right: auto;}*/

.partners-block.association {grid-template-columns: repeat(6, 1fr); width: 50%; margin-left: auto; margin-right: auto;}

.partners-block.association img {width: 100%; max-width: 135px; margin: auto;}

.partners-block.media {grid-template-columns: repeat(6, 1fr);}

.partners-block.media img {width: 100%; max-width: 135px; margin: auto;}





.partners-block.principle.personalized-gifts {grid-template-columns: repeat(1, 1fr); width: 160px; margin-left: auto; margin-right: auto;}



/* SEARCH OPEN */

.search-overlay {

  height: 0%;

  width: 100%;

  position: fixed;

  z-index: 999;

  top: 0;

  left: 0;

  background-color: rgba(0,0,0, 0.75);

  overflow-y: hidden;

  transition: 0.5s;

}



.search-overlay-content {

  position: relative;

  top: 25%;

  width: 100%;

  text-align: center;

  margin-top: 30px;

}



.search-overlay a {

  padding: 8px;

  text-decoration: none;

  font-size: 36px;

  color: #818181;

  display: block;

  transition: 0.3s;

}



.search-overlay a:hover, .search-overlay a:focus {

  color: #f1f1f1;

}



.search-overlay .search-closebtn {

  position: absolute;

  top: 20px;

  right: 45px;

  font-size: 60px;

}



.menu-search {

  cursor: pointer;

  position: absolute;

  top: 25px;

  width: 32px;

  height: 40px;

  z-index: 99;

  right: 25px;

}

.menu-search a {cursor: pointer;}

/* SEARCH CLOSE */



/* ZOOM IMAGE */

.frame {

  width: 100%;

  height: 100%;

  overflow: hidden;

  text-align: center;

}

.zoomin img {

  width: 100%;

  height: 100%;

   -webkit-transition: all 0.5s ease;

  -moz-transition: all 0.5s ease;

  -ms-transition: all 0.5s ease;

  transition: all 0.5s ease;

}

.zoomin img:hover {

  -moz-transform: scale(1.05);

  -webkit-transform: scale(1.05);

  transform: scale(1.05);

  cursor: pointer;

}





.search-block i.fa {color: var(--color-white); float: right; font-size: 22px;}

.header-menu-top {display: grid; grid-template-columns: 210px auto 210px; align-items: center; justify-items: center; margin-top: 40px;}

.header-menu-top .search-block {display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; align-items: center; justify-items: center;}

.header-menu-top .search-block .btn-buytickets,

.header-menu-top .search-block a.btn-buytickets {background-color: var(--color-black); border-radius: 30px; padding: 3px 15px; color: #FFF; font-size: 16px; width: fit-content; font-weight: 500; font-family: var(--fontfamily2);}

.header-menu-top .search-block a.btn-buytickets:hover {

  background-color: var(--color-yellow);

  color: #000;

  -webkit-transition: background-color .3s ease-out;

  -moz-transition: background-color .3s ease-out;

  -o-transition: background-color .3s ease-out;

  transition: background-color .3s ease-out;

}



.poster-block {width: 100%; justify-items: center; margin: 0 auto; padding: 0 1em;}

.poster-block .poster-logo {max-width: 800px; margin: 3em auto 4em;}

.poster-block .poster-text {line-height: 1;}

.poster-block .poster-text .text-line1,

.poster-block .poster-text .text-line2 {font-family: var(--fontfamily2); font-weight: bold; color: #FFF;}



.poster-block .poster-text .text-line1 {margin-top: 1em; margin-bottom: 1em; font-size: 36px;}



.poster-block .poster-text .text-line2 {margin-bottom: 1em; font-size: 30px; line-height: 1;}

.poster-block .poster-text .text-line2 span {font-family: var(--fontfamily1)!important; font-weight: 500; font-size: 24px; line-height: 1;}



.poster-block .btn-buytickets,

.poster-block a.btn-buytickets {background-color: var(--color-red); border-radius: 8px; padding: 8px 45px; color: #FFF; font-size: 20px; width: fit-content; font-weight: 600; font-family: var(--fontfamily2); margin-right: auto; margin-left: auto;}

.poster-block a.btn-buytickets:hover {

  color: #000;

  background-color: var(--color-yellow);

  -webkit-transition: all .3s ease-out;

  -moz-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;

  transition: all .3s ease-out;

}



.shadow {box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .25);}

.bdt {border-top: 1px solid #FFF;}

.mgt2 {margin-top: 2em;}

.pdt40 {padding-top: 40px;}



.follow-us img {

    width: 100%;

    height: auto;

    max-width: 30px;

    margin: 0 5px;

}



.follow-us img:first-child {margin: 0 5px 0 0;}

.follow-us a:hover {opacity: .75;}

  

  .ticketphase-block {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px;}



  .ticketphase-block {font-family: var(--fontfamily1); font-weight: bold; color: #FFF;}

  

  .price-block-1 {padding: 20px 10px; text-align: left; border-radius: 8px; min-height: 148px;

    background-image: url(../images/bg/bg-ticket-phasing-active-desktop.webp);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: cover;

  }

  .price-block-2 {margin-top: 8px; margin-bottom: 15px;}

  

  .price-block-2 a {font-size: 20px; color: var(--color-white); background-color: #ff3304; border-radius: 8px; letter-spacing: 1px; padding: 8px 0;}

  

  .price-block-2 a:hover {

    background-color: #ffce00; color: var(--color-black); cursor: pointer;

    -webkit-transition: background-color .3s ease-out;

    -moz-transition: background-color .3s ease-out;

    -o-transition: background-color .3s ease-out;

    transition: background-color .3s ease-out;

  }



  .price-block-2 .disable-link {color: #FFF; background-color: #212b58;}

  .price-block-2 a.disable-link:hover {color: #FFF; background-color: #212b58;}



  .price-block.drop-opacity .price-block-1 {background-color: #CCC; background-image: unset!important;}

  

  .price-block a .price-block-1 {color: #FFF;}



  .price-block a:hover .price-block-1 {

    background-image: url(../images/bg/bg-ticket-phasing-hover-desktop.webp);

    -webkit-transition: background-image .3s ease-out;

    -moz-transition: background-image .3s ease-out;

    -o-transition: background-image .3s ease-out;

    transition: background-image .3s ease-out;

  }





  .ticket-type {font-size: 24px; line-height: 1; font-family: var(--fontfamily1)!important; font-weight: 900; text-align: center;}

  .ticket-price-block {display: flex; font-size: 48px; line-height: 1;}

  .ticket-price-block span {font-size: 20px;}

  .ticket-price-block .mrr-auto {margin-right: auto;}

  .ticket-price-block .mrl-auto {margin-left: auto;}

  .ticket-price-block .ticket-price1 {letter-spacing: 2px; padding-left: 26px;}

  .ticket-date {font-size: 14px; display: flex; align-items: center; justify-content: center;}



  .ticket-date .ticket-date-icon {width: 10px; margin-right: 5px; filter: invert(100%) sepia(0%) saturate(58%) hue-rotate(152deg) brightness(106%) contrast(101%);}

  

  .ticket-detail {font-size: 12px; display: flex; align-items: center; line-height: 1; font-weight: 500;}



  .price-arrow-down {width: 13px; height: auto;}



  a .price-block:hover {opacity: .75;}

  

  .drop-opacity {opacity: 0.95;}





.youtube-container {

  width: 100%;

  height: 0;

  padding-bottom: 56.25%;

  overflow: hidden;

  position: relative;

  margin: 20px 0;

}



.youtube-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.mrt40 {margin-top: 40px;}

.mrb40 {margin-bottom: 40px;}

.ticket-phase-banner-block {margin: 25px 0 40px;}



/* page agenda -------------------------- */

.poster-agenda-block {

    /*background-image: url(../images/bg/bg-agenda-thesecretsaucesummit2025-desktop.jpg);

    background-repeat: no-repeat;

    background-position: bottom center;

    background-size: cover;*/

    padding-top: 130px;

/*    min-height: 450px;*/

}

.poster-agenda-block .poster {margin-top: -130px;}



/*.poster-agenda-block .poster-block .poster-logo {max-width: 300px; margin-bottom: 2em;}*/





  /*#agenda .tab-block {display: grid; grid-template-columns: repeat(8, 1fr); box-shadow: 0 8px 10px -3px rgba(0, 0, 0, 0.35); width: 100%; margin-right: auto; margin-left: auto; margin-bottom: -8px; position: relative; z-index: 2;}*/

#agenda .tab-block {

    display: grid;

    grid-auto-flow: column; /* ให้ grid เรียงเป็นแนวนอน */

    grid-auto-columns: minmax(200px, 1fr); /* ความกว้างแต่ละ column */

    overflow-x: auto; /* เปิดการเลื่อนในแนวนอน */

    -webkit-overflow-scrolling: touch; /* smooth scroll ในมือถือ */

    

    box-shadow: 0 8px 10px -3px rgba(0, 0, 0, 0.35);

    width: 100%;

    margin-right: auto;

    margin-left: auto;

    margin-bottom: -8px;

    position: relative;

    z-index: 2;



    padding: 0;

}

#agenda .day {padding: 0;}

#agenda .tab-block::-webkit-scrollbar {

    display: none; /* สำหรับ Chrome/Safari */

}

#agenda .tab-block {

    scrollbar-width: none; /* สำหรับ Firefox */

}



  

  #agenda .tab-block h3,

  #agenda .tab-block h4 {font-family: var(--fontfamily2);}

  

  #agenda .tab-block h3 {font-size: 20px; font-weight: 600; line-height: 20px; text-align: left;}

  #agenda .tab-block h4 {font-size: 16px; font-weight: 500; line-height: 22px; text-align: left;}

  #agenda .tab-block h5 {font-family: var(--fontfamily1); font-size: 16px; font-weight: 400; line-height: 18px;}



  #agenda .tablink {background-color: #585858; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 12px 10px; text-align: center; color: #FFF;

    box-shadow: 8px 0 10px -4px rgb(0 0 0 / 25%), -8px 0 10px -4px rgb(0 0 0 / 25%);

  }

  #agenda .tablink:hover,

  #agenda .tablink.tab-active {

    cursor: pointer;

    background-color: var(--color-orange);

    -webkit-transition: background-color .3s ease-out;

    -moz-transition: background-color .3s ease-out;

    -o-transition: background-color .3s ease-out;

    transition: background-color .3s ease-out;

  }



  #agenda .tablink .line1 {display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;}



  #agenda .stage-block {display: grid; grid-template-columns: 20% 20% auto; grid-gap: 15px; background-color: #faf8f8; position: relative; z-index: 1; margin-bottom: 10px; padding: 25px 20px; font-family: var(--fontfamily2); box-shadow: 0 8px 12px -2px rgb(0 0 0 / 15%); border-radius: 8px;}

  #agenda .stage-block .stage-info {display: grid; grid-template-columns: 190px auto; grid-gap: 35px;}

  #agenda .stage-block:hover {background-color: #e9e8ee;}



  #agenda .stage-block .stage-day {color: #ffce00; text-align: left; font-size: 26px; font-weight: 300; line-height: 20px;}

  #agenda .stage-block .stage-time {text-align: left; font-size: 24px; font-weight: 300; color: #010101;}

  #agenda .stage-block .stage-date {text-align: left; font-size: 24px; font-weight: 300; color: #ffce00; line-height: 1;}

  

  #agenda .stage-block .stage-speaker-image {width: 100%; height: 100%; max-width: 85px; max-height: 85px; background-color: #ffce00; border-radius: 50%; overflow: hidden; background-color: var(--color-yellow);}

  #agenda .stage-block .stage-speaker-image img {width: 100%; height: 100%;}



  #agenda .stage-block .stage-detail .stage-name {font-size: 24px; font-weight: 600; color: #020202; text-transform: uppercase; letter-spacing: 1px; line-height: 1; margin-bottom: 8px;}

  #agenda .stage-block .stage-detail .stage-speaker-name,

  #agenda .stage-block .stage-detail .stage-speaker-name_2,

  #agenda .stage-block .stage-detail .stage-speaker-name_3 {font-size: 22px; font-weight: 600; color: var(--color-orange); letter-spacing: 1px; line-height: 1;}

  #agenda .stage-block .stage-detail .stage-speaker-position,

  #agenda .stage-block .stage-detail .stage-speaker-position_2,

  #agenda .stage-block .stage-detail .stage-speaker-position_3 {font-family: var(--fontfamily4); font-size: 20px; font-weight: 500; color: #010101; line-height: 1;}

  #agenda .stage-block .stage-detail .stage-name span {font-size: 20px; font-weight: 500;}

  

  #agenda .stage-block .stage-detail .stage-description {font-weight: 100; line-height: 1; margin: 0 0 10px;}



  #agenda .stage-block .stage-detail {display: grid;}



  #agenda .stage-block .stage-image {display: flex; align-items: center;

    justify-content: center; margin: 0;}



  #agenda .stage-block1,

  #agenda .stage-block2 {padding-left: 3vw;}





#agenda .stage-block .stage-speaker-image {width: 100%}

#agenda .stage-block .stage-image {display: flex; flex-wrap: wrap; gap: 10px;}

#agenda .stage-block .stage-image > div {flex: 50%;}



  #agenda .btn-buytickets-agenda {margin-top: -60px; margin-bottom: 60px; text-align: right; position: relative; z-index: 2; display: flex; justify-content: right;}

  #agenda .btn-buytickets-agenda .btn-buytickets,

  #agenda .btn-buytickets-agenda a.btn-buytickets {background-color: var(--color-yellow); border-radius: 30px; padding: 3px 15px; color: #000; font-size: 16px; width: fit-content; font-weight: 500; font-family: var(--fontfamily2);}

  #agenda .btn-buytickets-agenda a.btn-buytickets:hover {

    background-color: var(--color-white);

    -webkit-transition: background-color .3s ease-out;

    -moz-transition: background-color .3s ease-out;

    -o-transition: background-color .3s ease-out;

    transition: background-color .3s ease-out;

  }



  #agenda .stage-block .pdl2 {padding-left: 2em;}



  #solution .concept-block {display: grid; grid-template-columns: 50% auto; grid-gap: 25px; background-color: #e0e0e0;}

  #solution .concept-block {font-family: var(--fontfamily2);}

  #solution .concept-block .concept-text {font-size: 28px; font-weight: 500; color: #000; line-height: 1.25; margin-top: 5em;}

  #solution .concept-block .concept-text b {color: var(--color-orange); font-weight: 700;}



  #suitable {padding: 0 0 60px;}

  #suitable .suitable-block .suitable-detail {text-align: center;}

  #suitable .suitable-block .suitable-detail .suitable-image {margin-bottom: 10px;}

  #suitable .suitable-block .suitable-detail .suitable-image img {width: 100%; max-width: 100px;}

  #suitable .suitable-block .suitable-detail .suitable-text {font-family: var(--fontfamily1); font-weight: 500; font-size: 22px; line-height: 1.25;}



  #suitable .suitable-block {display: grid; grid-template-columns: repeat(3, 1fr);}



  .suitable {

      /*background-image: url(../images/bg/bg-suitable-desktop.webp);

      background-repeat: no-repeat;

      background-position: bottom center;

      background-size: contain;*/

      background-color: #FFF;

  }



  #suitable .section-heading .headline {

      color: var(--color-black) !important;

      font-size: 30px;

      margin-bottom: 25px;

  }





  .hero-block {display: flex; text-align: center; width: fit-content; margin: auto;}





/* Countdown */

#tss_countdown_desktop .container-countdown {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; color: #FFF; text-align: center;}

#tss_countdown_desktop .container-countdown .c-number,

#tss_countdown_desktop .container-countdown .c-doted {font-family: var(--fontfamily1); font-size: 46px; font-weight: 500; line-height: 1;}

#tss_countdown_desktop .container-countdown .c-text {font-family: var(--fontfamily1); font-size: 16px; font-weight: 500;}

#tss_countdown_desktop .container-countdown .c-number {border: 1px solid #FFF; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;}



.poster-countdown .btn-ticket-alert {font-family: var(--fontfamily2); font-weight: 500; font-size: 18px; letter-spacing: 1px; color: var(--color-orange); background-color: #FFF; border-radius: 5px; width: 100%; margin-bottom: 5px; text-align: center;}



.poster-countdown {position: absolute; bottom: 5%; right: 5%;}







#highlight .container-fluid {padding-left: unset; padding-right: unset;}

#highlight .container-fluid .swiper {overflow: unset; padding-bottom: 2em;}



#highlight .swiper-button-prev {

  background-image: url(../images/highlight-arrow-left.webp) !important;

  background-repeat: no-repeat;

  background-size: 100% auto;

  background-position: center;

  left: 89vw;

}



#highlight .swiper-button-next {

  background-image: url(../images/highlight-arrow-right.webp) !important;

  background-repeat: no-repeat;

  background-size: 100% auto;

  background-position: center;

  right: 6vw;

}



#highlight .swiper-button-prev,

#highlight .swiper-button-next {top: 100%; margin-bottom: 2em;}







#highlight .swiper-button-next::after {display: none;}

#highlight .swiper-button-prev::after {display: none;}



#banner {background-color: #FFF;}

#banner .banner-block img {margin-top: calc(-247px / 2);}





  .footer-logo {width: 100%; max-width: 125px; margin: 2em auto;}

  .footer-link {display: flex; width: fit-content; margin: auto; color: #FFF; text-align: center; font-family: var(--fontfamily1); font-weight: bold; font-size: 20px;}

  .footer-link a {color: #FFF;}

  .footer-link a:hover {color: var(--color-orange);}

  .footer-link div {min-width: 135px;}



  .footer-block {display: flex;}

  .footer-block .ml-auto {margin-left: auto;}

  .footer-block .mr-auto {margin-right: auto;}



#speaker .card {

    font-family: var(--fontfamily1);

    background: #fff;

    color: #000;

    padding: 35px;

    margin-bottom: 20px;

    display: flex;

    align-items: flex-start;

    gap: 30px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    flex-direction: row;

    border: unset;

    border-radius: unset;



    /* เพิ่ม background image */

    background-image: url(../images/bg/bg-line-card-desktop.webp);

    background-position: top center;

    background-repeat: no-repeat;

    background-size: 100% auto;

}

#speaker .img-placeholder {

    width: 120px;

    height: 120px;

    background: #ddd;

    border-radius: 50%;

    flex-shrink: 0;

    overflow: hidden;

}

#speaker .card-content {

    flex: 1;

}

#speaker .card h3 {

    margin: 0;

    font-size: 1.65rem;

    font-weight: 600;

    line-height: 1;

}

#speaker .card h4 {

    margin: 0 0 10px;

    font-size: 1.15rem;

    color: #000;

    text-transform: uppercase;

}

#speaker .card p {

    color: #000;

    margin: 0;

    font-size: 1rem;

    text-align: left;

    line-height: 1;

}

#speaker .load-more {

    display: block;

    margin: 30px auto;

    padding: 3px 15px;

    font-size: 0.85rem;

    color: #fff;

    background: none;

    border: 1px solid #fff;

    border-radius: 4px;

    cursor: pointer;

}

#speaker .load-more:hover {

    background: var(--color-yellow);

    color: #000;

    border: 1px solid var(--color-yellow);

}







/* Flags Menu Dropdown */

.nav-item.dropdown {

  position: relative;

  list-style: none;

  font-family: var(--fontfamily1);

}



/* ปุ่มภาษา */

.lang-toggle {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  text-decoration: none;

  background: var(--color-yellow);

  padding: 3px 15px;

  border-radius: 20px;

  transition: background 0.25s ease, color 0.25s ease;

}



/* hover/focus ปุ่มภาษา + nav-item dropdown */

.nav-item.dropdown:hover > .lang-toggle,

.nav-item.dropdown:focus-within > .lang-toggle,

.lang-toggle:hover,

.lang-toggle:focus {

  background: var(--color-red);

  color: #fff !important;

}



/* ให้ตัวอักษรใน lang-code เป็นสีขาวด้วย */

.nav-item.dropdown:hover .lang-code,

.nav-item.dropdown:focus-within .lang-code,

.lang-toggle:hover .lang-code,

.lang-toggle:focus .lang-code {

  color: #fff !important;

}



.caret {

  font-size: 16px;

  line-height: 1;

}



/* dropdown menu (override Bootstrap) */

.nav-item.dropdown .dropdown-menu {

  display: block; /* ให้มีพื้นที่ layout ไว้ */

  position: absolute;

  right: 0;

  top: calc(100% + 8px);

  min-width: 180px;

  padding: 6px;

  margin: 0;

  list-style: none;

  background: #fff;

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  box-shadow: 0 8px 30px rgba(0,0,0,.08);



  opacity: 0;

  transform: translateY(10px);

  pointer-events: none;



  transition: opacity 0.25s ease, transform 0.25s ease;

  z-index: 1000;

}



/* แสดง dropdown: desktop (hover) + mobile (focus-within) */

.nav-item.dropdown:focus-within > .dropdown-menu {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}



/* language option */

.lang-option {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 12px;

  border-radius: 10px;

  text-decoration: none;

  color: #111;

  font-size: 20px;

  transition: background 0.2s ease;

}

.lang-option:hover {

  background: #ddd;

}

.lang-option.is-active {

  background: #111;

  color: #fff;

}

.lang-option.is-active::after {

  content: "✓";

  margin-left: auto;

  font-size: 12px;

}



/* ปุ่มวงกลมภาษา */

.lang-code {

  display: contents;

  place-items: center;

  width: 30px;

  height: 30px;

  border-radius: 999px;

  color: #000;

  font-size: 16px;

  font-weight: 600;

  transition: color 0.25s ease;

}



/* ธง */

.flag-icon {

  width: 18px;

  height: 12px;

  object-fit: cover;

  border-radius: 2px;

  flex-shrink: 0;

}