@font-face {
    font-family: sarabun-regular;
    src: url(/fonts/Sarabun/Sarabun-Regular.ttf);
    font-display: swap
}

@font-face {
    font-family: sarabun-medium;
    src: url(/fonts/Sarabun/Sarabun-Medium.ttf);
    font-display: swap
}

@font-face {
    font-family: sarabun-semibold;
    src: url(/fonts/Sarabun/Sarabun-SemiBold.ttf);
    font-display: swap
}

@font-face {
    font-family: sarabun-bold;
    src: url(/fonts/Sarabun/Sarabun-Bold.ttf);
    font-display: swap
}

@font-face {
    font-family: sarabun-extrabold;
    src: url(/fonts/Sarabun/Sarabun-ExtraBold.ttf);
    font-display: swap
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Noto+Sans+Thai:wght@100..900&display=swap');

:root {
    --black-100: rgba(0, 0, 0, 1);
    --black-87: rgba(0, 0, 0, 0.87);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-38: rgba(0, 0, 0, 0.38);
    --black-12: rgba(0, 0, 0, 0.12);
    --white-100: rgba(255, 255, 255, 1);
    --white-97: rgba(255, 255, 255, 0.97);
    --white-87: rgba(255, 255, 255, 0.87);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-38: rgba(255, 255, 255, 0.38);
    --gray-100: #F8F7F7;
    --gray-200: #E9ECEF;
    --light: #F8F9FA;
    --gray-default: #f5f5f5;
    --orange-dark: #D5670B;
    --orange-default: #FF7705;
    --orange-light: #FEAC67;
    --orange-screen: #FFE3CC;
    --yellow-dark: #DF9E0C;
    --yellow-default: #FFBC24;
    --yellow-light: #FFD370;
    --yellow-screen: #FFEFCC;
    --cyan-dark: #0BB8D5;
    --cyan-default: #00D5FA;
    --cyan-light: #75EBFF;
    --cyan-screen: #CCF8FF;
    --green-dark: #0BD583;
    --green-default: #00F08E;
    --green-light: #61FFBE;
    --green-screen: #CCFFEA;
    --font-Saraban-Regular: "sarabun-regular";
    --font-Saraban-Medium: "sarabun-medium";
    --font-Saraban-SemiBold: "sarabun-semibold";
    --font-Saraban-Bold: "sarabun-bold";
    --font-Saraban-ExtraBold: "sarabun-extrabold";
    --shadow-md: 3px 2px 5px 3px rgb(0 0 0 / .2);
    --shadow-card: 0 0 20px 3px rgb(0 0 0 / .1);
    --shadow-img: 1px 1px 10px 3px rgb(0 0 0 / .4);
    --fs-48: 48px;
    --fs-38: 38px;
    --fs-28: 28px;
    --fs-24: 24px;
    --fs-20: 20px;
    --fs-18: 18px;
    --fs-16: 16px;
    --fs-14: 14px;
    /** New **/
    --color-black-100: rgba(0, 0, 0, 1);
    --color-black-87: rgba(0, 0, 0, 0.87);
    --color-black-75: rgba(0, 0, 0, 0.75);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black-38: rgba(0, 0, 0, 0.38);
    --color-black-12: rgba(0, 0, 0, 0.12);
    --color-gray-100: #F8F7F7;
    --color-gray-200: #E9ECEF;
    --color-gray-300: #656565;
    --color-light: #F8F9FA;
    --color-white-100: rgba(255, 255, 255, 1);
    --color-white-97: rgba(255, 255, 255, 0.97);
    --color-white-87: rgba(255, 255, 255, 0.87);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-38: rgba(255, 255, 255, 0.38);
    --color-orange-400: #D5670B;
    --color-orange-300: #FF7705;
    --color-orange-200: #FEAC67;
    --color-orange-100: #FFF2E8;
    --color-yellow-400: #DF9E0C;
    --color-yellow-300: #FFBC24;
    --color-yellow-200: #FFD370;
    --color-yellow-100: #FFF3DA;
    --color-green-400: #0BD583;
    --color-green-300: #00F08E;
    --color-green-200: #61FFBE;
    --color-green-100: #DFFFF2;
    --color-cyan-400: #0BB8D5;
    --color-cyan-300: #00D5FA;
    --color-cyan-200: #75EBFF;
    --color-cyan-100: #DAFAFF;
    --color-link: #007BFF;
    --color-gradient-orange: linear-gradient(135deg,#FF7705 0%, #FFD482 100%);
    --color-gradient-black: linear-gradient(270deg,#7D7D7D 0%, #000000 30%,#7D7D7D 100%);
    --fs-1: 48px;
    --fs-2: 36px;
    --fs-3: 24px;
    --fs-4: 16px;
    --fs-5: 14px;
    --fs-6: 12px;
    --border-radius-sm: .5rem;
    --border-radius-md: .75rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 10rem;
    --shadow-xs: 0 2px 5px 2px #00000010;
    --shadow-sm: 0 3px 18px 3px #00000020;
    --shadow-bg-blur: 0 4px 4px 0 #00000035;
}

@media (max-width:991px) {
    :root {
        --fs-48: 38px;
        --fs-38: 32px;
        --fs-28: 24px;
        --fs-24: 20px;
        --fs-20: 18px;
        --fs-18: 16px;
        --fs-16: 14px;
        /** New **/
        --fs-1: 36px;
        --fs-2: 28px;
        --fs-3: 20px;
        --fs-4: 14px;
        --fs-5: 12px;
        --fs-6: 10px;
    }
}

body {
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: 400;
    font-size: var(--fs-4);
    align-content: start;
    color: var(--color-black-87);
    /*    background-color: transparent !important;
    background-image: url(../../images/bg-white-100.svg)*/
    line-height: 1.5;
}

section {
    padding: 3rem 0
}

main .first-section {
    padding-top: 11rem
}

/** Text **/
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    margin-bottom: 0;
}

.h1, h1 {
    letter-spacing: normal;
    font-size: var(--fs-1);
    font-weight: 700;
    line-height: 1.5;
}

.h2, h2 {
    font-size: var(--fs-2);
    font-weight: 700;
    line-height: 1.5;
}

.h3, h3, .h4, h4 {
    font-size: var(--fs-3);
    font-weight: 500;
    line-height: 1.5;
}

.h5, h5, .h6, h6 {
    font-size: var(--fs-4);
    font-weight: 500;
    line-height: 1.5;
}

.h1 {
    font-size: var(--fs-1) !important;
}

.h2 {
    font-size: var(--fs-2) !important;
}

.h3, .h4 {
    font-size: var(--fs-3) !important;
}

.h5, .h6 {
    font-size: var(--fs-4) !important;
}

.body1 {
    font-size: var(--fs-5) !important;
    line-height: 1.5;
}

.body2 {
    font-size: var(--fs-6) !important;
    line-height: 1.5;
}

.fw-700 {
    font-weight: 700 !important
}

.fw-600 {
    font-weight: 600 !important
}

.fw-500 {
    font-weight: 500 !important
}

.fw-400 {
    font-weight: 400 !important
}

.fw-300 {
    font-weight: 300 !important
}

.fw-200 {
    font-weight: 200 !important
}

.fw-100 {
    font-weight: 100 !important
}

.text-16 {
    font-size: var(--fs-16) !important
}

.text-14 {
    font-size: var(--fs-14) !important;
    font-weight: bolder
}

.text-white {
    color: var(--white-100) !important;
    line-height: 1.7;
    text-transform: uppercase
}

.text-white-header, .text-white-title {
    color: var(--white-97);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase
}

.text-white-header {
    font-size: 3rem
}

.text-white-title {
    font-size: var(--fs-24);
}

.text-white-description2 {
    color: rgb(255 255 255 / .87);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    text-indent: 50px
}

.text-orange-header, .text-orange-header2 {
    font-weight: 700;
    text-transform: uppercase
}

.text-black {
    color: var(--black-87) !important;
    line-height: 1.7;
    text-transform: uppercase
}

.text-orange, .text-orange-header2 {
    color: var(--orange-default)
}

.text-link-bold:hover, .text-link:hover, .text-orange-dark {
    color: var(--orange-dark)
}

.text-green {
    color: var(--green-default)
}

.text-yellow {
    color: var(--yellow-default)
}

.text-cyan {
    color: var(--cyan-default)
}

.text-orange-header2 {
    font-size: 3rem;
    line-height: 1
}

.text-orange-header, .text-orange-title {
    color: var(--orange-default);
    font-size: 1.5rem
}

.text-orange-header {
    line-height: 1.5
}

.text-orange-title {
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase
}

.text-black-header, .text-black-title {
    color: var(--black-87);
    font-weight: 700;
    text-transform: uppercase
}

.text-black-header {
    font-size: 3rem;
    line-height: 1.25
}

.text-black-title {
    font-size: var(--fs-24);
    line-height: 1
}

.text-black-description, .text-description {
    font-size: 1rem;
    font-weight: 400
}

.text-black-description {
    color: var(--black-60)
}

.text20-black60-SemiBold {
    font-family: var(--font-Saraban-SemiBold);
    color: var(--black-60);
    font-size: 1.25rem
}

.text16-black87 {
    font-family: var(--font-Saraban-Regular);
    color: var(--black-87);
    font-size: 1rem
}

.text-white-description {
    color: #707b7c;
    font-size: 1rem;
    font-weight: 400
}

.text-link, .text-link-bold {
    color: var(--orange-default);
    transition: .5s;
    cursor: pointer
}

    .text-link, .text-link:hover {
        font-size: 1rem;
        font-weight: 700
    }

        .text-link:hover {
            text-decoration: underline;
            margin-left: 8px
        }

.text-link-bold {
    font-family: var(--font-Saraban-Bold);
    font-size: 1.5rem
}

    .text-link-bold:hover {
        opacity: 1 !important;
        font-size: 1.5rem;
        text-decoration: underline
    }

.text-clickable {
    color: var(--black-60);
    font-size: 1rem;
    font-weight: 400;
    transition: .3s;
    cursor: pointer
}

    .text-clickable:hover {
        color: var(--orange-default);
        font-size: 1rem;
        font-weight: 400
    }

    .text-clickable:active {
        color: var(--orange-dark);
        font-size: 1rem;
        font-weight: 700
    }

.text-small {
    font-size: .75rem
}

@media (max-width:576px) {
    :root {
        --fs-48: 34px;
        --fs-38: 25px;
        --fs-28: 20px;
        --fs-24: 18px;
        --fs-20: 16px
    }

    .text-black-description, .text-description {
        font-size: .675rem
    }

    .text-black-header, .text-orange-header {
        font-size: 1.25rem;
        text-align: -webkit-center
    }

    .text-orange-header2, .text-white-header {
        font-size: 2rem
    }
}

/** Color **/
.color-white-100 {
    color: var(--color-white-100) !important;
    fill: var(--color-white-100) !important
}

.color-gray-200 {
    color: var(--color-gray-200) !important;
    fill: var(--color-gray-200) !important
}

.color-black-100 {
    color: var(--color-black-100) !important;
    fill: var(--color-black-100) !important
}

.color-black-87 {
    color: var(--color-black-87) !important;
    fill: var(--color-black-87) !important
}

.color-black-60 {
    color: var(--color-black-60) !important;
    fill: var(--color-black-60) !important
}

.color-orange-100 {
    color: var(--color-orange-100) !important;
    fill: var(--color-orange-100) !important
}

.color-orange-200 {
    color: var(--color-orange-200) !important;
    fill: var(--color-orange-200) !important
}

.color-orange-300 {
    color: var(--color-orange-300) !important;
    fill: var(--color-orange-300) !important
}

.color-orange-400 {
    color: var(--color-orange-400) !important;
    fill: var(--color-orange-400) !important
}

/** Background **/
.bg-black-img::before, .bg-gradient, .bg-orange-img::before {
    position: absolute;
    left: 0;
    bottom: 0
}

.bg-black {
    background-color: var(--black-87) !important
}

.bg-black-gray {
    background-color: var(--white-60) !important
}

.bg-white {
    background-color: var(--white-100) !important
}

.bg-white-gray {
    background-image: url(../../images/bg-white-gray.svg) !important
}

.bg-gray-100 {
    background-color: var(--gray-100) !important
}

.bg-gray-default {
    background-color: var(--gray-default) !important
}

.bg-black-60 {
    background-color: var(--black-60) !important
}

.bg-orange {
    background-image: url(../../images/bg-orange.svg) !important
}

.bg-orange-gradient {
    background-image: linear-gradient(to bottom right,var(--orange-light),var(--orange-dark))
}

.bg-yellow {
    background-image: url(../../images/bg-yellow-default.svg) !important
}

.bg-yellow-gradient {
    background-image: linear-gradient(to bottom right,var(--yellow-light),var(--yellow-dark))
}

.bg-cyan {
    background-image: url(../../images/bg-cyan-default.svg) !important
}

.bg-cyan-gradient {
    background-image: linear-gradient(to bottom right,var(--cyan-light),var(--cyan-dark))
}

.bg-green {
    background-image: url(../../images/bg-green-default.svg) !important
}

.bg-green-gradient {
    background-image: linear-gradient(to bottom right,var(--green-light),var(--green-dark))
}

.bg-gradient {
    opacity: 1;
    border-radius: 0;
    padding: 16px;
    right: 0;
    height: 100%;
    background-image: linear-gradient(0deg,rgb(0 0 0) 0,#fff0 60%) !important;
    transition: .5s
}

.bg-blog, .bg-careers, .bg-contact, .bg-img, .bg-img-ourdesign, .bg-img-portfolio {
    position: relative
}

.bg-img {
    background: url(../../images/section-title-bg.jpg);
    background-position: center center !important;
    background-size: cover !important
}

.bg-blog {
    background: url(https://cnxdevsoft.com/media/ln0nxdco/cnxdevsoft-s1-2.jpg);
    background-position: center 60% !important;
    background-size: cover !important
}

.bg-img-ourdesign {
    background: url(https://cnxdevsoft.com/media/bkgb2meq/cnxdevsoft-p1.jpg);
    background-position: center 45% !important;
    background-size: cover !important
}

.bg-careers {
    background: url(https://cnxdevsoft.com/media/ng4ltvmu/cnxdevsoft-p3.jpg);
    background-position: center 37% !important;
    background-size: cover !important
}

.bg-contact {
    background: url(https://cnxdevsoft.com/media/b4wbomyk/cnxdevsoft-e1.jpg);
    background-position: center 42% !important;
    background-size: cover !important
}

.bg-orange-img::before {
    content: "";
    right: 0;
    top: 0;
    opacity: .85;
    background: var(--orange-default)
}

.bg-black-img::before {
    content: "";
    right: 0;
    top: 0;
    opacity: .87;
    background: #000
}

/** Shadow **/
.shadow-xs {
    box-shadow: var(--shadow-xs) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-bg-blur {
    backdrop-filter: blur(8px) !important;
    box-shadow: var(--shadow-bg-blur) !important;
}

.shadow-default {
    box-shadow: 0 0 30px rgb(214 215 216 / 70%)
}

/** Global **/
.d-grid {
    display: grid !important
}

.d-contents {
    display: contents !important
}

img {
    object-fit: contain;
    width: 100%
}

.img-cover {
    object-fit: cover;
    width: 100%
}

.section {
    width: 100vw;
    padding: 50px 0
}

.ractangle {
    width: 100%;
    height: 100px
}

.scrollable {
    overflow-y: auto;
    height: 80%
}

.min-h-200 {
    min-height: 200px
}

.grayscale {
    filter: grayscale(1)
}

    .grayscale:hover {
        filter: grayscale(0)
    }

.hide {
    opacity: 0;
    transform: translateY(64px)
}

.show {
    display: block !important;
    opacity: 1;
    transform: translateY(0)
}

.ls-1 {
    letter-spacing: 1px !important;
}

.lh-1 {
    line-height: 1.2 !important
}

.lh-2 {
    line-height: 1.5 !important
}

.w-80 {
    max-width: 80% !important;
}

.w-70 {
    max-width: 70% !important;
}

@media (min-width: 1300px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
    }
}

/** Card **/
.card-dialog {
    border-radius: 10px;
    padding: 32px 50px;
    transition: .5s;
    box-shadow: 0 0 30px rgb(214 215 216 / 50%)
}

.card-gradient {
    border-radius: 6px;
    position: relative;
    width: 375px;
    height: 450px;
    overflow: hidden
}

.card-gradient-dark {
    border-radius: 6px;
    width: 480px;
    height: 480px;
    background: #212121;
    margin-top: -260px;
    z-index: -3
}

/** Button **/
.btn {
    border-radius: var(--border-radius-sm);
    padding: .65rem 1.5rem;
    font-size: var(--fs-4);
    font-weight: 600;
    border: none;
    width: fit-content;
    height: fit-content;
    transition: .3s;
}

.btn-white {
    color: var(--color-black-87) !important;
    fill: var(--color-black-87) !important;
    background-color: var(--color-white-100);
}

/*.btn-cyan, .btn-cyan-outline, .btn-gray-outline, .btn-green, .btn-green-outline, .btn-orange, .btn-orange-outline, .btn-yellow, .btn-yellow-outline {
    display: inline-flex;
    padding: 12px 24px;
    text-transform: capitalize;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    transition: .3s;
    justify-content: center;
}*/

.btn-orange {
    color: var(--white-100);
}

    .btn-orange:hover, a.btn-orange:hover {
        color: var(--white-100) !important;
        text-decoration: none !important
    }

.btn-orange-outline {
    background-color: var(--white-100);
    color: var(--orange-default);
    border: 1px solid var(--orange-default);
    border-radius: var(--border-radius-sm)
}

    .btn-orange-outline:hover, a.btn-orange-outline:hover {
        border-color: var(--orange-dark);
        color: var(--orange-dark) !important
    }

.btn-yellow {
    background-color: var(--yellow-default);
    color: var(--white-100);
    border-radius: var(--border-radius-sm)
}

    .btn-yellow:hover {
        background-color: var(--yellow-dark);
        color: var(--white-100)
    }

.btn-yellow-outline {
    background-color: var(--white-100);
    color: var(--yellow-default);
    border: 1px solid var(--yellow-default);
    border-radius: var(--border-radius-sm)
}

    .btn-yellow-outline:hover, a.btn-yellow-outline:hover {
        border-color: var(--yellow-dark);
        color: var(--yellow-dark) !important
    }

.btn-cyan {
    background-color: var(--cyan-default);
    color: var(--white-100);
    border-radius: var(--border-radius-sm)
}

    .btn-cyan:hover {
        background-color: var(--cyan-dark);
        color: var(--white-100)
    }

.btn-cyan-outline {
    background-color: var(--white-100);
    color: var(--cyan-default);
    border: 1px solid var(--cyan-default);
    border-radius: var(--border-radius-sm)
}

    .btn-cyan-outline:hover, a.btn-cyan-outline:hover {
        border-color: var(--cyan-dark);
        color: var(--cyan-dark) !important
    }

.btn-green {
    background-color: var(--green-default);
    color: var(--white-100);
    border-radius: var(--border-radius-sm)
}

.btn-gray-outline, .btn-green-outline {
    background-color: var(--white-100)
}

.btn-green:hover {
    background-color: var(--green-dark);
    color: var(--white-100)
}

.btn-green-outline {
    color: var(--green-default);
    border: 1px solid var(--green-default);
    border-radius: var(--border-radius-sm)
}

    .btn-green-outline:hover, a.btn-green-outline:hover {
        border-color: var(--green-dark);
        color: var(--green-dark) !important
    }

.btn-gray-outline:hover {
    color: var(--black-87) !important;
    background-color: var(--white-100) !important
}

.btn-gray-outline {
    border: 1px solid var(--black-60) !important;
    color: var(--black-60) !important;
    border-radius: var(--border-radius-sm)
}

.hide, .show {
    transition: .5s
}

.btn-gray-outline:hover {
    border: 1px solid var(--black-87) !important;
    opacity: .7 !important
}

.btn-orange-gradient {
    color: var(--white-100) !important;
    fill: var(--white-100) !important;
    background: var(--color-gradient-orange) !important;
}

.btn-orange-gradient-animated {
    color: var(--white-100) !important;
    fill: var(--white-100) !important;
    cursor: pointer;
    text-align: center;
    transition: all .3s;
    background-image: linear-gradient(270deg,#FFC46C 0%, #FF7705 50%,#FFC46C 100%);
    background-size: 200% auto;
    animation: AnimatedBackground 3s linear infinite;
}

@keyframes AnimatedBackground {
    to {
        background-position: 200% center;
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.btn-orange, .icon-contact {
    background-image: url(../../images/bg-orange.svg)
}

    .btn-orange:hover, .facebook-chat-fixed .facebook-chat:hover, .icon-contact:hover, a.btn-orange:hover {
        background-image: url(../../images/bg-orange-dark.svg)
    }

/** Action Button **/
.facebook-chat-fixed .facebook-chat, .icon-contact {
    box-shadow: 0 .125rem .15rem rgb(0 0 0 / .25) !important;
    transition: .3s ease-in-out;
    text-align: center
}

/** Form Input **/
.form-control {
    font-size: 1rem !important;
    font-weight: 400 !important;
    background-color: var(--black-60) !important;
    border: none !important;
    border-radius: 4px !important;
    border-bottom: 2px solid var(--orange-dark) !important;
    color: var(--white-100) !important;
    padding: 1.25rem 1rem
}

    .form-control:focus {
        /*box-shadow: 0 0 0 .25rem rgba(255, 119, 5, .25) !important;*/
        box-shadow: none !important;
    }

::placeholder {
    color: var(--white-60) !important;
    opacity: 1
}

:-ms-input-placeholder {
    color: var(--white-60) !important
}

::-ms-input-placeholder {
    color: var(--white-60) !important
}

::-webkit-scrollbar {
    width: 20px
}

::-webkit-scrollbar-track {
    background-color: #fff0
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid #fff0;
    background-clip: content-box
}

.bg-black-img .section-title p.no-air, .bg-orange-img .section-title p.no-air {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 8px 20px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    border-radius: 50px;
    display: inline-block
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf
}

.icon-contact {
    color: var(--white-100);
    font-size: 18px;
    width: 53px;
    height: 53px;
    align-content: center;
}

    .icon-contact i {
        width: 20px;
        height: 20px
    }

.facebook-chat-fixed .facebook-chat i {
    height: 40px;
    width: 40px
}

.icon-contact:first-child {
    border-start-start-radius: 10px
}

.icon-contact:last-child {
    border-end-start-radius: 10px
}

.mobile-contact-fixed {
    position: fixed;
    z-index: 999;
    bottom: 30%;
    right: 0;
    cursor: pointer
}

.facebook-chat-fixed {
    position: fixed;
    z-index: 999;
    bottom: 20px;
    right: 20px;
    cursor: pointer
}

    .facebook-chat-fixed .facebook-chat {
        color: var(--white-100);
        background-color: var(--orange-default);
        width: 65px;
        height: 65px;
        align-content: center;
        border-radius: 100%
    }

nav.navbar {
    box-shadow: 0 3px 18px 3px rgb(0 0 0 / 10%)
}

.bg-orange-img .section-title p.no-air {
    background: var(--white-100);
    color: var(--black-60)
}

.bg-black-img .section-title p.no-air {
    background: var(--orange-default);
    color: var(--white-100)
}

.card__face--back .form-control {
    font-size: 1rem !important;
    font-weight: 400 !important;
    background-color: rgb(255 255 255 / .05) !important;
    border: none !important;
    border-radius: 4px !important;
    color: var(--white-100) !important;
    padding: .375rem .75rem !important
}

.swiper {
    padding: 0 2.5rem !important
}

.swiper-pagination {
    bottom: 0 !important
}

.swiper-wrapper {
    margin-bottom: 2.5rem
}

.swiper-pagination-bullet-active {
    background: var(--orange-default) !important
}

.swiper .swiper-wrapper {
    cursor: pointer
}

.swiper-button-next, .swiper-button-prev {
    margin-top: 0 !important;
    top: 0 !important;
    color: var(--black-60) !important;
    transition: .3s ease-in-out
}

.swiper-button-next {
    right: 0 !important
}

.swiper-button-prev {
    left: 0 !important
}

    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 35px !important
    }

.fb_dialog_content iframe:first-child {
    bottom: 65px !important
}

.fb_iframe_widget span iframe {
    bottom: 125px !important
}

@media only screen and (max-device-width :767px) {
    .card-dialog {
        padding: 30px 28px
    }
}

@media only screen and (max-device-width :575px) {
    ._94vf {
        width: calc(100vw - 2rem) !important
    }

    .icon-contact {
        padding: 8px 12px 0;
        width: 45px;
        height: 45px
    }

    .section.container {
        padding: 15px
    }

    .teams-card {
        height: 400px
    }
}

/** Responsive **/
@media(width <= 1199.98px) {
    main .first-section {
        padding-top: 8rem;
    }
}

@media(width <= 991.98px) {
    main .first-section {
        padding-top: 7.5rem;
    }
}

@media(width <= 767.98px) {
    main .first-section {
        padding-top: 6.5rem;
    }
}