@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');

.ff-lora {
    font-family: 'Lora',
        serif;
}



.hero-section-bg-img-1 {
    background-image: url("../img/png/hero-section-background-image-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

/* .text-justify {
    text-align: justify;
} */

.hero-section-bg-img-1 nav {
    border-radius: 10px;
}

.mx-586 {
    max-width: 586px;
}

.leading-180 {
    line-height: 180%;
}

.bottom-line {
    border-bottom: 4px solid red;
    margin-bottom: -2px;
}

.red-box {
    height: 80px;
    width: 80px;
    background-color: var(--color-red);
    scroll-behavior: smooth;
}

.red-box-2 {
    height: 128px;
    width: 128px;
    background: var(--color-red);
}



.side-red-line {
    position: relative;
}

.side-red-line::after {
    position: absolute;
    top: 50%;
    right: -50px;
    height: 1px;
    width: 38px;
    background-color: var(--color-red);
    content: "";
}

.outside-lines::after {
    position: absolute;
    position: absolute;
    top: 50%;
    right: -50px;
    height: 1px;
    width: 38px;
    background-color: var(--color-red);
    content: "";
}

.outside-lines::before {
    position: absolute;
    position: absolute;
    top: 50%;
    left: -50px;
    height: 1px;
    width: 38px;
    background-color: var(--color-red);
    content: "";
}

.main-section-bg-img {
    background-image: url("../img/png/main-section-background-image-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.newHomePageSectionImage-2 {
    position: relative;
    object-fit: cover;
    display: block;
    height: auto;
}

/* .post {
    position: absolute;
    bottom: 21px !important;
    left: 12.5px !important;
    right: 12.5px;
    display: inline-block;
    max-width: 604px;
    margin: 0 auto;
} */

.date-post {
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    transition: all 200ms ease-in-out;
    cursor: pointer;
}

.posts p,
.date-post p {
    margin: 0 !important;
}

.date-post:hover {
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.07);
    outline: none !important;
    /* border: none !important; */
    border: 1px solid white !important;
}

.date-post .red-box-2 {
    background-color: rgba(194, 25, 14, .1);
}

.date-post .red-box-2 h1.fs-48 {
    color: var(--color-red) !important;
}

.date-post .red-box-2 {
    background-color: rgba(194, 25, 14, .1);
}

.imageGallery {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 20px;
}

.galleryImages img {
    object-fit: cover;
    height: 100%;
    transition: all 150ms linear;
}

.galleryImages {
    transition: all 150ms linear;
    overflow: hidden;
}

.galleryImages:hover img {
    transform: scale(1.02) !important;
    background: rgba(194, 25, 14, .1);
}

.galleryImages:hover .zoom-icon svg {
    opacity: 1;
}

.galleryImages:hover .zoom-icon {
    background: rgba(255, 0, 0, 0.212);
    background-blend-mode: multiply;
}

.zoom-icon {
    display: flex !important;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.zoom-icon svg {
    opacity: 0;
    display: inline-block;
}

.galleryImage-1 {
    grid-column: 1/3;
    grid-row: 1/2;
}

.galleryImage-2 {
    grid-column: 3/4;
    grid-row: 1/3;
}

.galleryImage-3 {
    grid-column: 1/2;
    grid-row: 2/3;
}

.galleryImage-4 {
    grid-column: 2/3;
    grid-row: 2/3;
}

@media (min-width:1200px) {
    .newHomePageSectionImage-2 {
        height: 662px !important;
    }

    .h-662 {
        height: 662px;
    }
}

@media (min-width:992px) {
    .red-box {
        height: 120px;
        width: 120px;
    }

    h1.leading-180 {
        line-height: 133%;
    }
}

@media (max-width:992px) {
    .galleryImage-1 {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    .galleryImage-2 {
        grid-column: 1/3 !important;
        grid-row: 3/4 !important;
    }

    .galleryImage-3 {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .galleryImage-4 {
        grid-column: 2/3;
        grid-row: 2/3;
    }
}

/* --------------------------------NEW-HOME-PAGE-2-CSS-STARTS-FORM-HERE-------------------------------- */
.blackquoteimage {
    opacity: 0.2;
}

.documentation-section::before {
    content: "";
    height: 773px;
    width: 100%;
    position: absolute;
    background-color: #F0F0F0;
    z-index: -1;
    top: 0;
    left: 0;
}

.blackquote {
    height: 131px 100% !important;
    width: 176px 100% !important;
    display: inline-block;
}

.daily-activities-img {
    border-radius: 8px;
}

.h-cacl-100vh {
    min-height: calc(100vh - 102px);
    background: black;
}

.mw-858 {
    max-width: 858px;
}

.mw-603 {
    max-width: 603px;
}

.bown-arrow-2 {
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 21px 32px;
}

.w-250 {
    max-width: 250px;
}

@media (max-width:768px) {
    .newHomePageSectionImage-2 {
        height: 500px !important;
    }
}

.special-font-en {
    font-family: SourceSansPro;
}

.spceial-font-kh {
    font-family: KherOSmuol;
}

.font_DH_metal {
    font-family: DH_Metal_chhor;
}

/* new font used in home page */

@font-face {
    font-family: SourceSansPro;
    src: url(./SourceSansPro-Regular.ttf);
}

@font-face {
    font-family: KherOSmuol;
    src: url(./KhmerOSmuol.ttf);
}



@font-face {
    font-family: DH_Metal_chhor;
    src: url(./DH-Metal-Chhor.ttf);
}

@font-face {
    font-family: KhmerOSsiemreap;
    src: url(./KhmerOSsiemreap.ttf);
}

.khmer-os-siemreap-font-kh {
    font-family: KhmerOSsiemreap;
}