@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/fonts/GTWalsheimPro-Medium.woff2') format('woff2'),
        url('/fonts/GTWalsheimPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('/fonts/GTWalsheimPro-Light.woff2') format('woff2'),
        url('/fonts/GTWalsheimPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ArialMt';
    src: url('/fonts/ArialMT.woff2') format('woff2'),
        url('/fonts/ArialMT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@media(max-width:1400px) {
    html {
        font-size: 80%;
    }
}


:root {
    --color--main: #270036;
    --color--secondary: #c1580a;

    --trans--main: .3s all ease-out;

    --header-height: 8rem;

    --color-blackbtnhover: #c60afc;
}

body {
    font-family: 'GT Walsheim Pro', sans-serif;
    font-weight: 300;
    position: relative;
    overflow-x: hidden;
    /* position: relative;
    background: url("/images/vector1.png");
    background-repeat: no-repeat;
    background-size: contain; */
}

body.mmenu-open {
    overflow-y: hidden;
}





/* general */

.vector--img {
    position: absolute;
    pointer-events: none;
    opacity: .5;
}

.main--container {
    max-width: 111.25rem;
    margin: auto;
    padding: 0 2rem;
}


.main--btn {
    /* max-width: 18.875rem; */
    /* width: 100%; */
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 3.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100rem;
    gap: 1rem;
    font-size: 1.5rem;
    border: 1px solid black;
    padding: 0 3rem;
    transition: var(--trans--main);
}

.main--btn i {
    font-size: 1.25rem;
}



.main--btn.filled {
    background: black;
    color: white;
}

.main--btn:hover {
    background: var(--color-blackbtnhover);
    color: white;
    border-color: var(--color-blackbtnhover);
}

.main--btn.secondary {
    border-color: var(--color--secondary);
    color: var(--color--secondary);
}

.main--btn.secondary:hover {
    background: var(--color--secondary);
    color: white;
}

.main--title {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2rem;
    position: relative;
    /* flex-wrap: wrap; */

}

.main--title img {
    max-width: 70vw;
}

.main--title::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    height: .5rem;
    background: black;
    opacity: 0;
    transition: var(--trans--main);
}

.main--title i {
    font-size: max(9vw, 1rem);
    opacity: 0;
    transition: var(--trans--main);
}

.main--title:hover::after {
    opacity: 1;
}

.main--title:hover i {
    opacity: 1;
}

section {
    /* padding: 0 2rem; */
    margin: 12rem 0;
    position: relative;
    z-index: 9;
}

@media(max-width:991px) {
    section {
        margin: 9rem 0;
    }
}

.fz--364 {
    font-size: max(17vw, 4rem);
    line-height: .85;
}

.fz--365 {
    font-size: max(15vw, 4rem);
    line-height: .85;
}

.color--main {
    color: var(--color--main);
}

.color--secondary {
    color: var(--color--secondary);
}

.bg--main {
    background: var(--color--main);
}


.team--image {
    max-width: 12.75rem;
    width: 100%;
    background: lightgrey;
    aspect-ratio: 1;
    border-radius: 100%;
}

/* end general */




/* header */
header {
    height: var(--header-height);
    position: relative;
    background: white;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: var(--trans--main);
}

header.shrinked {
    height: calc(var(--header-height) * .8);
}



.nav-logo {
    max-width: 14.125rem;
    width: 100%;
}

.mmenu-trigger {
    /* background: red; */
    width: 3rem;
    height: 3rem;
    position: relative;
}


.mmenu-trigger .vertical,
.mmenu-trigger .horizontal {
    width: 100%;
    height: 4px;
    background: black;
    position: absolute;
    left: 0;
    transition: var(--trans--main);
}

.mmenu-trigger .horizontal.white {
    background: white;
}

nav {
    height: 100%;
    display: flex;
    align-items: center;
    transition: var(--trans--main);
}

/* nav.mmenu-open .mmenu-trigger .horizontal{
    background: white;
}

nav.mmenu-open .mmenu-trigger .vertical{
    opacity: 0;
} */

.mmenu-trigger .vertical {
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.mmenu {
    background: var(--color--main);
    color: white;
    line-height: 1.1;
    /* padding: 7rem 0 8rem; */
    font-weight: 300;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    z-index: 99;
    left: 0;
    width: 100%;
    top: 0;
    /* margin-top:  var(--header-height); */
    transition: 1s all ease-in-out;
    /* overflow-y: auto; */
    height: 100vh;
    -webkit-clip-path: circle(at calc(100% - 7.25rem) 3.7rem);
    clip-path: circle(0 at calc(100%) 0);
}

.mmenu .nav-like {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 2rem !important;
}

.mmenu .nav-like.shrinked {
    height: calc(var(--header-height) * .8);
}

.mmenu .main--container {
    padding: 2rem;
    max-width: 111.25rem;
    margin: auto;

}

/* .mmenu::-webkit-scrollbar{
    display: none;
} */

nav.mmenu-open .mmenu {
    opacity: 1;
    pointer-events: unset;
    -webkit-clip-path: circle(200rem at calc(100% - 7.25rem) 3.7rem);
    clip-path: circle(200% at calc(100%) 0);
}

.mmenu ul {
    max-width: 100rem;
    padding-top: 4rem;
    margin-right: 6.875rem;
    margin-left: auto;
    padding: 2rem;
    max-height: 80vh;
    padding-bottom: 4vh;
    overflow-y: auto;
}

.mmenu ul::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.mmenu ul {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


.mmenu li {
    display: flex;
    /* gap: 5.375rem; */
    margin-bottom: 2rem;
    opacity: 0;

}

.mmenu .left {
    font-size: max(4rem, 12vh);
    white-space: nowrap;
    flex: 1 1 100%;
    transition: var(--trans--main);
    max-width: 40rem;

}

.mmenu .hover-item li {
    position: relative;
}

.mmenu .hover-item .left::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: white;
    opacity: 0;
    transition: var(--trans--main);
}


.mmenu .hover-item:hover .left::after {
    opacity: 1;
}

.mmenu .hover-item span {
    opacity: 0;
    transition: var(--trans--main);
}

.mmenu .hover-item:hover a::after {
    opacity: 1;
}



.mmenu .right {
    font-size: max(1rem, 3vh);
    /* padding-top: 3rem; */
    opacity: 0;
    transition: var(--trans--main);
    align-self: flex-end;
    width: 45rem;
    position: absolute;
    top: 1rem;
    right: -45rem;
    padding-left: 2rem;
}


.mmenu .hover-item:hover .right {
    opacity: 1;
}

.mmenu .hover-item.hasText span {
    opacity: 0;
}

.mmenu .hover-item.hasText:hover span {
    opacity: 1;
}

@media(max-width:1779px) {

    /* .mmenu {
        -webkit-clip-path: circle(0 at calc(100% - 3rem) 4rem);
        clip-path: circle(0 at calc(100% - 3rem) 4rem);
    } */

    .mmenu-trigger {
        width: 2rem;
        height: 2rem;
    }

    .mmenu .left {
        font-size: 4rem;
    }

    .mmenu ul {
        padding-top: 5rem;
    }

    .mmenu li {
        gap: 0 3rem;
    }

    .mmenu .right {
        font-size: 1.75rem;
    }
}

@media(max-width:991px) {
    .mmenu .right {
        display: none;
    }

    .mmenu .left span {
        display: none;
    }
}

/* End header */
.home-3 {
    position: relative;
    overflow: hidden;
}

.vector--img.sec-header {
    right: 0;
    top: 0;
}

.sec-1.vector--img {
    top: 20vh;
    left: 0;
}


.sec-2.vector--img {
    top: 150vh;
    right: 0;
}

.sec-3.vector--img {
    top: 160vh;
    left: 0;
}



.home-3 .vector--img {
    width: 100%;
    left: 0;
    bottom: 0;
}

.home-4 {
    background: rgba(193, 89, 10, 0.1);

}

.home-4 .main--container {
    z-index: 2;
    position: relative;
}

.home-4::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/vector_4.png");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .3;
    z-index: 0;
}


.tracking-75 {
    letter-spacing: -1.375rem;
}

@media(max-width:767px) {
    .tracking-75 {
        letter-spacing: -.3rem;
    }
}


/* footer */
footer {
    position: relative;
    background: #170026;
}



footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/images/footer_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    opacity: .8;
    filter: grayscale(90%);

}

