/* Set the Inter Font */
:root {font-family: Inter, sans-serif;}
@supports (font-variation-settings: normal) {:root {font-family: InterVariable, sans-serif;}}

:root {
    --primary-color: #153251;
    --primary-color-rgb: 21, 50, 81;
    --secondary-color: #add3d0;
    --accent-color: #add3d0; /* #B8001F; */

    --light-color: #f9f9f9;
    --dark-color: #050c14;
    
    --all-bg-color: var(--light-color);
    --all-txt-color: var(--primary-color);

    --bg-color-light: var(--light-color);
    --bg-color-dark: var(--primary-color);

    --txt-color-light: var(--light-color);
    --txt-color-dark: var(--primary-color);

    --menu-bg-color: var(--primary-color);
    --menu-bg-color-rgb: var(--primary-color-rgb);
    --menu-bg-opacity: 0.7;
    --menu-txt-color: var(--light-color);
    --menu-border-color: rgba(255, 255, 255, 0.2);

    --foot-bg-color: var(--secondary-color);
    --foot-txt-color: var(--primary-color);
}

/* BODY & CONTAINERS */

body {
    color: var(--bg-color-dark);
    background-color: var(--bg-color-light);

    font-family: Inter, Verdana, Tahoma, sans-serif;
    cursor: default;
    line-height: 1.6;
}

.container {
    max-width: 1140px !important;
}


/* MENU NAV */

.navbar {
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);
    background-color: var(--menu-bg-color);
    --bs-bg-opacity: 1;
    background-color: rgba(var(--menu-bg-color-rgb), var(--menu-bg-opacity)) !important;
}

.navbar .container {
    border-bottom-color: var(--menu-border-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.nav-link {
    color: var(--menu-txt-color) !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--accent-color) !important;
}

/* OUTSIDE INDEX - MENU NAV */
body.nip .navbar {
    -webkit-backdrop-filter: unset !important;
    backdrop-filter: unset !important;
    background-color: var(--menu-bg-color) !important;
}

/* MENU LOGO STYLES */
.logo-holder {
    text-align: center;
}

.logo-holder a {
    text-decoration: none !important;
    display: inline-block;
}

.logo-holder a h3 {
    display: inline-block;
    color: var(--menu-txt-color) !important;
    transition: color 0.3s ease;
    font-family: 'AudioWide', serif;
    font-weight: 400;
    /* font-family: 'Lora', serif;
    font-weight: 700; */
    font-size: 32px;
    padding-right: 4px;
    line-height: 1;
    margin-bottom: 0;
    vertical-align: middle;
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 2px 2px 2px rgba(255, 255, 255, 0.1);
}

.logo-holder a:hover h3 {
    color: var(--accent-color) !important;
}

.logo-holder a .pdf-logo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 309.267 309.267' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23E2574C;' d='M38.658,0h164.23l87.049,86.711v203.227c0,10.679-8.659,19.329-19.329,19.329H38.658 c-10.67,0-19.329-8.65-19.329-19.329V19.329C19.329,8.65,27.989,0,38.658,0z' /%3E%3Cpath style='fill:%23B53629;' d='M289.658,86.981h-67.372c-10.67,0-19.329-8.659-19.329-19.329V0.193L289.658,86.981z' /%3E%3Cpath style='fill:%23FFFFFF;' d='M217.434,146.544c3.238,0,4.823-2.822,4.823-5.557c0-2.832-1.653-5.567-4.823-5.567h-18.44 c-3.605,0-5.615,2.986-5.615,6.282v45.317c0,4.04,2.3,6.282,5.412,6.282c3.093,0,5.403-2.242,5.403-6.282v-12.438h11.153 c3.46,0,5.19-2.832,5.19-5.644c0-2.754-1.73-5.49-5.19-5.49h-11.153v-16.903C204.194,146.544,217.434,146.544,217.434,146.544z M155.107,135.42h-13.492c-3.663,0-6.263,2.513-6.263,6.243v45.395c0,4.629,3.74,6.079,6.417,6.079h14.159 c16.758,0,27.824-11.027,27.824-28.047C183.743,147.095,173.325,135.42,155.107,135.42z M155.755,181.946h-8.225v-35.334h7.413 c11.221,0,16.101,7.529,16.101,17.918C171.044,174.253,166.25,181.946,155.755,181.946z M106.33,135.42H92.964 c-3.779,0-5.886,2.493-5.886,6.282v45.317c0,4.04,2.416,6.282,5.663,6.282s5.663-2.242,5.663-6.282v-13.231h8.379 c10.341,0,18.875-7.326,18.875-19.107C125.659,143.152,117.425,135.42,106.33,135.42z M106.108,163.158h-7.703v-17.097h7.703 c4.755,0,7.78,3.711,7.78,8.553C113.878,159.447,110.863,163.158,106.108,163.158z' /%3E%3C/g%3E%3C/svg%3E");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    width: 46px;
    height: 46px;
    display: inline-block;
    vertical-align: middle;
}

/* FOOTER  */

footer {
    background-color: var(--foot-bg-color);
    color: var(--foot-txt-color);
    border-top: 1px solid #aeaeae;
}

footer a {
    color: var(--foot-txt-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--accent-color);
}

footer p,
footer a {
    font-size: 0.9rem;
    color: var(--foot-txt-color);
}


/* SPLASH SECTION */

.hero {
    background: var(--bg-color-dark);
    color: var(--light-color);
    padding: 180px 0;
    display: flex;
    align-items: center;
}

.text-secondary {
    color: var(--secondary-color) !important;
}



/* PAGE SEPERATOR - SVG SHAPE */

.custom-shape-container {
    overflow: hidden;
    line-height: 0;
    background-color: var(--secondary-color);
}

.custom-shape-container svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-container svg .shape-fill {
    fill: var(--bg-color-dark);
}



/* SECTION - ABOUT */

.about {
    color: var(--dark-color);
    background-color: var(--secondary-color);
}

.about .icon-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.about .icon-bg {
    background-color: #e3f2fd;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.about .icon-bg i {
    color: #2196f3;
    font-size: 2rem;
}

.about .number-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-color: #f0f8ff;
    border-radius: 50%;
    display: flex;
    justify-content: right;
    padding-right: 13px;
    align-items: center;
    font-size: 2.5rem;
    color: #c7e6ff;
    font-weight: bold;
    z-index: 1;
}

.about .card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    height: 100%;
}

.about .card:hover {
    transform: translateY(-5px);
}


/* SECTION - INFO  */

.info-section {
    background-color: var(--primary-color);
    color: var(--light-color);
}

/* 
    OTHER PAGE STYLES
*/

/* PRIVACY PAGE */
body.privacy section.main-section {
    background-color: var(--light-color);
    color: var(--dark-color);
}

/* TERMS PAGE */
body.terms section.main-section {
    background-color: var(--light-color);
    color: var(--dark-color);
}