/* 



Template The Standard



https://thestandard.co/thesecretsauce-business-weekend-2025-isan/



*/





/* 

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

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: #ff0000;

--color-yellow: #ffce00;

--color-orange: #f33611;



--fontfamily1: 'DB Heavent';

--fontfamily2: 'DB Heavent Med';

--fontfamily3: 'DB HeaventRounded';

--fontfamily4: 'DB HeaventRounded Cond';

}



/*body.admin-bar .poster-highlight-block{padding-top: 32px;}*/



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;

}



:focus:not(:focus-visible) {

  outline: none!important;

  box-shadow: none!important;

}



/* 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: var(--color-orange);

  -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;

}





/* ===== DEFAULT ===== */

.header-area {

  position: absolute;

  top: 0px;

  left: 0px;

  right: 0px;

  z-index: 100;



  transition: all .5s ease;

}



.header-area .main-nav {

  background: #000;

  min-height: 80px;

  display: flex;

  align-items: center;

  justify-content: center;



  transition: all .3s ease;

}



.header-area .main-nav .logo {

  transition: all .3s ease;

}



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

  width: auto;

  height: 100%;

  max-height: 60px;



  transition: all .3s ease;

}





/* ===== SCROLL SHRINK ===== */

.header-area.shrink {

  position: fixed; /* ให้ลอยติดบน */

  background: rgba(0,0,0,0.9);

  backdrop-filter: blur(8px);

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

}



.header-area.shrink .main-nav {

  min-height: 60px;

}



.header-area.shrink .main-nav .logo img {

  max-height: 50px;

}



.header-area.shrink .search-block i.fa {font-size: 18px;}





/* ===== OPTIONAL: text logo (ถ้ามีใช้ h4) ===== */

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

  line-height: 60px;

  font-size: 20px;

}







.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: 999;



  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: 20px;

  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.shrink .main-nav .nav li a {font-size: 18px;}



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

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

  color: var(--color-white)!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 {

  background-color: #000;

}



.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;

    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;

    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 {padding-top: 80px;}



.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 12vw 0 8vw;}*/



.about-us {

  background-color: #ffe8f8;

}



.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: left!important;}

.about-us .section-img {}

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

/* 

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

About Us Style

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

*/



.menu-tabs-phase {width: 100%; padding: 10px 20px; border-radius: 15px; background-color: rgba(0, 0, 0, .15); color: #FFF; font-size: 18px; text-align: left; margin-bottom: 2em; display: flex;}

.menu-tabs-phase .tabs-block {display: flex;}

.menu-tabs-phase .tabs-block span {padding-left: 3px; font-size: 14px; font-weight: 500; display: flex; align-items: center;}

.ticket-phase {

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

  background-repeat: no-repeat;

  background-position: top center;

  background-size: 100% 100%;



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

  padding: 40px 0px 60px;

}



.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;



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

  background-repeat: no-repeat;

  background-position: bottom center;

  background-size: 100% 100%;



  width: 100%!important;

}



.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-text {text-align: left;}



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



/* 

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

PAST EVENT Us Style

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

*/





.past-event {

  background-color: #333333;

  padding: 60px 0px;



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

  background-repeat: no-repeat;

  background-position: center bottom;

  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(2, 1fr); grid-gap: 15px;}

.past-event-text {border-radius: 10px; overflow: hidden;}





/* 

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

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); padding-bottom: 100px;}



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;}

.visible-xs {display: none;}



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: left; font-family: var(--fontfamily1); font-weight: normal;}

#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: grid; grid-template-columns: auto auto;}



#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: 80px;

}*/



.poster-highlight-block {

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

}



.poster-rerun-block {

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

  background-repeat: repeat-x;

  background-position: top center;

  background-size: 100% 100%;



  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-black)!important;

    font-size: 30px;

}

#about .section-heading h3 {

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

    font-size: 24px;

    font-family: var(--fontfamily2);

    text-transform: uppercase;

    font-weight: 600;

    margin-top: 0;

}



#about .section-heading p {

    font-size: 20px;

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

    font-weight: 300!important;

    line-height: 1;

}



.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-black)!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-black)!important;

    font-size: 30px;

    margin-bottom: 25px;

}

#highlight .section-heading h3 {

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

    font-size: 26px;

    font-family: var(--fontfamily2);

    text-transform: uppercase;

    font-weight: 900;

    margin-top: 20px;

}







