@import url("header.css");
@import url("footer.css");

:root {
    --textColor: #fff;
    --headingColor: #fff;
    --poppinsRegular: "Poppins Regular", sans-serif;
    --poppinsMedium: "Poppins Medium", sans-serif;
    --poppinsBold: "Poppins Bold", sans-serif;
    --poppinsExtraBold: "Poppins ExtraBold", sans-serif;
    --poppinsLight: "Poppins Light", sans-serif;
    --poppinsSemiBold: "Poppins SemiBold", sans-serif;
    --poppinsextraLight: "Poppins extraLight", sans-serif;
    --playfair: "Playfair Display", serif;
    --playfairItalic: "Playfair Display Italic", serif;
}

html,
body {
    overflow-x: hidden;
}

/* font */
@font-face {
    font-family: "Poppins Regular";
    src: url(../../assets/fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: "Poppins Medium";
    src: url(../../assets/fonts/Poppins-Medium.ttf);
}
@font-face {
    font-family: "Poppins Bold";
    src: url(../../assets/fonts/Poppins-Bold.ttf);
}
@font-face {
    font-family: "Poppins ExtraBold";
    src: url(../../assets/fonts/Poppins-ExtraBold.ttf);
}
@font-face {
    font-family: "Poppins Light";
    src: url(../../assets/fonts/Poppins-Light.ttf);
}
@font-face {
    font-family: "Poppins SemiBold";
    src: url(../../assets/fonts/Poppins-SemiBold.ttf);
}
@font-face {
    font-family: "Poppins extraLight";
    src: url(../../assets/fonts/Poppins-ExtraLight.ttf);
}
@font-face {
    font-family: "Playfair Display";
    src: url(../../assets/fonts/PlayfairDisplay-VariableFont_wght.ttf);
}
@font-face {
    font-family: "Playfair Display Italic";
    src: url(../../assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf);
}

section {
    padding: 100px 0;
}

section > * {
    color: var(--textColor);
}

footer > * {
    color: var(--textColor);
}

section > .container-fluid {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}

main {
    background-image: url("../../assets/img/global/secondbg.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
}

/* heading with clamp */
h1 {
    font-family: var(--playfair);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px;
}

h1.italic {
    font-family: var(--playfairItalic);
    font-size: 60px;
    font-style: italic;
    font-weight: 400;
    line-height: 60px;
}

h2 {
    font-family: var(--playfair);
    font-size: 55px;
    font-style: normal;
    font-weight: 400;
    line-height: 55px;
}

h3 {
    font-family: var(--playfair);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
}

h4 {
    font-family: var(--playfair);
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

h5 {
    font-family: var(--playfair);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
}

p {
    font-family: var(--poppinsLight);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

a {
    transition: 0.5s ease all;
    -webkit-transition: 0.5s ease all;
    -moz-transition: 0.5s ease all;
    -ms-transition: 0.5s ease all;
    -o-transition: 0.5s ease all;
    gap: 0 15px;
    text-decoration: none;

    font-family: var(--poppinsRegular);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    color: var(--textColor);
}

a path {
    transition: 0.5s ease all;
}

button {
    transition: 0.5s ease all;
    -webkit-transition: 0.5s ease all;
    -moz-transition: 0.5s ease all;
    -ms-transition: 0.5s ease all;
    -o-transition: 0.5s ease all;
}

p:last-child {
    margin-bottom: 0;
}

span {
    font-family: var(--poppinsRegular);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--textColor);
}

/* clamp contents */
.post_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

.post_text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

/* margins */
.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-50 {
    margin-bottom: 50px;
}
/* gaps */
.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-50 {
    gap: 50px;
}

/* glass bg and hover */
/* background glass styles */
.banner-bg {
    border-radius: 30px;
    background: linear-gradient(
        135deg,
        rgba(184, 198, 149, 0.3) 0%,
        rgba(184, 198, 149, 0.6) 50%,
        rgba(184, 198, 149, 0.3) 100%
    );
    box-shadow:
        7px 12px 9px -14px #b8c695 inset,
        2px -1px 1px -2px rgba(184, 198, 149, 0.5) inset,
        -2px 1px 1px -2px rgba(184, 198, 149, 0.5) inset,
        -7px -12px 9px -14px #b8c695 inset;
    backdrop-filter: blur(5px);
}

/* White Glass Background */
.white-glass-bg {
    border-radius: 100px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 54.52%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 50.1%,
            rgba(255, 255, 255, 0.08) 100%
        );
    background-blend-mode: lighten, soft-light;
    box-shadow:
        8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}

.white-glass-bg-hover:hover {
    border-radius: 100px;
    background: rgba(174, 183, 61, 0.6);
    box-shadow:
        7px 12px 5px -9px #ffff8c inset,
        2px -1px 5px -2px rgba(255, 255, 140, 0.8) inset,
        -2px 1px 5px -2px rgba(255, 255, 140, 0.8) inset,
        -7px -12px 5px -9px rgba(255, 255, 140, 0.9) inset;
    backdrop-filter: blur(20px);

    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}
/* End White Glass Background */

/* Green Glass Background */
.green-glass-bg {
    border-radius: 100px;
    background: rgba(174, 183, 61, 0.6);
    box-shadow:
        7px 12px 5px -9px #ffff8c inset,
        2px -1px 5px -2px rgba(255, 255, 140, 0.8) inset,
        -2px 1px 5px -2px rgba(255, 255, 140, 0.8) inset,
        -7px -12px 5px -9px rgba(255, 255, 140, 0.9) inset;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}

.green-glass-bg-hover:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 54.52%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 50.1%,
            rgba(255, 255, 255, 0.08) 100%
        );
    background-blend-mode: lighten, soft-light;
    box-shadow:
        8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}
