/* ///////////////////////////////////// Nav bar brand ///////////////////////////////////// */

.logo-setting {
    height: 61px;
}

.tex-link-nav1 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
}

.tex-link-nav1:hover {
    color: var(--primary-700);
}

.tex-link-nav1:hover,
.tex-link-nav1:focus {
    color: var(--primary-700);
}

.line-1-nav {
    color: #808184;
    font-weight: 300;
}

@media screen and (max-width: 991px) {
    /* .nav-brand {
        margin-top: -14px;
    } */
    .nav-brand {
        margin-top: 0px;
    }
    .logo-setting {
        height: 50px;
    }
}

@media screen and (max-width: 575px) {
    .nav-brand {
        padding-left: 15px;
        padding-right: 15px;
    }
    .tex-link-nav1 {
        font-size: 13px;
    }
}


/* ///////////////////////////////////// intro section ///////////////////////////////////// */

#main {
    background: var(--black-950)
}

.all-body {
    width: 100%;
    height: 100%;
    background: var(--black-950)
}

.all-body::before {
    --line: hsl(0 0% 95% / 0.25);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    mask: linear-gradient(150deg, transparent 40%, white);
    top: 0;
}

@media screen and (min-width: 768px) {
    .all-body .banner__glow {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 0;
        /* overflow: hidden; */
    }
    .all-body .banner__glow::before {
        content: '';
        position: absolute;
        top: var(--y);
        left: var(--x);
        transform: translate(-50%, -50%);
        background: var(--primary-950-op5);
        border-radius: 50%;
        filter: blur(80px);
        width: 200px;
        height: 200px;
        transition: var(--time-300), top 0s, left 0s;
        z-index: -1;
    }
}


/* -----Button System  */


/* ///// primary button */

a {
    cursor: pointer;
    z-index: 2;
}

a.btn-primary {
    border-radius: var(--border-radius-5);
    background: var(--primary-300);
    color: var(--black-950);
    font-size: var(--font-xs);
    font-weight: 300;
    height: 50px;
    padding: 10px 20px 10px 20px;
    transition: var(--time-300);
}

a.btn-primary:hover {
    background: var(--primary-600);
    color: var(--white);
    text-decoration: none;
}

a.btn-primary:focus {
    background: var(--primary-800);
    color: var(--white);
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

@media screen and (max-width: 991px) {
    a.btn-primary {
        font-size: var(--font-xxs);
        padding: 10px 20px;
    }
}

@media screen and (max-width: 440px) {
    a.btn-primary {
        padding: 10px 8px;
    }
}

@media screen and (max-width: 396px) {
    a.btn-primary {
        padding: 13px 20px 10px 20px;
    }
}


/* ///// secondary button */

a.btn-secondary {
    height: 50px;
    padding: 10px 20px;
    color: var(--white);
    font-size: var(--font-xs);
    font-weight: 300;
    border-radius: var(--border-radius-5);
    border: 1px solid var(--black-600);
    transition: var(--time-300);
    background: transparent;
}

a.btn-secondary:hover {
    background: var(--primary-700-op5);
    color: var(--white);
    text-decoration: none;
    border: 1px solid #000;
}

a.btn-secondary:focus {
    background: var(--primary-950);
    color: var(--white);
    text-decoration: none;
    border: 1px solid #000;
    outline: none;
    box-shadow: none;
}

@media screen and (max-width: 991px) {
    a.btn-secondary {
        font-size: var(--font-xxs);
        padding: 10px 20px;
    }
}

@media screen and (max-width: 767px) {
    a.btn-secondary {
        text-align: center;
        font-size: var(--font-xxs);
        padding: 12px 15px;
        margin-top: 15px;
    }
}

@media screen and (max-width: 440px) {
    a.btn-secondary {
        padding: 12px 8px;
    }
}

@media screen and (max-width: 396px) {
    a.btn-secondary {
        margin-top: 15px;
        padding: 12px 20px 10px 20px;
    }
}

a.btn-link {
    color: var(--primary-300);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-weight: var(--font-weight-200);
    transition: var(--time-300);
}

a.btn-link:hover {
    color: var(--primary-500);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-weight: var(--font-weight-200);
}

a.btn-link:active {
    color: var(--primary-700);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-weight: var(--font-weight-200);
}

a.btn-link:focus {
    color: var(--primary-700);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-weight: var(--font-weight-200);
}


/* ------------------------------- */

a.btn-link-2 {
    color: var(--primary-500);
    text-decoration: none;
    font-weight: var(--font-weight-200);
    transition: var(--time-300);
}

a.btn-link-2:hover {
    color: var(--primary-700);
    text-decoration: none;
    font-weight: var(--font-weight-200);
}

a.btn-link-2:active {
    color: var(--primary-700);
    text-decoration: none;
    font-weight: var(--font-weight-200);
}

a.btn-link-2:focus {
    color: var(--primary-700);
    text-decoration: none;
    font-weight: var(--font-weight-200);
}


/* ------------------------------- */

a.btn-link-3 {
    color: var(--black-300);
    font-weight: 100;
    text-decoration: none;
    font-weight: var(--font-weight-200);
    transition: var(--time-300);
}

a.btn-link-3:hover {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: var(--font-weight-200);
}

a.btn-link-3:active {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: var(--font-weight-200);
}

a.btn-link-3:focus {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: var(--font-weight-200);
}


/* ///// box intro button */

.box-intro-button {
    display: flex;
    margin-top: 22px;
    justify-content: center;
    cursor: pointer;
}

.box-intro-button .set-1 a {
    margin: 0 5px 0 0;
}

.box-intro-button .set-2 a {
    margin: 0 0 0 5px;
}

@media screen and (max-width: 767px) {
    .box-intro-button {
        display: grid;
    }
    .box-intro-button .set-1 {
        margin-top: 10px;
        margin-right: 0;
    }
    .box-intro-button .set-2 {
        margin-top: 30px;
        margin-left: 0;
    }
}

@media screen and (max-width: 416px) {
    .box-intro-button .set-1 a {
        margin: 0px;
    }
    .box-intro-button .set-2 a {
        margin: 0px;
    }
}

@media screen and (max-width: 396px) {
    .box-intro-button {
        margin-top: 10px;
    }
    .box-intro-button .set-1 {
        display: grid;
        text-align: center;
    }
    .box-intro-button .set-2 {
        display: grid;
        text-align: center;
        margin-top: 0px;
    }
    .box-intro-button .set-1 a {
        margin: 5px 0;
    }
    .box-intro-button .set-2 a {
        margin: 5px 0;
    }
}


/* ///// img intro */

.img-intro {
    width: 75%;
    transition: var(--time-800);
}

.img-intro:hover {
    width: 80%;
}

.blr-em-intro {
    background-image: url(../images/elements/blur-1.webp);
    background-repeat: no-repeat;
    background-position: top 3vh right;
    animation: animateBackground 2.5s ease-in-out infinite alternate;
}

@keyframes animateBackground {
    0% {
        background-position: top 3vh right;
    }
    50% {
        background-position: top 8vh right;
    }
    100% {
        background-position: top 10vh right;
    }
}

@media screen and (max-width: 1912px) {
    .blr-em-intro {
        background-position: top -10vh right;
    }
    @keyframes animateBackground {
        0% {
            background-position: top -18vh right;
        }
    }
}

@media screen and (max-width: 1571px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 42vh right;
    }
    @keyframes animateBackground {
        0% {
            background-position: top 28vh right;
        }
    }
}

