@charset "UTF-8";
*{
    padding: 0;
    margin: 0;
}
html,body{
    padding: 0;
    margin: 0;
    background-color: white;
    width: 100%;
    height: 100%;
}
main{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: auto;
}
/* --------------------------------- */
/*         Description Section       */
/*  -------------------------------- */
.description-section{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}
.description-section-container{
    display: inherit;
    flex-direction: column;
    width: 70%;
    margin: 0 auto;
    padding: 5vw 0vw 0vw 0vw;
    justify-content: center;
    align-items: center;
    text-align: center;
    img{
        
        width: 80%;
    }
}
.description{
    display: flex;
    flex-direction: column;
    width: 90%;
    span{
        margin-bottom: 1vw;
    }
    span:nth-child(3){
        margin-bottom: 2vw;
    }
}
/* --------------------------------- */
/*   Description Section (Divider 1) */
/*  -------------------------------- */
.divider-1{
    display: block;
    position: relative;
    height: auto;
    z-index: 2;
}
.custom-shape-divider-top-1748032499 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-top-1748032499 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 5vw;
}
.custom-shape-divider-top-1748032499 .shape-fill-1 {
    fill: #ECE6DB;
}
/* --------------------------------- */
/*         Industries Section        */
/*  -------------------------------- */
.industries-section{
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.industries-section-container{
    display: inherit;
    flex-direction: column;
    width: 60%;
    margin: 0 auto;
    padding: 8vw 0vw 4vw 0vw;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.industry-sector {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0.75vw 0;
    box-shadow: 0vw 0vw 0.35vw rgba(0,0,0,0.5);
}
.industry-background-img{
    position: absolute;
    top: 0;
    right: 0;
    object-fit: cover;
    width: 50%;
    height: 100%;
    z-index: 1;
    transition: transform 0.6s ease;
}
/* Base sector content */
.sector-content {
    position: relative;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
    padding: 3vw 0;
    transition: transform 0.2s ease-in-out, clip-path 0.2s ease-in-out;
    span{
        display: block;
        position: relative;
        z-index: 3;
        width: 50%;
        font-size: 2vw;
        font-weight: 500;
        transition: margin 0.3s ease-in-out;
    }
    span:nth-child(3){
        font-size: 1vw;
        margin-top: 1vw;
        transition: margin 0.3s ease-in-out;
    }
    a{
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 3;
        text-decoration: none;
        transition: margin 0.3s ease-in-out;
        > div{
            width: 100%;
        }
    }
}
#default-heading{
    display: block;
}
#mobile-heading{
    display: none;
}
.industry-sector:hover .sector-content {
    transform: translateX(-35%);
    clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%);
    transition: transform 0.2s ease-in-out, clip-path 0.2s ease-in-out;
    span {
        margin-left: 10vw;
        transition: margin 0.2s ease-in-out;
    }
    a{
        margin-left: 10vw;
        transition: margin 0.2s ease-in-out;
    }
}
.industry-sector .sector-content::before {
    content: "";
    position: absolute;
    width: 98%;
    height: 90%;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
    z-index: 1;
    margin: 0 0;
    background: linear-gradient(120deg, #462523, #cb9b51, #e7d371, #e7d88f, #cb9b51, #462523);
    transition: transform 0.3s ease-in-out, clip-path 0.3s ease-in-out;
}
.industry-sector .sector-content::after {
    content: "";
    position: absolute;
    width: 97%;
    height: 85%;
    z-index: 2;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
    background-color: #1B3030;
    transition: transform 0.3s ease-in-out, clip-path 0.3s ease-in-out;
}
/* Even: slide left */
.industry-sector:hover .sector-content::before {
    transform: translateX(-2%);
    clip-path: polygon(38% 0, 100% 0, 86% 50%, 100% 100%, 38% 100%);
    transition: transform 0.3s ease-in-out, clip-path 0.3s ease-in-out;
}
/* Even: slide left */
.industry-sector:hover .sector-content::after {
    transform: translateX(-3.5%);
    clip-path: polygon(40% 0, 100% 0, 87% 50%, 100% 100%, 40% 100%);
    transition: transform 0.3s ease-in-out,clip-path 0.3s ease-in-out;
}
.sector-button {
    margin-top: 0.5vw;
    padding: 0.5vw 1.5vw;
    background: #ECE6DB;
    border: 2px solid transparent;
    color: #1B3030;
    border-radius: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.4s;
}
.sector-button:hover {
    background: #ffffff44;
    color: white;
    transition: background 0.4s;
    border: 2px solid white;
}
/* --------------------------------- */
/*   Sectors Section (Divider 2) */
/*  -------------------------------- */
.divider-2{
    display: block;
    position: relative;
    height: auto;
    z-index: 2;
}
.custom-shape-divider-bottom-1748289513 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-bottom-1748289513 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 5vw;
}
.custom-shape-divider-bottom-1748289513 .shape-fill-2 {
    fill: #ECE6DB;
}

