@charset "UTF-8";
/*  UIAM - 02031998 */
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("aos.css");
@import url("swiper-bundle.min.css");
@import url("custom.css");
@import url("rbox.css");
@import url("header.css");
@import url("footer.css");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--font-bai-jamjuree);
}

.text-danger {
    color: red;
    font-size: var(--font-12);
}

:root {
    --font-Noto: "Noto Sans", sans-serif;
    --font-bai-jamjuree: "Bai Jamjuree", sans-serif;
    --font-montserrat: "Montserrat", sans-serif;
    --color-e3: #E30016;
    --color-f6: #F6F6F6;
    --color-ec: #ECECEC;
    --color-2d: #2D2D2D;
    --color-1a: #1A1A1A;
    --color-70: #707070;
    --color-f8: #F8F6F6;
    --color-b8: #b8b8b8;
    --color-fb: #FBFBFB;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-big-black: rgb(0, 0, 0, 16%);
    --leftminus124: -1.5rem;
    --rightminus124: -1.5rem;
    --font-217: 21.7rem;
    --font-131: 13.1rem;
    --font-122: 12.2rem;
    --font-120: 12rem;
    --font-212: 21.2rem;
    --font-94: 9.4rem;
    --font-80: 8rem;
    --font-76: 7.6rem;
    --font-72: 7.2rem;
    --font-66: 6.6rem;
    --font-62: 6.2rem;
    --font-60: 6rem;
    --font-56: 5.6rem;
    --font-52: 5.2rem;
    --font-48: 4.8rem;
    --font-46: 4.6rem;
    --font-42: 4.2rem;
    --font-40: 4rem;
    --font-38: 3.8rem;
    --font-36: 3.6rem;
    --font-34: 3.4rem;
    --font-32: 3.2rem;
    --font-30: 3rem;
    --font-28: 2.8rem;
    --font-26: 2.6rem;
    --font-25: 2.5rem;
    --font-24: 2.4rem;
    --font-20: 2.0rem;
    --font-22: 2.2rem;
    --font-21: 2.1rem;
    --font-18: 1.8rem;
    --font-16: 1.6rem;
    --font-16: 1.6rem;
    --font-15: 1.5rem;
    --font-14: 1.4rem;
    --font-13: 1.3rem;
    --font-12: 1.2rem;
    --font-11: 1.1rem;
    --font-10: 1rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-bold: bold;
    --line-height-68: 1;
    --line-height-66: 1;
    --line-height-60: 1.27;
    --line-height-48: 1.3334;
    --line-height-46: 1.3;
    --line-height-44: 1.1;
    --line-height-40: 1.335;
    --line-height-36: 1.2;
    --line-height-35: 3.5rem;
    --line-height-30: 1.5;
    --line-height-26: 1.25;
    --line-height-24: 1.5;
    --line-height-23: 2.3rem;
    --line-height-21: 2.1rem;
    --line-height-18: 1.8rem;
    --line-height-17: 1.7rem;
    --line-height-16: 1.1;
    --line-height-1: 1;
}