@media screen and (max-width: 1399px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 30vh right;
    }
    @keyframes animateBackground {
        0% {
            background-position: top 25vh right;
        }
    }
}

@media screen and (max-width: 1290px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 25vh right;
    }
    @keyframes animateBackground {
        0% {
            background-position: top 20vh right;
        }
    }
}

@media screen and (max-width: 1198px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 26vh right;
    }
    @keyframes animateBackground {
        0% {
            background-position: top 20vh right;
        }
    }
}

@media screen and (max-width: 1175px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 20vh right;
    }
    @keyframes animateBackground {
        0% {
            background-position: top 15vh right;
        }
    }
}

@media screen and (max-width: 1110px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 10vh right;
    }
    @keyframes animateBackground {
        0% {
            background-position: top 15vh right;
        }
    }
}

@media screen and (max-width: 991px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 12vh right;
        animation: none;
        /* หยุด animation เมื่อหน้าจอมีความกว้าง 991px */
    }
}

@media screen and (max-width: 892px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 3vh right;
    }
}

@media screen and (max-width: 707px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top -10vh right;
    }
}

@media screen and (max-width: 575px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top 1vh center;
    }
    .img-intro {
        width: 100%;
    }
}

@media screen and (max-width: 515px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-2.webp);
        background-position: top -5vh center;
    }
}

@media screen and (max-width: 466px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-3.webp);
        background-position: top -4vh center;
    }
}

@media screen and (max-width: 399px) {
    .blr-em-intro {
        background-image: url(../images/elements/blur-1-3.webp);
        background-position: top -4vh center;
    }
}


/* ///////////////////////////////////// second section ///////////////////////////////////// */

.nd-section {
    margin-top: -70px;
}

