/* MN: 09/12/2025: Clean up and Beautified the code */

/*
 MN: 11/12/2025: 
 1. Corrected the Default as well as Hover Positioning of the Flex Titles.
 2. Corrected the animation effects and fluency of the Flex Slides.
 3. Fixed Jerking and Continous Opening and Closing of the Flex Sides on Hovering at any Flex Side.
 4. Improved the Flex Slide Display on Hovering.
*/

/* VS: 28 Oct2025: merged all Css files into one file *
 1. Style code from header File
 2. jquery.pagepiling.css file
 3. smart_tab_all.css file
 4. lightbox.css file
 5. inline Style code from other Files
 */

/* CSS Document */
/* 1. Style code from header File */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

html, body {
    color: #fff;
    overflow: hidden;
    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* MN: 04/12/2025: Moved in the inline style from the Header file. */
#splashscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 100000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#summonFireworks {
    /*background-image: linear-gradient(45deg, red, blue);*/
    background-image: conic-gradient(red, blue, red, blue);
    letter-spacing: 5px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 1);
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    /* MN: 04/12/2025: Increased the Font Sizer to make the button appear bigger. */
    font-size: 24px;
    color: #FFF;
    cursor: pointer;
}

.layout {
    width: 100%;
    display: flex;
    gap: 2px;
}

.grow1 {
    flex-grow: 1;
}

.flex-container {
    position: absolute;
    height: 100vh;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    margin-top: 70px; 
    background: powderblue;
}

.flex-title {
    /* MN: 04/12/2025: Set the color with RGBA code. */
    color: rgba(255, 255, 255);
    position: relative;
    padding: 5px 5px 10px 5px !important;
    height: 62px;
    font-size: 3vw;
    font-weight: 900;
    margin: auto;
    transform: rotate(-90deg);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    /* MN: 11/12/2025: 
     1. Corrected the Default as well as Hover Positioning of the Flex Titles.
     2. Corrected the animation effects and fluency of the Flex Slides.
     3. Fixed Jerking and Continous Opening and Closing of the Flex Sides on Hovering at any Flex Side.
     4. Improved the Flex Slide Display on Hovering. */
    top: 40%;                                                                   /* Updated */
    left: -15%;                                                                 /* Updated */
    width: 415px;                                                               /* Newly Added */
    text-align: right;                                                          /* Updated */
}

.flex-about {
    opacity: 0;
    color: #f1f1f1;
    position: relative;
    width: 70%;
    font-size: 1.3vw;
    font-weight: 900;
    padding: 5%;
    /* MN: 11/12/2025: Lowered down the About Box to make it appear good. */
    /* MN: 26/12/2025: Uppered the About box a little bit to distant it from the screen bottom edge. */
    top: 45%;
    border: 2px solid #f1f1f1;
    border-radius: 10px;
    line-height: 1.3;
    margin: auto;
    text-align: center;
    transform: rotate(0deg);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    /* MN: 29/09/2025: Made the background as Black but Translucent to still have image behind the block be visible but the text above it not to merge with the background color.*/
    background-color: rgba(0, 0, 0, 0.5); 
}

.flex-slide {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
        
    background: linear-gradient(rgba(240, 128, 128, 1), rgba(240, 128, 128, 0.5));
    background-size: contain;
    background-position: center center;
    background-attachment: fixed;
    /* MN: 11/12/2025: 
     1. Corrected the animation effects and fluency of the Flex Slides.
     2. Fixed Jerking and Continous Opening and Closing of the Flex Sides on Hovering at any Flex Side.
     3. Improved the Flex Side Display on Hovering. */
    max-width: 16.67%;                                                              /* Newly Added */
}

@media screen and (max-width: 768px) {
    
    .flex-container {
        flex-direction: column;
    }
    
    .flex-title {
        /* keep initial transform for small screens (no !important so animations can override) */
        transform: rotate(0deg);
    }

    .overlay-image .flex-title {
        font-size: 5vw;
        left: 0%;
        top: 18%;
        text-align: center;
    }
    
    .flex-about {
        padding: 0%;
        border: 0px solid #f1f1f1;
    }

    .overlay-image .flex-about {
        border: 2px solid #f1f1f1;
        font-size: 2.4vw;
        padding: 1% 5% 1%;
    }
    
    .flex-slide {
        overflow: auto;
        overflow-x: hidden;
    }
    
    .flex-slide p {
        font-size: 2em;
    }
    
    .flex-slide ul li {
        font-size: 2em;
    }
}

.flex-slide:hover {
    -webkit-flex-grow: 3;
    flex-grow: 3;
}

@keyframes aboutFlexSlide {
    
    0% {
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }
    
    50% {
        -webkit-flex-grow: 3;
        flex-grow: 3;
    }
    
    100% {
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }
}

@keyframes homeFlextitle {
    
    0% {
        transform: rotate(-90deg);
        top: 15%;
    }
    
    50% {
        transform: rotate(0deg);
        top: 15%;
    }
    
    100% {
        transform: rotate(-90deg);
        top: 15%;
    }
}

@keyframes flexAboutHome {
    
    0% {
        opacity: 0;
    }
    
    50% {
        opacity: 1;
    }
    
    100% {
        opacity: 0;
    }
}