.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: 22px; text-align: left; line-height: 1;}



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

#pastevent .section-heading .headline {

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

    font-size: 30px;

    margin-bottom: 35px;

}

#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-black)!important;

    font-size: 30px;

    text-align: center;

    margin-bottom: 25px;

}

.speaker {

  padding: 45px 0px;

  overflow: hidden;

}



.speaker-info {display:none; font-family: var(--fontfamily1); text-align: left; color: var(--color-black); margin-bottom: 20px;}

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

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

.speaker-bar-bottom {position: absolute; bottom: 0; line-height: 1; width: 100%;}

.speaker-bar-bottom img {width: 100%; height: auto;}



.speaker-block {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 15px;

}



/* 5 ช่องต่อแถว */

.speaker-block .speaker-info {

  flex: 0 0 calc((100% - (15px * 4)) / 5);

  max-width: calc((100% - (15px * 4)) / 5);

}





.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-bottom: 20px;

}

.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-yellow); 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-black)!important; font-size: 24px; 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; justify-content: center; grid-gap: 20px; margin-bottom: 2em;}

/*.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 img {width: 100%; max-width: 150px;}



/*.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: auto!important;

  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: 100px auto 100px; align-items: center; justify-items: center; width: 100%;}

.header-menu-top .search-block {display: grid; grid-template-columns: auto auto; grid-gap: 15px; 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-yellow); border-radius: 30px; padding: 3px 15px; color: #000; 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-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;

}



.poster-block {display: grid; grid-template-rows: auto auto auto; justify-items: left; width: fit-content; margin: 0.5em auto 2em; padding: 0 1em;}

.poster-block .poster-logo {max-width: 350px; margin-bottom: .75em;}

.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: .35em; margin-bottom: .35em; font-size: 48px;}



.poster-block .poster-text .text-line2 {margin-bottom: 20px; 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-yellow); border-radius: 30px; padding: 10px 30px; color: #000; font-size: 24px; width: fit-content; font-weight: 500; font-family: var(--fontfamily2);}

.poster-block 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;

}



.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(2, 1fr); grid-gap: 15px;}



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

  

  .price-block-1 {padding: 10px 15px; background-color: rgba(0, 0, 0, .15); text-align: left; border-radius: 8px;}

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

  

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

  

  .price-block-2 a:hover {

    background-color: var(--color-white); 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: #000; text-align: center;}

  .price-block-2 a.disable-link:hover {background-color: var(--color-yellow); color: #000;}



  .price-block.drop-opacity .price-block-1 {background-color: rgba(0, 0, 0, .15);}

  

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



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

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

    -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;

  }





  .ticket-type {font-size: 35px;}

  .ticket-price-block {display: flex; font-size: 54px; line-height: 1; justify-content: space-between; margin-bottom: 1em;}

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

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

  .ticket-price-block .ticket-price1 {letter-spacing: 2px; display: grid; text-align: right;}

  

  .ticket-date {font-size: 20px; display: flex; background-color: #1c9e76; width: fit-content; border-radius: 15px; margin-bottom: 10px; padding: 1px 25px;}



  .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: 16px; display: flex; align-items: center;}



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



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

  

  .drop-opacity {opacity: 0.95;}



  .ticket-remark {min-height: 26px;}

  .ticket-remark,

  .ticket-note {font-size: 18px;}

  .ticket-access {display: flex; border-top: 1px solid #FFF; padding-top: 15px; margin-top: 10px; flex-wrap: wrap; row-gap: 5px; min-height: 65px;}

  .ticket-access-type {

    background-color: #FFF;

    width: fit-content;

    padding: 1px 5px;

    border-radius: 5px;

    margin-right: 2px;

    color: #000;

    font-size: 14px;

    font-weight: 500;



    height: fit-content;

  }

  .ticket-access-type:hover {background-color: var(--color-orange); color: #FFF;}



  .ticket-date {font-size: 16px;}



.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-thesecretsauce-business-weekend-2025-isan-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: flex; width: fit-content; margin-bottom: -10px; position: relative; z-index: 1;}

  

  #agenda .tab-block h3,

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

  

  #agenda .tab-block h3 {font-size: 24px; font-weight: 600; line-height: 0.65; padding: 0; margin: 0;}

  #agenda .tab-block h3 span {font-size: 18px; font-weight: 300; line-height: 1;}

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

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



  #agenda .tablink:nth-child(1) { z-index: 6; }

  #agenda .tablink:nth-child(2) { z-index: 5; }

  #agenda .tablink:nth-child(3) { z-index: 4; }

  #agenda .tablink:nth-child(4) { z-index: 3; }

  #agenda .tablink:nth-child(5) { z-index: 2; }

  #agenda .tablink:nth-child(6) { z-index: 1; }



  #agenda .tablink {background-color: #888888; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 15px 35px 22px; text-align: center; color: #d7d7d7; box-shadow: 2px 0 6px rgba(0,0,0,0.08);}

  #agenda .tablink:nth-child(n+2) {margin-left: -8px;}



  #agenda .tablink.tab-active {z-index: 10;}



  #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;



    color: #FFF;

  }



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



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

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



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

  #agenda .stage-block .stage-time {font-size: 20px; font-weight: 300; color: #010101; line-height: 15px;}

  #agenda .stage-block .stage-time span {font-size: 16px; font-size: 100; line-height: 1;}



  #agenda .stage-block .stage-day,

  #agenda .stage-block .stage-time {padding-left: 40px;}



  #agenda .stage-block .stage-image {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 15px;

  }

  #agenda .stage-block .stage-image.is-wrap {

    display: flex;

    justify-content: flex-end; /* หรือ center */

    gap: 5px;

  }





  #agenda .stage-block .stage-speaker-image {width: 100%; height: auto; max-width: 75px; aspect-ratio: 1/1; background-color: #e0e0e0; border-radius: 50%; overflow: hidden;}

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



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

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

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

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



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



  #agenda .stage-block .stage-image {display: flex; justify-content: flex-end; align-items: center; gap: 15px; padding-right: 15px; height: 100%;}







  #agenda .stage-block1,

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



  #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;

  }



  #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: 6em 0 10em;}

  #suitable .suitable-block .suitable-detail {text-align: left; display: flex; gap: 15px; align-items: center; padding: 15px 8px; border-radius: 10px; background-color: #FFF; margin-bottom: 15px;

  box-shadow: 0 6px 15px -2px rgba(0,0,0,0.25);

  }

  #suitable .suitable-block .suitable-detail:last-child {margin-bottom: unset;}



  /*#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(1, 1fr); width: 60%; margin: auto;}



  .suitable {

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

      background-repeat: no-repeat;

      background-position: bottom center;

      background-size: 100% 100%;

      background-color: #FFF;

  }



  #suitable .section-heading .headline {

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

      font-size: 30px;

      margin-bottom: 25px;

  }









  .hero-block {display: grid; grid-template-columns: 40% 60%;}





/* 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;}







#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; font-size: 24px; font-weight: 900;}

  .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;}





  #rerun .section-heading .headline {

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

      font-size: 30px;

      margin-bottom: 25px;

      text-align: center;

  }



  #rerun {

    position: fixed;

    bottom: 0;

    z-index: 9;

    width: 100%;

  }



  #rerun .banner-buy-ticket-block img {box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);}





/* ABOUT US ------------------------------------- */

  .about-block {display: grid; grid-template-columns: 25% auto; grid-gap: 40px; padding-bottom: 3em;}

  .about-right-1 {display: grid; grid-template-columns: auto 35%; grid-gap: 20px;}

  .about-right-2 {display: flex; margin-top: 3em;}

  

  .about-left img,

  .about-right .section-heading {padding-top: 6em;}



  .about-left img {max-width: 540px;}

  .about-right img {max-width: 275px;}



  .about-right-2 h4 {

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

    font-size: 20px;

    font-family: var(--fontfamily2);

    text-transform: uppercase;

    font-weight: 600;

    margin-top: 0;

  }



  .about-right-2 p {

      font-size: 18px;

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

      font-weight: 300 !important;

      line-height: 1;

      margin-bottom: 0;

  }

  .about-right-2 > div {flex: 1; padding-left: 10px;}



  .about-us {

    position: relative;

    z-index: 1;

  }



  .about-us::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 12px;

    pointer-events: none;

    z-index: 2;



    background: linear-gradient(

      to bottom,

      rgba(0,0,0,0.25),

      rgba(0,0,0,0.1),

      transparent

    );

  }



  .about-right .icon-about img {max-width: 40px; height: auto; margin-bottom: 5px;}



