/* Fonts */
:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway", sans-serif;
    --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #F5FAFD; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #151515; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #ffc451; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #312f2f; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: rgba(255, 255, 255, 0.905); /* The default color of the main navmenu links */
    --nav-hover-color: #ffc451; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #ffc451; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f9f9f9;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #2a2727;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/* Defs - glass button effect */
@property --angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
}

@property --angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
}

:root {
    --global--size: clamp(2rem, 4vw, 5rem);
    --anim--hover-time: 400ms;
    --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}



/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
}

a {
    color: #5E95B7;
    text-decoration: none;
    transition: 0.3s;
}

    a:hover {
        color: color-mix(in srgb, var(--accent-color), transparent 25%);
        text-decoration: none;
    }




/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    --background-color: rgba(0, 0, 0, 0.8);
    --heading-color: #ffffff;
    --contrast-color: #ffffff;
    color: var(--default-color);
    background-color: #C4D4E4;
    padding: 10px 0;
    transition: all 0.5s;
    z-index: 997;
}

.logo {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

/* If you want the logo to fade in only, not fade out */
.header.scrolled .logo {
    opacity: 1;
    visibility: visible;
}

.header .logo img {

    max-height: 36px;
margin: 5px 0;
}



.header .logo span {
    color: var(--accent-color);
    font-size: 32px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
    color: var(--contrast-color);
    font-size: 14px;
    padding: 8px 30px;
    margin: 0 0 0 30px;
    border-radius: 4px;
    transition: 0.3s;
    border: 2px solid var(--accent-color);
}

    .header .btn-getstarted:hover,
    .header .btn-getstarted:focus:hover {
        color: var(--default-color);
        background: var(--accent-color);
    }

@media (max-width: 1200px) {
    .header .logo {
        order: 1;
    }

    .header .btn-getstarted {
        order: 2;
        margin: 0 15px 0 0;
        padding: 6px 15px;
    }

    .header .navmenu {
        order: 3;
    }
}

.scrolled .header {
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Index Page Header
------------------------------*/
.index-page .header {
    --background-color: rgba(0, 0, 0, 0);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
    --background-color: rgba(0, 0, 0, 0.8);
}


/*--------------------------------------------------------------
# Back-to-top feature
--------------------------------------------------------------*/

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 120px;
    z-index: 99999;
    /*background-color: #5E95B7;*/
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.scroll-up-image {
    width: 35px;
}


.scroll-top.active {
    visibility: visible;
    opacity: 1;
}

#scroll-top {
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}



/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/


.hero {
    width: 100%;
    min-height: 200vh;
    /*  position: relative;*/
    /* Background image properties */
    background-image: url('../img/reg_2026/Group 806.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Change to 'fixed' for parallax effect */
    z-index: 1;
    padding-left: 10px;
    padding-right: 10px;
}


.hero-group-text img {
    display: block;
    margin-top: 80px;
    width: 100%;
    max-width: 480px;
}

@media (max-width: 480px) {
    .hero {
        min-height: 60vh;
    }

    .hero-group-text img {
        max-width: 300px;
        padding: 40px 0 0 0;
    }

    .hero h2 {
        font-size: 32px;
    }

    .hero p {
        font-size: 18px;
    }
}


@media (max-width: 768px) {
    .hero {
        min-height: 60vh;
      
    }

    .hero-group-text img {
        max-width: 300px;
    padding: 40px  0 0 0 ;
    }

    .hero h2 {
        font-size: 32px;
    }

    .hero p {
        font-size: 18px;
    }
}

@media (min-width: 1920px) {

    .hero-group-text img {
        max-width: 600px;
        margin-top: 130px;
        margin-bottom: 60px;
    }
}


/*-------- snowfall animation ---------*/


@property --y {
    syntax: "<percentage>";
    inherits: false;
    initial-value: -1%;
}



.snowfall,
.snowfall::before,
.snowfall::after {
    position: absolute;
    inset: 0;
    content: "";
    overflow: hidden;
    pointer-events: none;
    background-image: radial-gradient( circle at 5% calc(var(--y) * 1), #fff 3px, transparent 6px ), radial-gradient( circle at 65% calc(var(--y) * 1.3), #fff 2px, transparent 4px );
}

.snowfall {
    animation: snowfall 20s linear infinite;
    background-size: 65% 100%;
}

    .snowfall::before {
        inset: -4rem 0 0;
        opacity: 0.7;
        animation: snowfall 27s linear infinite, wind 27s ease-in-out infinite;
        background-size: 45% 100%;
    }

    .snowfall::after {
        inset: -8rem 0 0;
        opacity: 0.8;
        animation: snowfall 37s linear infinite, wind 47s ease-in-out infinite;
        background-size: 32% 100%;
    }

@keyframes snowfall {
    0% {
        --y: -1%;
    }

    100% {
        --y: 101%;
    }
}

@keyframes wind {
    50% {
        translate: 200px;
    }
}





/*-------- Button Glass Effect hero-section ---------*/

/* Button Wrap container */
.button-wrap {
    position: relative;
    z-index: 2;
    border-radius: 999vw;
    background: transparent;
    pointer-events: none;
    width: fit-content;
    margin-inline: auto; /* Centers the button */
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

/* Button Shadow Container */
.button-shadow {
    --shadow-cuttoff-fix: 2em;
    position: absolute;
    width: calc(100% + var(--shadow-cuttoff-fix));
    height: calc(100% + var(--shadow-cuttoff-fix));
    top: calc(0% - var(--shadow-cuttoff-fix) /2);
    left: calc(0% - var(--shadow-cuttoff-fix) /2);
    filter: blur(clamp(2px, 0.125em, 12px));
    -webkit-filter: blur(clamp(2px, 0.125em, 12px));
    -moz-filter: blur(clamp(2px, 0.125em, 12px));
    -ms-filter: blur(clamp(2px, 0.125em, 12px));
    overflow: visible;
    pointer-events: none;
}

    /* Shadow */
    .button-shadow::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        border-radius: 999vw;
        background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
        width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
        height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
        top: calc(var(--shadow-cuttoff-fix) - 0.5em);
        left: calc(var(--shadow-cuttoff-fix) - 0.875em);
        padding: 0.125em;
        box-sizing: border-box;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        transition: all var(--anim--hover-time) var(--anim--hover-ease);
        overflow: visible;
        opacity: 1;
    }

.button-wrap a {
    text-decoration: none;
    display: block;
    pointer-events: auto;
}

.icy-btn {
    /* Basic Styling */
    --border-width: clamp(1px, 0.0625em, 4px);
    all: unset;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    pointer-events: auto;
    z-index: 3;
    background: linear-gradient( -75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border-radius: 999vw;
    box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -ms-backdrop-filter: blur(clamp(1px, 0.
        
        
        5em, 4px));
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
    width: fit-content; /* Makes button only as wide as its content */
    margin-inline: auto; /* Centers the button horizontally (optional) */
}

    .icy-btn:hover {
        transform: scale(0.975);
        backdrop-filter: blur(0.01em);
        -webkit-backdrop-filter: blur(0.01em);
        -moz-backdrop-filter: blur(0.01em);
        -ms-backdrop-filter: blur(0.01em);
        box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.5em 0.21em inset rgba(255, 255, 255, 0.5), 0 0 0 0 rgba(255, 255, 255, 1);
    }


    /* Button Text */

    .icy-btn span {
        position: relative;
        display: block;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        font-family: "Global User Interface", sans-serif;
        letter-spacing: -0.05em;
        font-weight: 500;
        font-size: 1.25em;
        color: rgba(50, 50, 50, 1);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-shadow: 0em 0.25em 0.05em rgba(0,0,0,0.1);
        transition: all var(--anim--hover-time) var(--anim--hover-ease);
        padding-inline: 2.5em;
        padding-block: 0.65em;
    }


    .icy-btn:hover span {
        text-shadow: 0.025em 0.025em 0.025em rgba(0,0,0,0.12);
    }

    /* Text */
    .icy-btn span::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: calc(100% - var(--border-width)); /* Prevent overlapping border */
        height: calc(100% - var(--border-width));
        top: calc(0% + var(--border-width) / 2);
        left: calc(0% + var(--border-width) / 2);
        box-sizing: border-box;
        border-radius: 999vw;
        overflow: clip;
        background: linear-gradient(var(--angle-2), rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 40% 50%, rgba(255,255,255,0) 55% );
        z-index: 3;
        mix-blend-mode: screen;
        pointer-events: none;
        background-size: 200% 200%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
        transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
    }

    .icy-btn:hover span::after {
        background-position: 25% 50%;
    }

    .icy-btn:active span::after {
        background-position: 50% 15%;
        --angle-2: -15deg;
    }

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    .icy-btn span::after,
    .icy-btn:active span::after {
        --angle-2: -45deg;
    }
}

/* Butoon Outline */

/* Outline */
.icy-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 999vw;
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    top: calc(0% - var(--border-width) /2);
    left: calc(0% - var(--border-width) /2);
    padding: var(--border-width);
    box-sizing: border-box;
    background: conic-gradient( from var(--angle-1) at 50% 50%, rgba(0,0,0,0.5), rgba(0,0,0,0) 5% 40%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 60% 95%, rgba(0,0,0,0.5)), linear-gradient(180deg, rgba(255,255, 255,0.5), rgba(255,255,255, 0.5));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease;
    box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255, 0.5);
}