footer a {
    transition: var(--trans--main);
}

footer a:hover {
    color: #69757f;
}

footer .social-wrap a {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    border: 1px solid white;
    display: grid;
    place-items: center;
}

footer .social-wrap a:hover {
    border-color: #69757f;
}

/* end footer */




/* about */
.about--card--wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.about--card--wrap.three{
    grid-template-columns: repeat(3, 1fr);
}

.about--card--wrap img {
    -o-object-fit: cover;
       object-fit: cover;
}

@media(max-width:1199px){
    .about--card--wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .about--card--wrap.three{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:767px){
    .about--card--wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about--card--wrap.three{
        grid-template-columns: repeat(2, 1fr);
    }
}

.truncate-text{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*end about */


/* TIMELINE
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul {
    padding: 50px 0;
}

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 1px;
    margin: 0 auto;
    padding-top: 0;
    background: #fff;
}

.timeline ul li::after {
    content: "";
    position: absolute;
    left: -4px;
    top: 5px;
    /* transform: translateX(-50%); */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: inherit;
    z-index: 1;
}

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 400px;
    padding: 15px;
    /* background: #f45b69; */
}

.timeline ul li div::before {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ul li:nth-child(odd) div {
    left: 45px;
}

/* .timeline ul li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent white transparent transparent;
  } */

.timeline ul li:nth-child(even) div {
    left: -439px;
    text-align: right;
}

/* .timeline ul li:nth-child(even) div::before {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent white;
  } */

time {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}


/* EFFECTS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
    transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
    background: white;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
    transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
    transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
    padding: 0;
    padding-bottom: 5rem;
}


/* GENERAL MEDIA QUERIES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
    .timeline ul li div {
        width: 250px;
    }

    .timeline ul li:nth-child(even) div {
        left: -289px;
        text-align: left;
        /*250+45-6*/
    }
}

