@font-face {
    font-family: "Figtree";
    src: url("/font/Figtree-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Figtree-Medium";
    src: url("/font/Figtree-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Figtree-Bold";
    src: url("/font/Figtree-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "Figtree-SemiBold";
    src: url("/font/Figtree-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "Lato";
    src: url("/font/Lato-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Lato-Bold";
    src: url("/font/Lato-Bold.ttf") format("truetype");
}

:root{
    --primary_bg:#7BB0AB;
    --footer_primary_bg:#0C2E33;
    --footer_secondary_bg:#0F5242;
    --primary:#7DB1AC;
    --white:#FFFFFF;
    --black:#000000;
    --dark_green:#0F521D;
    --cyan_green: #32978D;
    --cream: #FFF7ED;
    --card_border_radius: 1.15dvw;
}

@media (max-width: 768px) {
    :root{
        --card_border_radius: 2.91dvw;
    }

    .breadcrumb_wrap .breadcrumb-item a {
        font-size: 4dvw !important;
    }

    .breadcrumb_wrap .breadcrumb-item {
        font-size: 4dvw !important;
    }

    .breadcrumb-item + .breadcrumb-item::before{
        width: 3dvw !important;
        height: 3dvw !important;
    }

    .breadcrumb-item + .breadcrumb-item a::before{
        width: 3dvw !important;
        height: 3dvw !important;
    }

    .breadcrumb_wrap{
        padding-top: 25dvw !important;
    }
}

/*** Animations ***/
@keyframes moveUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2.12dvh); }
}
@keyframes cardScaleUp {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/*** Scrollbar ***/
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}
body::-webkit-scrollbar {width: 6px;background-color: #F5F5F5;}
body::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: var(--primary);}

body {background: var(--white);position: relative;margin: 0;}
body::before {content: "";position: fixed;top: 0;left: 0;width: 100%;height: 50dvh;background: linear-gradient(to bottom, var(--primary_bg), var(--white));pointer-events: none;z-index: -1;}

h1, h2, h3, h4, h5, h6 {font-family: 'Figtree';}
a {font-family: 'Figtree-Medium';}
a:hover {text-decoration: none;color: var(--primary);}
p, span {font-family: 'Lato';}

.btn:focus{box-shadow: none;}

.card {border-radius: var(--card_border_radius);border: none;overflow: hidden;}

/*** Pill Buttons | START ***/
/* Pill Buttons (White) */
.pill_btn_white {display: flex;align-items: center;justify-content: center;gap: 0.78dvw;padding: 0.26dvw 1.30dvw;width: fit-content;background-color: var(--white);border-radius: 5.21dvw;color: var(--black);text-decoration: underline;font-size: 0.83dvw;font-family: 'Figtree';border: none;}
.pill_btn_white svg {width: 0.94dvw;height: 0.94dvw;}
.pill_btn_white svg path {fill: var(--black);stroke: var(--black);stroke-width: 0.2;}

/* Pill Buttons (Dark Green) */
.pill_btn_darkgreen {display: flex;align-items: center;justify-content: center;gap: 0.78dvw;padding: 0.26dvw 1.30dvw;width: fit-content;background-color: var(--dark_green);border-radius: 5.21dvw;color: var(--white);text-decoration: underline;font-size: 0.83dvw;font-family: 'Figtree';border: none;}
.pill_btn_darkgreen svg {width: 0.94dvw;height: 0.94dvw;}
.pill_btn_darkgreen svg path {fill: var(--white);stroke: var(--white);stroke-width: 0.2;}

/* Pill Iconic Buttons (White) */
.pill_iconic_btn_white {display: flex;align-items: center;justify-content: center;gap: 0.78dvw;padding: 0.52dvw 1.30dvw;width: fit-content;background-color: var(--white);border-radius: 5.21dvw;color: var(--black);text-decoration: underline;font-size: 0.83dvw;font-family: 'Figtree';border: none;}
.pill_iconic_btn_white .iconic_svg {width: 1.46dvw;height: 1.46dvw;fill: var(--black);}
.pill_iconic_btn_white .iconic_svg path {fill: var(--black);}
.pill_iconic_btn_white .right_svg {width: 0.94dvw;height: 0.94dvw;}
.pill_iconic_btn_white .right_svg path {fill: var(--white);stroke: var(--white);stroke-width: 0.2;}

/* Pill Iconic Buttons (Dark Green) */
.pill_iconic_btn_darkgreen {display: flex;align-items: center;justify-content: center;gap: 0.78dvw;padding: 0.52dvw 1.30dvw;width: fit-content;background-color: var(--dark_green);border-radius: 5.21dvw;color: var(--white);text-decoration: underline;font-size: 0.83dvw;font-family: 'Figtree';border: none;}
.pill_iconic_btn_darkgreen .iconic_svg {width: 1.46dvw;height: 1.46dvw;fill: var(--white);}
.pill_iconic_btn_darkgreen .iconic_svg path {fill: var(--white);}
.pill_iconic_btn_darkgreen .right_svg {width: 0.94dvw;height: 0.94dvw;}
.pill_iconic_btn_darkgreen .right_svg path {fill: var(--white);stroke: var(--white);stroke-width: 0.2;}

@media (max-width: 768px) {
    .pill_btn_white,
    .pill_btn_darkgreen {gap: 1.56dvw;font-size: 2.92dvw;padding: 1.04dvw 5.21dvw; }
    .pill_btn_white svg,
    .pill_btn_darkgreen svg {width: 2.71dvw;height: 2.71dvw;}

    .pill_iconic_btn_white,
    .pill_iconic_btn_darkgreen {gap: 1.56dvw;font-size: 2.92dvw;padding: 1.04dvw 5.21dvw; }
    .pill_iconic_btn_white .iconic_svg,
    .pill_iconic_btn_darkgreen .iconic_svg {width: 3.13dvw;height: 3.13dvw;}
    .pill_iconic_btn_white .right_svg,
    .pill_iconic_btn_darkgreen .right_svg {width: 2.71dvw;height: 2.71dvw;}
}
/*** Pill Buttons | END ***/


/*** Breadcrumbs | START ***/
.breadcrumb_wrap {margin: 0 10%;padding-top: 6.25dvw;}
.breadcrumb_wrap .breadcrumb {margin: 2% 3%;--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg viewBox='0 0 113 130' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M113 65L0.499994 129.952L0.5 0.0480908L113 65Z' fill='%230F521D'/%3E%3C/svg%3E");}
.breadcrumb-item + .breadcrumb-item::before {margin: 0 0.52dvw;width: 0.94dvw;height: 0.94dvw;padding-right: 0.52dvw;vertical-align: middle;background-size: contain;}
.breadcrumb_wrap .breadcrumb-item {font-size: 0.94dvw;font-family: 'Figtree-Medium';color: var(--black);padding-left: 0.52dvw;}
.breadcrumb_wrap .breadcrumb-item a {font-size: 0.94dvw;text-decoration: none;color: var(--black);}
@media (max-width: 768px) {
    .breadcrumb_wrap {margin: 0 5%;padding-top: 20.05dvw;}
    .breadcrumb_wrap .breadcrumb {margin: 0;margin-bottom: 5%;}
    .breadcrumb-item + .breadcrumb-item::before {margin: 0;width: 2.50dvw;height: 2.50dvw;padding-right: 1.04dvw;}
    .breadcrumb_wrap .breadcrumb-item {font-size: 2.50dvw;padding-left: 1.04dvw;}
    .breadcrumb_wrap .breadcrumb-item a {font-size: 2.50dvw;}
}
/*** Breadcrumbs | END ***/


/*** Animated Form | START ***/
.animated_form { margin-top: 3%;}
.animated_form :focus { outline: none; }
.animated_form .input_wrap { position: relative; margin-bottom: 6%; z-index: 0; }
.animated_form input,
.animated_form textarea { font: 0.73dvw/1.25dvw 'Lato', sans-serif; color: var(--black); width: 100%; box-sizing: border-box; border: 0; padding: 0.5% 0; border-bottom: 0.11dvw solid #CCC; background-color: transparent; transition: border-bottom-color 0.3s ease;}
.animated_form textarea { resize: vertical; }
.animated_form .input_animation:focus,
.animated_form .has_content.input_animation { border-bottom: 0.11dvw solid var(--cyan_green); }
.animated_form .input_animation ~ label { position: absolute; left: 0; width: 100%; top: 0.31dvw; color: #AAA; font-family: 'Lato', sans-serif; font-size: 0.73dvw; transition: 0.3s; z-index: -1; pointer-events: none; }
.animated_form .input_animation:focus ~ label,
.animated_form .has_content.input_animation ~ label { top: -0.73dvw; font-size: 0.63dvw; color: var(--cyan_green); transition: 0.3s; z-index: 1; }
@media (max-width: 768px) {
    .animated_form { margin-top: 5%; }
    .animated_form input,
    .animated_form textarea { font: 2.92dvw/5.00dvw 'Lato', sans-serif; border-bottom: 0.21dvw solid #CCC; }
    .animated_form .input_animation:focus,
    .animated_form .has_content.input_animation { border-bottom: 0.21dvw solid var(--cyan_green); }
    .animated_form .input_wrap { margin-bottom: 8%; }
    .animated_form .input_animation ~ label { top: 1.25dvw; font-size: 2.92dvw; }
    .animated_form .input_animation:focus ~ label,
    .animated_form .has_content.input_animation ~ label { top: -2.92dvw; font-size: 2.50dvw; }
}
/*** Animated Form | END ***/

/* Desktop Buttons */
.buttons_wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 20px;
}

.buttons_wrap .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 24px;
    white-space: nowrap;
}

.buttons_wrap .dropdown {
    display: inline-block;
}

.buttons_wrap .dropdown-menu {
    min-width: 160px;
    padding: 8px 0;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.buttons_wrap .dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    color: var(--text);
}

.buttons_wrap .dropdown-item:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Mobile Buttons */
.mobile-buttons_wrap {
    display: none;
}

@media screen and (max-width: 768px) {
    .buttons_wrap {
        display: none !important;
    }

    .mobile-buttons_wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 16px;
        padding: 16px 0;
    }

    .mobile-buttons_wrap .btn {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 8px;
    }

    .mobile-buttons_wrap .dropdown {
        width: 100%;
    }

    .mobile-buttons_wrap .dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 16px;
        font-size: 16px;
    }

    .mobile-buttons_wrap .dropdown-menu {
        width: 100%;
        margin-top: 8px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.1);
        background: var(--primary_bg);
    }

    .mobile-buttons_wrap .dropdown-item {
        padding: 12px 16px;
        font-size: 16px;
        color: var(--text);
    }

    .mobile-buttons_wrap .dropdown-item:hover {
        background-color: rgba(255,255,255,0.05);
    }
}

@media screen and (min-width: 769px) {
    .mobile-buttons_wrap {
        display: none;
    }
}