/* HIGHLIGHT --------------------------------- */

.highlight-block-1 {display: flex; gap: 15px;}

.highlight-block-2 {margin-top: 15px;}







/* swiper past event ---------------------------------- */

  .swiper {

    width: 100%;

    height: 100%;

    overflow: unset!important;

  }



  .swiper-slide {

    text-align: center;

    font-size: 18px;

    display: flex;

    justify-content: center;

    align-items: center;



    transition: all 0.4s ease;

    transform: scale(0.85);

    opacity: 0.5;

  }



  .swiper-slide-active {

    transform: scale(1);

    opacity: 1;

  }



  .swiper-slide img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;



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

  }







.swiper-button-prev {margin-left: -10%!important; margin-top: -60px!important;}

.swiper-button-next {margin-right: -10%!important; margin-top: -60px!important;}



/* กัน font icon โผล่ */

.swiper-button-prev,

.swiper-button-next {

  background-color: #b53214;

  width: 32px;

  height: 32px;



  display: flex;

  align-items: center;

  justify-content: center;



  font-size: 0;

  font-family: unset !important;

  transform: scale(0.92);

  opacity: 0.8;

}



/* 🔥 ลบ arrow default ของ Swiper แบบตัดขาด */

.swiper-button-prev::after,

.swiper-button-next::after {

  display: none !important;

  content: none !important;

}