@media screen and (min-width: 768px) {
    
    .first {
        animation: aboutFlexSlide 3s 1;
        animation-delay: 0s;
        transform: rotate(0deg);
        top: 10%;
    }
    
    .flex-title-first {
        transform: rotate(-90deg);
        top: 15%;
        animation: aboutFlexSlide 3s 1;
        animation-delay: 0s;
    }
}

.draw-border {
    /* MN: 04/09/2025: Replace the Box Shadow with Border for the button */
    /*box-shadow: inset 0 0 0 4px #58cdd1;*/
    color: #58afd1;
    /*-webkit-transition: color 0.25s 0.0833333333s;
    transition: color 0.25s 0.0833333333s;*/
    position: relative;
}

/*
// Button Border Animation is not required
.draw-border::before,
.draw-border::after {
    border: 0 solid transparent;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    width: 0rem;
    height: 0;
    bottom: 0;
    right: 0;
}

.draw-border::before {
    border-bottom-width: 4px;
    border-left-width: 4px;
}

.draw-border::after {
    border-top-width: 4px;
    border-right-width: 4px;
}*/

.draw-border:hover {
    color: white;
    background-color: palevioletred;
}

/*
// Button Border Animation is not required
.draw-border:hover::before,
.draw-border:hover::after {
    border-color: #F00;
    -webkit-transition: border-color 0s, width 0.25s, height 0.25s;
    transition: border-color 0s, width 0.25s, height 0.25s;
    width: 100%;
    height: 100%;
}

.draw-border:hover::before {
    -webkit-transition-delay: 0s, 0s, 0.25s;
    transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
    -webkit-transition-delay: 0s, 0.25s, 0s;
    transition-delay: 0s, 0.25s, 0s;
}*/

/* MN: 23/09/2025: Made changes to have a button with Gradient and Box Shadow.*/
.contact-btn {
    letter-spacing: 5px;
    /* MN: 26/12/2025: Brought the button more closer to the right edge. */
    margin-right: 10px;
    /* MN: 29/09/2025: Changed the effect to show buttun being clicked on hover. */
    margin-top: 10px;
    box-shadow: 0 6px 10px rgba(0,0,0,1);
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
    background-image: linear-gradient(to bottom, #D80003, #030081);
    transition: background-image 0.3s ease;
}

/* MN: 23/09/2025: Added Hover effect to make button Animated.*/
.contact-btn:hover {
    background-image: linear-gradient(to left, #030081, #D80003);
    /* MN: 29/09/2025: Changed the effect to show buttun being clicked on hover. */
    top: 5px;
    box-shadow: 0 8px 16px rgba(0,0,0,.25)
}

/*
// Not Required
.contact-btn:focus {
    outline: 2px dotted #55d7dc;
}*/

/* 2. jquery.pagepiling.css file */

/*!
 * pagepiling.js 1.5.6
 *
 * https://github.com/alvarotrigo/pagePiling.js
 * @license MIT licensed
 *
 * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
 */
html, body {
    overflow:hidden;
    margin:0;
    padding:0;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.pp-section {
    height:100%;
    position:absolute;
    width:100%;
    
    /* fixes flickering in firefox*/
    backface-visibility: hidden; 
}

.pp-easing {
    -webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
}

#pp-nav {
    position: fixed;
    /* MN: 05/09/2025: Made the Page's Section's Navigation Button appear above the Talk to TSA button. */
    z-index: 99999;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}

#pp-nav.right {
    right: 17px;
}

#pp-nav.left {
    left: 17px;
}

.pp-section.pp-table{
    display: table;
}

.pp-tableCell {
    /* display: table-cell; */
    /*vertical-align: middle;*/
    width: 100%;
    height: 100%;
}

.pp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}

.pp-slidesNav.bottom {
    bottom: 17px;
}

.pp-slidesNav.top {
    top: 17px;
}

#pp-nav ul,
.pp-slidesNav ul {
    margin: 0;
    padding: 0;
}

#pp-nav li,
.pp-slidesNav li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}

.pp-slidesNav li {
    display: inline-block;
}

#pp-nav li a,
.pp-slidesNav li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}

#pp-nav li .active span,
.pp-slidesNav .active span {
    background: #333;
}

#pp-nav span,
.pp-slidesNav span {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

.pp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    /* Added by MN */
    max-width: 300px;
    background: indianred;
    padding: 5px;
}

.pp-tooltip.right {
    right: 20px;
}

.pp-tooltip.left {
    left: 20px;
}

.pp-scrollable{
    overflow-y: scroll;
    height: 100%;
}

/* 3. smart_tab_all.css file */

/*!
* jQuery SmartTab v4.x
* The flexible tab control plugin for jQuery
* http://www.techlaboratory.net/jquery-smarttab
*
* Created by Dipu Raj (http://dipu.me)
*
* Licensed under the terms of the MIT License
* https://github.com/techlab/jquery-smarttab/blob/master/LICENSE
*/
/* Variables */
/* Root */
:root {
    --st-background: unset;
    --st-border: 1px solid #eeeeee;
    --st-anchor-default-primary-color: #60bef5;
    --st-anchor-default-secondary-color: #dbe0e5;
    --st-anchor-active-primary-color: #009EF7;
    --st-anchor-active-secondary-color: #ffffff;
    --st-anchor-disabled-primary-color: #eeeeee;
    --st-anchor-disabled-secondary-color: #dbe0e5;
    --st-loader-color: #009EF7;
    --st-loader-background-color: #f8f9fa;
    --st-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
}

/* Base Styles */
.st {
    position: relative;
}

