html {height:100%;width:100%;scroll-behavior: smooth;}
body {font-family: "Kanit", sans-serif;font-weight: 400;font-size:20px; color:#444;background:#fff;letter-spacing:.5px;margin: 0;padding: 0;height: 100%;}
*,::before,::after {box-sizing:border-box}
::-webkit-scrollbar {width: 6px; height:2px; border-radius:4px;}
::-webkit-scrollbar-track {background-color: #eee;box-shadow: 0 0 1px 1px #fff inset;}
::-webkit-scrollbar-thumb {background-color: #f34971;}
::-webkit-scrollbar-thumb:hover {background-color: #bc193f;}
::-webkit-input-placeholder {color: #96a7bd!important;}
:focus-visible {outline: none;}
img {display: flex; max-width:100%; height: auto;} h1 {font-family: "Changa One", sans-serif;color:#fff; font-size: 4em;font-weight: 400;line-height: 1.5em;letter-spacing:2px;text-shadow: 1px 2px 13px #000;margin-bottom: 34px;}
h2,h3,h4,h5,h6,strong {color:#000; font-weight:500}
blockquote {position:relative; border-radius: 20px;background: #f6f6f8;margin:30px 10px;padding: 20px;}
blockquote:before {content: '';position: absolute;left: 0; top: 15%;font-style: normal;width: 7px;height: 70%;background-color: #f34971;border-radius: 0 22px 22px 0;}
.small {font-size:16px;}	
a {text-decoration: none;color: #f34971;border-bottom:1px solid transparent;transition:linear .2s} 
a:hover {color:#023363; border-bottom:1px solid #023363;} 
a.img, a.img:hover {border:0;}
ul, ol {padding-left: 10px;}
li {position: relative; list-style: none;padding-left: 34px;}
li:before {content: '';background: url(//optima-design.pro/wp-content/themes/optima-design/images/icon-circle.svg) no-repeat 0 0;position: absolute;top: 7px;left: 0;display: block;width: 18px;height: 18px;}
ol {counter-reset: custom-counter;list-style: none;padding: 0; margin: 0;}
ol li {counter-increment: custom-counter;position: relative;padding-left: 50px;margin-bottom: 20px;font-size: 18px;color: #333;}
ol li::before {content: counter(custom-counter); background: none; position: absolute; left: 0; top: 0;width: 36px;height: 36px;line-height: 36px;border-radius: 50%;background-color: #f34971;color: #fff;font-weight: 400;text-align: center;font-size: 16px;box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
input, select, textarea {padding: 8px 15px;border: 1px solid #ddd; background:#fff;}
buton, input, select, textarea {font-family: "Kanit", sans-serif;font-size: 17px;font-weight: 300;}
.text-center,.has-text-align-center {text-align: center;}
.relative {position: relative} header { min-height:100vh;position: relative;z-index: 2;}
header:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .6);z-index: 1;}
.navigation {padding-top: 50px;}
.quadmenu-dropdown-menu .quadmenu-text  {position: relative;}
.quadmenu-dropdown-menu .quadmenu-text::after {content: '';position: absolute;bottom: 0;left: 0;width: 0%;height: 1px; background-color: #f34971;transition: width 0.3s ease;}
.quadmenu-dropdown-menu .quadmenu-text:hover::after {width: 100%;}
.header__inner {display: flex;justify-content: center;align-items: center;height: 70vh;position: relative;z-index: 2;text-align: center;}
.title__section {color: #fff;position: relative;z-index: 2;}
.scroll-indicator {position: absolute;bottom: 7%;left: 50%;transform: translateX(-50%);z-index: 3;text-decoration: none;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.mouse-icon { width: 30px;height: 50px;border: 2px solid #fff;border-radius: 25px;position: relative;}
.wheel {width: 4px;height: 10px;background-color: #fff;border-radius: 2px;position: absolute;top: 10px;left: 50%;transform: translateX(-50%);animation: wheelMove 1.5s infinite ease-in-out;}
@keyframes wheelMove {
0% { top: 10px; opacity: 1; }
50% { top: 20px; opacity: 0.5; }
100% { top: 10px; opacity: 1; }
}
#scroll-target {padding-top:90px;}
.card__item {text-align: center;padding: 50px 30px;background: #f6f6f8;border-radius: 12px;}
.card__item_slogan {padding: 30px 20px;}
.img__effect {min-height: 400px; height: 100%;max-width: 100%;background-position: center;background-size: cover;background-repeat: no-repeat;    border-radius: 12px;overflow: hidden;}
.module__heading {display: flex;flex-direction: column;gap: 20px;margin-top: 80px;margin-bottom: 56px;}
.module__slogan {align-self: flex-start; display: inline-block;font-size: 15px;font-weight: 300;letter-spacing: 1px;background:#f34971;padding: 7px 18px;border-radius: 12px;color: #fff;}
.module__title {font-family: "Changa One", sans-serif;color:#023363;font-size: 3em;}
.module__wrapper .mozaik {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;gap: 40px;margin-top: 80px;margin-bottom: 56px;}
.module__heading.mozaik {flex: 1;display: flex;flex-direction: column;gap: 20px;} .img__slide_in {max-width: 100%; clip-path: inset(0 100% 0 0);}
.img__side img {border-radius:12px;}
.sticky {position: sticky;top: 50px;}
.highlight {color: #f34971; position: relative;display: inline-block;padding-bottom: 6px;}
.underline {position: absolute;bottom: 0;left: 0;width: 100%;height: 20px;pointer-events: none;}
.underline-path {stroke-dasharray: 300;stroke-dashoffset: 300;transition: stroke-dashoffset 1s ease-out;}
.highlight.visible .underline-path {stroke-dashoffset: 0;}
.typing-text span {opacity: 0;display: inline-block;transform: translateY(10px);}
.typing-char {opacity: 0;display: inline-block;transform: translateY(10px);} .btn, button {font-family: "Kanit", sans-serif;display: inline-flex;align-items: center;font-size:17px; font-weight: 300;letter-spacing: 2px;border:0;border-radius: 40px;padding: 12px 30px; cursor: pointer; transition: all .2s;}  
.btn_bg {background:#023363; color: #fff;}
.btn_bg:hover,.btn_bg:active,.btn_bg:focus {background:#f34971; color:#fff;}
a.btn_bg,a.btn_bg:hover {border:0;}
.btn_mr {margin-bottom: 40px;margin-left: auto;margin-right: auto;}
.mrt-90 {margin-top:90px}
.mrb-90 {margin-bottom:90px}
.mr-90 {margin-top:90px; margin-bottom:90px;} .content__img {margin-bottom: 30px;}
.content__img img {border-radius:12px;}
.list__content_img {border-radius:12px;cursor:pointer; overflow:hidden}
.list__content_img img {border-radius:12px;transition: all .5s ease-in-out;}
.list__content_img:hover img {-webkit-transform: scale(1.2) rotate(.01deg);transform: scale(1.2) rotate(.01deg);}
.list__content_title {font-weight: 600;font-size: 1.2em;margin: 26px 0 34px;padding: 0 20px;}
.list__content_title a {color: #1a232c;} .project__info {display:flex; flex-direction: column; border-radius:25px; background:#eee; padding: 20px; height:100%;} 
.sidebar__title {color:#023363;font-size: 30px;margin-bottom: 20px;} 
.project__info_detail {display: flex;align-items: center;justify-content: space-between;padding: 5px 0;font-weight: 700;letter-spacing: 1px;}
.info_field {font-weight: 500;}
.project__item {border-radius: 12px;overflow: hidden; margin: 0 10px 46px;}
.project__img {position: relative;z-index: 1;}
.project__img:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #0233634a;z-index: 2;}
.project__excerpt {position: absolute;left: 20px;bottom: 20px;visibility: hidden;opacity: 0;transform: translateY(110px);transition: opacity 0.4s ease, transform 0.4s ease;color: #fff;}
.project__item:hover .project__excerpt {visibility: visible;opacity: 1;transform: translateY(0);z-index: 5;}
.project__img::before {content: '';position: absolute;top: -100%;left: 0;width: 100%;height: 100%;background: #f3497163;transition: top 0.4s ease;z-index: 2;}
.project__item:hover .project__img::before {top: 0;}
.portfolio-filters {margin-bottom: 68px;text-align: center;}
.filter-btn {text-transform: uppercase;
font-size: 14px;
background: #023363;
color: #fff;
border: none;
padding: 8px 16px;
margin: 0 5px 10px;
border-radius: 6px;
cursor: pointer;
}
.filter-btn.active,.filter-btn:hover {background: #f34971;}
.project-col {transition: all 0.4s ease;}
.project__title span {display: inline-block;animation-duration: 2s;animation-iteration-count: infinite;}
.arrow-blink {animation-name: arrow-blink;animation-timing-function: ease;}
@keyframes arrow-blink {
0% {
transform: translateX(0);
}
50% {
transform: translateX(+14px);
}
100% {
transform: translateX(0);
}} .inner_project {margin-bottom: 30px;}
.breadcrumbs {color: #e6e6e6;font-size: 17px;}
.breadcrumbs a {color: #e6e6e6;}
.breadcrumbs a:hover {color: #f34971; border-color:#f34971}
.pagination {margin: 46px auto 66px;}
.p_link {display: inline-block; width: 36px; height: 36px;line-height: 36px;border-radius: 50%;background-color: #f34971; color: #fff;font-weight: 400;text-align: center;font-size: 16px;box-shadow: 0 2px 5px rgba(0,0,0,0.2);margin:5px 10px;}
.p_link.inactive {background: #f6f6f8;color: #111;}
a.p_link {border:0;}
a.p_link:hover {border:0;background: #f34971;color:#fff;} .swiper img {border-radius: 20px;}
.swiper-pagination-bullet {width:16px;height: 16px;border-radius: 50%;}
.swiper-pagination-bullet-active {background: #f34971;transform: scale(1.2);}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:0;} .services__grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 60px;padding-bottom: 40px;}
.service__card { background:#f6f6f8;border-radius: 12px;padding: 40px 30px;transition: all 0.3s;position: relative;}
.service__card a {color: inherit;text-decoration: none;display: flex;flex-direction: column;gap: 16px;height: 100%; border:0;}
.service__card:hover, .service__card--active {background: #023363;color: #fff;}
.service__icon {width: 80px;height: 80px;background: #fff;display: flex;align-items: center;justify-content: center;border-radius: 8px;}
.service__icon img { max-width: 60px; max-height: 60px;}
.service__title {font-weight: 400;font-size:1.25em;margin: 0 0 20px 0;}
.service__card:hover .service__title,.service__card--active .service__title {color:#fff;}
.service__card:hover {transform: translateY(-15px);}
.service__content {font-size: 18px;font-weight: 300;letter-spacing: 1px;margin: 0;}
.service__arrow {font-size: 1.2em;font-weight: 700;margin-top: auto;display: inline-block;transition: transform 0.3s;}
.service__card a:hover .service__arrow {transform: rotateX(180deg);}
.service__card a:hover {border:0;}
.service__number {font-size: 60px; font-weight: 900;margin-bottom: 10px;color: transparent;-webkit-text-stroke: 1px #555;}
.service__card:hover .service__number, .service__card--active .service__number {margin-bottom: 10px;color: transparent;-webkit-text-stroke: 1px #fff;}
.fix-col-grid {grid-template-columns: 1fr 1fr;} .sidebar__col {display: flex;flex-direction: column;height: 100%;margin-bottom: 30px;padding: 20px; background:#f6f6f8; border-radius: 12px;}
.sidebar__col_img {margin:20px auto;}
.sidebar__col_img img {border-radius:12px;}
.sidebar__col ul {list-style: none;padding: 0;margin: 0;}
.sidebar__col li {margin-bottom: 10px;}
.sidebar__col_detail {display: flex;align-items: center;padding: 10px 0;font-weight: 300;}
.sidebar__col_detail img {width: 36px;
height: 36px;
padding: 6px;
border-radius: 50%;
background: #fff;
border: 1px solid #f34971;}
.sidebar__col_detail:hover {cursor:pointer}
.sidebar-contact {margin-left:20px;}
.faq_helper {padding-left: 50px;} .faq-title {color:#023363;font-weight: 400;margin: 30px 0 10px;}
.faq-question {color: #111;font-weight: 500;cursor: pointer;padding: 10px 0;border-bottom: 1px solid #ccc;display: flex; align-items:center;justify-content: space-between;}
.faq-answer {font-size: 18px;max-height: 0;overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease;padding: 0 0;color: #444;}
.faq-item:hover .faq-question,.faq-item.active .faq-question {color: #f34971}
.faq-item.active .faq-answer {max-height: 500px;padding: 10px 0;}
.faq-item .toggle-icon {margin-left: 30px;transition: transform 0.3s;}
.faq-item.active .toggle-icon {transform: rotate(180deg);} .forminator-row-last {margin: 60px auto 30px;text-align: center;}
.forminator-design--basic .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] .select2-selection__rendered {color: inherit!important;}
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-description {color: #f34971;font-size:17px;font-weight: 300;}
.forminator-design--basic .forminator-select2 + .forminator-select.select2-container--open .selection .select2-selection--single[role="combobox"], 
.forminator-design--basic .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"]:focus,
.forminator-dropdown--basic {border-color: #f34971!important;background-color: #fff!important;}
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--basic {padding:0!important;}
.forminator-select-dropdown-container--open .forminator-dropdown--basic .select2-results .select2-results__options .select2-results__option.select2-results__option--selected, 
.forminator-select-dropdown-container--open .forminator-dropdown--basic .select2-results .select2-results__options .select2-results__option.select2-results__option--selected span:not(.forminator-checkbox-box)
{background-color: #f34971!important;}
.forminator-design--basic .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] {background-color: #fff!important; border-color:#ddd!important}
.forminator-design--basic .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"]:focus .select2-selection__arrow, 
.forminator-design--basic .forminator-select2 + .forminator-select.select2-container--open .selection .select2-selection--single[role="combobox"] .select2-selection__arrow,
.forminator-design--basic .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"]:hover .select2-selection__arrow
{color: #f34971!important;}
.forminator-checkbox__wrapper {display: flex; align-items: center!important}
.forminator-consent__label p {margin-top:0!important}
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox__label {font-size: 16px!important;}
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-label {font-size: 17px!important;color: #777!important;}
.forminator-guttenberg {margin-top: 68px;}
ul.select2-results__options li {padding-left:22px;}
ul.select2-results__options li:before {content:none;}
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox .forminator-checkbox-box {position: relative;cursor: pointer;display: block!important;}
.forminator-checkbox input[type=checkbox]{display: none!important;}
.forminator-checkbox span::before {content:"";position: absolute;border: 1px solid #ccc;background: #f5f5f5;width: 22px;height: 22px;border-radius: 50%; left: 0;top: 3px;transition: .3s;}
.forminator-checkbox-box:after {content:'';position: absolute;border:3px solid #f34971;border-left:none;border-top:none;width: 0px;height: 0px;left: 3px;bottom: -12px;
transform: rotate(45deg);transform-origin: 0 100%;opacity: 0;transition: width .3s ease .3s, height .3s ease 0s, opacity 0s ease .5s}
input:checked + .forminator-checkbox-box:after {width: 10px;height:25px;opacity: 1;transition: width .3s ease 0s, height .3s ease .3s;}
.forminator-checkbox__label {padding-left: 46px;font-size: 14px;}   
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox:not(.forminator-checkbox-inline).forminator-consent {margin-top:-30px!important}
@keyframes ok {from {transform: scale(0);}70% {transform: scale(1.7);}to {transform: scale(1);}}
@keyframes ok_back {from {transform: scale(0);}70% {transform: scale(1.7);}to {transform: scale(1);}} #scrollUpBtn {display: none;position: fixed;bottom: 30px;right: 30px;z-index: 999;border: none;outline: none;background-color: #f34971;color: #fff;cursor: pointer;border-radius: 50%; padding: 10px; transition: background-color 0.3s;}
#scrollUpBtn:hover {background-color:#023363}
.pum-container .pum-title {margin-bottom: 1.5em!important;}
.marquee-wrapper {font-family: "Changa One", sans-serif;font-weight: 400;font-style: normal;position:relative; z-index:5; overflow: hidden;padding: 20px 0; margin-bottom:90px;display: flex;align-items: center;color:#f34971;}
.marquee {width: 200%;position: relative;}
.marquee-track {display: flex;width: max-content;animation: scroll-left 30s linear infinite;}
.marquee-content {display: flex;align-items: center; flex-shrink: 0; white-space: nowrap;}
.marquee-content span {font-size: 40px;margin: 0 20px;}
.bold {letter-spacing: 2px;}
.outlined {color: transparent;-webkit-text-stroke: 1px #fff;letter-spacing: 5px;}
.dot {font-size: 30px;line-height: 1;vertical-align: middle;color: #fff;}
@keyframes scroll-left {0% {transform: translateX(0%);}100% {transform: translateX(-50%);}}
footer {color: #eee;background:#070f1b;margin-top: 90px;padding:90px 0 120px;position: relative;z-index: 2;}
footer .container {position: relative; z-index:3}
.footer__logo {margin-bottom: 28px; }
.footer__menu {list-style:none; padding-left:0; margin: 0}
footer li:before {content:none;}
footer a {color:#eee;position: relative;display: inline-block; padding:3px 0; overflow: hidden;border-bottom:0;}
footer a:hover {color:#f34971; border-bottom:0;}
footer a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0%;height: 1px; background-color: #f34971;transition: width 0.3s ease;}
footer a:hover::after {width: 100%;}
.footer__bottom {margin-top: 56px;}
.footer__bottom a:not(:last-child) {margin-right: 20px}
.footer__bottom a {display: inline}
.footer__contact_item {margin-bottom:7px;}
.footer__logo {margin-bottom:24px;}
@media (max-width: 600px) {
.btn_mr {margin-top:20px!important;margin-bottom:20px;}
h1, .module__title {font-size: 1.7em}
.post__body {padding: 26px 0 16px;}
.module__heading {margin-top: 60px;margin-bottom: 36px;}
.sidebar__col {margin-top: 30px;height: auto;}
.sidebar__col_detail {padding: 5px;font-size: 15px;}
.services__grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));}
.card_bg {padding: 10px;}
footer {padding:60px 20px}
.footer__menu {margin-top: 30px;}
}
@media (max-width: 991px) {
.img__effect {margin-top: 30px;}
}
@media (min-width: 992px) {
.text-lg-start {text-align:left;}
.text-lg-end {text-align:right;}
}