.container {
    max-width: 1493px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.container-fluid {
    max-width: 100%;
    padding-inline: 5.4rem;
}

@media(max-width:1799px) {
    :root {
        --font-131: 11.1rem;
        --font-217: 18.7rem;
        --font-120: 10rem;
        --font-122: 10.2rem;
        --font-94: 8.4rem;
        --font-80: 7rem;
        --font-76: 6.9rem;
        --font-72: 6.2rem;
        --font-66: 5.6rem;
        --font-62: 5.2rem;
        --font-60: 4.8rem;
        --font-52: 4.2rem;
        --font-48: 4rem;
        --font-42: 3.6rem;
        --font-40: 3.4rem;
        --font-38: 3.0rem;
        --font-36: 3.2rem;
        --font-34: 3rem;
        --font-32: 2.5rem;
        --font-30: 2.4rem;
        --font-26: 2.1rem;
        --font-25: 2.1rem;
        --font-24: 2rem;
        --font-20: 1.9rem;
        --font-22: 2rem;
        --font-21: 1.8rem;
        --font-18: 1.6rem;
        --font-16: 1.4rem;
        --font-15: 1.4rem;
        --font-14: 1.3rem;
        --font-13: 1.2rem;
        --font-12: 1.1rem;
        --font-11: 1rem;
        --font-10: 1rem;
        /* --line-height-36: 3rem; */
        --line-height-35: 2.8rem;
        --line-height-23: 2.1rem;
        --line-height-21: 1.9rem;
        --line-height-18: 1.9rem;
        --line-height-17: 1.8rem;
    }

    .container {
        max-width: 1272px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .container-fluid {
        max-width: 100%;
        padding-inline: 2.5rem;
    }
}

@media(max-width:1550px) {
    :root {
        --font-131: 9.5rem;
        --font-217: 15.7rem;
        --font-122: 8.7rem;
        --font-120: 8.5rem;
        --font-94: 7.4rem;
        --font-80: 7rem;
        --font-76: 6.9rem;
        --font-72: 6.2rem;
        --font-66: 5.6rem;
        --font-62: 5.2rem;
        --font-60: 4.8rem;
        --font-52: 4.2rem;
        --font-48: 3.8rem;
        --font-46: 3.6rem;
        --font-42: 3.2rem;
        --font-40: 3.1rem;
        --font-38: 3rem;
        --font-36: 3rem;
        --font-34: 2.6rem;
        --font-32: 2.5rem;
        --font-30: 2.4rem;
        --font-28: 2.2rem;
        --font-26: 2.1rem;
        --font-25: 2rem;
        --font-24: 2rem;
        --font-22: 1.7rem;
        --font-20: 1.6rem;
        --font-21: 1.6rem;
        --font-18: 1.5rem;
        --font-17: 1.4rem;
        --font-16: 1.4rem;
        --font-15: 1.3rem;
        --font-14: 1.2rem;
        --font-13: 1.1rem;
        --font-12: 1rem;
        --font-11: 0.9rem;
        --font-10: 0.9rem;
        /* --line-height-36: 2.4rem; */
        --line-height-35: 2.3rem;
        --line-height-26: 2.1rem;
        --line-height-23: 2.1rem;
        --line-height-21: 2.1rem;
        --line-height-18: 1.8rem;
        --line-height-17: 1.7rem;
    }

    .container {
        max-width: 1155px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .container-fluid {
        max-width: 100%;
        padding-inline: 2.5rem;
    }
}

@media(max-width:1199px) {
    :root {
        --font-131: 9rem;
        --font-122: 8.2rem;
        --font-120: 8rem;
        --font-94: 7rem;
        --font-80: 7.6rem;
        --font-76: 6.5rem;
        --font-72: 5.8rem;
        --font-66: 4.6rem;
        --font-62: 4.8rem;
        --font-60: 4.4rem;
        --font-52: 4rem;
        --font-48: 3.4rem;
        --font-46: 3.2rem;
        --font-42: 3rem;
        --font-40: 2.8rem;
        --font-38: 2.8rem;
        --font-36: 2.8rem;
        --font-34: 2.4rem;
        --font-32: 2.2rem;
        --font-30: 2.1rem;
        --font-28: 1.9rem;
        --font-26: 1.7rem;
        --font-25: 1.8rem;
        --font-24: 1.8rem;
        --font-22: 1.6rem;
        --font-21: 1.5rem;
        --font-20: 1.5rem;
        --font-18: 1.4rem;
        --font-17: 1.4rem;
        --font-16: 1.3rem;
        --font-15: 1.3rem;
        --font-14: 1.2rem;
        --font-13: 1.1rem;
        --font-12: 1rem;
        --font-11: 0.9rem;
        --font-10: 0.9rem;
    }

    .container {
        max-width: 1000px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media(max-width:992px) {
    :root {
        --font-131: 9.1rem;
        --font-128: 8.9rem;
        --font-122: 7.8rem;
        --font-120: 8rem;
        --font-94: 7.4rem;
        --font-76: 5.4rem;
        --font-72: 5.2rem;
        --font-66: 4.6rem;
        --font-62: 4.2rem;
        --font-60: 3.8rem;
        --font-56: 4.6rem;
        --font-52: 4.2rem;
        --font-48: 2.4rem;
        --font-46: 3.6rem;
        --font-42: 3rem;
        --font-38: 2.8rem;
        --font-32: 2.5rem;
        --font-36: 2.4rem;
        --font-34: 2.4rem;
        --font-30: 2.2rem;
        --font-28: 2.1rem;
        --font-26: 2rem;
        --font-25: 2rem;
        --font-24: 1.8rem;
        --font-22: 1.8rem;
        --font-20: 1.7rem;
        --font-21: 1.8rem;
        --font-18: 1.3rem;
        --font-17: 1.4rem;
        --font-16: 1.3rem;
        --font-15: 1.3rem;
        --font-14: 1.2rem;
        --font-13: 1.2rem;
        --font-12: 1rem;
        --font-11: 0.9rem;
        --font-10: 0.9rem;
        --line-height-35: 3.5rem;
        --line-height-24: 1.8rem;
        --line-height-23: 2.1rem;
        --line-height-21: 2.1rem;
        --line-height-18: 1.8rem;
        --line-height-17: 1.7rem;
    }
}


@media(max-width:991px) {
    .container {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }
    
}

@media(max-width:767px) {
    .container {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }
}

@media(max-width:573px) {
    .container {
        padding-left: 1.4rem;
         padding-right: 1.4rem;
    }
}

main {
    padding-top: 11rem;
    background-color: var(--color-white);
}

@media(max-width:1799px) {
    main {
        padding-top: 8.6rem;
    }
}

@media(max-width:1549px) {
    main {
        padding-top: 7.2rem;
    }
}

@media(max-width:767px) {
    main {
        padding-top: 6.1rem;
    }
}

@media(min-width:1024px) {
    .leftminus124 {
        margin-left: var(--leftminus124);
    }

    .rightminus124 {
        margin-right: var(--rightminus124);
    }
}

@media (min-width:1500px) {
    .leftminus124 {
        margin-left: -12.4rem;
    }

    .rightminus124 {
        margin-right: -12.4rem;
    }
}


.border-line {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.1rem;
    background-color: var(--color-70);
}

::after,
::before {
    box-sizing: border-box;
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    max-width: 100%;
    width: 100%;
}

body {
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--color-white);
    scroll-behavior: unset !important;
}

html {
    font-size: 62.5%;
}

p {
    font-size: var(--font-18);
    color: var(--color-1a);
    line-height: 1.667;
    margin-bottom: 3rem;
}

p:last-of-type {
    margin-bottom: 0;
}

@media(max-width:1549px) {
    p {
        margin-bottom: 2rem;
    }
}

p:empty {
    display: none !important;
}

a {
    text-decoration: none;
}

figure {
    margin-bottom: 0;
}

button {
    cursor: pointer;
}

.big-heading {
    font-size: var(--font-66);
    line-height: var(--line-height-66);
    color: var(--color-big-black);
    font-weight: 900;
    text-transform: uppercase;
}

h1 {
    font-size: var(--font-48);
    line-height: var(--line-height-60);
    color: var(--color-e3);
    font-weight: 700;
}

h2 {
    font-size: var(--font-36);
    line-height: var(--line-height-48);
    color: var(--color-black);
    font-weight: 400;
    margin-bottom: 3rem;
}

h3 {
    font-size: var(--font-30);
    line-height: var(--line-height-40);
    color: var(--color-82);
    font-weight: normal;
}

h4 {
    font-size: var(--font-24);
    line-height: 1.5;
    font-weight: normal;
    color: var(--color-1a);
}

h5 {
    font-size: var(--font-21);
    line-height: 1.2385;
    color: var(--color-e3);
    font-weight: 600;
}

h6 {
    font-size: var(--font-18);
    line-height: var(--line-height-30);
    color: var(--color-black);
    font-weight: 500;
    margin-bottom: 1rem;
}

@media(max-width:1549px) {
    h2 {
        margin-bottom: 2.5rem;
    }

    h6 {
        margin-bottom: 2.5rem;
    }
}

@media(max-width:1199px) {
    h2 {
        margin-bottom: 1.5rem;
    }

    h6 {
        margin-bottom: 1.8rem;
    }
}

::-webkit-scrollbar {
    width: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-e3);
    border-radius: 0.2rem;
}

::-webkit-scrollbar-track {
    background-color: var(--color-f6);
    border-radius: 0.2rem;
}

.overlap_btn {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 0;
}

.swiper-button-prev,
.swiper-button-next {
    width: 4rem;
    height: 4rem;
    background: #F6F6F6 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 12px #00000029;
    opacity: 1;
    border-radius: 100%;
    bottom: 20%;
    top: auto;
    transition: all 0.5s ease;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: var(--font-16);
    color: var(--color-e3);
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    content: "";
    display: block;
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    z-index: 2;
}

.shine:hover::before,
.shine:focus::before {
    -webkit-animation: shine 0.85s;
    animation: shine 0.85s;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

@media(max-width:991px) {

    .swiper-button-prev,
    .swiper-button-next {
        width: 3.2rem;
        height: 3.2rem;
    }
}

.full-width {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

.over_btn {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    right: 0;
    bottom: 0;
}

.theme_btn {
    display: inline-block;
    font-size: var(--font-18);
    color: var(--color-white);
    background-color: var(--color-1d);
    font-weight: normal;
    padding: 0.8rem 2rem;
    background: linear-gradient(to right, var(--color-96) 49%, var(--color-1d) 49%);
    background-size: 210% 110%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.theme_btn:hover {
    background-position: left bottom;
    color: var(--color-white);
}

.btn_more {
    position: relative;
    display: inline-block;
    font-size: var(--font-16);
    font-family: var(--font-intervogue);
    color: var(--color-1d);
    letter-spacing: 3.2px;
    text-transform: uppercase;
    background-color: transparent;
    font-weight: normal;
    padding-bottom: 1rem;
    border-bottom: 0.1rem solid var(--color-bb);
    transition: all 0.5s ease
}

.btn_more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.1rem;
    background-color: var(--color-1d);
    transition: all 0.5s ease;
}

.btn_more:hover::after {
    width: 100%;
}

.btn_more:hover {
    color: var(--color-82);
    border-color: transparent;
}

.read_btn {
    display: inline-flex;
    gap: 0.9rem;
    font-size: var(--font-18);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-e3);
    transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
}

.read_btn>img {
    width: 1.5rem;
    transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
}

.read_btn:hover {
    color: var(--color-black);
}

.read_btn:hover>img {
    transform: translateX(0.5rem);
    -webkit-transform: translateX(0.5rem);
    -moz-transform: translateX(0.5rem);
    -ms-transform: translateX(0.5rem);
    -o-transform: translateX(0.5rem);
}

@media(max-width:1699px) {
    .theme_btn {
        padding: 0.8rem 2.5rem;
    }
}

@media(max-width:991px) {
    .read_btn {
        font-size: 1.4rem;
    }
}

@media(max-width:767px) {
    .theme_btn {
        padding: 0.4rem 1.9rem;
        font-size: 1.8rem;
    }

    .btn_more {
        letter-spacing: 1.2px;
        font-size: 1.6rem;
    }

}

/* FormStyle */
select {
    width: 100%;
    padding: 0.9rem 2.3rem 0.9rem 1.7rem;
    color: var(--color-1a);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-18);
    background-color: var(--color-white);
    border: 0.1rem solid #cccccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(../images/chevron-down.svg);
    background-repeat: no-repeat;
    background-size: 1.6rem 1.6rem;
    background-position: right 1.5rem center;
    padding: 1.25rem 2rem;
    padding-right: 4rem;
}

select:focus {
    outline: none;
    box-shadow: none;
}

.form-control {
    width: 100%;
    padding: 0.9rem 2.3rem 0.9rem 1.7rem;
    color: var(--color-black);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-16);
    background-color: transparent;
    border: none;
    border-radius: 0;
    border: 0.1rem solid #D6D6D6;
    margin-bottom: 1.6rem;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--color-1d);
}

.form-control::placeholder {
    font-size: var(--font-16);
    color: rgb(0 0 0 / 40%);
}

input.form-control[required],
textarea.form-control[required] {
    background-image: linear-gradient(to right, var(--color-white) 99%, var(--color-e3) 0);
    background-repeat: no-repeat;
    background-position: right 0rem center;
    background-size: 100% 100%;
}

textarea.form-control[required] {
    background-size: 100% 100%;
    background-position: right 0rem top;
}

@media(max-width:1600px) {
    .form-control {
        width: 100%;
        padding: 0.5rem 1rem;
        padding-left: 0;
    }
}

.form-check {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-left: 0;
}

.form-check p,
.form-check-label {
    color: var(--color-1d);
    font-size: var(--font-14);
    font-style: italic;
    margin-bottom: 0;
}

.form-check input[type=checkbox] {
    width: 17px;
    height: 17px;
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.form-check input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    border-radius: 0;
    border: 1px solid var(--color-bb);
    display: grid;
    place-content: center;
}

.form-check input[type=checkbox]::before {
    content: "";
    width: 1.3rem;
    height: 1rem;
    -webkit-clip-path: polygon(15% 35%, 0% 50%, 50% 100%, 100% 0%, 85% 0%, 45% 75%);
    clip-path: polygon(15% 35%, 0% 50%, 50% 100%, 100% 0%, 85% 0%, 45% 75%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: none;
    background-color: var(--color-bb);
}

.form-check input[type=checkbox]:checked::before {
    transform: scale(1)
}

.form-check input[type=checkbox]:focus {
    outline: none;
    outline-offset: 0
}

.form-check input[type=checkbox]:disabled {
    color: var(--color-d4);
    cursor: not-allowed
}

.form-check-input:checked {
    background-color: transparent;
}

@media(max-width:1699px) {
    .form-control {
        padding: 1rem 2rem;
    }
}

@media(max-width:767px) {
    .form-control {
        padding: 1.4rem 1rem;
        font-size: 2.1rem;
        line-height: 2.6rem;
    }

    .form-control::placeholder {
        font-size: 2.1rem;
        line-height: 2.6rem;
    }

    .form-select {
        font-size: 2.1rem;
        line-height: 2.6rem;
        padding: 1.4rem 1rem;
        padding-right: 3rem;
        background-size: 1.5rem 1.5rem;
        background-position: right 1.2rem center;
    }
}

/* Accordian Css Start */
.accordion-item {
    background-color: #fff;
    margin-bottom: 2rem;
}

.accordion-item-header {
    padding: 1.6rem 2.7rem 1.6rem 2.5rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    background: #EEEDF2;
    font-size: var(--font-18);
    line-height: 26px;
    font-weight: 800;
    color: #232323;
}

.accordion-item-header::after {
    content: '\F282';
    font-family: bootstrap-icons !important;
    font-size: 10px;
    position: absolute;
    right: 2.5rem;
    border: 1px solid var(--color-24);
    color: var(--color-24);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
}

.accordion-item-header.active::after {
    content: "\F286";
    padding-top: 2px;
}

.accordion-item-body {
    display: none;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.accordion-item-body-content {
    padding: 1rem;
    line-height: 1.5rem;
    padding: 2.5rem 8.6rem 5.1rem 2.5rem;
    font-size: var(--font-16);
    line-height: 24px;
    color: #232323;
}

.accordion-item-body-content .accordion-item-body-content {
    padding: 2.5rem;
}

.accordion-item-body-content p:last-child {
    margin-bottom: 0;
}

.accordion-item-header.active {
    background: #F0F2F7;
}

/* Custom Tab */
.tabs {
    list-style: none;
    padding: 0;
    margin-bottom: 4.9rem;
    display: flex;
}

.custom_tabs>li {
    font-size: var(--font-18);
    line-height: var(--line-height-30);
    background-color: var(--color-white);
    border: 0.1rem solid var(--color-e3);
    padding: 1.2rem 7.1rem;
    color: var(--color-e3);
    font-weight: var(--font-weight-bold);
    margin-right: 1rem;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.custom_tabs>li:last-child {
    margin-right: 0;
}

.custom_tabs>li.active,
.custom_tabs>li:hover {
    color: var(--color-white);
    background-color: var(--color-e3);
}

.tab {
    margin-right: 5px;
    cursor: pointer;
}

.tab.disabled {
    background-color: #ccc;
    color: #888;
    cursor: not-allowed;
}

.fade {
    opacity: 0;
    animation: fade 1s forwards;
}

@keyframes fade {
    to {
        opacity: 1;
    }
}

.tab-content {
    position: relative;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}


/* Accordian Tab With */
.accordion-tabs {
    display: none;
}

.accordion-tabs :focus {
    outline: none;
}

.accordiontab-item {
    margin-bottom: 1rem;
}

.accordion-item__label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    font-size: var(--font-18);
    line-height: var(--line-height-26);
    background-color: var(--color-e3);
    cursor: pointer;
    padding: 1rem 1.5rem;
    color: var(--color-white);
    font-weight: var(--font-weight-normal);
    transition: all .5s ease;
    border: none;
}

.accordion-item__label:after {
    content: '\F282';
    font-family: bootstrap-icons !important;
    font-size: var(--font-15);
    font-weight: 600;
}

.accordion-item__label.active:after {
    content: '\F286';
}

.accordion-item__container {
    height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}

.accordion-item__container.active {
    padding-top: 1.5rem;
    height: auto;
    opacity: 1;
}

@media (max-width: 767px) {
    .accordiontab-item {
        animation: none;
        opacity: 1;
    }
}

@media (min-width: 767px) {
    .accordion-tabs {
        display: inline-flex;
        margin-bottom: 4.9rem;
    }

    .accordion-tabs .accordion-tab {
        font-size: var(--font-18);
        line-height: var(--line-height-30);
        background-color: var(--color-white);
        border: 0.1rem solid var(--color-e3);
        padding: 1.2rem 7.1rem;
        color: var(--color-e3);
        font-weight: var(--font-weight-bold);
        margin-right: 0rem;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    .accordion-tabs .accordion-tab:hover {
        color: var(--color-white);
        background-color: #a90010;
    }

    .accordion-tabs .accordion-tab.active {
        color: var(--color-white);
        background-color: var(--color-e3);
    }

    .accordiontab-item {
        display: none;
        border: none;
        background: transparent;
        margin-bottom: 0;
    }

    .accordiontab-item .accordion-item__label {
        display: none;
    }

    .accordion-item__label,
    .accordion-item__container {
        padding: 0;
        transition: inherit;
    }

    .accordion-item__label {
        margin-bottom: 1.5rem;
    }

    .accordiontab-item.accordion-active {
        display: block;
    }

    .accordion-item__container.active {
        padding: 0;
    }

    .accordiontab-item.accordion-active>.accordion-item__container {
        padding-top: 1.5rem;
        height: auto;
        opacity: 1;
    }
}


/* Modal Css */
.modal {
    display: none;
    position: fixed;
    z-index: 1090;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 70%);
    backdrop-filter: blur(1px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: display 0.3 sease, opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
    opacity: 1;
    visibility: visible;
    display: flex;
}

.inner_main:has(.modal.show) {
    z-index: 1090;
}

body:has(.modal.show) .innerpage_banner {
    z-index: 0;
}

body:has(.modal.show) {
    overflow: hidden;
}

.modal-content {
    background: var(--color-white);
    max-width: 70rem;
    width: 100%;
    position: relative;
    animation: ModalfadeIn 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 3rem* 2);
}

.closeModal {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    height: 3rem;
    width: 3rem;
    font-size: var(--font-21);
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-17);
    color: var(--color-white);
    opacity: 0.8;
}

.closeModal:hover {
    opacity: 1;
}

.modal-title {
    padding: 2rem;
    border-bottom: 0.1rem solid rgb(37 51 111 / 10%);
    padding-right: 6rem;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 2rem;
    overflow-y: auto;
}

@keyframes ModalfadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}



/* livewire pagination */
@media(min-width:992px) {

    /* Reveal Animations */
    .image,
    .image2 {
        opacity: 0;
    }

    .reveal-image,
    .reveal-image:after {
        position: absolute;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-duration: 1600ms;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }

    .reveal-image2,
    .reveal-image2:after {
        position: absolute;
        animation-delay: .1s;
        animation-iteration-count: 1;
        animation-duration: 1800ms;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }

    .reveal-image {
        opacity: 1;
        position: relative;
        animation-name: reveal-image;
    }

    .reveal-image2 {
        opacity: 1;
        position: relative;
        animation-name: reveal-image2;
    }

    .reveal-image3 {
        opacity: 1;
        position: relative;
        animation-name: fadeInline1;
        animation-delay: .1s;
        animation-iteration-count: 1;
        animation-duration: 1800ms;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
        transform-origin: top;
    }

    @keyframes reveal-image {
        from {
            clip-path: inset(0 100% 0 0);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    @keyframes reveal-image2 {
        from {
            clip-path: inset(0 0% 100% 0);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }
}

.image-container {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(50% / (var(--ratio)));
}

.progress-wrap {
    position: fixed;
    right: 4%;
    bottom: 2rem;
    background-color: var(--color-white);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    box-shadow: 0px 3px 4px 1px rgb(0 0 0 / 15%);
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.progress-wrap::after,
.progress-wrap::before {
    position: absolute;
    font-family: bootstrap-icons !important;
    content: "\f145";
    text-align: center;
    font-size: var(--font-24);
    left: 0;
    top: 0;
}

.progress-wrap::after {
    color: var(--color-e3);
    z-index: 1
}

.progress-wrap:hover::after {
    opacity: 0
}

.progress-wrap::before {
    opacity: 0;
    background-color: var(--color-e3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2
}

.progress-wrap:hover::before {
    opacity: 1
}

.progress-wrap svg path {
    fill: none
}

.progress-wrap svg.progress-circle path {
    stroke: var(--color-e3);
    stroke-width: 4;
    box-sizing: border-box;
    transition: .2s linear;
    -webkit-transition: .2s linear;
    -moz-transition: .2s linear;
    -ms-transition: .2s linear;
    -o-transition: .2s linear;
}

.progress-wrap:hover svg.progress-circle path {
    stroke: var(--color-e3)
}

.progress-wrap,
.progress-wrap::after,
.progress-wrap::before {
    width: 5rem;
    height: 5rem;
    line-height: 5rem
}

.progress-wrap,
.progress-wrap::after,
.progress-wrap::before {
    cursor: pointer;
    display: block;
    transition: .2s linear;
}

/* Sound button */
.cmnvdo_wrapper {
    position: relative;
}

.video-sound-btn {
    cursor: pointer;
    position: absolute;
    left: 3rem;
    bottom: 3rem;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0.7rem;
    display: inline-grid;
    background-color: rgb(20 20 20 / 66%);
    backdrop-filter: blur(8px);
    border-radius: 50%;
}

.video-sound-btn>* {
    grid-area: 1/1;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.unmute_btn {
    opacity: 0;
    visibility: hidden;
}

.video-sound-btn.sound-on>.mute_btn {
    opacity: 0;
    visibility: hidden;
}

.video-sound-btn.sound-on>.unmute_btn {
    opacity: 1;
    visibility: visible;
}



/* Search Area */
.search-section {
    padding-block: 6rem 10rem;
    min-height: 60vh;
}

.search_bx {
    position: relative;
    background-color: var(--color-white);
    padding: 2rem 5rem 2rem 1.8rem;
    margin-bottom: 2rem;
}

.search_bx:last-child {
    margin-bottom: 0;
}

.search_bx>h5 {
    font-size: var(--font-24);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.16;
    margin-bottom: 1.5rem;
    transition: all .5s ease-out;
}

.search_bx>.link {
    font-size: var(--font-18);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.16;
    margin-bottom: 1.5rem;
    font-family: var(--font-intervogue);
}

.search_bx>p {
    font-size: var(--font-18);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.4;
    margin-bottom: 0;
    font-family: var(--font-intervogue);
}

.search_bx:has(a:hover)>h6 {
    color: var(--color-96);
}

.search_bx:has(a:hover)::after {
    background-position: left bottom;
    color: var(--color-white);
}

.search_bx:has(a:hover)::before .search_bx::before {
    background-color: var(--color-f0);
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    height: 0.1rem;
    width: 60%;
    transition: all 0.5s ease;
}

.search_bx::after {
    content: '\F285';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    font-family: bootstrap-icons !important;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    line-height: 1;
    font-size: var(--font-11);
    border: .1rem solid #D2D2D2;
    color: var(--color-white);
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: linear-gradient(to right, var(--color-82) 49%, var(--color-96) 49%);
    background-size: 210% 110%;
    background-position: right bottom;
    transition: all .5s ease-out;
}



/* job board page css  */
.people_board2-grid {
    padding-block: 12rem 14.3rem;
    display: grid;
    grid-template-columns: repeat(1, 60.8% auto);
}

.people_board2-grid .people-life2left {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem;
}

.people_board2-grid .people-life2right {
    margin-left: 11.3rem
}

.people_board3 {
    background-color: var(--color-f6);
    padding-bottom: 12rem;
    position: relative;
}

.boardgrid3 {
    display: grid;
    grid-template-columns: repeat(1, 31.5% auto);
}

.boardgrid3 .board3_right blockquote {
    margin-bottom: 3rem;
}

.boardgrid3 .board3_right p {
    padding-bottom: 8rem;
}

.board3_left {
    padding-right: 9.4rem;
    padding-top: 29rem;
}

.board3_left ul li {
    border-block: 1px solid #E30016;
    list-style: none;
    padding-left: 0;
    padding-block: 3rem;
}

.board3_left ul li:last-child {
    border-top: 0;
}

.board3_left ul li h5 {
    font-size: var(--font-36);
}

.board3_left ul li p {
    font-size: var(--font-18);
    font-weight: 500;
}

.people_board3 .vshape {
    position: absolute;
    top: -20rem;
    left: 0px;
    width: 57rem;
}

.boardgrid3 .board3_right h5 {
    padding-bottom: 2rem;
}

.boardgrid3 .board3_right p {
    padding-right: 5rem;
    padding-bottom: 7rem;
}

@media (max-width: 1800px) {
    .boardgrid3 .board3_right blockquote {
        padding-right: 2rem;
    }

    .people_board2-grid .people-life2right {
        margin-left: 9rem;
    }
}

@media (max-width: 1600px) {
    .boardgrid3 .board3_right blockquote {
        padding-right: 6rem;
    }

    .people_board3 .vshape {
        top: -14rem;
        width: 46rem;
    }

    .people_board2-grid .people-life2right {
        margin-left: 7rem;
        margin-right: 2rem;
    }

    .board3_left {
        padding-right: 9.4rem;
        padding-top: 34rem;
    }

    .people_board3 {
        padding-bottom: 12rem;
    }

    .people_board2-grid {
        padding-block: 8.8rem 9rem;
    }
}

@media (max-width: 1400px) {
    .people_board3 .vshape {
        top: -10rem;
        width: 40rem;
    }

    .people_board2-grid .people-life2right {
        margin-left: 6rem;
        margin-right: 2rem;
    }
}

@media (max-width: 1280px) {
    .people_board3 .vshape {
        top: -6rem;
        width: 34rem;
    }
}



/* =========================== people safety */

.people-safety-sec-1.people-para.csr-1 blockquote {
    padding-right: 28rem;
}

.people-safety-sec-1.people-para.csr-1 {
    margin-bottom: 9rem;
}

.people-safety-sec2 {
    background-color: var(--color-f6);
    padding-block: 9.3rem 12rem;
    margin-top: 8rem;
    position: relative;
}

/* .people-safety-sec2::before{content:"";position:absolute;bottom:2.5rem;left:0;width:315px;height:364px;background-image:url(../images/sustainbility-bg-arw.webp);background-repeat:no-repeat;background-position:left;background-size:cover;} */
.people-safety-sec2-Cnt {
    padding-left: 8.8rem;
    padding-right: 12rem;
}


.people-safety-sec2-Cnt.top h3 {
    padding-top: 4.3rem;
}

.people-safety-sec2-Cnt h3 {
    font-size: var(--font-30);
    line-height: var(--line-height-30);
    font-family: var(--font-bai-jamjuree);
    font-weight: bold;
    color: var(--color-black);
    padding-bottom: 2rem;
}

.bottom .row {
    margin-top: 3rem;
}

.bottom .people-safety-sec2-Cnt {
    padding-top: 10rem;
}

.people-safety-sec3 {
    padding-block: 12rem 13.3rem
}

.people-safety-sec3 .row {
    --bs-gutter-x: 3.3rem;
}

.people-safety-sec3-Cnt {
    padding-right: 7.2rem;
}
.fire_safety_dojo .people-safety-sec2-Cnt{
    padding-left: 0;    padding-top: 0rem;
}
.people-safety-sec3-Cnt h3 {
    font-size: var(--font-24);
    line-height: var(--line-height-30);
    font-family: var(--font-bai-jamjuree);
    font-weight: bold;
    color: var(--color-black);
    padding-block: 3rem 2rem;
}
.people-safety-sec3+ .people-safety-sec2{margin-top: 0;}
.people-safety-sec3-Cnt p {
    font-size: var(--font-18);
    line-height: var(--line-height-24);
    font-family: var(--font-bai-jamjuree);
    letter-spacing: 0px;
    color: var(--color-black);
}

@media(max-width:1799px) {
    .people-safety-sec2-Cnt {
        padding-left: 8.8rem;
        padding-right: 8rem;
    }

    .people-safety-sec3-Cnt {
        padding-right: 4.2rem;
    }
}

@media (max-width: 1549px) {
    .people-safety-sec2-Cnt.top h3 {
        padding-top: 2.3rem;
        padding-bottom: 1.5rem;
    }

    .people-safety-sec2-Cnt {
        padding-left: 4.8rem;
        padding-right: 5.6rem;
    }

    .bottom .people-safety-sec2-Cnt {
        padding-top: 5rem;
    }

    .people-safety-sec3-Cnt {
        padding-right: 2.2rem;
    }
}


/* Counter CSS */
.life-culture {
    padding: 12rem 0 13rem;
}

.life-culture .counter-parent {
    display: block;
}

.life-culture .counter-parent .counter {
    text-align: left;
}

.life-culture .culture_contant .counter-parent .counter p {
    font-size: var(--font-36);
    font-weight: 600;
}

.life-culture .culture_contant .counter-parent .counter span {
    font-weight: 500;
}

.life-culture .culture_contant .counter-parent .counter {
    border-left: 1px solid #e3001661;
}

.counter-parent {
    margin-top: 4.4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    gap: 8rem;
}

.counter-parent .counter-number {
    width: auto;
    font-size: var(--font-48);
    line-height: 0.8;
    font-weight: 800;
    color: var(--color-e3);
    opacity: 1;
}

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

.counter-parent .counter:first-child {
    margin-left: 0;
}

.counter-parent .counter span {
    font-size: var(--font-18);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-24);
    text-align: center;
    display: block;
    margin-top: 0.5rem;
    color: var(--color-black);
    opacity: 1;
}

.counter-parent .sec-title h2 {
    font-size: var(--font-48);
    line-height: var(--line-height-60);
    margin-bottom: 3rem;
}

@media(max-width:1799px) {
    .counter-parent {
        margin-top: 3.4rem;
        gap: 6rem;
    }
}

@media (max-width: 1549px) {
    .counter-parent {
        margin-top: 2.4rem;
        gap: 5rem;
    }
}

@media (max-width:1199px) {
    .counter-parent {
        margin-top: 2rem;
        gap: 3rem;
    }
}

@media screen and (max-width:991px) {
    .people_board2-grid {
        padding-block: 4rem;
    }

    .people_board2-grid {
        display: block;
    }

    .people_board2-grid .people-life2right {
        margin-left: 0;
        margin-right: 0;
    }

    .boardgrid3 {
        display: block;
    }

    .board3_left {
        padding-right: 0;
        padding-top: 0;
    }

    .boardgrid3 .board3_right blockquote {
        padding-right: 0;
    }

    .boardgrid3 .board3_right p {
        padding-right: 0;
        padding-bottom: 4rem;
    }

    .people_board3 {
        padding-bottom: 5rem;
    }

    .life-culture {
        padding: 4rem 0;
    }

    .people-safety-sec2 {
        padding-block: 4rem;
        margin-top: 4rem;
    }

    .people-safety-sec2-Cnt {
        padding-left: 0;
        padding-right: 0;
    }

    .bottom .people-safety-sec2-Cnt {
        padding: 0 0 2rem 0;
    }

    .people-safety-sec3 {
        padding-block: 4rem;
        overflow: hidden;
    }

    .people-safety-sec3-Cnt {
        padding: 1.5rem 0;
    }

    .people-safety-sec3-Cnt h3 {
        padding-block: 0rem 2rem;
    }
    .people-safety-sec2-Cnt.top h3 {
        padding-top: 0;
        padding-bottom: 1.5rem;
    }

}