.st *,
.st *::before,
.st *::after {
    box-sizing: border-box;
}

.st > .tab-content {
    position: relative;
    overflow: hidden;
    height: auto;
}

.st > .tab-content > .tab-pane {
    padding: 0.8rem;
}

.st > .nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

@media screen and (max-width: 640px) {
    
    .st > .nav {
        flex-direction: column !important;
        flex: 1 auto;
    }
}

.st > .nav .nav-link {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    height: 100%;
    min-height: 100%;
    text-decoration: none;
}

.st > .nav .nav-link:hover, .st > .nav .nav-link:active, .st > .nav .nav-link:focus {
    text-decoration: none;
}

.st > .nav .nav-link::-moz-focus-inner {
    border: 0;
}

.st > .nav .nav-link.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

.st > .nav .nav-link.hidden {
    display: none;
    visibility: none;
}

.st.st-vertical {
    display: flex !important;
    flex-wrap: nowrap;
}

.st.st-vertical > .nav {
    flex-direction: column !important;
    flex: 1 auto;
}

.st.st-vertical > .nav .nav-link {
    text-align: left;
}

.st.st-vertical > .nav > li, .st.st-vertical > .nav .nav-link {
    flex-grow: unset !important;
}

.st.st-vertical > .tab-content {
    flex: 1 100%;
}

.st.st-justified > .nav > li, .st.st-justified > .nav .nav-link {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
}

.st.st-loading {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.st.st-loading::after {
    content: "";
    display: block;
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--st-loader-background-wrapper-color);
    z-index: 2;
}

.st.st-loading::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 45%;
    left: 45%;
    width: 2rem;
    height: 2rem;
    border: 10px solid var(--st-loader-color);
    border-top: 10px solid var(--st-loader-background-color);
    border-radius: 50%;
    z-index: 10;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Theme Styles */
.st-theme-basic {
    border: var(--st-border);
    background: var(--st-background);
}

.st-theme-basic > .nav {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.st-theme-basic > .nav .nav-link {
    position: relative;
    height: 100%;
    min-height: 100%;
    color: var(--st-anchor-default-primary-color);
}

.st-theme-basic > .nav .nav-link::after {
    content: "";
    position: absolute;
    pointer-events: none;
    height: 2px;
    width: 0;
    left: 0px;
    bottom: -1px;
    transition: all 0.35s ease 0.15s;
    width: 100%;
}

.st-theme-basic > .nav .nav-link.active {
    color: var(--st-anchor-active-primary-color) !important;
}

.st-theme-basic > .nav .nav-link.active::after {
    background: var(--st-anchor-active-primary-color) !important;
}

.st-theme-basic > .nav .nav-link.disabled {
    color: var(--st-anchor-disabled-primary-color) !important;
}

.st-theme-basic.st-vertical > .nav {
    box-shadow: 0.125rem 0 0.25rem rgba(0, 0, 0, 0.1) !important;
}

.st-theme-basic.st-vertical > .nav .nav-link::after {
    height: 100%;
    width: 2px;
    top: 0px;
    left: unset;
    bottom: unset;
    right: -1px;
}

.st-theme-elite {
    border-left: 1px solid var(--st-anchor-active-primary-color);
    border-right: 1px solid var(--st-anchor-active-primary-color);
    border-bottom: 1px solid var(--st-anchor-active-primary-color);
    border-radius: 0.5em;
}

.st-theme-elite > .nav {
    background-color: #ffffff;
    border-bottom: 1px solid var(--st-anchor-active-primary-color);
    margin-right: -1px;
    margin-left: -1px;
}

.st-theme-elite > .nav .nav-link {
    border: 1px solid transparent;
    border-bottom-width: 0;
    color: var(--st-anchor-default-primary-color);
}

.st-theme-elite > .nav .nav-link.active {
    color: var(--st-anchor-active-primary-color) !important;
    border-color: var(--st-anchor-active-primary-color) !important;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}

.st-theme-elite > .nav .nav-link.active::after {
    content: "";
    position: absolute;
    background: #ffffff;
    height: 1px;
    width: 100%;
    left: 0px;
    bottom: -1px;
}

.st-theme-elite > .nav .nav-link.disabled {
    color: var(--st-anchor-disabled-primary-color) !important;
}

.st-theme-elite.st-vertical {
    border-left: unset;
    border-top: 1px solid var(--st-anchor-active-primary-color);
    border-right: 1px solid var(--st-anchor-active-primary-color);
    border-bottom: 1px solid var(--st-anchor-active-primary-color);
}

.st-theme-elite.st-vertical > .nav {
    border-right: 1px solid var(--st-anchor-active-primary-color);
    border-bottom: unset;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-right: 0;
    margin-left: 0;
}

.st-theme-elite.st-vertical > .nav .nav-link {
    border-bottom-width: 1px;
    border-right-width: 0;
}

.st-theme-elite.st-vertical > .nav .nav-link.active {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-top-right-radius: unset;
}

.st-theme-elite.st-vertical > .nav .nav-link.active::after {
    height: 100%;
    width: 1px;
    top: 0px;
    left: auto;
    right: -1px;
}

.st-theme-pills > .nav {
    position: relative;
    background: var(--st-anchor-default-primary-color);
    padding: 0.3em !important;
    border-radius: 2em;
}

.st-theme-pills > .nav .nav-link {
    height: 100%;
    min-height: 100%;
    color: var(--st-anchor-default-secondary-color) !important;
    border-radius: 2em;
}

.st-theme-pills > .nav .nav-link.active {
    color: var(--st-anchor-active-secondary-color) !important;
    background: var(--st-anchor-active-primary-color);
    box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.1);
}