/* End Green Glass Background */

/* No Glass Background */
.no-glass-bg {
    border-radius: 100px;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

.no-glass-bg-hover:hover {
    border-radius: 100px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 54.52%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 50.1%,
            rgba(255, 255, 255, 0.08) 100%
        );
    background-blend-mode: lighten, soft-light;
    box-shadow:
        8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}
/* End No Glass Background */

/* Dotted Background on Hover */
.dotted-bg-hover:hover {
    border-radius: 1000px;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);

    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}
/* End Dotted Background on Hover */

/* Glass Card Background */
.glass-card-bg {
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 54.52%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 50.1%,
            rgba(255, 255, 255, 0.08) 100%
        );
    background-blend-mode: lighten, soft-light;
    box-shadow:
        8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* End Glass Card Background */

/* Glass Container Background */
.glass-container-bg {
    border-radius: 30px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 54.52%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 50.1%,
            rgba(255, 255, 255, 0.08) 100%
        );
    background-blend-mode: lighten, soft-light;
    box-shadow:
        8px 12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        2px -1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -2px 1px 1px -2px rgba(179, 179, 179, 0.5) inset,
        -8px -12px 9px -10px rgba(255, 255, 255, 0.9) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* End Glass Container Background */

@media (max-width: 1199px) {
    section {
        padding: 70px 30px;
    }

    h1,
    h1.italic {
        font-size: 50px;
        line-height: 50px;
    }

    h2 {
        font-size: 45px;
        line-height: 45px;
    }
}

@media (max-width: 767px) {
    section {
        padding: 50px 20px;
    }

    h1,
    h1.italic {
        font-size: 30px;
        line-height: 30px;
    }

    h2 {
        font-size: 24px;
        line-height: 28px;
    }

    h3 {
        font-size: 18px;
        line-height: 24px;
    }

    h4 {
        font-size: 20px;
        line-height: 22px;
    }

    h5 {
        font-size: 16px;
        line-height: 19px;
    }

    p {
        font-size: 13px;
        line-height: 20px;
    }

    a {
        font-size: 12px;
        line-height: 20px;
    }
}