/* floating buttons */
.industries-page{
    .floating-buttons {
        bottom: 10px;
        right: 40px;
    }
}

/* --------------------- */
/*  DESKTOP BREAKPOINTS  */
/* --------------------- */
/* Small Desktops and Laptops */
@media (min-width: 1201px) and (max-width: 1680px) {
    /* --------------------------------- */
    /*         Description Section       */
    /*  -------------------------------- */
    .description-section-container {
        width: 60%;
        padding: 4vw 0vw 0vw 0vw;
    }
    .description {
        width: 100%;
        span:nth-child(3){
            margin-bottom: 0.5vw;
        }
    }
    .custom-shape-divider-top-1748032499 svg {
        height: 4vw;
    }
    /* --------------------------------- */
    /*         Industries Section        */
    /*  -------------------------------- */
    .industries-section-container{
        padding: 6vw 0vw 4vw 0vw;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .sector-content {
        span {
            width: 60%;
            font-size: 2.4vw;
        }
        span:nth-child(3){
            font-size: 1.25vw;
        }
        & a {
            > div {
                width: 100%;
                transition: all 0.2s ease-in-out;
            }
        }
    }
    .industry-sector:hover .sector-content {
        span {
            width: 50%;
            margin-left: 13vw;
        }
        & a {
            > div {
                width: 100%;
                margin-left: 4vw;
                transition: all 0.2s ease-in-out;
            }
        }
    }
    .sector-button{
        margin-top: 0.75vw;
    }
    /* floating buttons */
    .industries-page{
        .floating-buttons {
            bottom: 20px;
            right: 40px;
        }
    }
}

/* --------------------- */
/*   TABLET BREAKPOINTS  */
/* --------------------- */
@media (min-width: 767px) and (max-width: 1200px) and (orientation: portrait) {
    /* --------------------------------- */
    /*         Description Section       */
    /*  -------------------------------- */
    .description-section-container{
        width: 90%;
        padding: 5vw 0vw 0vw 0vw;
        img{
            width: 75%;
        }
    }
    .description{
        width: 75%;
        span{
            margin-bottom: -1vw;
        }
        span:nth-child(3){
            margin-bottom: 0vw;
        }
    }
    /* --------------------------------- */
    /*         Industries Section        */
    /*  -------------------------------- */
    .industries-section-container{
        width: 75%;
        padding: 8vw 0 9vw 0;
    }
    .industry-sector{
        margin: 2vw 0;
        box-shadow: 0vw 0vw 3vw rgba(0,0,0,0.5);
    }
    .sector-content{
        padding: 5.5vw 0;
        span{
            font-size: 2.5rem;
            width: 80%;
            transition: 0.3s ease-in-out;
        }
        span:nth-child(3){
            display: none;
        }
    }
    #default-heading{
        display: block;
    }
    #mobile-heading{
        display: none;
    }
    .industry-sector .sector-content::before{
        width: 97%;
        height: 90%;
    }
    .industry-sector .sector-content::after{
        width: 95%;
        height: 85%;
    }
    .industry-sector:hover .sector-content{
        transform: translateX(-25%);
        clip-path: polygon(0% 0, 100% 0, 86% 50%, 100% 100%, 0% 100%);
        span{
            font-size: 1.8rem;
            transition: 0.3s ease-in-out;
        }
    }
    .industry-sector:hover .sector-content::before{
        clip-path: polygon(28% 0, 100% 0, 86% 50%, 100% 100%, 28% 100%);
    }
    .industry-sector:hover .sector-content::after{
        clip-path: polygon(30% 0, 100% 0, 87% 50%, 100% 100%, 30% 100%);
    }
    .sector-button{
        margin-top: 3vw;
        padding: 1vw 2vw;
        border-radius: 2rem;
    }
    .sector-button:hover{
        transition: background 0.1s;
    }
    /* --------------------------------- */
    /*   Sectors Section (Divider 2) */
    /*  -------------------------------- */
    .custom-shape-divider-bottom-1748289513 svg{
        height: 7vw;
    }
}
  