.st-theme-pills > .nav .nav-link.disabled {
    color: var(--st-anchor-disabled-secondary-color) !important;
}

.st-theme-brick > .nav {
    border-color: var(--st-anchor-active-primary-color);
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

.st-theme-brick > .nav .nav-link {
    background: transparent;
    height: 100%;
    min-height: 100%;
    color: var(--st-anchor-default-primary-color) !important;
}

.st-theme-brick > .nav .nav-link.active {
    color: var(--st-anchor-active-secondary-color) !important;
    background: var(--st-anchor-active-primary-color) !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.st-theme-brick > .nav .nav-link.disabled {
    color: var(--st-anchor-disabled-primary-color) !important;
}

.st-theme-brick.st-vertical > .nav {
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom: unset;
}

.st-theme-brick.st-vertical > .nav .nav-link.active {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: unset;
}

.st-theme-forge > .nav {
    border-right: 1px solid var(--st-anchor-default-secondary-color);
}

.st-theme-forge > .nav .nav-link {
    position: relative;
    height: 100%;
    min-height: 100%;
    padding: 10px;
    color: var(--st-anchor-default-primary-color);
    border-style: solid;
    border-width: 3px 0 1px 1px;
    border-color: var(--st-anchor-default-secondary-color);
}

.st-theme-forge > .nav .nav-link:hover, .st-theme-forge > .nav .nav-link:focus {
    color: var(--st-anchor-active-primary-color) !important;
}

.st-theme-forge > .nav .nav-link.active {
    color: var(--st-anchor-active-primary-color) !important;
    border-top-color: var(--st-anchor-active-primary-color);
}

.st-theme-forge > .nav .nav-link.active::after {
    content: "";
    position: absolute;
    background: #ffffff;
    height: 1px;
    width: 100%;
    left: 0px;
    bottom: -1px;
}

.st-theme-forge > .nav .nav-link.disabled {
    color: var(--st-anchor-disabled-primary-color) !important;
}

.st-theme-forge.st-vertical > .nav {
    border-top: 1px solid var(--st-anchor-default-secondary-color);
    border-right: unset;
}

.st-theme-forge.st-vertical > .nav .nav-link {
    border-width: 0 1px 1px 3px;
}

.st-theme-forge.st-vertical > .nav .nav-link.active {
    border-left-color: var(--st-anchor-active-primary-color);
}

.st-theme-forge.st-vertical > .nav .nav-link.active::after {
    height: 100%;
    width: 1px;
    top: 0px;
    left: auto;
    right: -1px;
}

.st-theme-blocks > .nav .nav-link {
    position: relative;
    height: 100%;
    min-height: 100%;
    color: var(--st-anchor-default-primary-color);
    border-radius: 0.475rem;
}

.st-theme-blocks > .nav .nav-link.active {
    box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
    color: var(--st-anchor-active-secondary-color) !important;
    background-color: var(--st-anchor-active-primary-color);
}

.st-theme-blocks > .nav .nav-link.disabled {
    color: var(--st-anchor-disabled-primary-color) !important;
}

/* 4. lightbox.css file */

body.lb-disable-scrolling {
    overflow: hidden;
}

.lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    background-color: black;
    opacity: 0.8;
    display: none;
}

.lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100000;
    text-align: center;
    line-height: 0;
    font-weight: normal;
    outline: none;
}

.lightbox .lb-image {
    display: block;
    height: auto;
    max-width: inherit;
    max-height: none;
    border-radius: 3px;
    /* Image border */
    border: 4px solid white;
}

.lightbox a img {
    border: none;
}

.lb-outerContainer {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border-radius: 4px;
    /* Background color behind image.
    This is visible during transitions. */
    background-color: white;
}

.lb-outerContainer:after {
    content: "";
    display: table;
    clear: both;
}

.lb-loader {
    position: absolute;
    top: 43%;
    left: 0;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}

.lb-cancel {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: url(../img/plugins/lightbox/loading.gif) no-repeat;
}

.lb-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}

.lb-container > .nav {
    left: 0;
}

.lb-nav a {
    outline: none;
    background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
    height: 100%;
    cursor: pointer;
    display: block;
}

.lb-nav a.lb-prev {
    width: 34%;
    left: 0;
    float: left;
    background: url(../img/plugins/lightbox/prev.png) left 48% no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    -o-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
    opacity: 1;
}

.lb-nav a.lb-next {
    width: 64%;
    right: 0;
    float: right;
    background: url(../img/plugins/lightbox/next.png) right 48% no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    -o-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
    opacity: 1;
}

.lb-dataContainer {
    margin: 0 auto;
    padding-top: 5px;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
    content: "";
    display: table;
    clear: both;
}

.lb-data {
    padding: 0 4px;
    color: #ccc;
}

.lb-data .lb-details {
    width: 85%;
    float: left;
    text-align: left;
    line-height: 1.1em;
}

.lb-data .lb-caption {
    font-size: 13px;
    font-weight: bold;
    line-height: 1em;
}

.lb-data .lb-caption a {
    color: #4ae;
}

.lb-data .lb-number {
    display: block;
    clear: left;
    padding-bottom: 1em;
    font-size: 12px;
    color: #999999;
}

