/* Variables */
:root {
    --primary-color: #1D1D33;
    --secondary-color: #821BEE;
    --tertiary-color: #51C29F;

    --primary-font: "capitana", sans-serif;

    --super-h1-font-size: 64px;
    --super-h1-line-height: 1.4;
    --h1-font-size: 50px;
    --h1-line-height: 1.3;
    --h2-font-size: 36px;
    --h2-line-height: 1.4;
    --h3-font-size: 24px;
    --h3-line-height: 1.4;
    --h4-font-size: 18px;
    --h4-line-height: 1.75;
    --h5-font-size: 16px;
    --super-p-font-size: 18px;
    --super-p-line-height: 1.75;
}

/* Container */
@media(min-width: 1550px) {
    .container {
        max-width: 1600px;
    }
}

/* Body */
body {
    font-family: var(--primary-font);
}

/* Typography */
.super-h1 {
    font-size: 64px;
    line-height: var(--super-h1-line-height);
}

.super-p {
    font-size: var(--super-p-font-size);
    line-height: var(--super-p-line-height);
}

h1,
.h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: 400;
}

h2,
.h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: 400;
}

h3,
.h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-weight: 400;
}

h4,
.h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    font-weight: 400;
}

h5,
.h5 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    font-weight: 400;
}

@media(max-width: 1024px) {
    .super-h1 {
        font-size: var(--h2-font-size);
        line-height: var(--h2-line-height);
    }

    h1,
    .h1 {
        font-size: var(--h2-font-size);
        line-height: var(--h2-line-height);
    }

    h2,
    .h2 {
        font-size: var(--h3-font-size);
        line-height: var(--h3-line-height);
    }

    h3,
    .h3 {
        font-size: var(--h4-font-size);
        line-height: var(--h4-line-height);
    }

    h4,
    .h4 {
        font-size: var(--h5-font-size);
        line-height: var(--h5-line-height);
    }

    h5,
    .h5 {
        font-size: 14px;
    }


}

/* Header */
#menu-main-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}



.navbar-wrapper {
    background-color: var(--primary-color);
}

.navbar,
.sticky .navbar {
    background-color: unset;
    padding: 0px;
}

.navbar .header-logo,
.navbar.menu-open .header-logo,
.not-sticky .navbar.menu-closed .header-logo {
    max-width: 200px !important;
}