@media (min-width: 767px) and (max-width: 1200px) and (orientation: landscape) {
    /* --------------------------------- */
    /*         Description Section       */
    /*  -------------------------------- */
    .description-section-container{
        width: 100%;
        padding: 5vw 0vw 0vw 0vw;
        img{
            width: 75%;
        }
    }
    .description{
        width: 70%;
        span{
            margin-bottom: -1vw;
        }
        span:nth-child(3){
            margin-bottom: 0vw;
        }
    }
    /* --------------------------------- */
    /*         Industries Section        */
    /*  -------------------------------- */
    .industries-section-container{
        width: 70%;
        padding: 9vw 0 9vw 0;
    }
    .industry-sector{
        margin: 1vw 0;
        box-shadow: 0vw 0vw 3vw rgba(0,0,0,0.5);
    }
    .sector-content{
        padding: 3.5vw 0;
        span{
            font-size: 2.25rem;
            width: 80%;
            transition: 0.3s ease-in-out;
        }
        span:nth-child(3){
            display: block;
            font-size: 1.35rem;
            transition: 0.3s ease-in-out;
        }
        & a{
            > div{
                font-size: 1rem;
                transition: 0.3s ease-in-out;
            }
        }
    }
    #default-heading{
        display: block;
    }
    #mobile-heading{
        display: none;
    }
    .industry-sector .sector-content::before{
        width: 97%;
        height: 90%;
    }
    .industry-sector .sector-content::after{
        width: 95%;
        height: 85%;
    }
    .industry-sector:hover .sector-content{
        transform: translateX(-25%);
        clip-path: polygon(0% 0, 100% 0, 86% 50%, 100% 100%, 0% 100%);
        span{
            font-size: 2rem;
            transition: 0.3s ease-in-out;
        }
        span:nth-child(3){
            font-size: 1.25rem;
            transition: 0.3s ease-in-out;
        }
        & a {
            > div {
                font-size: 0.85rem;
                transition: 0.3s ease-in-out;
            }
        }
    }
    .industry-sector:hover .sector-content::before{
        clip-path: polygon(28% 0, 100% 0, 86% 50%, 100% 100%, 28% 100%);
    }
    .industry-sector:hover .sector-content::after{
        clip-path: polygon(30% 0, 100% 0, 87% 50%, 100% 100%, 30% 100%);
    }
    .sector-button{
        margin-top: 3vw;
        padding: 1vw 2vw;
        border-radius: 2rem;
    }
    .sector-button:hover{
        transition: background 0.1s;
    }
    /* --------------------------------- */
    /*   Sectors Section (Divider 2) */
    /*  -------------------------------- */
    .custom-shape-divider-bottom-1748289513 svg{
        height: 7vw;
    }
}

