@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


:root {
    --brand-green: #00282a;
    --brand-yellow: #F5C542;
    --brand-orange: #e8841e;
}

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.text-brand-yellow{
    color: var(--brand-yellow) !important;
}
.text-brand-orange{
    color: var(--brand-orange) !important;
}

.bg-brand {
    background-color: var(--brand-green) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playfair Display", serif;
}

.btn {
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.275rem;
}

.btn-brand-yellow {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--brand-orange);
    --bs-btn-border-color: var(--brand-orange);
    --bs-btn-hover-color: var(--brand-orange);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-orange);
    --bs-btn-active-border-color: var(--brand-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--brand-orange);
    --bs-btn-disabled-border-color: var(--brand-orange);
}


/* Navigation Bar */

header .nav-link, header .btn {
    color: var(--bs-white);
    font-size: .85rem;
}



header .navbar {
    border-color: var(--brand-orange) !important;
}
header .nav-link:focus, header .nav-link:hover {
    color: var(--brand-yellow);
}

.navbar-brand {
   max-width: 70px;
    width: 100%;
    position: relative;
    z-index: 10;
    display: block;
}

.navbar-brand-logo {
    background-color: var(--brand-green);
    width: 100%;
    margin-bottom: -45px;
}

.navbar-brand-center {
    padding: 0 2rem;
}
.nav-item.dropdown .dropdown-menu{
    border-radius: 0;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-white);
    background-color: var(--brand-orange);
}

.navbar-toggler {
    border: var(--bs-border-width) solid var(--brand-yellow) !important;
}
.navbar-toggler {
    color: var(--brand-yellow);
}
.navbar-toggler-icon {
  background-image: none;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath d='M4 7h22M4 15h22M4 23h22' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2'/%3e%3c/svg%3e") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath d='M4 7h22M4 15h22M4 23h22' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2'/%3e%3c/svg%3e") center/contain no-repeat;
  background-color: var(--brand-yellow);
}
/* Slide-in effect for dropdown on desktop */
@media (min-width: 992px) {
    .nav-item.dropdown .dropdown-menu {
        display: block;       /* keep structure for animation */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
/* Desktop Navigation Centering */
@media (min-width: 992px) {
    /* Equal width containers for left and right nav */
    .nav-section-left,
    .nav-section-right {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Left nav items aligned to the right */
    .nav-section-left .navbar-nav {
        justify-content: flex-end;
        width: 100%;
    }

    /* Right nav items aligned to the left */
    .nav-section-right .navbar-nav {
        justify-content: flex-start;
        width: 100%;
    }
    .navbar-nav .nav-item:not(:first-child) {
        margin-left: 1rem;
    }
}

/* Hero */
.hero {
    padding: 50px 0;
    min-height: calc(100vh - var(--header-height));
}
.hero-top-element{
    position: absolute;
    right: 0;
    top: 0;
    max-width: 300px;
    width: 100%;
}

@media (max-width:767px) {
    .hero-top-element{
        opacity: .3;
    }
}