.lb-data .lb-close {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
    background: url(../img/plugins/lightbox/close.png) top right no-repeat;
    text-align: right;
    outline: none;
    opacity: 0.7;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
    cursor: pointer;
    opacity: 1;
}

/* 5. style code from Header file  */

.pp-easing {
    -webkit-transition: all 3000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition: all 3000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition: all 3000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition: all 3000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
}

#pp-nav.right {
    right: 10px;
}

ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}

#section-menu li {
    display:inline-block;
    /* MN: 22/12/2025: .... */
    margin: 1px 1px 1px 1px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#section-menu li.active{
    background: #666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}

#section-menu li a{
    text-decoration: none;
    color: #000;
}

#section-menu li.active a:hover{
    color: #000;
}

#section-menu li:hover{
    background: rgba(216,216,216, 0.8);
}

#section-menu li a,
#section-menu li.active a{
    /* MN: 22/12/2025: .... */
    padding: 6px 18px;
    display:block;
}

#section-menu li.active a{
    color: #fff;
}

#section-menu{
    /* MN: 22/12/2025: Made Section Menu as a Relative Object */
    /* MN: 22/12/2025: Reduced the height to tighten up the Interface for Menu. */
    height: 38px;
    /* MN: 11/12/2025: Made more Menu Items appear in one row. */
    width: 100%;
    padding: 0;
    margin:0;
    text-align: center;
    font-size: 1vw;
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

.services .services-item {
    box-shadow: 0 0 60px rgba(0, 0, 0, .2);
    width: 100%;
    height: 100%;
    border-radius: 20px 0 20px 0;
    padding: 10px 0;
    position: relative;
}

.services-content::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    border-radius: 20px 0 20px 0;
    background: rgba(3, 43, 243, 0.8);
    transition: .5s;
    bottom: auto;
}

.services-item:hover .services-content::after {
    height: 100%;
    opacity: 1;
    transition: .5s;
}

.services-item:hover .services-content-icon {
    position: relative;
    z-index: 2;
}

.services-item .services-content-icon i,
.services-item .services-content-icon p {
    transition: .5s;
}

.services-item:hover .services-content-icon i {
    color: var(--bs-secondary) !important;
}

.services-item:hover .services-content-icon p {
    color: var(--bs-white);
}

.nav-link {
    color: #FFF;
    font-weight: 900;
}

.product-link {
    color: #FFF;
    font-weight: 600;
    text-decoration: underline;
}

.product-link:hover {
    color: green;
    text-decoration: none;
}

.st > .tab-content > .tab-pane {
    margin-left: 0.5rem;
    border-radius: 2em;
    background: cadetblue;
}

/*
// May be required
.st-theme-pills > .nav {
    background: steelblue;
}*/

#section-dropdown{
    position: fixed;
    top: 15px;
    left: 30%;
    height: 40px;
    z-index: 100000;
    width: 40%;
    padding: 0;
    margin:0;
    text-align: center;
    font-size: 1.5vw;
    background: rgba(0,0,0, 0.5);
    color: #FFF;
    display: none;
}

#section-dropdown option {
    display:flex;
    justify-content: flex-start;
    color: #000;
    background: rgba(255,255,255, 0.5);
}

#section-dropdown option:hover, 
#section-dropdown option:focus{
    color: #FFF;
    background: rgba(216,216,216, 0.8);
}

@media (max-width: 960px) {
    
    #section-menu {
        display: none;
    }
    
    #section-dropdown { 
        display: inline-block;
    }
}

.product-features > .tab-content > .tab-pane {
    background: transparent;
    border-radius: 0em;
}

#header {
    position: absolute;
    background: #FFF;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

#footer {
    position: absolute;
    background: #FFF;
    bottom: 0px;
    left: 0px;
    z-index: 100000;
    gap: 0px;
    /* MN: 22/12/2025: Reduced the height to remove the blank area. */
    height: 80px;
    display: none;
    /*transition: height 0.3s ease-in-out;*/ /* Smooth transition for height changes */
}

#connect-with-us {
    position: absolute;
    background: #FFF;
    /* MN: 23/12/2025: Moved the object more towards the Bottom Right part of the page. */
    bottom: 10px;
    right: 10px;
    z-index: 99999;
    text-align: center;
}

.image-item {
    display: none; 
    position: absolute; 
    width: 400px; 
    height: 200px; 
    color: blue;
    border-radius: 5px;
}

.image-item .image-btn {
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    background: rgba(34, 36, 41, 0.5);
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 1;
    transition: .5s;
}

.image-item:hover .image-btn {
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 15px solid rgba(34, 36, 41, 0.9);
}

.image-item i {
    opacity: 0;
    transition: .3s;
    transition-delay: .3s;
}

.image-item:hover i {
    opacity: 1;
}

/* MN: 19/09/2025: Added Style Class for Product Title Drop Down.*/
/* MN: 19/09/2025: Added hover style.*/
#sel_prod_title {
    font-size: 24px;
    background: transparent;
    border: transparent;
    color: #FFF;
    outline: none;
    cursor: pointer;
}

#sel_prod_title option {
    background-color: cornflowerblue;
    outline: none;
    cursor: pointer;
}