.swiper-button-prev svg,

.swiper-button-next svg {

  display: none !important;

}



/* arrow ใหม่ */

.swiper-button-prev::before {

  content: "◀";

  font-size: 16px;

  color: #333;

}



.swiper-button-next::before {

  content: "▶";

  font-size: 16px;

  color: #333;

}



.slide-block p {font-family: var(--fontfamily2)!important; color: #FFF!important;}

.swiper-slide-active .slide-block p {color: #ffce00!important;}



.tab-content {

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease;

  position: absolute;

  width: 100%;

}



.tab-content.active {

  opacity: 1;

  visibility: visible;

  position: relative;

}



/* ปุ่ม */

.menu-tabs-phase a:hover,

.tab-btn.active {

  color: #000;

}

.menu-tabs-phase a {color: #FFF; margin-right: 30px; margin-left: 30px;}



.tab-btn:focus:not(:focus-visible) {

  outline: none;

  box-shadow: none;

}



footer .footer-block p {font-size: 14px!important;}





img.wp-smiley, img.emoji {

  height: 1.25em !important;

  width: 1.25em !important;

}



.faq-block {font-family: var(--fontfamily2); background: #f5f6fa;}



.faq-container {

  width: 50%;

  max-width: 800px;

  padding: 30px 15px 60px;

  margin: auto;

}



.faq-container .section-heading .headline {text-align: center; margin-bottom: 1em;}



/* ITEM */

.faq-item {

  background: #fff;

  border-radius: 12px;

  margin-bottom: 12px;

  overflow: hidden;

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

}



/* QUESTION */

.faq-question {

  padding: 18px 20px;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-weight: 600;

  font-size: 24px;

}



.faq-question img.icon-faq {width: 100%; height: auto; max-width: 45px;}



.faq-question:hover {

  background: #fafafa;

  color: var(--color-orange);

}



/* ICON */

.faq-icon {

  transition: 0.3s;

  font-size: 32px;

}



.faq-item.active .faq-icon {

  transform: rotate(45deg); /* + -> x */

}



/* ANSWER */

.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease;

  padding: 0 20px;

}



.faq-answer p {

  padding: 5px 0 20px 20px;

  margin: 0;

  color: #444;

  line-height: 1.7;

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

  font-size: 20px!important;

}



/* ACTIVE */

.faq-item.active .faq-answer {

  max-height: 100%;

}



/* badge */

.badge {

  display: inline-block;

  background: #000;

  color: #fff;

  font-size: 16px;

  padding: 4px 10px;

  border-radius: 20px;

  margin-bottom: 8px;

}





.bg-block {position: relative;}

  .btn-poster-block {position: absolute; bottom: 50px; left: 50%;

  transform: translateX(-50%);}

  .btn-poster {

    background-color: #000; padding: 15px 60px; color: #FFF; font-size: 24px; font-weight: 400; box-shadow: 4px 4px 0 #FFD700;

    -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;

  }

  .btn-poster:hover {background-color: var(--color-orange);}