.icy-btn:hover::after {
    --angle-1: -125deg;
}

.icy-btn:active::after {
    --angle-1: 75deg;
}

@media (hover: none) and (pointer: coarse) {
    .icy-btn::after, .icy-btn:hover::after, .icy-btn:active::after {
        --angle-1: -75deg;
    }
}

/* Shadow Hover */
.button-wrap:has(.icy-btn:hover) .button-shadow {
    filter: blur(clamp(2px, 0.0625em, 6px));
    -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
    -moz-filter: blur(clamp(2px, 0.0625em, 6px));
    -ms-filter: blur(clamp(2px, 0.0625em, 6px));
    transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

    .button-wrap:has(.icy-btn:hover) .button-shadow::after {
        top: calc(var(--shadow-cuttoff-fix) - 0.875em);
        opacity: 1;
    }

/* Rotation */
.button-wrap:has(.icy-btn:active) {
    transform: rotate3d(1,0,025deg);
}

    .button-wrap:has(.icy-btn:active) .icy-btn {
        box-shadow: inset 0 0.125em 0.125em rgba(0,0,0,0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0,0,0,0.2), 0 0 0.1em 0.25em inset rgba(255,255, 255, 0.2), 0 0.255em 0.05em 0 rgba(0,0,0,0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75),inset 0 0.25em 0.05em 0 rgba(0,0,0,0.15);
    }

    .button-wrap:has(.icy-btn:active) .button-shadow {
        filter: blur(clamp(2px, 0.125em, 12px));
        -webkit-filter: blur(clamp(2px,0.125em, 12px));
        -moz-filter: blur(clamp(2px, 0.125em, 12px);
        -ms-filter: blur(clamp(2px, 0.125em, 12px)));
    }

        .button-wrap:has(.icy-btn:active) .button-shadow::after {
            top: calc(var(--shadow-cuttoff-fix) - 0.5em);
            opacity: 0.75;
        }

    .button-wrap:has(.icy-btn:active) span {
        text-shadow: 0.025em 0.25em 0.05em rgba(0,0,0,0.12);
    }


/* ---------------- end of button glass effect hero-section --------------- */


/*-------- Button Glass Effect registration form-section ---------*/

/* Button Wrap container */
.button-wrap-2 {
    position: relative;
    z-index: 2;
    border-radius: 999vw;
    background: transparent;
    pointer-events: none;
    width: fit-content;
    margin-inline: auto; /* Centers the button */
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

/* Button Shadow Container */
.button-shadow-2 {
    --shadow-cuttoff-fix: 2em;
    position: absolute;
    width: calc(100% + var(--shadow-cuttoff-fix));
    height: calc(100% + var(--shadow-cuttoff-fix));
    top: calc(0% - var(--shadow-cuttoff-fix) /2);
    left: calc(0% - var(--shadow-cuttoff-fix) /2);
    filter: blur(clamp(2px, 0.125em, 12px));
    -webkit-filter: blur(clamp(2px, 0.125em, 12px));
    -moz-filter: blur(clamp(2px, 0.125em, 12px));
    -ms-filter: blur(clamp(2px, 0.125em, 12px));
    overflow: visible;
    pointer-events: none;
}

    /* Shadow */
    .button-shadow-2::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        border-radius: 999vw;
        background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
        width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
        height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
        top: calc(var(--shadow-cuttoff-fix) - 0.5em);
        left: calc(var(--shadow-cuttoff-fix) - 0.875em);
        padding: 0.125em;
        box-sizing: border-box;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        transition: all var(--anim--hover-time) var(--anim--hover-ease);
        overflow: visible;
        opacity: 1;
    }

.button-wrap-2 a {
    text-decoration: none;
    display: block;
    pointer-events: auto;
}

button {
    /* Basic Styling */
    --border-width: clamp(1px, 0.0625em, 4px);
    all: unset;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    pointer-events: auto;
    z-index: 3;
    background: linear-gradient( -75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border-radius: 999vw;
    box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
    width: fit-content; /* Makes button only as wide as its content */
    margin-inline: auto; /* Centers the button horizontally (optional) */
}

    button:hover {
        transform: scale(0.975);
        backdrop-filter: blur(0.01em);
        -webkit-backdrop-filter: blur(0.01em);
        -moz-backdrop-filter: blur(0.01em);
        -ms-backdrop-filter: blur(0.01em);
        box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.5em 0.21em inset rgba(255, 255, 255, 0.5), 0 0 0 0 rgba(255, 255, 255, 1);
    }


    /* Button Text */

    button span {
        position: relative;
        display: block;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        font-family: "Global User Interface", sans-serif;
        letter-spacing: -0.05em;
        font-weight: 500;
        font-size: 1.25em;
        color: rgba(50, 50, 50, 1);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-shadow: 0em 0.25em 0.05em rgba(0,0,0,0.1);
        transition: all var(--anim--hover-time) var(--anim--hover-ease);
        padding-inline: 2.5em;
        padding-block: 0.65em;
    }


    button:hover span {
        text-shadow: 0.025em 0.025em 0.025em rgba(0,0,0,0.12);
    }

    /* Text */
    button span::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: calc(100% - var(--border-width)); /* Prevent overlapping border */
        height: calc(100% - var(--border-width));
        top: calc(0% + var(--border-width) / 2);
        left: calc(0% + var(--border-width) / 2);
        box-sizing: border-box;
        border-radius: 999vw;
        overflow: clip;
        background: linear-gradient(var(--angle-2), rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 40% 50%, rgba(255,255,255,0) 55% );
        z-index: 3;
        mix-blend-mode: screen;
        pointer-events: none;
        background-size: 200% 200%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
        transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
    }

    button:hover span::after {
        background-position: 25% 50%;
    }

    button:active span::after {
        background-position: 50% 15%;
        --angle-2: -15deg;
    }

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    button span::after,
    button:active span::after {
        --angle-2: -45deg;
    }
}

