@charset "UTF-8";
*{
    padding: 0;
    margin: 0;
}
html,body{
    padding: 0;
    margin: 0;
    background-color: white;
    width: 100%;
    height: 100%;
}
.base-section-sizing{
    display: flex;
    width: 100%;
    margin: 0 auto;
    height: auto;
}
.txt-color-2-gold-heading{
    background: linear-gradient(120deg, #462523 , #cb9b51 , #e7d371,#e7d88f, #cb9b51,#462523 );
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: shine 20s linear infinite;
    position: relative;
    font-size: 3.25vw;
    font-weight: bold;
}
.txt-color-3-grey-subheading{
    color: #A49E93;
    font-size: 1.75vw;
}
@keyframes shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
/* -------------------------- */
/*         Hero Banner        */
/*  ------------------------- */
.hero-banner {
    position: relative;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
}
.hero-banner-background {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    object-fit:cover;
    z-index: 0;
}
.hero-banner-container {
    width: 100%;
    background-color: #0b1311b9;
    position: relative;
    margin: 0;
}
.hero-banner-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.angled-box {
    position: relative;
    z-index: 2;
    width: 50%;
    padding: 6vw 5vw 6vw 4.5vw;
    clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%);
    background: linear-gradient(to right, #1B3030 0%, #213B36 50%, #25574E 100%);
    box-sizing: border-box;
    > div{
        position: relative;
        z-index: 2; /* Ensures text is above both pseudo-elements */
        display: flex;
        flex-direction: column;
    }
    span{
        display: inline;
        margin-bottom: 0;
    }
    span:first-child {
        margin-bottom: 0px;
    }
}
.angled-box::before {
    content: "";
    position: absolute;
    width: 94%;
    inset: 0;
    z-index: 1;
    margin: 1vw 0 1vw 1vw;
    clip-path: polygon(0 0, 66% 0, 100% 100%, 0 100%);
    background: linear-gradient(120deg, #462523, #cb9b51, #e7d371, #e7d88f, #cb9b51, #462523);
}
.angled-box::after {
    content: "";
    position: absolute;
    width: 92%;
    inset: 0;
    z-index: 1;
    margin: 1.25vw 0 1.25vw 1.25vw;
    /* transform: translate(1.5vw, 1.5vw); */
    clip-path: polygon(0 0, 66.5% 0, 100% 100%, 0 100%);
    background: linear-gradient(to right, #1B3030 0%, #213B36 50%, #25574E 100%);
}
.breadcrumb{
    font-size: 1.1vw !important;
}
.breadcrumb-link {
    color: inherit;
    text-decoration: none;
}
.breadcrumb-link:hover {
    text-decoration: underline;
}
.banner-title{
    font-size: 3vw !important;
}
/* --------------------- */
/*  DESKTOP BREAKPOINTS  */
/* --------------------- */
/* Small Desktops and Laptops */
@media (min-width: 1201px) and (max-width: 1680px) {
    /* -------------------------- */
    /*         Hero Banner        */
    /*  ------------------------- */
    .angled-box::before{
        width: 90%;
        margin: 1.65vw 0 1.65vw 1.65vw;
        clip-path: polygon(0 0, 68.5% 0, 100% 100%, 0 100%);
    }
    .angled-box{
        width: max-content;
        padding: 6.5vw 13vw 6.5vw 5vw;
        clip-path: polygon(0 0, 66% 0, 100% 100%, 0 100%);
    }
    .angled-box::after{
        width: 87.5%;
        margin: 2vw 0 2vw 2vw;
        clip-path: polygon(0 0, 69.5% 0, 100% 100%, 0 100%);
    }
    .breadcrumb{
        font-size: 1.5vw !important;
    }
    .banner-title {
        font-size: 2.75vw !important;
    }
}

/* --------------------- */
/*   TABLET BREAKPOINTS  */
/* --------------------- */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    /* -------------------------- */
    /*         Hero Banner        */
    /*  ------------------------- */
    .angled-box::before{
        width: 92%;
        margin: 2vw 0 2vw 2vw;
        clip-path: polygon(0 0, 68% 0, 100% 100%, 0 100%);
    }
    .angled-box{
        width: max-content;
        padding: 9vw 18vw 9vw 6vw;
        clip-path: polygon(0 0, 66% 0, 100% 100%, 0 100%);
    }
    .angled-box::after{
        width: 88%;
        margin: 2.75vw 0 2.75vw 2.75vw;
        clip-path: polygon(0 0, 69% 0, 100% 100%, 0 100%);
    }
    .breadcrumb{
        font-size: 2.15vw !important;
    }
    .banner-title {
        font-size: 4vw !important;
    }
}
  
@media (min-width: 767px) and (max-width: 1200px) and (orientation: landscape) {
    /* -------------------------- */
    /*         Hero Banner        */
    /*  ------------------------- */
    .angled-box::before{
        width: 89%;
        margin: 2vw 0 2vw 2vw;
        clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);
    }
    .angled-box{
        width: max-content;
        padding: 7vw 16vw 7vw 6vw;
        clip-path: polygon(0 0, 67% 0, 100% 100%, 0 100%);
    }
    .angled-box::after{
        width: 85.5%;
        margin: 2.5vw 0 2.5vw 2.5vw;
        clip-path: polygon(0 0, 71% 0, 100% 100%, 0 100%);
    }
    .breadcrumb{
        font-size: 2vw !important;
    }
    .banner-title {
        font-size: 4.5vw !important;
    }
}

/* -------------------- */
/*  MOBILE BREAKPOINTS  */
/* -------------------- */
@media (max-width: 767px) and (orientation: portrait) {
    /* -------------------------- */
    /*         Hero Banner        */
    /*  ------------------------- */
    .angled-box::before{
        width: 93%;
        margin: 2vw 0 2vw 2vw;
    }
    .angled-box{
        width: 95%;
        padding: 13vw 15vw 13vw 7vw;
    }
    .angled-box::after{
        width: 89.5%;
        margin: 3vw 0 3vw 3vw;
    }
    .breadcrumb{
        font-size: 4vw !important;
    }
    .banner-title {
        font-size: 8vw !important;
    }
}
  
@media (max-width: 767px) and (orientation: landscape) {
    /* -------------------------- */
    /*         Hero Banner        */
    /*  ------------------------- */
    .angled-box::before{
        width: 90%;
        margin: 2vw 0 2vw 2vw;
        clip-path: polygon(0 0, 68% 0, 100% 100%, 0 100%);
    }
    .angled-box{
        width: max-content;
        padding: 7vw 18vw 7vw 6vw;
        clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%);
    }
    .angled-box::after{
        width: 87%;
        margin: 2.5vw 0 2.5vw 2.5vw;
        clip-path: polygon(0 0, 69% 0, 100% 100%, 0 100%);
    }
    .breadcrumb{
        font-size: 2.15vw !important;
    }
    .banner-title {
        font-size: 4.5vw !important;
    }
}