/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* add satoshi otf fonts( regular, medium, bold, italic ) from fonts folder */
/*@font-face {
    font-family: 'Satoshi-Light';
    src: url('/assets/fonts/Satoshi-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Regular';
    src: url('/assets/fonts/Satoshi-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Medium';
    src: url('/assets/fonts/Satoshi-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Bold';
    src: url('/assets/fonts/Satoshi-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Italic';
    src: url('/assets/fonts/Satoshi-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}*/

/*now make small thead font-face using ttf*/

@font-face {
    font-family: 'Satoshi-Light';
    src: url('../assets/fonts/Satoshi-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi-Regular';
    src: url('../assets/fonts/Satoshi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi-Medium';
    src: url('../assets/fonts/Satoshi-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi-Bold';
    src: url('../assets/fonts/Satoshi-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi-Italic';
    src: url('../assets/fonts/Satoshi-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}   




/* :root {
    --primary-color: #78563D;
    --secondary-color: #D1CBB1;
    --dark-color: #444638;
    --light-color: #F9F8F5;
} */



body {
    font-family: "Satoshi-Light", sans-serif;
    line-height: 1.6;
    color: #333;
}
p {
    font-family: "Satoshi-Light", sans-serif;
    padding-bottom: 1.3vw;
    font-size: 1.3vw;  
}
.d-none{
    display:none !important;
}
.greenText {
    color: #444638;
}
.redText {
    color: #78563D;
}
.offfWhiteText {
    color: #D1CBB1;
}
.whiteText{
    color: #F9F8F5;
}

*:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

header {
    position: fixed;
    width: 100vw;
    z-index: 3;
    background-color: #444638;
}

.mainlogo {
    padding-top: 1vh;
    width: 10vw;
    transition: width 0.3s ease;
}

    .mainlogo img {
        width: 100%;
    }

.scrolled .mainlogo {
    width: 9vw;
    transition: width 0.8s ease;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0vh 0vw;
    animation: navExpand 0.3s ease forwards;
}

@keyframes navExpand {
    from {
        padding: 0vh 0vw;
    }

    to {
        padding: 1vh 0vw;
    }
}

@keyframes navShrink {
    from {
        padding: 1vh 0vw;
    }

    to {
        padding: 0vh 0vw;
    }
}

.scrolled {
    /*background-color: #444638;*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.8s ease, box-shadow 0.4s ease;
}

header.scrolled nav {
    padding: 0vh 2vw;
    animation: navShrink 0.8s ease forwards;
}

.dark-bg {
    background-color: #444638;
    transition: background-color 0.5s ease;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2vw;
    align-items: center;
}

    nav ul li {
        position: relative;
    }

nav a {
    font-family: "Satoshi-Regular", sans-serif;
    text-decoration: none;
    color: #D1CBB1;
    /* font-weight: normal; */
    font-size: 1vw;
}

    /* on hover the border bottom should show by increasing the length from 1 to 100% animation*/
    nav a:hover {
        position: relative;
        /* color: #964141; */
    }

    nav a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        display: block;
        margin-top: 5px;
        left: 0;
        background: #D1CBB1;
        transition: width 0.3s ease;
    }

    nav a.buttonDesign::after, nav .mainlogo a::after {
        display: none;
    }

    nav a:hover::after {
        width: 100%;
    }

nav ul a.active {
    font-family: "Satoshi-Bold", sans-serif;
    color: #D1CBB1;
}

.buttonDesign {
    display: flex;
    justify-content: center;
    gap: calc(.5vw);
    font-family: "Satoshi-Medium", sans-serif;
    padding: 0.8vh 1.5vw;
    /* border: 2px solid #D1CBB1; */
    border-radius: 3vh;
    background-color: #D1CBB1;
    color: #444638;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .buttonDesign img {
        width: 1vw;
        height: auto;
        position: relative;
        /*top: .2vh;*/
    }

.sectionDark {
    background-color: #444638;
    color: #D1CBB1;
}

.sectionLight {
    background-color: #fff;
}

.breathingSpace {
    padding: 10vh 0vw;
}

.landingSection {
    /*height: 100vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 16vh 0vw 1vh 0vw;
}

.transparentHeader {
    background-color: transparent;
    box-shadow: none;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.homepage.landingSection {
    height: 100vh;
}

    .homepage.landingSection::before {
        content: '';
        position: absolute;
        top: 0;
        left: 33vw;
        width: 33%;
        height: 100%;
        background: #78563D;
    }

.landingContent {
    z-index: 1;
    /* max-width: 60vw; */
    text-align: center;
}

h1 {
    font-family: "Satoshi-Bold", sans-serif;
    font-size: 3vw;
    margin-bottom: 1vh;
}
.landingSection h1 {
    padding: 0vh 7vw;
}

.landingContent p {
    font-family: "Satoshi-Medium", sans-serif;
    font-size: 1.2vw;
    margin-bottom: 3vh;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.container {
    padding: 0 8vw;
}

.nagendraimg {
    width: 25vh;
    height: 25vh;
    border-radius: 25vh;
    margin: auto;
    padding: 2px;
    border: 0.5vh solid #D1CBB1;
}

    .nagendraimg img {
        width: 100%;
        height: 100%;
        padding: 5px;
        /* border-radius: 18vh; */
    }

.buttonSection {
    display: flex;
    justify-content: center;
    margin-top: 3vh;
    gap: 2vw;
}

.ctaSection {
    padding: 4vh 0;
}

.cta {
    color: #444638;
    font-family: "Satoshi-Bold", sans-serif;
    font-size: 1.2vw;
    padding: 1vh 1.5vw;
    border: .3vh solid #D1CBB1;
    border-radius: 1.5vh;
    background-color: #D1CBB1;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

    .cta.highlight {
        background-color: #78563D;
        color: #F9F8F5;
        border-color: #78563D;
    }

        .cta.highlight span::after {
            content: url(../assets/rightupwhite.svg);
            margin-left: .5vw;
            position: relative;
            top: .5vh;
            width: 1vw;
            display: inline-flex;
        }

    .cta span::after {
        content: url(../assets/rightupgreen.svg);
        margin-left: .5vw;
        position: relative;
        top: .5vh;
        width: 1vw;
        display: inline-flex;
    }

    .cta.outlined {
        background-color: transparent;
        color: #D1CBB1;
    }

    .cta.cta.outlined span::after {
        content: url(../assets/rightupbaige.svg);
        margin-left: .5vw;
        position: relative;
        top: .5vh;
    }

.getintouchlinedin {
    position: absolute;
    bottom: 2vh;
    right: 2vw;
    /* rotate the image continuesly */
    /* animation: rotate 10s linear infinite; */
}

    .getintouchlinedin img {
        position: absolute;
        right: 5.8vw;
        bottom: 8vh;
    }

    .getintouchlinedin::after {
        content: url(../assets/getintouchicon.svg);
        position: absolute;
        bottom: 2vh;
        right: 3vw;
        animation: rotate 10s linear infinite;
    }

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

h2 {
    font-family: "Satoshi-Regular", sans-serif;
    font-size: 1.1vw;
    margin-bottom: 3vh;
    color: #444638;
}

h3 {
    font-family: "Satoshi-Bold", sans-serif;
    font-size: 1.3vw;
    margin-bottom: 5vh;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #78563D;
}

h4 {
    font-family: Satoshi-Light, sans-serif;
    font-size: 2vw;
    margin-bottom: 1vh;
    color: #444638;
    text-transform: capitalize;
    letter-spacing: .1vw;
    word-spacing: .1vw;
    /* animation: fadeInUp 1s ease forwards; */
}
.innerHeaderSpace {
padding:0 5vw;
}
    /* @keyframes fadeInUp {
    from {
        opacity: 0.4;
        transform: translateY(2vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
} */
    /* animate h4 on scroll into opacity from .4 to 1 and move up by 2vh and the animation should play or start only when the h4 is scrolled into view */




    h4.bold {
        font-family: "Satoshi-Bold", sans-serif;
        font-size: 2vw;
        margin-bottom: 1vh;
        color: #444638;
        text-transform: capitalize;
    }

h5 {
    font-family: "Satoshi-Light", sans-serif;
    font-size: 1.5vw;
    margin-bottom: 2vh;
    color: #444638;
}

.sectionDark h4 {
    color: #F9F8F5;
}

.sectionDark h3 {
    color: #D1CBB1;
}

.text-center {
    text-align: center;
}

.problemPointsItem {
    background-color: #F9F8F5;
    border-radius: 1vh;
    padding: 3vh 4vw;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: "Satoshi-Italic", sans-serif;
    font-weight: 500;
    width: 50vw;
    position: relative;
}

/* every 2nd 4th problemPointsItem in problemsList should be aligned to right side, and span also should be aligned accordingly */
.problemsList .problemPointsItem:nth-child(2n) {
    margin-left: auto;
}

.problemPointsItem span {
    position: absolute;
    top: -5vh;
    left: 4vw;
    font-size: 2vw;
    /* font-weight: bold; */
    color: #78563D;
    font-family: "Satoshi-Bold", sans-serif;
    font-weight: bold;
}

.problemsList .problemPointsItem:nth-child(2n) span {
    left: auto;
    right: 4vw;
}

.problemsList {
    padding: 10vh 0;
    display: flex;
    flex-direction: column;
    gap: 10vh;
}

.hightlightText {
    color: #78563D;
}

.canhelpyouinSection p {
    font-family: "Satoshi-Regular", sans-serif;
    font-size: 1.2vw;
    margin-bottom: 3vh;
    font-style: italic;
    border-bottom: .1vh solid #EDEDED;
    width: auto;
    line-height: 3;
    display: inline-flex;
}

.stackedCard {
    background-color: #F9F8F5;
    border-radius: 3vh;
    padding: 5vh 4vw;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: "Satoshi-Regular", sans-serif;
    /* width: 30vw; */
}

    .stackedCard h5 {
        font-family: "Satoshi-Medium", sans-serif;
        font-size: 1.5vw;
        margin-bottom: 2vh;
        color: #444638;
    }

.cardDesc {
    font-family: "Satoshi-Medium", sans-serif;
    font-size: 1.2vw;
    color: #8C8C8C;
    line-height: 1.5;
    padding-bottom: 3vh;
}

.pillsSection {
    /* padding: 2vh 0 1vh 0; */
}

.pillsHeading {
    font-family: "Satoshi-Bold", sans-serif;
    font-size: 1vw;
    margin-bottom: 2vh;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #444638;
    /* text-align: center; */
}

.pillsContainer {
    display: flex;
    gap: 1.5vw;
    flex-wrap: wrap;
}

.pills {
    background-color: #444638;
    color: #F9F8F5;
    font-family: "Satoshi-Light", sans-serif;
    font-size: 1vw;
    padding: 0.8vh 1.5vw;
    border-radius: 3vw;
}

.stackedupCardsContainer {
    position: relative;
    /* width: fit-content; */
    height: 55vh;
    margin-top: 36vh;
}

/* Stacked Cards */
.stackedCard {
    position: absolute;
    /* width: 30vw;
    height: 40vh;
    border-radius: 2vh; */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
    /* background-color: #F9F8F5;
    padding: 3vh 3vw; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* each stacked up card should be slightly shifted up by 15vh */
.stackedupCardsContainer .stackedCard:nth-child(3) {
    top: 0;
    left: 0;
    z-index: 3;
}

.stackedupCardsContainer .stackedCard:nth-child(2) {
    top: -14.5vh;
    left: 0;
    z-index: 2;
}

.stackedupCardsContainer .stackedCard:nth-child(1) {
    top: -29vh;
    left: 0;
    z-index: 1;
}

/* on hover it should come to front and with animation like floder coming to front */
.stackedupCardsContainer .stackedCard:hover {
    transform: translateY(-10vh) scale(1.05);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.9);
    z-index: 4;
}

    /* hovered card header should be in active color */
    .stackedupCardsContainer .stackedCard:hover h5 {
        color: #78563D;
    }

    /* while one stacked card is hovered the other two should be slightly dimmed */
    .stackedupCardsContainer .stackedCard:hover ~ .stackedCard,
    .stackedupCardsContainer .stackedCard:hover {
        opacity: 0.1;
    }

.stackedupCardsContainer .stackedCard:hover {
    opacity: 1;
}

.whitepaperCardList {
    display: flex;
    gap: 2vw;
    flex-wrap: wrap;
    padding: 1vh 0;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

    .whitepaperCardList a {
        text-decoration: none;
    }

.dateMinread {
    font-family: "Satoshi-Medium", sans-serif;
    font-size: 0.8vw;
    color: #444638;
    margin-bottom: 1vh;
}

.whitepaperCard {
    padding: 3vh 0vw;
    width: 25.5vw;
    border-bottom: transparent 0.3vh solid;
}

    .whitepaperCard:hover {
        /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
        border-bottom: #8C8C8C 0.3vh solid;
        /* transform: translateY(-5px); */
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .whitepaperCard:hover h2 {
            /* font-family: "Satoshi-Bold", sans-serif; */
            color: #78563D;
            font-size: 1.1vw;
        }

    .whitepaperCard p {
        font-family: "Satoshi-Light", sans-serif;
        font-size: 1.1vw;
        color: #444638;
        margin-bottom: 1vh;
        flex-wrap: wrap;
    }
    /* on hover to the .whitepaperCard image should scale up by 1.05 times with smooth transition. aslo when unhover, transition should smoothly scale back to original size */

    .whitepaperCard img {
        transition: transform .7s ease;
        width: inherit;
    }

    .whitepaperCard:hover img {
        transform: scale(1.05);
        transition: transform .8s ease;
    }

.exploreBtnPadding {
    padding: 2vh 4vw;
}

.sectionDark .whitepaperCard h2 {
    color: #F9F8F5;
}

.sectionDark h5 {
    color: #F9F8F5;
}

.sectionDark .dateMinread {
    color: #F9F8F5;
    opacity: .5;
}

.sectionDark .whitepaperCard p {
    color: #F9F8F5;
    opacity: .5;
}

.sectionDark .whitepaperCard:hover h2 {
    color: #D1CBB1;
}

.contactForm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2vh;
    /*padding-top: 5vh;*/
    /* width: 50vw; */
}

.formGroup {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5vh;
    width: 40vw;
    position: relative;
    height: 7vh;
    border-bottom: 1px solid #cacacac4;
    margin-top: 5vh;
}

    .formGroup label {
        position: absolute;
        font-family: "Satoshi-Medium", sans-serif;
        font-size: 1.1vw;
        left: 1vw;
        top: 1.5vh;
        color: #78563D;
        letter-spacing: 4px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .formGroup label.label-active {
        top: -2vh;
        left: 0.5vw;
        font-size: 0.9vw;
        padding: 0vh 0.3vw;
    }

    /* Keep label at top when input has value or placeholder is hidden */
    .formGroup input:not(:placeholder-shown) + label,
    .formGroup textarea:not(:placeholder-shown) + label {
        top: -2vh;
        left: 0.5vw;
        font-size: 0.9vw;
        padding: 0vh 0.3vw;
        transition: all 0.3s ease;
    }
   


        .formGroup label.required::after {
            content: '*';
            color: red;
            margin-left: 0.1vw;
        }

    /* when clicked on input or textarea the label should move to their original position, focus, focus visible, active states should move the label to up to their place,also if the content is filled in the text or placeholder is not visible of that text input then keep the label to yhe top only */
    



 /*   .formGroup input:focus + label,
    .formGroup textarea:focus + label,
    .formGroup input:focus-visible + label,
    .formGroup textarea:focus-visible + label

    {
        top: -2vh;
        left: 0.5vw;
        font-size: 0.9vw;
     
        padding: 0vh 0.3vw;
        transition: all ease-in .3s;
    }*/
    /* remove curved border of input and textarea completely */
    .formGroup input,
    .formGroup textarea {
        font-family: "Satoshi-Light", sans-serif;
        font-size: 1.1vw;
        padding: 1.8vh 1vw;
        border: 1px solid #ccc;
        border-radius: 0.5vh;
        border: none;
        width: 100%;
    }

        .formGroup input:focus,
        .formGroup textarea:focus {
            outline: none;
            border-color: #78563D;
        }

    .formGroup textarea {
        resize: vertical;
        min-height: 10vh;
    }

    .formGroup button {
        width: fit-content;
        padding: 1vh 2vw;
        font-family: "Satoshi-Medium", sans-serif;
        font-size: 1.1vw;
        background-color: #78563D;
        color: #F9F8F5;
        border: none;
        border-radius: 1.5vh;
        cursor: pointer;
    }

.formButtonSection {
    width: 100%;
    display: flex;
    justify-content: center;
}

footer {
    background-color: #444638;
    color: #D1CBB1;
    padding: 8vh 0vw 2vh 0vw;
    text-align: center;
    font-family: "Satoshi-Light", sans-serif;
    font-size: 1vw;
}

.footerLogo {
    margin-bottom: 2vh;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.footerLinks {
    margin-bottom: 2vh;
    display: flex;
    justify-content: center;
    gap: 4vw;
}

    .footerLinks a {
        color: #D1CBB1;
        text-decoration: none;
        font-family: "Satoshi-Light", sans-serif;
        font-size: 1.1vw;
    }

        .footerLinks a:hover {
            text-decoration: underline;
        }

    .footerLinks ul {
        list-style: none;
        display: flex;
        gap: 2vh;
        flex-direction: column;
        align-items: flex-end;
    }

.footerTagline {
    font-family: "Satoshi-Light", sans-serif;
    font-size: 1.2vw;
    margin-bottom: 1vh;
    color: #D1CBB1;
    display: block;
    padding: 2vh 0;
    width: 20vw;
    text-align: left;
    font-style: italic;
}

.footerAddressSection {
    display: flex;
    justify-content: flex-start;
    gap: 2vw;
    flex-wrap: wrap;
    margin-bottom: 2vh;
}

    .footerAddressSection a {
        display: inline-flex;
        gap: .5vw;
        align-items: center;
        justify-content: center;
        color: #D1CBB1;
        text-decoration: none;
        font-family: "Satoshi-Light", sans-serif;
        font-size: 1vw;
    }

.footerCopyrightSection {
    font-family: "Satoshi-Light", sans-serif;
    font-size: 0.9vw;
    color: #8C8C8C;
    opacity: .7;
    border-top: 1px solid #66666621;
    padding-top: 3vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;
    justify-content: space-between;
}

    .footerCopyrightSection div {
        flex: 1;
    }
    .footerCopyrightSection>div+div+div{
       text-align:right;
    }

    .footerCopyrightSection a {
        color: #8C8C8C;
        text-decoration: none;
    }



.thoughtleadershipLanding {
    height: 70vh;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 3vh;
    padding: 5vh 3vw;
    color: #F9F8F5;
    position: relative;
    overflow: hidden !important;
    /*bottom: 5vh;*/
    /*padding-top:35vh;*/
    display: flex;
    align-items: flex-end;
    gap: 2.5vw;
}

    .thoughtleadershipLanding h4 {
        color: #F9F8F5;
    }

    .thoughtleadershipLanding p {
        font-family: Satoshi-Light, sans-serif;
        font-size: 1.3vw;
        letter-spacing: .14vw;
    }

    .thoughtleadershipLanding a {
        position: relative;
        bottom: 5vh;
        right: 0vw;
        /*background-color: rgba(68, 70, 56, 0.7);*/
        padding: 1vh 1vw;
        border-radius: 1.5vh;
        font-family: "Satoshi-Medium", sans-serif;
        font-size: 1vw;
        color: #F9F8F5;
        text-decoration: none;
        transition: background-color 0.3s ease;
        width: 4vw;
    }

        .thoughtleadershipLanding a img {
             width: 3vw;
            
            /*height: auto;*/
            /*position: relative;*/
            /*top: .2vh;*/
        }

    .thoughtleadershipLanding span {
        font-family: "Satoshi-Light", sans-serif;
        font-size: 1vw;
        letter-spacing: .2vw;
    }

.tlDetailsPage {
    padding: 20vh 0vw 0vh 0vw;
}
hr {
    border: none;
    border-top: 1px solid #E0E0E0;
    margin: 4vh 0;
}
.tlDetailsPage h1 {
    font-family: "Satoshi-Bold", sans-serif;
    font-size: 1.9vw;
    margin-bottom: 2vh;
    color: #444638;
}
.publishedDetails {
    font-family: "Satoshi-Medium", sans-serif;
    font-size: .9vw;
    /*margin-bottom: 5vh;*/
    color:#78563D;
}
/*address dots before and only the second span in publishedDetails*/
    .publishedDetails span:nth-child(2) ::before {
        display: inline-block;
        position: relative;
        content: " ";
        width: .3vw;
        height: .3vw;
        background-color: #78563D;
        border-radius: 50%;
        margin: .5vh .5vw;
    }
.text-uppercase {
    text-transform: uppercase;
}
.readSectionContainer{
    padding:0vh 22vw;
}
.readSectionContainer h4{
    color:#78563D;
}
.readSectionContainer p{
    color:#444638;
    /*font-weight:600;*/
}
.tagsSection{
    padding-top:2vh;
    font-size:1.1vw;
    color:#78563D;
    font-family:Satoshi-Medium , sans-sarif;
}
    .tagsSection .flex{
        gap:.4vw 3.5vw;
        flex-wrap:wrap;
    }
.shareSection{
    display:flex;
    flex-direction:column;
    align-items:end;
    justify-content:flex-end;
}
    .shareSection .btn {
        display:flex;
        align-items:center;
        gap:.5vw;
        padding: 1vh 1.5vw;
        border: .2vh solid #78563D;
        color: #78563D;
        border-radius:4vh;
        font-size:1vw;
        font-family:"Satoshi-Medium", sans-serif;
    }
.textItalic{
    font-style:italic;
}
.contactPage{
    display:flex;
    flex-direction:row;
    gap:4vw;
    /*padding-bottom:10vh;*/


}
    .contactPage .contactForm{
        padding-top:0vh;
    }
    .contactPage .formGroup {
        width: 90%;
    }
.contactPage>div{
    flex:.6;
}
.contactPage>div+div{
    flex:.4;
    position:relative;
}
    .contactPage > div + div:before {
        content: " ";
        position: absolute;
        width: .2vh;
        height: 80%;
        background: #8c8c8c12;
        right: auto;
        left: 0;
        top:auto;
        bottom:auto;
    }
.contactInfoSection {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #444638;
    text-align:center;
    gap:2vh;
}
.contactInfoSection a{
    /*padding-bottom:2vh;*/
    font-size:1.5vw;
    color: #444638;
    text-decoration:none;
}
.formsubmittedSection{
    text-align:center;
    padding-top:5vh;
}
    .formsubmittedSection p{
        font-family:Satoshi-Italic;  
    }


.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 6;
}

.modal-body {
    background-color: white;
    border-radius: 1.3vw;
    padding: 20px;
    position: relative;
}
.modal-content {
    padding: 4vh 2vw;
}
/*.active {
    display: block !important;
}*/
.fullwidth{
        width:100% !important;
}
.halfwidth{
        width:48% !important;
}


.inactive {
    display: none !important;
}
.close-button {
    position: absolute;
    top: 2vh;
    right: 2vw;
    font-size: 2vw;
    font-weight: bold;
    color: #78563D;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
}
    .close-button:hover {
        color: #444638;
    }
.fade-out{
    animation: fadeOut 1s forwards;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}



/* Spacing Utility Classes */
.pt-5 {
        padding-top: 5vh;
    }

.pb-5 {
    padding-bottom: 5vh;
}

.pt-10 {
    padding-top: 10vh;
}

.pb-10 {
    padding-bottom: 10vh;
}

/* Flexbox Utility Classes */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.align-stretch {
    align-items: stretch;
}

.align-baseline {
    align-items: baseline;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.gap-3 {
    gap: 1.5rem;
}

.gap-4 {
    gap: 2rem;
}