:root {
    --main-light-shadow: #e6eaef;
    --main-light: #f2f4f7;
    --main-darker: #0e121b; /* unused */
    --main-dark: #151b28;
    --main-middle-dark: #2a3650;
    --main-middle: #36507d;
    --main-accent: #66ffcc;
    --main-accent-2: #fd6554;
    --main-accent-2-saturated: #ff3d24;

    --default-font-size: 3.3rem;
    --secondary-font-size: 2.4rem;

    --gradient-1: rgba(59, 68, 237, 1);

    --default-margin: 6rem;
    --half-margin: 3rem;
    --heading-margin: 6rem;

    --light-gray: rgb(209 213 219);
    --light-gray: rgb(223, 226, 232);
    --dark-gray: rgb(107 114 128);

}

html{
    background-color: rgb(249 250 251);
    scroll-behavior:smooth;
}

#what-we-do{flex-direction: row;}

@media screen and (min-width: 1024px ){  /* When greater than this amount */
    #top-section{background-image: none !important;}
}

@media screen and ( max-width: 769px ) {  /* When less than this amount */
    #what-we-do { flex-direction: column;}
    #intro-section{ padding-right: 6rem;}

}

@media (min-width: 1024px) {
    .top_section_padding {padding-right: 4rem;}

}


.animate-spin-slower {
    animation: spin 6s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
.animate-spin-slow {
    animation: spin 4s linear infinite;
}
@keyframes spin-reverse {
    to {
        transform: rotate(-1turn);
    }
}
.animate-spin-reverse-slower {
    animation: spin-reverse 6s linear infinite;
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.animate-fade-in {
    animation: fade-in 0.5s linear forwards;
}

.intro-section-bar {
    width: 2.6rem;
    background-color: var(--main-accent-2);
    border-radius: 2.6rem;
}

.z-10 {z-index: 10;}

.p-4{padding: 1rem;}
.p-8{padding: 2rem;}
.w-4{width: 1rem;}
.w-6{width: 1.5rem;}
.w-8{width: 2rem;}

.box_shadow{
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}

.button{
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: bold;
    padding-left: 24px !important;
    padding-right: 24px !important;
    border: none;
    border-radius: .3rem !important;
    transition: all .2s;
}

.rounded{
    border-radius: .3rem !important;
}

.rounded-xl{
    border-radius: 1rem;
}

.hover_shadow_bottom{transition: .1s}
.hover_shadow_bottom:hover{
    box-shadow: 0 0 1.2rem 0 rgba(0, 0, 0, 0.2);
}

.gray_hover:hover{
    background-color: rgb(240,240,240);
}

.float_button:hover{
    transform: translateY(-0.15rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    transition: all .2s;
}


.hover_white:hover{
    background-color: rgba(255,255,255,.03);
    transition-duration: .2s;
    cursor: pointer;
}

.hover_white[selected] {
    background-color: rgba(255,255,255,.06);
    transition-duration: .5s;
}


#carousel {
  width: calc(100% * var(--slide-count));
  display: flex;
}

#carousel-container {
    /* overflow: -moz-scrollbars-none;*/  /* Firefox? */
    padding-bottom: .5rem;
    -ms-overflow-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    --slide-count: 3;
    -webkit-overflow-scrolling: touch
}

/* #carousel-container::-webkit-scrollbar { width: 0 !important } */

.slide {
  scroll-snap-align: start;
    width: 100%;
}

.slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}









.footer {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 5rem;
    padding: 6rem;
    padding-top: 12rem;
    padding-bottom: 12rem;
    background-color: black;
    font-size: 2.5rem;
    line-height: 6rem;
    width: 100%;
    align-items: center;


    justify-content: center;
}

.footer-logo-text{
    font-family: "Montserrat", sans-serif;
    color: #eee;
    font-size: 1rem;
    letter-spacing: 0.6rem;
}

.footer div {
    text-align: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer-logo img {
    height: 2rem;
    margin-right: 1rem;
}

.header-dot{
    color: var(--main-accent-2-saturated);
    font-size: 5.2rem;
    line-height: 0;
    display: inline;
    margin-left: .1rem;
}

.nav_li{
    cursor: pointer;
    padding-left: 1rem;
    border-bottom: 1px solid rgba(0,0,0,.2);
    transition: .1s;
}

.nav_li:hover{
    background-color: rgba(0,0,0,.03);
}