/* -------------------- */
/*  MOBILE BREAKPOINTS  */
/* -------------------- */
@media (max-width: 767px) and (orientation: portrait) {
    /* --------------------------------- */
    /*         Description Section       */
    /*  -------------------------------- */
    .description-section-container{
        width: 100%;
        padding: 5vw 0vw 0vw 0vw;
        img{
            width: 100%;
        }
    }
    .description{
        display: flex;
        flex-direction: column;
        width: 90%;
        span{
            margin-bottom: 1vw;
        }
        span:nth-child(3){
            margin-bottom: 2vw;
        }
    }
    /* --------------------------------- */
    /*         Industries Section        */
    /*  -------------------------------- */
    .industries-section-container{
        width: 90%;
        padding: 12vw 0 15vw 0;
    }
    .industry-sector{
        margin: 3vw 0;
        box-shadow: 0vw 0vw 3vw rgba(0,0,0,0.5);
    }
    .sector-content{
        padding: 7vw 0;
        span{
            font-size: 2rem;
            width: 80%;
        }
        span:nth-child(3){
            display: none;
        }
    }
    #default-heading{
        display: none;
    }
    #mobile-heading{
        display: block;
    }
    .industry-sector .sector-content::before{
        width: 97%;
        height: 90%;
    }
    .industry-sector .sector-content::after{
        width: 95%;
        height: 85%;
    }
    .industry-sector:hover .sector-content{
        transform: translateX(-25%);
        clip-path: polygon(0% 0, 100% 0, 86% 50%, 100% 100%, 0% 100%);
        span{
            font-size: 1.85rem;
        }
    }
    .industry-sector:hover .sector-content::before{
        clip-path: polygon(28% 0, 100% 0, 86% 50%, 100% 100%, 28% 100%);
    }
    .industry-sector:hover .sector-content::after{
        clip-path: polygon(30% 0, 100% 0, 87% 50%, 100% 100%, 30% 100%);
    }
    .sector-button{
        margin-top: 3vw;
        padding: 1.5vw 2.5vw;
        border-radius: 2rem;
    }
    .sector-button:hover{
        transition: background 0.1s;
    }
    /* --------------------------------- */
    /*   Sectors Section (Divider 2) */
    /*  -------------------------------- */
    .custom-shape-divider-bottom-1748289513 svg{
        height: 10vw;
    }
}
  
@media (max-width: 767px) and (orientation: landscape) {
    /* --------------------------------- */
    /*         Description Section       */
    /*  -------------------------------- */
    .description-section-container{
        width: 100%;
        padding: 5vw 0vw 0vw 0vw;
        img{
            width: 100%;
        }
    }
    .description{
        width: 85%;
        span{
            margin-bottom: -1vw;
        }
        span:nth-child(3){
            margin-bottom: 0vw;
        }
    }
    /* --------------------------------- */
    /*         Industries Section        */
    /*  -------------------------------- */
    .industries-section-container{
        width: 85%;
        padding: 8vw 0 9vw 0;
    }
    .industry-sector{
        margin: 2vw 0;
        box-shadow: 0vw 0vw 3vw rgba(0,0,0,0.5);
    }
    .sector-content{
        padding: 7vw 0;
        span{
            font-size: 2.5rem;
            width: 80%;
            transition: 0.3s ease-in-out;
        }
        span:nth-child(3){
            display: none;
        }
    }
    #default-heading{
        display: none;
    }
    #mobile-heading{
        display: block;
    }
    .industry-sector .sector-content::before{
        width: 97%;
        height: 90%;
    }
    .industry-sector .sector-content::after{
        width: 95%;
        height: 85%;
    }
    .industry-sector:hover .sector-content{
        transform: translateX(-25%);
        clip-path: polygon(0% 0, 100% 0, 86% 50%, 100% 100%, 0% 100%);
        span{
            font-size: 1.9rem;
            transition: 0.3s ease-in-out;
        }
    }
    .industry-sector:hover .sector-content::before{
        clip-path: polygon(28% 0, 100% 0, 86% 50%, 100% 100%, 28% 100%);
    }
    .industry-sector:hover .sector-content::after{
        clip-path: polygon(30% 0, 100% 0, 87% 50%, 100% 100%, 30% 100%);
    }
    .sector-button{
        margin-top: 3vw;
        padding: 1vw 2vw;
        border-radius: 2rem;
    }
    .sector-button:hover{
        transition: background 0.1s;
    }
    /* --------------------------------- */
    /*   Sectors Section (Divider 2) */
    /*  -------------------------------- */
    .custom-shape-divider-bottom-1748289513 svg{
        height: 7vw;
    }
}