/* Butoon Outline */

/* Outline */
button::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 999vw;
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    top: calc(0% - var(--border-width) /2);
    left: calc(0% - var(--border-width) /2);
    padding: var(--border-width);
    box-sizing: border-box;
    background: conic-gradient( from var(--angle-1) at 50% 50%, rgba(0,0,0,0.5), rgba(0,0,0,0) 5% 40%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 60% 95%, rgba(0,0,0,0.5)), linear-gradient(180deg, rgba(255,255, 255,0.5), rgba(255,255,255, 0.5));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease;
    box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255, 0.5);
}




button:hover::after {
    --angle-1: -125deg;
}

button:active::after {
    --angle-1: 75deg;
}

@media (hover: none) and (pointer: coarse) {
    button::after, button:hover::after, button:active::after {
        --angle-1: -75deg;
    }
}

/* Shadow Hover */
.button-wrap-2:has(button:hover) .button-shadow-2 {
    filter: blur(clamp(2px, 0.0625em, 6px));
    -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
    -moz-filter: blur(clamp(2px, 0.0625em, 6px));
    -ms-filter: blur(clamp(2px, 0.0625em, 6px));
    transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

    .button-wrap-2:has(button:hover) .button-shadow-2::after {
        top: calc(var(--shadow-cuttoff-fix) - 0.875em);
        opacity: 1;
    }

/* Rotation */
.button-wrap-2:has(button:active) {
    transform: rotate3d(1,0,025deg);
}

    .button-wrap-2:has(button:active) button {
        box-shadow: inset 0 0.125em 0.125em rgba(0,0,0,0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0,0,0,0.2), 0 0 0.1em 0.25em inset rgba(255,255, 255, 0.2), 0 0.255em 0.05em 0 rgba(0,0,0,0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75),inset 0 0.25em 0.05em 0 rgba(0,0,0,0.15);
    }

    .button-wrap-2:has(button:active) .button-shadow-2 {
        filter: blur(clamp(2px, 0.125em, 12px));
        -webkit-filter: blur(clamp(2px,0.125em, 12px));
        -moz-filter: blur(clamp(2px, 0.125em, 12px);
        -ms-filter: blur(clamp(2px, 0.125em, 12px)));
    }

        .button-wrap-2:has(button:active) .button-shadow-2::after {
            top: calc(var(--shadow-cuttoff-fix) - 0.5em);
            opacity: 0.75;
        }

    .button-wrap-2:has(button:active) span {
        text-shadow: 0.025em 0.25em 0.05em rgba(0,0,0,0.12);
    }


/* ---------------- end of button glass effect registration form--------------- */



/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about-container {
    /*margin-top: 100px;*/ /* original margin-top */
    margin-top: 60px; /* cancellation margin-top */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    padding: 50px;
    width: 100%;
    max-width: 600px;
    z-index: 10;
    box-shadow: 10px 10px 20px #C4D4E4;
}

@media (max-width: 768px) {
    .about-container {
        margin-top: 60px;
    }

    .border-bottom {
               width: 250px !important;
    }
    }


.border-bottom {
    border-bottom-color: #C4D4E4 !important;
    width: 370px; 
    display: inline-block;
    text-align: center;
}

.event-details-content h6 {
    font-size: 16px;
    color: #808080;
    font-family: "Poppins", sans-serif;
}

.event-details-content p {
    font-size: 20px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    /* color: #42708C; */ /*main color*/
    color: #CCCCCC; /*cancellation color*/
    padding: 0px;
    margin: 0;
    text-decoration: line-through;
}

.price-specification-text {
    display: block;
    font-size: 16px;
    color: #B8B8B8;
   
}

.about .content h3 {
    font-size: 1.75rem;
    font-weight: 700;
}

.about .content .fst-italic {
    color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
    list-style: none;
    padding: 0;
}

    .about .content ul li {
        padding: 10px 0 0 0;
        display: flex;
    }

    .about .content ul i {
        color: var(--accent-color);
        margin-right: 0.5rem;
        line-height: 1.2;
        font-size: 1.25rem;
    }

.about .content p:last-child {
    margin-bottom: 0;
}

/* cancellation section */

.cancel-image {
    width: 100%;
    max-width: 150px;
}

.cancel-text {
    font-size: 60px;
    color: #95383E;
    font-family: "Poppins", sans-serif;
}


/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/

.services {

    width: 100%;
    background-image: url('../img/reg_2026/direction_image - Copy.png');
 
    background-repeat: no-repeat;
   background-size: contain;
   
}

/*.services .row {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;  
    gap: 20px; 
}*/



.quick-links-container {
   
    margin-top: 20px;
    margin-bottom: 20px;
 
}

@media (max-width: 768px) {
    .quick-links-container {
        margin-top: 80px;
    }

    .services {
           background-size: cover;
    }
}

.directions-image {
    width: 150px;
}

.services .service-item {
    background-color: #F5FAFD;
    text-align: center;
    padding: 10px 15px;
    width: 100%;
    max-width: 250px;
    border-radius: 20px;
    transition: all ease-in-out 0.3s;
    box-shadow: 0px 3px 6px #C4D4E4;
}

.services h2 {
    font-size: 28px;
    font-family: "Poppins", sans-serif;
    color: #808080;
    font-weight: 400;
}


#guide-book-icon, #terms-conditions-icon {
    width: 40px;
}