/* MN: 29/09/2025: Added styling for the Glowing Red & Blue Light Effect below the Banner Logo. */
@keyframes progress1 {
    
    0% {
        transform: scalex(0);
        opacity: .5;
    }
    
    90% {
        transform: scalex(1);
        opacity: 1;
    }
    
    92% {
        transform: scalex(1);
        opacity: 1;
    }
    
    100% {
        transform: scalex(1);
        opacity: 0;
    }
}

.line {
    width: 114px;
    height: 2px;
    background: rgba(255,255,255,1);
    
    &:before {
        animation: progress1 4s infinite;
        transform-origin: 0 0;
        content: "";
        display: block;
        width: 114px;
        height: 100%;
        background: linear-gradient(to right, rgba(255,0,0,1) 10%, rgba(255,0,0,0.5) 40%, rgba(0,0,255,0.5) 60%, rgba(0,0,255,1));
    }
}

#main-nav,#sidebar{position:fixed;background:#fff;top:0;padding: 0;z-index: 100000;}#container,#sidebar{transition:right .3s}#main-nav,#sidebar #mobile-nav ul .nav-item:hover{z-index:100;}#sidebar #mobile-nav ul .nav-item,#sidebar #mobile-nav ul .sub-nav .sub-nav-item{float:left;list-style:none;font-size:1.25rem;overflow:hidden;cursor:pointer;border-image:linear-gradient(to right,#08ff04,#0045dc);font-weight:300}.item-slide,.nav-slide #mobile-nav .mobile-logo{opacity:1!important}#container{position:relative;right:0;display:none;width:100%}#container #content{position:relative;width:100%;background:#404040;z-index:1;float:left;overflow:hidden}#container #content .left-burger{position:relative;width:50%;float:left;background:0 0;z-index:100}#container #content .left-burger h2{position:relative;z-index:auto}#container #content .left-burger .triangle{width:0;height:0;border-top:solid #f1f1f1;border-right:solid transparent;border-left:none;border-bottom:none;position:absolute}#container #content .right-slider{position:relative;width:50%;float:left;background:0 0}#container #content .right-slider h2{position:absolute;bottom:30px;right:30px}#main-nav{width:100%;height:80px;display:inline-block;box-shadow:4px 0 10px #9f9d9ddb}#main-nav .logo{padding:20px 50px;margin:0;color:#fff;cursor:pointer;opacity:1;transition:opacity .2s;position:relative}#main-nav #bun{position:absolute;cursor:pointer;right:10px;top:14px;background:0 0;width:38px;height:38px;border-radius:5px;overflow:hidden}#main-nav #bun .mmm-burger{position:relative;width:25px;margin:18px 7px 0;height:3px;background:#2b1be0}#main-nav #bun .mmm-burger:before{content:'';position:absolute;width:100%;height:3px;background:#da0002;right:0;top:-8px}.mmm-burger { width: 28px; height: 20px; display: inline-block; position: relative; }.mmm-burger span { position: absolute; left: 0; right: 0; height: 3px; background: #020086; border-radius: 2px; transition: transform .28s ease, top .28s ease, opacity .28s ease; }.mmm-burger span:nth-child(1) { top: 0; }.mmm-burger span:nth-child(2) { top: 8px; }.mmm-burger span:nth-child(3) { top: 16px; }#bun.active .mmm-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }#bun.active .mmm-burger span:nth-child(2) { opacity: 0; }#bun.active .mmm-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }#main-nav #bun .mmm-burger:after{content:'';position:absolute;width:100%;height:3px;background:#da0002;right:0;top:8px}#main-nav #bun:before{content:'';top:-10px;left:-45px;width:30px;height:75px;position:absolute;opacity:0;background:rgba(255,255,255,.2);transform:rotate(25deg);transition:left .3s linear 50ms,opacity 20ms linear}#main-nav #bun:hover:before{opacity:1;left:100px}#sidebar{height:100%;width:300px;overflow-x:hidden;overflow-y:scroll;margin:0;position: fixed;right: -300px;top: 80px;max-width: 80%;background: #fff;z-index: 200000;padding: 0;transition: right .28s ease;box-shadow: 2px 0 12px rgba(0,0,0,0.18);}body.sidebar-open #sidebar { left: 0; }.overlay {position: fixed;inset: 0;background: rgba(0,0,0,0.45);opacity: 0;visibility: hidden;transition: opacity .28s ease, visibility .28s;z-index: 199999;}body.sidebar-open .overlay { opacity: 1; visibility: visible; }#sidebar #mobile-nav .mobile-logo{color:#fff;font-size:2rem;width:100%;text-align:center;padding:25px 0;margin:0;opacity:0;transition:opacity 1.5s}#sidebar #mobile-nav ul{margin:0;padding:0}#sidebar #mobile-nav ul .nav-item{position:relative;border-top:1px solid #000 !important;border-bottom:0 solid trandsparent;width:100%;color:#000;background:rgb(255 255 255);border-image-slice:1 !important;transform:scale(.75,.75);opacity:0;transition:transform .3s cubic-bezier(.45, 1.8, .5, .75) .5s,_ .3s cubic-bezier(.45, 1.8, .5, .75) .5s}#sidebar #mobile-nav ul .nav-item, #sidebar #mobile-nav ul .sub-nav .sub-nav-item {float: left;list-style: none;font-size: 1.25rem;overflow: hidden;cursor: pointer;border-image: linear-gradient(to right, #da0002, #020086);font-weight: 300;}#sidebar #mobile-nav ul .nav-item:hover{box-shadow: 0 4px 16px 0 #333 !important;}#sidebar #mobile-nav ul .nav-item:hover:after{color:#000}#sidebar #mobile-nav ul .nav-item h3{position:relative;font-size:1rem;font-weight:400;color:#000;padding:15px 25px;margin:0}#sidebar #mobile-nav ul .nav-item a {color:#000;text-decoration: none;}#sidebar #mobile-nav ul .nav-item:first-child{border-top:1px solid #333;margin:0}#sidebar #mobile-nav ul .nav-item:first-child:hover{box-shadow:0 4px 16px 0 #333!important}#sidebar #mobile-nav ul .nav-item:last-child{border-bottom:1px solid #333}#sidebar #mobile-nav ul .nav-item:last-child:hover{box-shadow:0 -4px 16px 0 #333!important}#sidebar #mobile-nav ul .sub-nav{width:100%;position:relative;margin:0;padding:0;overflow:hidden}#sidebar #mobile-nav ul .sub-nav .sub-nav-item{position:relative;width:100%;color:#fff;border-bottom:1px solid #333;border-image-slice:1 !important}#sidebar #mobile-nav ul .sub-nav .sub-nav-item:hover{background:rgba(0,0,0,.1)}#sidebar #mobile-nav ul .sub-nav .sub-nav-item:hover h4{color:#fff}#sidebar #mobile-nav ul .sub-nav .sub-nav-item h4{position:relative;font-size:1rem;font-weight:300;color:#000;padding:11px 20px 10px 40px;margin:0}#sidebar #mobile-nav ul .sub-nav .sub-nav-item:first-child{border-top:none}#sidebar #mobile-nav ul .sub-nav .sub-nav-item:last-child{border-bottom:none}.nav-slide{right:0!important;}.body-slide{right:0px!important}.body-slide #main-nav .logo{opacity:0!important}.item-slide{transform:scale(1,1)!important}.scroll-jam{height:100%;overflow-y:hidden}.arrowed:after{content:'+';width:25px;height:25px;position:absolute;color:#333;right:6px;font-size:26px;top:9px}.selected{box-shadow:0 0 26px 2px #08ff04,0 0 3px 2px #0045dc!important}.selected:after{content:"_";width:25px;height:25px;position:absolute;color:#000;right:4px;font-size:20px;top:4px}


