@font-face {
    font-family: 'DMSerifDisplay-Regular';
    src: url('../assets/fonts/DMSerifDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DMSerifDisplay-Italic';
    src: url('../assets/fonts/DMSerifDisplay-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSerif-Regular';
    src: url('../assets/fonts/NotoSerif-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSerif-Italic';
    src: url('../assets/fonts/NotoSerif-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSerif-Bold';
    src: url('../assets/fonts/NotoSerif-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-dmserif-regular {
    font-family: DMSerifDisplay-Regular;
}

.font-dmserif-italic {
    font-family: DMSerifDisplay-Italic;
}

.font-notoserif-regular {
    font-family: NotoSerif-Regular;
}

.font-notoserif-italic {
    font-family: NotoSerif-Italic;
}

.font-notoserif-bold {
    font-family: NotoSerif-Bold;
}


body.preload *:not(#loader):not(#loader *) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* text */
.text-grey {
    color: #404042;
}

.text-lightGrey {
    color: #E9E8E4;
}

.text-teal {
    color: #148592;
}

.bg-teal {
    background-color: #008693;
}

.bg-teal-1 {
    background-color: #148592;
}

.bg-pink {
    background-color: #F6F8FD;
}

.bg-halfWhite {
    background-color: #F4F4F4;
}

.bg-darkGrey {
    background-color: #2D2F37;
}

.bg-lightYellow {
    background-color: #EDECE8;
}

html, body {
  scroll-behavior: smooth;
  overscroll-behavior: smooth;
}

.lock-scroll {
  overflow: hidden !important;
  height: 100%;
  position: fixed;
  width: 100%;
}

header .active {
    position: relative;
}

header .active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 49%;
    transform: translate(0, -45%);
    width: 7px;
    height: 3px;
    background-color: #008693;
}

 .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* pointer-events: none; */
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

#carousel-section {
    position: relative;
    z-index: 0;
    height: 100vh;
    overflow: hidden;
}

.slide_head::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 14px;
    width: 36px;
    height: 12px;
    background-color: #148592;
    opacity: 0.2;
}
.slide_head1::before {
    background-color: #ffffff99;
}

.section_3 .group1:hover>div h1 {
    color: #008693;
}


@media (max-width: 767px) {
    .portrait\:h-\[70vh\] {
        height: 100vh;
        min-height: 100vh;
    }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .portrait\:h-\[70vh\] {
        height: 70vh;
        min-height: unset;
    }

    .height {
        height: 70vh;
        min-height: unset;
    }
}


@media (min-width: 1024px) and (max-height: 600px) {
    
    .height_based {
        height: auto;
    }

}