/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

@font-face {
    font-family: "DB Helvethaica X";
    font-weight: 400;
    src: url(./dist/fonts/DB_Helvethaica_X.otf) format('opentype');
}
@font-face {
    font-family: "DB Helvethaica X";
    font-weight: 500;
    src: url(./dist/fonts/DB_Helvethaica_X_Med.otf) format('opentype');
}
@font-face {
    font-family: "DB Helvethaica X";
    font-weight: 700;
    src: url(./dist/fonts/DB_Helvethaica_X_Bold.otf) format('opentype');
}

/** Local styles */
:root {
    --white: #FFFFFF;
    --var-color-primary-green: #03B6B5;
    --var-color-primary-text-title: #001E7F;
    --var-color-secondary-salmon: #FA9370;
    --var-color-secondary-coral: rgba(250, 147, 112, 1);
    --var-color-secondary-dark-blue: rgba(5, 83, 172, 1);
    --var-color-secondary-text-link: #FC835C;
    --var-color-neutral-grey-2: rgba(74, 78, 97, 1);
    --var-color-neutral-grey-100: rgba(240, 240, 242, 1);
    --var-color-neutral-grey-200: #CCCED4;
    --var-color-neutral-grey-300: #999DA8;
    --var-color-neutral-grey-400: #666B7D;
    --var-color-neutral-grey-500: #474E62;
    --var-color-neutral-grey-600: #2A2C37;
    --var-color-other: #001E7F;
    --var-color-other-text-title: #1F1068;
    --var-color-other-text-link: #FC835C;
    --var-color-palette-1-text-title: #1F1068;
    --var-color-brand-color-dark-blue: rgba(29, 79, 134, 1);
    --var-color-component-palette-blue: rgba(0, 168, 239, 1);
    --var-color-component-palette-ocean: rgba(3, 147, 187, 1);
    --var-color-component-palette-salmon-pink: rgba(246, 147, 151, 1);
    --var-color-component-palette-leaf-green: rgba(33, 178, 107, 1);
    --var-color-component-palette-sky: rgba(113, 176, 224, 1);
    --var-color-component-palette-iris: rgba(133, 137, 194, 1);
    --var-color-component-palette-egg: rgba(252, 187, 117, 1);
    --var-color-component-palette-purple: rgba(179, 105, 170, 1);
    --var-color-component-palette-green: rgba(116, 196, 29, 1);
    --var-color-component-palette-yellow-orange: rgba(247, 171, 31, 1);
    --var-color-state-success-success-light: rgba(222, 243, 233, 1);
}