.quote-em {
    margin: auto;
    width: 95%;
    background-image: url(../images/elements/quote-1.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 33px;
}

.quote-em .big-paragrap-5 {
    margin-top: 0px;
}

.mini-quote-em {
    height: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.text-nano.program {
    font-size: var(--font-xxs);
    margin-left: 15px;
}

.space-b-60.nd-section {
    padding-bottom: var(--space-20);
}

@media (max-width: 1199px) {
    .space-b-100.nd-section {
        padding-bottom: var(--space-40);
    }
    .quote-em {
        width: 100%;
    }
    .big-paragrap-5.text-quote {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .quote-em {
        background-image: none;
        padding-top: 0px;
    }
    .big-paragrap-5.text-quote {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .space-b-100.nd-section {
        padding-bottom: var(--space-50);
    }
}

@media (max-width: 575px) {
    .space-b-100.nd-section {
        padding-bottom: 0px;
        margin-bottom: -40px !important;
    }
}

@media (max-width: 485px) {
    .space-b-100.nd-section {
        margin-bottom: -50px !important;
    }
}

@media (max-width: 455px) {
    .space-b-100.nd-section {
        margin-bottom: -70px !important;
    }
}

@media (max-width: 439px) {
    .space-b-100.nd-section {
        margin-bottom: -90px !important;
    }
}

@media (max-width: 391px) {
    .space-b-100.nd-section {
        margin-bottom: -100px !important;
    }
}

@media (max-width: 425px) {
    .big-paragrap-5.text-quote {
        font-size: 16px;
    }
    .mini-quote-em {
        height: 15px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

.program-show {
    border-right: 1px solid #3d3d3d9b;
    padding: 20px 10px 20px 12px;
    height: 140px;
}

.program-icon {
    width: 35px;
    margin-left: 10px;
}

@media (max-width: 1199px) {
    .program-icon {
        width: 30px;
        margin-left: 0;
    }
    .program-show {
        padding: 20px 20px 20px 40px;
        border-right: 1px solid #3d3d3d9b;
        margin: 20px auto;
        height: 135px;
    }
    .program-show:nth-child(2) {
        border-right: none;
    }
    .program-show:nth-child(4) {
        border-right: none;
    }
    .text-nano.program {
        margin-left: 0px;
    }
}

@media (max-width: 991px) {
    .program-show {
        padding-left: 28px !important;
    }
}

@media (max-width: 767px) {
    .program-show {
        padding-left: 20px !important;
    }
    .text-nano.program {
        font-size: var(--font-xxs);
    }
    .program-icon {
        width: 25px;
    }
    .program-show {
        height: 150px;
    }
}

@media (max-width: 575px) {
    .program-show {
        border-right: none;
        border-bottom: 1px solid #3d3d3d9b;
        height: auto;
        margin: 20px 0 0 0;
        padding: 5px 20px 20px 20px;
    }
    .program-icon {
        margin-top: -5px;
    }
}

@media (max-width: 515px) {
    .nd-section {
        margin-top: -40px;
    }
}


/* ///////////////////////////////////// banner new experience section ///////////////////////////////////// */

.banner-new-exp {
    background-image: url(../images/portrait/new-experience-1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 622px;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.banner-new-exp p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: 45px;
    /* เพิ่ม padding เพื่อให้ข้อความไม่ติดกับขอบ */
    margin-left: 46px;
    /* เพื่อลบ margin ที่มาพร้อมกับ <p> */
}

.big-paragrap-4.new-exp {
    text-align: center;
}

.contact-subtext {
    bottom: 30px !important;
    margin-left: 20px !important;
}

.btn-secondary.new-exp {
    float: right;
    margin-right: -25px;
    margin-top: -60px !important;
}

@media (max-width: 1199px) {
    .banner-new-exp p {
        margin-left: 20px;
        padding-bottom: 55px;
    }
    .big-paragrap-4.new-exp {
        font-size: 30px;
    }
    .contact-subtext {
        bottom: 33px !important;
        margin-left: 30px !important;
    }
    .btn-secondary.new-exp {
        margin-right: -32px;
    }
}

@media (max-width: 991px) {
    .banner-new-exp {
        background-image: url(../images/portrait/new-experience-1-2.webp);
    }
    .banner-new-exp p {
        margin-left: 0;
        transform: translateX(20%);
        padding-bottom: 190px;
    }
    .banner-new-exp p.contact-subtext {
        padding-bottom: 125px;
        transform: translateX(31%);
    }
    .btn-secondary.new-exp {
        position: absolute;
        right: 310px;
        transform: translate(0, -160%);
    }
    .new-exp.space-t-60.space-b-100 {
        padding-top: var(--space-40);
        padding-bottom: var(--space-60);
    }
}

@media (max-width: 767px) {
    .big-paragrap-4.new-exp {
        font-size: 26px;
    }
    .banner-new-exp p {
        transform: translateX(10%);
        padding-bottom: 186px;
    }
    .banner-new-exp p.contact-subtext {
        padding-bottom: 125px;
        transform: translateX(16%);
    }
    .btn-secondary.new-exp {
        right: 210px;
        transform: translate(0, -145%);
    }
}

@media (max-width: 575px) {
    .banner-new-exp {
        background-image: url(../images/portrait/new-experience-1-3.webp);
        background-size: contain;
        margin-top: -80px;
    }
    .row-new-exp {
        margin-top: -70px;
    }
    .big-paragrap-4.new-exp {
        text-align: left;
    }
    .banner-new-exp p {
        left: 0;
        transform: translateX(0%);
        padding-bottom: 170px;
    }
    .banner-new-exp p.contact-subtext {
        transform: translateX(0%);
        margin-left: 0 !important;
        padding-bottom: 110px;
    }
    .btn-secondary.new-exp {
        right: 26px;
        transform: translate(0, -110%);
    }
    .new-exp.space-t-60.space-b-100 {
        padding-bottom: 0;
    }
    .after-new-exp {
        margin-top: -60px;
    }
}

@media (max-width: 515px) {
    .banner-new-exp {
        margin-top: -120px;
    }
}

@media (max-width: 489px) {
    .row-new-exp {
        margin-top: -130px;
    }
    .big-paragrap-4.new-exp {
        font-size: 20px;
    }
    .banner-new-exp p.contact-subtext {
        padding-bottom: 112px;
    }
}

@media (max-width: 429px) {
    .banner-new-exp {
        margin-top: -140px;
    }
}

@media (max-width: 402px) {
    .banner-new-exp p {
        padding-bottom: 155px;
    }
    .row-new-exp {
        margin-top: -120px;
    }
    .banner-new-exp p.contact-subtext {
        padding-bottom: 102px;
        font-size: 12px;
    }
    .banner-new-exp {
        margin-top: -160px;
    }
}

@media (max-width: 390px) {
    .big-paragrap-4.new-exp {
        font-size: 18px;
    }
}


/* ///////////////////////////////////// six card Section ///////////////////////////////////// */

.longline-intext {
    background: linear-gradient(90deg, #00A3A4 0%, #4DFBF0 60%, #FFF 100%);
    width: 102px;
    height: 3px;
    margin: auto 28px auto 0;
}

.text-small-normal.smart-ivst {
    margin-top: 30px;
}

.box-smart-ivst {
    display: grid;
}

.box-2btn.smart-ivst {
    margin: auto 0;
}

.btn-link.mgt-link {
    margin-top: 25px;
}

.col-xl-8.col-lg-7.col-12.box-smart-ivst.left {
    padding-left: 0 !important;
}

.col-xl-4.col-lg-5.col-12.box-smart-ivst.right {
    padding-right: 0 !important;
    justify-content: end !important;
}

@media (max-width: 1199px) {
    .big-paragrap-5.smart-ivst {
        margin-top: 20px;
        font-size: var(--font-sm);
    }
}

@media (max-width: 991px) {
    .col-xl-8.col-lg-7.col-12.box-smart-ivst.left {
        padding-left: 15px !important;
        justify-content: center !important;
        text-align: center;
    }
    .col-xl-4.col-lg-5.col-12.box-smart-ivst.right {
        padding-right: 15px !important;
        justify-content: center !important;
        text-align: center;
    }
    .longline-intext {
        display: none;
    }
    .center-without-line {
        justify-content: center;
    }
    .big-paragrap-5.smart-ivst {
        margin-top: 10px;
        font-size: 18px;
    }
    .box-2btn.smart-ivst {
        margin: 25px auto 0px auto;
    }
    .text-small-normal.smart-ivst {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .sixcard-sect.space-t-100.space-b-100 {
        padding-top: var(--space-50);
        padding-bottom: var(--space-50);
    }
}

@media (max-width: 452px) {
    .box-2btn.smart-ivst {
        display: grid;
        margin: 0;
    }
}

@media (max-width: 425px) {
    .big-paragrap-5.black-200.smart-ivst {
        font-size: 14px;
    }
}


/* -----oneOfSix-card */

.all-oneOfSix-card {
    margin-top: 20px;
}

.all-oneOfSix-card:first-child {
    padding-left: 0;
}

.all-oneOfSix-card:nth-child(3) {
    padding-right: 0;
}

.all-oneOfSix-card:nth-child(4) {
    padding-left: 0;
}

.all-oneOfSix-card:nth-child(6) {
    padding-right: 0;
}

.oneOfSix-card {
    padding: 20px;
    background: var(--black-sub);
    height: 140px;
}

.paragrap-normal.sixCardContent {
    margin-bottom: 10px;
}

.text-nano.six-card {
    font-size: var(--font-xxs);
}

@media (max-width: 991px) {
    .all-oneOfSix-card:first-child {
        padding-left: 15px;
    }
    .all-oneOfSix-card:nth-child(3) {
        padding-right: 15px;
    }
    .all-oneOfSix-card:nth-child(4) {
        padding-left: 15px;
    }
    .all-oneOfSix-card:nth-child(6) {
        padding-right: 15px;
    }
}

@media (max-width: 767px) {
    .oneOfSix-card {
        padding: 20px;
        height: 145px;
    }
    .text-nano.six-card {
        font-size: var(--font-xxxs);
    }
}

@media (max-width: 575px) {
    .oneOfSix-card {
        padding: 25px;
        height: auto;
    }
}


/* ///////////////////////////////////// Sticky Content Section ///////////////////////////////////// */

.big-paragrap-4.indicator {
    margin-bottom: 20px;
}

.img-sticky-desk {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: left;
    overflow: visible;
}

.divImg-sticky-mob {
    text-align: center
}

.img-sticky-mob {
    width: 100%;
}

@media (max-width: 1199px) {
    .big-paragrap-4.indicator {
        font-size: var(--font-md);
    }
    .big-paragrap-5.sticky {
        font-size: var(--font-sm);
    }
}

@media (max-width: 991px) {
    .img-sticky-desk {
        display: none;
    }
    .sticky.space-t-100.space-b-100 {
        padding-bottom: var(--space-40);
    }
}

@media (max-width: 767px) {
    .sticky.space-t-100.space-b-100 {
        padding-top: var(--space-50);
    }
}

@media (max-width: 575px) {
    .big-paragrap-4.indicator {
        font-size: var(--font-sm);
    }
    .big-paragrap-5.sticky {
        font-size: var(--font-xxxs);
    }
}


/* ///////////////////////////////////// Up Grade Experience Section ///////////////////////////////////// */

.bg-upgrade-exp {
    background-image: url(../images/background/bg-upgrade-exp.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.col-xl-3.col-lg-6.col-md-6.col-sm-6.col-12.card-upgrade-exp {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 20px 0;
}

.icon-check-adv {
    margin-top: -5px;
    margin-right: 17px;
}

.box-upgrade-exp {
    display: flex;
    margin-bottom: 17px;
}

.bg-ribbon-card {
    background-image: url(../images/elements/ribbon.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (max-width: 1299px) {
    .col-xl-3.col-lg-6.col-md-6.col-sm-6.col-12.card-upgrade-exp {
        justify-content: center;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 767px) {
    .big-paragrap-4.upgrade-exp {
        font-size: var(--font-sm);
    }
}

@media (max-width: 575px) {
    .big-paragrap-5.ribbon-card {
        font-size: var(--font-xxs);
    }
    .col-xl-6.col-lg-7.col-12.ribbon-card {
        padding-left: 0px !important;
        padding-right: 0pc !important;
    }
}

@media (max-width: 425px) {
    .big-paragrap-5.ribbon-card {
        font-size: var(--font-xxxs);
    }
}


/* -----Promo Price Card */

.card-promo-price {
    background-color: var(--primary-1000-op-6);
    text-align: center;
    padding: 60px;
    border: none;
    border-top: none;
    /* Remove the default top border */
    border-radius: 3px;
    position: relative;
    /* Required for pseudo-element positioning */
    backdrop-filter: var(--blur-5);
}

.card-promo-price::before {
    content: '';
    position: absolute;
    top: -1px;
    /* Adjust for border thickness */
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #00A3A4 0%, #4DFBF0 60%, #FFF 100%);
}

.card-promo-price::after {
    content: 'พิเศษ! โปรโมชันเปิดตัว';
    position: absolute;
    border-radius: 50px;
    top: -11px;
    /* Adjust the position as needed */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--black-main);
    /* Match the card background */
    padding: 3px 12px;
    /* Adjust padding for the text */
    color: var(--primary-100);
    /* Text color */
    font-size: 14px;
    /* Adjust font size */
    font-weight: 200;
    border: 1px solid var(--primary-500);
}

.paragrap-normal.promo-price {
    margin-bottom: 30px;
}

@media (max-width: 498px) {
    .card-promo-price {
        padding: 60px 30px;
    }
}

@media (max-width: 438px) {
    .card-promo-price {
        padding: 60px 10px;
    }
    .paragrap-normal.promo-price {
        margin-bottom: 15px;
    }
}


/* -----Normal Price Card */

.box-normal-price {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 60px 40px 60px 40px;
    border-radius: 3px;
    border: 1px solid var(--black-main);
    backdrop-filter: var(--blur-5);
    height: 570px;
    background: var(--Color_card, linear-gradient(180deg, #1b1b1b7e -6.46%, rgba(7, 7, 7, 0.464) 189.47%));
}

.big-text-price.normal-price {
    margin-top: 15px;
    margin-bottom: 20px;
}

.paragrap-normal.normal-price {
    margin-top: 30px;
    flex-grow: 1;
    /* This pushes the next elements down */
}

.card-footer.normal-price {
    margin-top: 20px;
    padding: 0.75rem 0.25rem
}

.d-flex.normal-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* Ensure vertical alignment */
}

.d-flex.normal-price span {
    white-space: nowrap;
    /* Prevent line breaks */
}

.d-flex.normal-price span.last-set-text {
    margin-top: 30px;
}

.box-list.normal-price {
    text-align: left;
    padding: 0px 30px 0px 20%;
}

li.paragrap-normal.normal-price {
    margin-top: 15px;
}

p.paragrap-normal.normal-price {
    margin-top: 15px;
}

.hr-primary-100-op15.normal-price {
    margin-bottom: 30px;
}

@media (max-width: 1759px) {
    .box-list.normal-price {
        padding: 0px 15px 0px 15%;
    }
}

@media (max-width: 1646px) {
    .box-normal-price {
        padding: 40px 20px 40px 20px;
    }
    .box-normal-price {
        height: 500px;
    }
}

@media (max-width: 1570px) {
    .big-text-price.normal-price {
        font-size: var(--font-xxl);
    }
    .hr-primary-100-op15.normal-price {
        margin-bottom: 15px;
    }
    .box-normal-price {
        height: 490px;
    }
    .d-flex.normal-price {
        gap: 10px;
    }
}

@media (max-width: 1449px) {
    .box-list.normal-price {
        padding: 0px 15px 0px 10%;
    }
}

@media (max-width: 1399px) {
    li.paragrap-normal.normal-price {
        font-size: var(--font-xxs);
    }
    p.paragrap-normal.normal-price {
        font-size: var(--font-xxs);
    }
    .box-list.normal-price {
        padding: 0px 15px 0px 12%;
    }
    .last-set-text.paragrap-normal {
        font-size: var(--font-xxs);
    }
    .paragrap-normal.start-at {
        font-size: var(--font-xxs);
    }
    .hr-primary-100-op15.normal-price {
        margin-bottom: 15px;
        margin-top: 10px;
    }
    .box-normal-price {
        height: 450px;
    }
    .box-normal-price {
        padding: 30px 20px 30px 20px;
    }
}

@media (max-width: 1297px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 9%;
    }
    .big-text-price.normal-price {
        font-size: var(--font-xl);
    }
    .big-text-price.normal-price {
        margin-bottom: 12px;
    }
    .big-paragrap-5.normal-price.purpel-500,
    .big-paragrap-5.normal-price.light-green-500 {
        font-size: var(--font-sm);
    }
    .box-normal-price {
        height: 410px;
    }
}

@media (max-width: 1235px) {
    .big-text-price.normal-price {
        font-size: 44px;
    }
    .big-text-price.normal-price {
        margin-bottom: 7px;
    }
}

@media (max-width: 1224px) {
    .big-text-price.normal-price {
        font-size: var(--font-xl);
    }
    .big-text-price.normal-price {
        margin-bottom: 10px;
    }
    .box-list.normal-price {
        padding: 0px 0px 0px 10%;
    }
    .last-set-text.paragrap-normal {
        font-size: var(--font-xxxs);
    }
    .paragrap-normal.start-at {
        font-size: var(--font-xxxs);
    }
    .text-small2-normal.just-price {
        font-size: var(--font-xs);
    }
    li.paragrap-normal.normal-price {
        font-size: var(--font-xxxs);
    }
    p.paragrap-normal.normal-price {
        font-size: var(--font-xxxs);
    }
}

@media (max-width: 1199px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 24%;
    }
}

@media (max-width: 1079px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 15%;
    }
    .big-text-price.normal-price {
        margin-bottom: 18px;
    }
    .hr-primary-100-op15.normal-price {
        margin-top: 5px;
    }
}

@media (max-width: 1045px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 12%;
    }
    .big-text-price.normal-price {
        font-size: 50px;
    }
    .big-text-price.normal-price {
        margin-bottom: 12px;
    }
}

@media (max-width: 991px) {
    .big-text-price.normal-price {
        font-size: var(--font-normal-price);
    }
    .box-list.normal-price {
        padding: 0px 0px 0px 20%;
    }
    .box-normal-price {
        height: 420px;
    }
    .big-text-price.normal-price {
        margin-bottom: 26px;
    }
    .hr-primary-100-op15.normal-price {
        margin-top: -10px;
    }
}

@media (max-width: 899px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 22%;
    }
    .big-text-price.normal-price {
        font-size: 52px;
    }
    .box-normal-price {
        height: 390px;
    }
    .hr-primary-100-op15.normal-price {
        margin-top: 0px;
    }
    .big-text-price.normal-price {
        margin-bottom: 16px;
    }
    .card-footer.normal-price {
        margin-top: 12px;
    }
}

@media (max-width: 828px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 19%;
    }
}

@media (max-width: 794px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 12%;
    }
}

@media (max-width: 767px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 17%;
    }
}

@media (max-width: 721px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 14%;
    }
}

@media (max-width: 679px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 11%;
    }
    .big-text-price.normal-price {
        font-size: 50px;
    }
}

@media (max-width: 661px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 9%;
    }
    .big-text-price.normal-price {
        font-size: 45px;
    }
    .big-text-price.normal-price {
        margin-bottom: 12px;
    }
    .hr-primary-100-op15.normal-price {
        margin-top: 10px;
    }
}

@media (max-width: 645px) {
    li.paragrap-normal.normal-price {
        font-size: var(--font-xxxs);
    }
    .last-set-text.paragrap-normal {
        font-size: var(--font-xxxs);
    }
    .paragrap-normal.start-at {
        font-size: var(--font-xxxs);
    }
    .text-small2-normal.just-price {
        font-size: var(--font-sm);
    }
    .big-text-price.normal-price {
        font-size: 37px;
    }
    .big-text-price.normal-price {
        margin-bottom: 3px;
    }
    .box-normal-price {
        height: 358px;
    }
    .card-footer.normal-price {
        margin-top: 4px;
    }
}

@media (max-width: 612px) {
    .card-footer.normal-price {
        margin-top: 5px;
    }
}

@media (max-width: 575px) {
    .card-footer.normal-price {
        margin-top: 20px;
    }
    .big-text-price.normal-price {
        font-size: var(--font-normal-price);
    }
    li.paragrap-normal.normal-price {
        font-size: var(--font-xs);
    }
    p.paragrap-normal.normal-price {
        font-size: var(--font-xs);
    }
    .box-normal-price {
        height: 490px;
    }
    .last-set-text.paragrap-normal {
        font-size: var(--font-xs);
    }
    .paragrap-normal.start-at {
        font-size: var(--font-xs);
    }
    .text-small2-normal.just-price {
        font-size: var(--font-sm-2);
    }
    .d-flex.normal-price {
        justify-content: center;
        gap: 20px;
    }
    .big-text-price.normal-price {
        margin-bottom: 22px;
    }
    .box-list.normal-price {
        padding: 0px 0px 0px 24%;
    }
    .box-normal-price.bg-normal-price {
        margin: 15px 0;
    }
    .box-normal-price {
        padding: 60px 40px 40px 40px;
    }
}

@media (max-width: 525px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 22%;
    }
}

@media (max-width: 487px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 18%;
    }
    .box-normal-price {
        padding: 40px;
    }
    .box-normal-price {
        height: 460px;
    }
    .card-footer.normal-price {
        margin-top: 20px;
    }
    .big-text-price.normal-price {
        font-size: var(--font-xxl);
    }
    .big-text-price.normal-price {
        margin-bottom: 18px;
    }
    .hr-primary-100-op15.normal-price {
        margin-top: 2px;
    }
}

@media (max-width: 459px) {
    .box-list.normal-price {
        padding: 0px 0px 0px 10%;
    }
    .d-flex.normal-price {
        gap: 10px;
    }
    .box-normal-price {
        padding: 45px 25px;
    }
    .hr-primary-100-op15.normal-price {
        margin-top: 8px;
        margin-bottom: 5px;
    }
    .last-set-text.paragrap-normal {
        font-size: var(--font-xxs);
    }
    .paragrap-normal.start-at {
        font-size: var(--font-xxs);
    }
    .text-small2-normal.just-price {
        font-size: var(--font-sm);
    }
    .big-text-price.normal-price {
        margin-bottom: 2px;
        margin-top: -1px;
    }
}


/* ///////////////////////////////////// Solution Investor Section ///////////////////////////////////// */

.material-symbols-rounded {
    font-size: 30px;
}

.content-headline.black-200.fw-200.feature-item_title .material-symbols-rounded {
    display: inline-block;
    transform: translateY(5px);
    margin-right: 15px;
}

.paragrap-normal.text-new-invst {
    padding-left: 55px;
    padding-top: 10px;
}

.icon-crown {
    display: inline-block;
    transform: translateY(-4px);
    margin-right: 18px;
}

@media (max-width: 1239px) {
    .paragrap-normal.text-new-invst {
        padding-left: 0;
    }
    h4.content-headline.text-new-invst {
        font-size: var(--font-sm-2);
    }
    .content-headline.black-200.fw-200.feature-item_title .material-symbols-rounded {
        margin-right: 5px;
    }
    .icon-crown {
        margin-right: 8px;
    }
}

@media (max-width: 1199px) {
    .new-invst.container {
        max-width: 1180px;
    }
}

@media (max-width: 991px) {
    .new-invst.container {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    .new-invst.container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .new-invst.container.space-t-100.space-b-100 {
        padding-bottom: var(--space-60);
    }
}

@media (max-width: 575px) {
    h4.content-headline.text-new-invst {
        font-size: var(--font-xs);
    }
    .material-symbols-rounded {
        font-size: 20px;
    }
    .icon-crown {
        width: 20px;
    }
    .new-invst.container.space-t-100.space-b-100 {
        padding-bottom: var(--space-30);
    }
}


/* ///////////////////////////////////// efin Award Section ///////////////////////////////////// */

.container.hr-top-awd.space-b-80 {
    padding-bottom: var(--space-30);
}

.img-efin-award {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
}

.box-grnt {
    margin-top: -530px;
    margin-left: 1040px;
    margin-bottom: 18rem;
    text-align: left;
    padding: 37px;
    width: 363px;
    height: 189px;
}

.bg-card-grnt {
    border-radius: 5px;
    border: 1px solid var(--primary-600);
    opacity: 90%;
    background: var(--black-card);
    backdrop-filter: var(--blur-5);
}

@media (max-width: 1699px) {
    .box-grnt {
        margin-top: -40px;
        margin-left: 0px;
        margin-bottom: 0rem;
    }
}

@media (max-width: 991px) {
    .box-grnt {
        margin-top: -30px;
        width: 70%;
        margin-left: 15%;
    }
    .award-sec.space-t-60 {
        padding-top: var(--space-30);
    }
    .big-paragrap-3.award-sec {
        font-size: var(--font-lg);
    }
    .big-paragrap-5.award-sec {
        font-size: var(--font-xs);
    }
}

@media (max-width: 767px) {
    .box-grnt {
        margin-top: -10px;
        padding: 25px;
        height: auto;
    }
}

@media (max-width: 575px) {
    .box-grnt {
        width: 100%;
        margin-left: 0%;
    }
    .icon-check-adv-awd {
        width: 20px;
    }
}

@media (max-width: 425px) {
    .big-paragrap-3.award-sec {
        font-size: var(--font-md);
    }
    .big-paragrap-5.award-sec {
        font-size: var(--font-xxs);
    }
}

@media (max-width: 390px) {
    .big-paragrap-5.award-sec {
        font-size: var(--font-xxxs);
    }
}


/* -----Bubble Effect Element  */

.big-bb-aw {
    position: relative;
    float: left;
    width: 50%;
    margin-top: -200px;
    margin-left: -220px;
    z-index: -1;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(20px, -50px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@media (max-width: 1199px) {
    .big-bb-aw {
        margin-top: -400px;
    }
}

@media (max-width: 991px) {
    .big-bb-aw {
        display: none;
    }
}


/* -----Solution Invest  */

.box-slt-invst {
    text-align: left;
}

.big-paragrap-3.slt-invst {
    margin-left: 0;
    padding-left: 0;
    margin-top: 25rem;
}

@media (max-width: 1699px) {
    .big-paragrap-3.slt-invst {
        margin-top: 3rem;
    }
    .box-slt-invst {
        margin-top: 20px;
    }
}

@media (max-width: 991px) {
    .box-slt-invst {
        margin-top: 0px;
        text-align: center;
    }
    .big-paragrap-3.slt-invst {
        font-size: var(--font-lg);
    }
    .big-paragrap-5.slt-invst {
        font-size: var(--font-sm);
    }
}

@media (max-width: 767px) {
    .big-paragrap-5.slt-invst {
        font-size: var(--font-sm);
    }
    .container.award-sec.space-t-100.space-b-100 {
        padding-top: var(--space-60);
        padding-bottom: var(--space-60);
    }
}

@media (max-width: 575px) {
    .container.award-sec.space-t-100.space-b-100 {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40);
    }
}

@media (max-width: 425px) {
    .big-paragrap-3.slt-invst {
        font-size: var(--font-md);
    }
    .big-paragrap-5.slt-invst {
        font-size: var(--font-xxs);
    }
}


/* ///////////////////////////////////// Company Partner Section///////////////////////////////////// */

.box-info-cmp {
    display: flex;
    justify-content: space-between;
    gap: 70px;
    align-items: center;
}

.big-box-info {
    display: flex;
    justify-content: left;
    gap: 70px;
}

@media (max-width: 991px) {
    .big-paragrap-3.cmp-prtnr {
        font-size: var(--font-lg);
    }
}

@media (max-width: 767px) {
    .container.cmp-prtnr.space-b-100.space-t-100 {
        padding-top: var(--space-60);
        padding-bottom: var(--space-60);
    }
}

@media (max-width: 575px) {
    .content-headline.cmp-prtnr.white-main.fw-200 {
        text-align: center;
    }
    .big-box-info {
        justify-content: center;
        gap: 30px;
    }
    .box-info-cmp {
        display: grid;
        justify-content: center;
        gap: 40px;
    }
    /* .box-user,.box-broker {
        text-align: center;
    } */
    .box-button-nd {
        margin: auto;
    }
    .counting-effct.big-paragrap-4 {
        font-size: var(--font-md);
    }
}

@media (max-width: 425px) {
    .big-paragrap-3.cmp-prtnr {
        font-size: var(--font-md);
    }
}


/* ///////////////////////////////////// Main Function Section ///////////////////////////////////// */

.bg-func {
    background-image: url(../images/background/bg-func.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.box-template {
    padding: 37px 0 37px 37px;
    margin-top: 50px;
}

.bg-card-mainFunc {
    border-radius: 5px;
    border: 1px solid var(--primary-950);
    opacity: 90%;
    background: rgba(0, 0, 0, 0.70);
}


/* -----Func 1 */

.func-1.row {
    margin: 0 !important;
}

.func-1.content-box-left.col-xl-6.col-lg-6.col-12 {
    padding-left: 0 !important;
    margin-top: 40px;
}

.func-1.content-box-right.col-xl-6.col-lg-6.col-12 {
    padding-right: 0 !important;
    margin-top: 40px;
}

.text-small-normal.func-1-left {
    margin-top: 30px;
}

.box-func1-l.btn {
    display: flex;
    gap: 15px;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 20px;
}

.box-img-template-1 {
    margin-top: 50px;
}

.img-template-1 {
    width: 58%;
}

.box-img-template-2 {
    padding: 0;
    text-align: right;
}

.img-template-2 {
    width: 100%;
    height: auto;
    margin-top: -30px;
}

@media (max-width: 991px) {
    .big-paragrap-4.text-func-1 {
        text-align: center;
    }
    .box-func1-l.btn {
        justify-content: center;
        margin-top: 20px;
    }
    .func-1.content-box-left.col-xl-6.col-lg-6.col-12 {
        margin-top: 20px;
        padding-left: 15px !important;
        text-align: center;
    }
    .func-1.content-box-right.col-xl-6.col-lg-6.col-12 {
        padding-right: 15px !important;
        margin-top: 20px;
    }
    .box-template {
        margin-top: 30px;
        padding: 37px;
    }
    .box-img-template-1 {
        display: none;
    }
    .box-img-template-2 {
        text-align: center;
    }
    .img-template-2 {
        margin-top: 10px;
        width: 100%;
        height: 187px;
        object-fit: cover;
        object-position: 100% 0;
        border-radius: 5px;
    }
    .text-small-normal.func-1-left {
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    .text-small-normal.func-1-left {
        font-size: var(--font-xs);
    }
    .box-func1-l.btn {
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .img-template-2 {
        margin-top: -10px;
    }
}

@media (max-width: 575px) {
    .img-template-2 {
        height: 167px;
    }
}

@media (max-width: 425px) {
    .box-template {
        padding: 30px 20px;
    }
    .text-small-normal.func-1-left {
        font-size: var(--font-xxs);
    }
    .box-func1-l.btn {
        display: grid;
        gap: 0px;
    }
    .func-1.content-box-left.col-xl-6.col-lg-6.col-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .func-1.content-box-right.col-xl-6.col-lg-6.col-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}


/* -----Big Bubble Func 1 */

.big-bb-func {
    position: relative;
    margin-left: -100px;
    /* เพิ่ม animation properties */
    animation: fadeInOut 5s infinite alternate;
}


/* สร้าง keyframes สำหรับ animation */

@keyframes fadeInOut {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .big-bb-func {
        width: 50%;
        margin-left: 0px;
        margin-top: 100px;
    }
}

@media (max-width: 690px) {
    .big-bb-func {
        width: 100%;
        margin-top: 150px;
    }
}


/* -----Func 2 */

.box-template.bg-card-mainFunc.func-nd {
    margin-top: 24px;
    padding: 37px 0px 0px 37px;
}

.func-2.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
    margin-top: 40px;
}

.func-2.content-box-right.col-xl-7.col-lg-6.col-md-6.col-12 {
    justify-content: end;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.big-paragrap-4.text-func-2 {
    margin-bottom: 40px;
}

.box-img-std {
    margin-top: 50px;
    text-align: right;
}

.img-std {
    width: 100%;
}

li::marker {
    font-size: 10px;
}

@media (max-width: 1199px) {
    .big-paragrap-4.text-func-2 {
        margin-bottom: 20px;
    }
    /* .func-2.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
        margin-top: 0px;
    } */
}

@media (max-width: 991px) {
    .box-img-std {
        margin-top: 0px;
    }
    .big-paragrap-4.text-func-2 {
        margin-bottom: 40px;
        /* text-align: center; */
    }
}

@media (max-width: 767px) {
    .box-template.bg-card-mainFunc.func-nd {
        padding: 37px;
    }
    .big-paragrap-4.text-func-2 {
        margin-bottom: 20px;
    }
    .box-img-std {
        margin-top: 20px;
    }
    .func-2.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
        margin-top: 0px;
    }
}


/* @media (max-width: 545px) {
    .func-2.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
        padding-left: 0%;
        margin-left: 28%;
    }
}

@media (max-width: 512px) {
    .func-2.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
        margin-left: 24%;
    }
}

@media (max-width: 441px) {
    .func-2.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
        margin-left: 20%;
    }
} */

@media (max-width: 425px) {
    .box-template.bg-card-mainFunc.func-nd {
        padding: 30px 20px;
    }
}


/* @media (max-width: 380px) {
    .func-2.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
        margin-left: 18%;
    }
} */


/* -----Big Bubble Func 2 */

.big-bb-func-2 {
    width: 100%;
    position: relative;
    margin-left: 290px;
    margin-top: -200px;
    z-index: -1;
    /* เพิ่ม animation properties */
    animation: movingUP 4s infinite alternate;
}


/* สร้าง keyframes สำหรับ animation */

@keyframes movingUP {
    0% {
        margin-top: -250px;
    }
    100% {
        margin-top: -180px;
    }
}

@media (max-width: 1199px) {
    .big-bb-func-2 {
        width: 70%;
        margin-left: 0px;
        margin-top: 100px;
    }
}

@media (max-width: 690px) {
    .big-bb-func-2 {
        width: 100%;
        margin-top: 150px;
    }
}


/* -----Func 3 */

.big-paragrap-4.text-func-3 {
    margin-bottom: 40px;
}

.box-template.bg-card-mainFunc.func-rd {
    margin-top: 24px;
    padding: 37px 0px 0px 37px;
}

.func-3.content-box-left.col-xl-5.col-lg-6.col-md-6.col-12 {
    padding-left: 0 !important;
}

.func-3.content-box-right.col-xl-7.col-lg-6.col-md-6.col-12 {
    justify-content: end;
    padding-right: 0 !important;
}

.ul-setting-l {
    margin-top: 10px;
    padding-left: 14px;
}

.p-box-setting {
    margin-top: 30px;
}

.img-anlyz {
    width: 100%;
}

@media (max-width: 1199px) {
    .img-anlyz {
        width: 100%;
        height: 487px;
        object-fit: cover;
        object-position: 0% 0;
    }
}

@media (max-width: 767px) {
    .func-3.content-box-right.col-xl-7.col-lg-6.col-md-6.col-12 {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    .box-template.bg-card-mainFunc.func-rd {
        padding: 37px;
    }
    .box-img-anlyz {
        margin-top: 30px;
    }
    .img-anlyz {
        border-radius: 5px;
        height: 300px;
    }
    .big-paragrap-4.text-func-3 {
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .img-anlyz {
        height: 150px;
    }
}

@media (max-width: 425px) {
    .box-template.bg-card-mainFunc.func-rd {
        padding: 30px 20px;
    }
}


/* -----Func 4 */

.big-paragrap-4.text-func-4 {
    margin-bottom: 40px;
}

.box-template.bg-card-mainFunc.func-4th {
    margin-top: 24px;
    padding: 37px 0px 0px 37px;
}

.func-4.content-box-left.col-xl-6.col-lg-7.col-12 {
    padding-left: 0 !important;
}

.func-4.content-box-right.col-xl-6.col-lg-5.col-12 {
    justify-content: end;
    padding-right: 0 !important;
}

.box-img-scan-1 {
    text-align: center;
    margin-top: 30px;
}

.img-scan-1 {
    width: 100%;
}

.box-img-scan-2 {
    text-align: right;
    margin-top: 10px;
}

.img-scan-2 {
    width: 100%;
    border-radius: 5px;
}

@media (max-width: 1199px) {
    .img-scan-2 {
        width: 100%;
        height: 557px;
        object-fit: cover;
        object-position: 0% 0;
        border-radius: 5px 0 0 0;
    }
    .big-paragrap-4.text-func-4 {
        margin-bottom: 20px;
    }
    .img-scan-1 {
        height: 225px;
        object-fit: cover;
        object-position: 0% 0;
        border-radius: 5px 5px 0 0;
    }
}

@media (max-width: 991px) {
    .img-scan-1 {
        display: none;
    }
    .box-template.bg-card-mainFunc.func-4th {
        margin-top: 24px;
        padding: 37px;
    }
    .func-4.content-box-left.col-xl-6.col-lg-7.col-12 {
        padding-right: 0 !important;
    }
    .func-4.content-box-right.col-xl-6.col-lg-5.col-12 {
        justify-content: end;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .img-scan-2 {
        height: 200px;
        border-radius: 5px;
    }
}

@media (max-width: 575px) {
    .img-scan-2 {
        height: 150px;
    }
}

@media (max-width: 425px) {
    .box-template.bg-card-mainFunc.func-4th {
        padding: 30px 20px;
    }
}


/* -----Func 5 */

.big-paragrap-4.text-func-5 {
    margin-bottom: 40px;
}

.box-template.bg-card-mainFunc.func-5th {
    margin-top: 24px;
    padding: 37px 0px 0px 37px;
}

.func-5.content-box-left.col-xl-5.col-lg-6.col-12 {
    padding-left: 0 !important;
}

.func-5.content-box-right.col-xl-7.col-lg-6.col-12 {
    justify-content: end;
    padding-right: 0 !important;
}

.box-img-news {
    margin-top: 70px;
}

.img-news {
    width: 100%;
    border-radius: 5px 0 0 0;
}

@media (max-width: 1199px) {
    .img-news {
        height: 335px;
        object-fit: cover;
        object-position: 0% 0;
    }
    .box-img-news {
        margin-top: 0px;
    }
}

@media (max-width: 991px) {
    .box-template.bg-card-mainFunc.func-5th {
        padding: 37px;
    }
    .box-img-news {
        margin-top: 20px;
    }
    .img-news {
        border-radius: 5px;
        height: 200px;
    }
    .func-5.content-box-right.col-xl-7.col-lg-6.col-12 {
        padding-left: 0 !important;
    }
    .func-5.content-box-left.col-xl-5.col-lg-6.col-12 {
        padding-right: 0 !important;
    }
    .big-paragrap-4.text-func-5 {
        margin-bottom: 20px;
    }
}

@media (max-width: 757px) {
    .img-news {
        height: 150px;
    }
    .box-img-news {
        margin-top: 10px;
    }
}

@media (max-width: 425px) {
    .box-template.bg-card-mainFunc.func-5th {
        padding: 30px 20px;
    }
}


/* -----Big Bubble Func 4 */

.big-bb-func-4 {
    width: 100%;
    position: relative;
    margin-top: -510px;
    z-index: -1;
    animation: fadeInOut2 3s infinite alternate;
}


/* สร้าง keyframes สำหรับ animation */

@keyframes fadeInOut2 {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}


/* ///////////////////////////////////// Faq Section ///////////////////////////////////// */

.card-header.faq {
    padding: 10px 30px 10px 10px !important;
}

@media (max-width: 991px) {
    .btn.btn-link.collapsed {
        white-space: normal;
        text-align: left;
    }
    .btn.btn-link.active {
        white-space: normal;
        text-align: left;
    }
}

@media (max-width: 575px) {
    .text-small-normal.text-faq {
        font-size: var(--font-xs);
    }
}


/* ///////////////////////////////////// ContactUs ///////////////////////////////////// */

.contact-quote-em {
    margin: auto;
    width: 66%;
    background-image: url(../images/elements/contact-quote.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 33px;
}

.text-quote-contact {
    font-size: 22px;
}

@media (max-width: 1199px) {
    .contact-quote-em {
        width: 84%;
    }
}

@media (max-width: 991px) {
    .contact-quote-em {
        width: 100%;
        padding-top: 22px;
    }
}

@media (max-width: 767px) {
    .contact-quote-em {
        background-image: none;
        padding-top: 0;
    }
    .text-quote-contact {
        font-size: 18px;
    }
    .mini-quote-em.con-q {
        margin-top: 0;
        margin-bottom: 15px;
    }
}

@media (max-width: 575px) {
    .text-quote-contact {
        font-size: 16px;
    }
}


/* -----Social Media */

.box-social {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.img-logo-social {
    width: 80px;
    transition: var(--time-300);
}

a .img-logo-social:hover {
    width: 85px;
}

@media (max-width: 575px) {
    .img-logo-social {
        width: 60px;
    }
    a .img-logo-social:hover {
        width: 65px;
    }
}