.sticky .navbar {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar-inner {
    border-bottom: 1px solid #ffffff;
    padding-top: 30px;
    padding-bottom: 30px;
    transition: all .3s ease-in-out;
}

.sticky .navbar-inner {
    border-color: transparent;
    padding-bottom: 20px;
}

.nav-link {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    transition: all .3s ease-in-out;
}

.nav-link:focus,
.nav-link:hover {
    opacity: 0.75;
    color: #ffffff;
    text-decoration: underline;
}

.navbar-toggler {
    color: #ffffff;
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
    background-color: #ffffff !important;
}

.full-screen-menu {
    background-color: var(--primary-color);
}

.full-screen-menu .nav-link {
    color: #ffffff;
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-weight: 500;
    transition: all .3s ease-in-out;
}

.full-screen-menu .new-emf-btn {
    max-width: unset;
}


@media(max-width: 1024px) {
    .navbar-inner {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .sticky .navbar-inner {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .sticky .navbar {
        min-height: 80px !important;
    }

    .navbar .header-logo,
    .navbar.menu-open .header-logo,
    .not-sticky .navbar.menu-closed .header-logo,
    .sticky .navbar.menu-closed .header-logo {
        max-width: 180px !important;
    }

    /* Hero Block - Badge Positioning & Sizing */

}

/* Footer */
.footer {
    padding: 50px 0px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    margin-top: -40px;
    z-index: 10;
    position: relative;
}

.footer-menu .menu-item {
    width: 33.33%;
}

.footer-menu .menu-item a {
    font-size: 16px;
}

.social-link i {
    font-size: 24px;
}

.sub-footer {
    padding-bottom: 50px;
}

@media(max-width: 1400px) {
    .footer-menu .menu-item {
        width: auto;
    }
}

/* Buttons */
.new-emf-btn {
    padding: 10px 20px;
    max-width: 220px;
    width: 100%;
    text-align: center;
    border: 1px solid transparent;
}

.new-emf-btn-primary {
    background-color: var(--secondary-color);
    color: #ffffff;
    border-color: var(--secondary-color);
}

.new-emf-btn-secondary {
    background-color: #ffffff;
    color: var(--primary-color);
    border-color: #ffffff;
}

.new-emf-btn-tertiary {
    background-color: transparent;
    color: #ffffff;
    border-color: var(--tertiary-color);
}

.new-emf-btn-primary:hover,
.new-emf-btn-secondary:hover {
    background-color: var(--primary-color);
}

.new-emf-btn-tertiary:hover {
    background-color: var(--tertiary-color);
}



/*Backgrounds */
.bg-fruit-1 {
    background-image: url('../img/emf-texture-1.jpg');
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.bg-fruit-2 {
    background-image: url('../img/emf-texture-2.jpg');
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.bg-fruit-1:before,
.bg-fruit-2:before,
.bg-element:before,
.bg-storm:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.75); */
    background-color: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

.bg-storm {
    background-image: url('../img/emf-texture-4.jpg');
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.bg-element {
    background-image: url('../img/emf-texture-3.jpg');
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}


/* Carousel */

.testimonial-slider .splide__arrows .splide__arrow {
    top: 50%;
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 9999px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.splide__arrows .splide__arrow svg {
    fill: white;
    height: 20px;
    width: 20px;
}

.testimonial-slider .quote {
    font-style: italic;
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.quote-icons svg:nth-of-type(1) {
    top: unset;
    left: unset;
}

.quote-icons h3 {
    font-size: var(--h2-font-size);
    list-style: var(--h2-line-height);
}

.our-work-slider .splide__track {
    overflow: visible;
}

.our-work-slider .splide__arrows .splide__arrow {
    position: static;
    transform: unset;
    background-color: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 9999px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.our-work-slider .splide__arrows .splide__arrow svg {
    fill: var(--primary-color) !important;
    height: 20px;
    width: 20px;
}

.work-post-slide .post-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
}

.work-post-slide .post-img img {
    transition: all 0.3s ease-in-out !important;
    transform: scale(1) !important;
}

.work-post-slide:hover .post-img img {
    transform: scale(1.025) !important;
    opacity: 0.9;
}

.work-post-slide .card-body {
    padding: 20px 0px 0px 0px;
    max-width: 80%;
}

.work-post-slide h4,
.work-post-slide p,
.work-post-slide span,
.work-post-slide a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.client-slider .splide__arrow,
:is(.bg-light-purple, .bg-white) .testimonial-slider .splide__arrows .splide__arrow {
    background-color: transparent !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 9999px;
    box-shadow: none;
    width: 50px !important;
    height: 50px !important;
}


.client-slider .splide__arrow svg,
:is(.bg-light-purple, .bg-white) .testimonial-slider .splide__arrows .splide__arrow svg {
    fill: var(--primary-color) !important;
}

.client-slider .splide__arrow svg {
    width: 20px !important;
    height: 20px !important;
}

@media(max-width: 1024px) {

    .splide__arrows .splide__arrow,
    :is(.bg-light-purple, .bg-white) .testimonial-slider .splide__arrows .splide__arrow {
        width: 30px !important;
        height: 30px !important;
    }

    .quote-icons h3 {
        font-size: var(--h3-font-size);
        list-style: var(--h3-line-height);
    }

    .splide__arrows .splide__arrow svg {
        width: 10px !important;
        height: 10px !important;

    }

    .splide__arrows .splide__arrow--prev {
        left: 0px;
    }

    .splide__arrows .splide__arrow--next {
        right: 0px;
    }

    .testimonial-slider .quote {
        max-width: 320px;
    }

    .client-slider .splide__arrow {
        padding: 0px;
    }
}


/* Vertical Awards Slider */


.vertical-awards-slider .splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vertical-awards-slider .award-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.vertical-awards-slider .splide__slide img {
    max-height: 125px;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}


.vertical-awards-slider .splide__arrows .splide__arrow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ensure these responsive overrides are applied by increasing specificity and using a standard media query
   (also remember to hard-refresh the browser or bust cache to see the updated stylesheet). */
@media (max-width: 768px) {
    html body .vertical-awards-slider .award-slide img {
        max-width: 240px;
        margin: 0 auto;
    }

    html body .vertical-awards-slider .award-slide .award-title {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: var(--h5-font-size) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .vertical-awards-slider .award-slide {
        gap: 10px;
    }
}