/** Color styles */
.primary {
    &.green {
        color: #03B6B5;
    }
    &.green-white-70 {
        color: #B3E9E9;
    }
    &.green-white-90 {
        color: #E6F8F8;
    }
    &.blue-yellow {
        background: linear-gradient(90deg, #00A8EF -7.5%, #FCDD26 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.secondary {
    &.salmon {
        color: #FA9370;
    }
    &.salmon-white-70 {
        color: #FDDFD4;
    }
    &.salmon-white-90 {
       color: #FEF4F2;
    }
    &.dark-blue {
        color: #0553AC;
    }
    &.dark-blue-white-70 {
        color: #B4CBE6;
    }
    &.dark-blue-white-90 {
        color: #E5EEF7;
    }
}
.accent {
    &.yellow {
        color: #FFE656;
    }
    &.yellow-white-40 {
        color: #FEF19A;
    }
    &.yellow-white-70 {
        color: #FFF7CB;
    }
}
.other {
    &.text-title {
        color: #001E7F;
    }
    &.text-link {
        color: #FC835C;
    }
    &.purple {
        color: #B369AA;
    }
    &.blue {
        color: #00A8EF;
    }
    &.yellow-orange {
        color: #F7AB1F;
    }
    &.green {
        color: #03B6B5;
    }
}
.neutral {
    &.grey-600 {
        color: #000926;
    }
    &.grey-500 {
        color: #474E62;
    }
    &.grey-400 {
        color: #666B7D;
    }
    &.grey-300 {
        color: #999DA8;
    }
    &.grey-200 {
        color: #CCCED4;
    }
    &.grey-100 {
        color: #F0F0F2;
    }
    &.white {
       color: #FFFFFF;
    }
}

/** Typography */
.title {
    &.header1 {
        font-weight: 700;
        font-size: var(--font-size, 60px);
        line-height: var(--line-height, 60px);

        &.thai {
            --font-size: 60px;
            --line-height: 60px;
        }

        &.english {
            --font-size: 64px;
            --line-height: 77px;
        }

        @media (max-width: 768px) {
            &.thai {
                --line-height: 77px;
            }

            &.english {
                --font-size: 64px;
                --line-height: 77px;
            }
        }
    }
}

.desktop.thai.header-5 {
    font-size: 32px;
    font-weight: 500;
    line-height: 38px;
}

.desktop.thai.small {
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
}

.desktop.thai.body.highlight {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
}
/** Local styles */

body{
    margin: 0px;
}

h6,.h6,h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1,a,div,p,body,span,li,ul,input{
    font-family: "DB Helvethaica X" !important;
}

/* Global class */
.gradient-green-bg {
    background: linear-gradient(90deg, #00A8EF -7.5%, #FCDD26 100%);
}
.gradient-green-text{
    background: linear-gradient(90deg, #00A8EF -7.5%, #FCDD26 147.77%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-line{
    width: 50px;
    border-radius: 6px;
    height: 5px; 
    background: linear-gradient(90deg, #00A8EF 0%, #FCDD26 100%);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
}

.gradient-line-vertical {
    width: 5px;
    border-radius: 6px;
    height: 50px;
    background: linear-gradient(180deg, #00a8ef 0%, #fcdd26 100%);
}

.default-btn,
button {
    background: #FA9370;
    box-shadow: 0px 3px 16px 0px #184AEA17 !important;
    padding: 12px 24px;
    gap: 10px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 24px !important;
    line-height: 28px;
    width: fit-content;
    cursor: pointer;
    &.secondary {
        color: var(--var-color-secondary-salmon, #FA9370);
        box-shadow: 0 3px 16px 0 #184AEA17 !important;
        background: #FFFFFF !important;
        border: 1px solid transparent !important;
    }
}
.default-btn .link_text {
    padding-right: 20px !important;
    font-weight: 500;
}
.default-btn[data-style="basic"] .link_text{
    padding-right: 0px !important;
    font-weight: 500;
}
.default-btn .link_wrap .link_text .arrow{
    margin-top: -12px;
    height: 22px;
    width: 22px;
}
.default-btn .link_wrap .link_text .arrow:before{
    width: 10px;
}
.default-btn.l{
    padding: 14px 24px;
}

.default-btn.s{
    padding: 6px 24px;
}

.default-btn:hover{
    background: #FB765A;
    box-shadow: 0px 3px 16px 0px #184AEA17;
    &.secondary {
        box-shadow: 0 3px 16px 0 #184AEA17 !important;
        background: #FFFFFF !important;
        border: 1px solid var(--var-color-secondary-coral, rgba(250, 147, 112, 1)) !important;
    }
}

.default-btn:active{
    background: linear-gradient(0deg, #FB765A, #FB765A),
    linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    box-shadow: 0px 3px 16px 0px #184AEA17;
    &.secondary {
        color: #E26A51 !important;
        box-shadow: 0 3px 16px 0 #184AEA17 !important;
        background: #FFFFFF !important;
        border: 1px solid #E26A51 !important;
    }
}

.default-btn:disabled{
    background: #FA9370;
    box-shadow: 0px 3px 16px 0px #184AEA17;
    &.secondary {
        color: var(--var-color-secondary-coral, rgba(250, 147, 112, 1)) !important;
        box-shadow: 0 3px 16px 0 #184AEA17 !important;
        background: #FFFFFF !important;
    }
}
.layout-content-container{
    display: flex;
    max-width: 1280px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 1300px) {
    .layout-content-container{
        margin-left: 24px !important;
        margin-right: 24px !important;
        width: 100%;
    }
}
@media (max-width: 768px) {
    .layout-content-container{
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: 100%;
    }
}

/* hide search */
#header-outer #search-outer .nectar-ajax-search-results{
    display: none;
}

.text-align-center{
    text-align: center;
}

.justify-content-center{
    justify-content: center;
}

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

.text-shadow{
    box-shadow: 0px 4px 10px 0px #0000001A !important;
}

.card-shadow{
    box-shadow: 0px 3px 16px 0px #184AEA17 !important;
}

.container.main-content{
    display: flex;
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    flex-direction: column;
}
.container.main-content .row{
    width: 100%;
}
@media (max-width: 1376px) {
    .container.main-content{
        margin-left: 48px !important;
        margin-right: 48px !important;
        width: auto;
    }
}
@media (max-width: 768px) {
    .container.main-content{
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: auto;
    }
}


.wpml-ls-flag {
    display: none !important;
}