@media(min-width: 992px) {
    
    /* hide mobile burger on large screens if main desktop nav is present */
    #bun { 
        display: none;
    }
    
    .overlay { 
        display: none;
    }
}

@media (max-width: 430px) {
  
    .h1, h1 {
        font-size: clamp(1.2rem, 1.375rem + 1vw, 1.4rem);
    }
}

@media(max-width: 772px) {
    
    #section-dropdown { 
        display: none;
    }      
    
    #header { 
        display: none;
    }
    
    #container { 
        display: block; 
    }
    
    .line-new {
        width: 161px;
        height: 3px;
        background: rgba(255, 255, 255, 1);
        
        &:before {
            animation: progress1 4s infinite;
            transform-origin: 0 0;
            content: "";
            display: block;
            width: 160px;
            height: 100%;
            background: linear-gradient(to right, rgba(255,0,0,1) 10%, rgba(255,0,0,0.5) 40%, rgba(0,0,255,0.5) 60%, rgba(0,0,255,1));
        }
    }
    
    #mobile-nav {
        margin-top: 72px;
    }
    
    #sidebar #mobile-nav ul .nav-item, #sidebar #mobile-nav ul .sub-nav .sub-nav-item {
        float: left;
        list-style: none;
        font-size: 1.25rem;
        overflow: hidden;
        cursor: pointer;
        border-image: linear-gradient(to right, #da0002, #020086);
        font-weight: 300;
        height: 65px;
        top: -69px;
    }
    
    .item-slide {
        transform: scale(1, 1) !important;
    }
    
    .item-slide, .nav-slide #mobile-nav .mobile-logo {
        opacity: 1 !important;
    }

    .flex-title  {
        text-align: justify;
        top: 54%;
    }

    .flex-slide .flex-title {
        /* top: 54% !important; */
        left: 8px !important;
        top: auto !important;
    }

    .ga-panel:nth-child(even) .flex-title {
        left: auto !important;
    }

    .flex-container {
        /* display: grid; */
        /* grid-template-columns: 1fr 1fr;  */
        /* grid-auto-rows: auto; */
        /* gap: 0px;  */
    }

    /* Default put items in column 1 */
    .flex-container .flex-slide {
        /* grid-column: 1;
        width: auto;       
        box-sizing: border-box; */
    }

    /* Put even children in column 2 */
    .flex-container .flex-slide:nth-child(even) {
        /* grid-column: 2; */
    }

    /* Optional: keep background images covering each tile */
    .flex-container .flex-slide {
        /* background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important; */
        /* min-height: 140px;  */
    }
    
    /* .overlay-content {
        width: 95%;
        margin: 20px auto;
    }
    
    .overlay-image {
        height: 200px;
    }
    
    .flex-slide .flex-about {
        visibility: hidden;
    } */
     
    .d-flex .btn-lg {
        padding: .375rem .75rem;
    }

    #footer {
        position: fixed;
        overflow-y: scroll;
    }
    
    .flex-about.ga-opened {
        left: auto !important;
        right: 8px !important;
        bottom: 8px !important;
    }

    .flex-about.ga-opened p {
        float: right !important;
    }

    @keyframes slideTopTo10Percent {
        0% {
            top: 54% !important;
        }
        100% {
            top: 10% !important;
        }
    }

    .flex-slide.ga-opened > .flex-title {
        display: block !important;
        opacity: 1 !important;
        top: 10% !important;
        /* -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: 0.4s ease; */
        /* animation: slideTopTo10Percent 0.6s ease-out forwards; */
    }

    .ga-panel:nth-child(even) .flex-about.ga-opened {
        left: 8px !important;
        right: auto !important;
    }

    .ga-panel:nth-child(even) .flex-about.ga-opened p {
        float: left !important;
    }
}