.services .service-item h3 {
    font-weight: 500;
    margin: 10px 0 15px 0;
    font-size: 18px;
    transition: 0.3s;
    color: #808080;
    font-family: "Poppins", sans-serif;
}


.services .service-item:hover {
    transform: translateY(-10px);
}

@media (min-width: 1600px) {
    .quick-links-container {
        margin-top: -270px;
    }

   
}


/*--------------------------------------------------------------
# Registration Form Section
--------------------------------------------------------------*/
.registration-form {
    margin-top: 100px;
    font-family: "Bauhaus 93";
    font-size: 60px;
    color: #42708C;
}

@media (max-width: 768px) {
    .registration-form {
        font-size: 40px;
      }
        
}

.registration-form-container {
    width: 100%;
    max-width: 800px;
    background-color: #C4D4E4; /*#F5FAFD;*/
    box-shadow: 10px 10px 30px 0 rgba(48,81,101,0.5);
    border-radius: 20px;
    padding: 60px 60px 40px 60px;
    margin-top: 60px;
}

.contact {
    padding: 0 10px 10px 10px;
}

#contact {
    background-color: transparent !important;
}

@media (max-width: 768px) {
    .contact {
        padding: 0 0 0px 0;
    }

    #contact {
        padding: 0 20px 10px 20px;
    }

    .registration-form-container {
        padding:30px 50px 30px  50px;
    }

  
    }




