@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Playwrite+ES+Deco:wght@100..400&display=swap');

:root {
    --primary-color: #dca900;
    --secondary-color: #dbc0c2;
    --hover-color: rgba(219, 192, 194, 0.18);
    --background-color: #0a3402;
    --transition: .3s ease-in-out;
    --neutral-color-50: #f8fafc;
    --neutral-color-100: #f8fafc;
    --neutral-color-200: #e2e8f0;
    --neutral-color-300: #cbd5e1;
    --neutral-color-400: #94a3b8;
    --neutral-color-500: #64748b;
    --neutral-color-600: #475569;
    --neutral-color-700: #334155;
    --neutral-color-800: #1e293b;
    --neutral-color-900: #0f172a;
    --primary-color-50: #f2fcff;
    --primary-color-100: #d9f6ff;
    --primary-color-200: #c0f0ff;
    --primary-color-300: #99e7ff;
    --primary-color-400: #5ad7ff;
    --primary-color-500: #1d4ed8;
    --primary-color-600: #00ade4;
    --primary-color-700: #008cb9;
    --primary-color-800: #005672;
    --primary-color-900: #003647;
    --secondary-color-50: #fffaf2;
    --secondary-color-100: #fff0d9;
    --secondary-color-200: #ffe0b3;
    --secondary-color-300: #ffc266;
    --secondary-color-400: #ffad33;
    --secondary-color-500: #ff9900;
    --secondary-color-600: #c87800;
    --secondary-color-700: #a46200;
    --secondary-color-800: #804d00;
    --secondary-color-900: #492c00;
    --success-color-50: #ecfdf5;
    --success-color-100: #d1fae5;
    --success-color-200: #a7f3d0;
    --success-color-300: #6ee7b7;
    --success-color-400: #34d399;
    --success-color-500: #10b981;
    --success-color-600: #059669;
    --success-color-700: #047857;
    --success-color-800: #065f46;
    --success-color-900: #064e3b;
    --warning-color-50: #fffbeb;
    --warning-color-100: #fef3c7;
    --warning-color-200: #fde68a;
    --warning-color-300: #fcd34d;
    --warning-color-400: #fbbf24;
    --warning-color-500: #f59e0b;
    --warning-color-600: #d97706;
    --warning-color-700: #b45309;
    --warning-color-800: #92400e;
    --warning-color-900: #78350f;
    --danger-color-50: #fef2f2;
    --danger-color-100: #fee2e2;
    --danger-color-200: #fecaca;
    --danger-color-300: #fca5a5;
    --danger-color-400: #f87171;
    --danger-color-500: #ef4444;
    --danger-color-600: #dc2626;
    --danger-color-700: #b91c1c;
    --danger-color-800: #991b1b;
    --danger-color-900: #7f1d1d;
    --box-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --box-shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
    0px 1px 2px rgba(16, 24, 40, 0.06);
    --box-shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --box-shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
    0px 4px 6px -2px rgba(16, 24, 40, 0.05);
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(20px);
    --shade-0: #ffffff;
    --shade-100: #000000;
    --primary-font-family: "Rebond Grotesque";
    --secondary-font-family: "DM Sans", sans-serif;
    --cursive-font-family: "Playwrite ES Deco", cursive;;
    --body-color: #2c2d2a;
    --savanna-bg: #e9bf8b;
    --beach-bg: #e7dfcf;
    --glacier-bg: #b6d6c8;
    --coral-bg: #e86357;
    --arrow-fill: #333231;
    --body-font: "Montserrat", sans-serif;
    --italic-font: "EB Garamond", serif;
    --desktop-breakpoint: 1280px;
    --tablet-breakpoint: 834px;
    --mobile-breakpoint: 375px;
    --gutter-x: 1rem;
    --gutter-y: 1rem;
    --primary-transition: 0.3s ease-in-out;
    --sidebar-width: 250px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

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

body {
    font-family: var(--primary-font-family);
    background: #fdf8f5;
    color: var(--body-color);
}

html {
    scroll-behavior: smooth;
}

.no_data {
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    background: #b6e3b2;
    border: 1px solid var(--background-color);
}

.ui-button {
    border-radius: 0 6px 6px 0;
}

.container {
    max-width: 85%;
    margin: 0 auto;
    border-radius: 4px;
    scroll-behavior: smooth;
    padding: 0 50px;
    position: relative;
}

.overlay {
    backface-visibility: hidden;
    background-color: rgba(0, 0, 0, .6);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity .3s ease 0s, visibility 0s ease .3s, transform .3s ease 0s;
    visibility: hidden;
    width: 100%;
    z-index: 999;
}

.overlay.visible {
    opacity: 1;
    transition: opacity .3s ease 0s, visibility 0s ease 0s, transform .3s ease 0s;
    visibility: visible;
}

.loader__section {
    position: absolute;
    background: #7b1a0970;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: 50px;
    z-index: 100;
}

.white-card {
    background: var(--primary-color);
    box-shadow: 0 2px 6px rgba(174, 174, 192, 0.1);
    border-radius: 8px;
    /*padding: 10px;*/

    h6 {
        color: #ffffff;
        font-weight: bold;
    }
}

.card {
    background: #ffffff;
    border-radius: 6px;
    padding: 24px;
    border: 1px solid var(--primary-color);
}

.glassmophic {
    /* From https://css.glass */
    background-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: .5px solid rgba(255, 255, 255, 1);
    transition: var(--primary-transition);

    &:hover {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }
}

.about__section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;

    padding: 40px 33px;

    .text {
        font-style: normal;
        font-weight: 400;
        font-size: 17px;
        line-height: 30px;
        text-align: justify;
        color: #565656;
        margin: 10px 0;
    }

    img {
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .about__section {
        display: grid;
        grid-template-columns: 1fr;
        padding: 100px 0;
    }
}