@media(min-width: 773px) and (max-width: 991px) {
    
    .col-xs-3 {
        width: 25% !important;
    }
    
    .display-4 {
        font-size: calc(1.475rem + 2.2vw);
    }
    
    .btn-group-lg>.btn, .btn-lg {
        padding: 0.3rem 0.5rem !important;
    }
    
    .contact-btn {
        margin-right: 15px;
        margin-top: 6px;
        padding: 15px 15px !important;
    }
    
    #section-dropdown {
        left: 33% !important;
    }
}

/* .image-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

.overlay-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    margin: 40px auto;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.overlay-image {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

.overlay-details {
    padding: 20px;
}

.close-overlay {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    z-index: 1001;
} */

/* 6. Inline Styles from Other Files */

.flex-about-info {
    margin: 0px; 
    font-size: 16px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 30px; 
    padding-right: 30px;
}

.section-span {
    width: 100%; 
    margin-top: 70px; 
    padding-left: 20px; 
    padding-right: 40px; 
    padding-top: 20px;
}

#features-images-area{
    height: 100vh; 
    width: 100%; 
    border-radius: 20px; 
    border: 2px solid; 
    margin-top: 10px; 
    background: #999;
}

.prod {
    background: cornflowerblue; 
    width: 100%; 
    border-radius: 18px; 
    cursor: pointer;
}

#prod_title {
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 111;
}

.light-Grey {
    background: #DDD;
}

.cerebral-Grey {
    background: #CCC;
}

.midtone-Grey {
    background: #BBB;
}

.Grey {
    background: #AAA;
}

/* MN: 09/12/2025: Moved in Styles from Product Pages. */

.epi-container {
    width: min(1200px, 92vw);
    margin-inline: auto;
}

.epi-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.75rem;
}

.epi-card {
    background: linear-gradient(180deg, rgba(2, 6, 23, .03), rgba(2, 6, 23, .01));
    border: 1px solid rgba(2, 6, 23, .08);
    border-radius: 20px;
    padding: 1rem;
}

.epi-card p {
    margin: 0;
}

.epi-pill {
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #009999;
    font-size: .82rem;
    border: 1px solid rgba(2, 6, 23, .08);
    width: 25%;
}

.epi-card h3 {
    margin: .2rem 0;
    font-size: 1.45rem;
}

.question-bank-table-cell {
    padding-bottom: 10px;
    float: left;
    text-align: left;
    border-bottom: 1px solid #FFF;
}

.last-cell {
    border-bottom: none;
}

/* MN: 10/12/2025: Made the Header & Sub-header Title of the page appear distinct from rest of the page. */

.section h1 {
    /* MN: 17/12/2025: Removed the explicitly specified Font Family. */
    text-transform: uppercase !important;
    font-weight: 900;
}

.section h3 {
    font-family: Arial, sans-serif;
    font-weight: bold;
}

/* MN: 10/12/2025: Added styling for Resources blocks. */

.resource-img {
    position: relative;
    padding: 15px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.resource-img::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    top: 0;
    left: 0;
    background: #26D48C;
    border-radius: 10px;
    opacity: 1;
    z-index: -1;
    transition: .5s;
}

.resource-img::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: 0;
    bottom: 0;
    background: var(--bs-primary);
    border-radius: 10px;
    opacity: 1;
    z-index: -1;
    transition: .5s;
}

.resource-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.resource-content a {
    display: inline-block;
    padding: 20px 25px;
    background: var(--bs-primary);
    border-radius: 10px;
    text-decoration: none;
    width: 220px;
}

.resource-item:hover .resource-content {
    opacity: 1;
    transition: .5s;
}

.resource-item:hover .resource-img::before,
.resource-item:hover .resource-img::after {
    opacity: 0;
}

.contact-btn-icon {
    letter-spacing: 0px;
    margin-right: 20px;
    margin-top: 10px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 1);
    padding: 0px 6px;
    border: none;
    border-radius: 5px;
    font-size: 32px;
    color: #FFF;
    cursor: pointer;
    background-image: linear-gradient(to bottom, #D80003, #030081);
    transition: background-image 0.3s ease;
    right: 165%;
}

#home-button {
    position: absolute;
    background: #FFF;
    /* MN: 22/12/2025: Lower down the Home Button to properly show the Section Menu. */
    /* MN: 23/12/2025: Moved the object more towards the Top Right part of the page. */
    top: 116px;
    right: 10px;
    z-index: 99999;
    text-align: center;
    display: none;
}

/* MN: 24/12/2025: Made the class be applicable for the first child only. */
.section > div > div:first-child {
    margin-top: 104px;
}

/* MN: 24/12/2025: Added class applicable for the non first children. */
.section > div > div:not(:first-child) {
    margin-top: -34px;
}