.contact .php-email-form {
    height: 100%;
   
}

    .contact .php-email-form .form-group {
        padding-bottom: 0;

     
    
    }

    .contact .php-email-form .error-message {
        display: none;
        color: #fff;
        background: #ed3c0d;
        text-align: left;
        padding: 15px;
        font-weight: 600;
    }

        .contact .php-email-form .error-message br + br {
            margin-top: 25px;
        }

    .contact .php-email-form .sent-message {
        display: none;
        color: #fff;
        background: #18d26e;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }

    .contact .php-email-form .loading {
        display: none;
        background: #fff;
        text-align: center;
        padding: 15px;
    }

        .contact .php-email-form .loading:before {
            content: "";
            display: inline-block;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            margin: 0 10px -6px 0;
            border: 3px solid #18d26e;
            border-top-color: #eee;
            -webkit-animation: animate-loading 1s linear infinite;
            animation: animate-loading 1s linear infinite;
        }

    .contact .php-email-form input, 
    .contact .php-email-form textarea {
        font-size: 14px;
        font-family: "Poppins", sans-serif;

        
        box-shadow: none;
        border-radius: 10px;
        color: var(--default-color);
        background-color: color-mix(in srgb, var(--background-color), transparent 20%);
        border-color: #C4D4E4;
    }

    .contact .php-email-form input {
        height: 50px;
    }

    .contact .php-email-form textarea {
       
    }

.contact input::placeholder,
.contact textarea::placeholder 
{
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

@media (max-width: 768px) {


    .contact .php-email-form input,
    .contact .php-email-form textarea {
        font-size: 18px;
        padding: 20px 10px;
        border-radius: 10px;
    }

   
}

 

@-webkit-keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*    mine */
/*.contact .php-email-form {
    height: 100%;
}

    .contact .php-email-form input[type=text],
    .contact .php-email-form input[type=tel],
    .contact .php-email-form input[type=email],
    .contact .php-email-form textarea {
        font-size: 14px;
        font-family: "Poppins", sans-serif;
        padding: 10px 10px;
        box-shadow: none;
        border-radius: 10px;
        color: var(--default-color);
        /*background-color: color-mix(in srgb, var(--background-color), transparent 20%);*/
  /*      border-color: #C4D4E4;
        background-color:red;
    }


        .contact .php-email-form input[type=text]::placeholder,
        .contact .php-email-form input[type=tel]::placeholder,
        .contact .php-email-form input[type=email]::placeholder,
        .contact .php-email-form textarea::placeholder {
            color: color-mix(in srgb, var(--default-color), transparent 50%);
           
        }

    /*.contact .php-email-form button[type=submit] {
        color: var(--contrast-color);
        background: var(--accent-color);
        border: 0;
        padding: 10px 30px;
        transition: 0.4s;
        border-radius: 4px;
    }*/

  /*  .contact .php-email-form button[type=submit]:hover {
        background: color-mix(in srgb, var(--accent-color), transparent 20%);
    }


.form-button {
    margin-top: 30px;
}

@media (max-width: 768px) {
    .contact .php-email-form input[type=text],
    .contact .php-email-form input[type=tel],
    .contact .php-email-form input[type=email],
    .contact .php-email-form textarea {
        padding: 15px 15px;
    }
}
*/


/*--------------------------------------------------------------
# Parallax section
--------------------------------------------------------------*/


.parallax-animation {
    position: relative;
    min-height: 310px;
    padding: 0 0 !important;
}

.parallax-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    will-change: transform;
    pointer-events: none;
}


    /* Individual positioning if needed */
    .parallax-image:first-child {
        transform: translateY(var(--translateY-bottom, 0));
        bottom: -70px;
        z-index: 1;
    }

    .parallax-image:last-child {
        transform: translateY(var(--translateY-top, 0));
        bottom: -20px;
        z-index: 2;
    }


@media (max-width: 768px) {
      .parallax-animation {
        min-height: 100px;
    }

    .parallax-image {
        transform: scale(1) !important;
    }

        .parallax-image:first-child {
            transform: translateY(var(--translateY-bottom, 0));
            bottom: -5px;
            z-index: 1;
        }

        .parallax-image:last-child {
            transform: translateY(var(--translateY-top, 0));
            bottom: -10px;
            z-index: 2;
        }

}

/*--------------------------------------------------------------
# Footer section
--------------------------------------------------------------*/

.footer {
    position: relative;
    color: #000;
    font-size: 16px;
    background-color: #ffffff !important;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-bottom: 10px;
}


    .social-links i {
       
        padding: 0px 5px;
        font-size: 30px;
        color: #406C88;
        display: inline-block;
        transition: transform 0.3s ease;
    }

        .social-links i:hover {
            transform: scale(1.2);
        }

.footer .copyright {
    z-index: 3;
    padding: 0 0 30px 0;

}


    .footer .copyright p {
        margin-bottom: 0;
    }

.footer .credits {
    margin-top: 5px;
    font-size: 13px;
}

.footer .terms-conditions-policy {
    margin-top: 5px;
    font-size: 13px;
    
  
}

.credits a:hover, .terms-conditions-policy a:hover {
    color: #42708C !important;
}


@media (max-width: 768px) {
    .footer .copyright {
        z-index: 3;
        padding: 10px 0 30px 0;
    }

    .parallax-animation {
        min-height: 100px;
    }

    .parallax-image {
        transform: scale(1) !important;
    }

        .parallax-image:first-child {
            transform: translateY(var(--translateY-bottom, 0));
            bottom: -5px;
            z-index: 1;
        }

        .parallax-image:last-child {
            transform: translateY(var(--translateY-top, 0));
            bottom: -10px;
            z-index: 2;
        }

    .social-links {
        padding: 30px 0 0 0;
    }

    .footer .credits {
        margin-top: 5px;
        font-size: 16px;
    }

    .footer .terms-conditions-policy {
        margin-top: 5px;
        font-size: 16px;
    }
}

/*--------------------------------------------------------------
# Camping Details Update Form section
--------------------------------------------------------------*/

/* Animation for the camping details section */
#campingDetails {
    transition: all 0.3s ease-in-out;
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Style the radio buttons when hovered */
.camping-radio {
    cursor: pointer;
}

/* Style the camping section labels */
#campingDetails label {
    font-size: 14px;
    color: #555;
}

/* Style the form inputs within camping section */
#campingDetails .form-control {
    border: 1px solid #ddd;
    transition: border-color 0.3s ease;
}

    #campingDetails .form-control:focus {
        border-color: #42708C;
        outline: none;
        box-shadow: 0 0 5px rgba(66,112,140,0.2);
    }

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    #campingDetails {
        padding: 10px !important;
    }
}

@media (max-width: 480px) {
    #campingDetails {
        padding: 20px !important;
    }
}