@media screen and (max-width: 600px) {
    .timeline ul li {
        margin-left: 20px;
    }

    .timeline ul li div {
        width: calc(100vw - 91px);
    }

    .timeline ul li:nth-child(even) div {
        left: 45px;
    }

    .timeline ul li:nth-child(even) div::before {
        left: -15px;
        /* border-width: 8px 16px 8px 0; */
        /* border-color: transparent #f45b69 transparent transparent; */
    }
}


/* EXTRA/CLIP PATH STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline-clippy ul li::after {
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.timeline-rhombus ul li::after {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.timeline-rhombus ul li div::before {
    bottom: 12px;
}

.timeline-star ul li::after {
    -webkit-clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
            clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
}

.timeline-heptagon ul li::after {
    -webkit-clip-path: polygon(50% 0%,
            90% 20%,
            100% 60%,
            75% 100%,
            25% 100%,
            0% 60%,
            10% 20%);
            clip-path: polygon(50% 0%,
            90% 20%,
            100% 60%,
            75% 100%,
            25% 100%,
            0% 60%,
            10% 20%);
}

.timeline-infinite ul li::after {
    -webkit-animation: scaleAnimation 2s infinite;
            animation: scaleAnimation 2s infinite;
}

@-webkit-keyframes scaleAnimation {
    0% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.25);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes scaleAnimation {
    0% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.25);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}



.about-partnerships a {
    width: 100%;
}

.about-partnerships img {
    max-width: 20rem;
    width: 100%;
    aspect-ratio: 320/185;
    -o-object-fit: contain;
       object-fit: contain;
    margin: auto;
}


input,
textarea,
select {
    transition: var(--trans--main);
    background: #f8eef8;
    font-size: 1.375rem !important;
    font-weight: 300 !important;
}

select>option {
    font-weight: 300 !important;
}

input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
    font-size: 1.375rem !important;
    font-weight: 300 !important;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
    font-size: 1.375rem !important;
    font-weight: 300 !important;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    font-size: 1.375rem !important;
    font-weight: 300 !important;
}


input:focus,
textarea:focus,
select:focus {
    outline: unset;
    border-color: var(--color--main);
}




/* contact */
.contact-social-wrap a {
    color: #3f3e3e;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    border: 1px solid #3f3e3e;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

/* end contact */




/* width */
.custom--scrollbar::-webkit-scrollbar {
    width: 4px;
}

/* Track */
.custom--scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.custom--scrollbar::-webkit-scrollbar-thumb {
    background: var(--color--main);
}

.custom--scrollbar {
    scrollbar-color: var(--color--main) lightgrey;
    scrollbar-width: thin;
}


a[href=""],
a[href="#"] {
    pointer-events: none;
}
