/*  HERO  */
.hero {
    background: var(--green);
    height: 100svh;
/*        margin: 0 0 50px 0;*/
}
.hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}
.hero iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}


/*  HERO END  */

/*   SECTION DOUBLE   */
.sectionDouble {
    display: flex;
    flex-direction: column;
}
/*   SECTION DOUBLE END   */

/*   WHAT WE DO   */

.whatwedo .sectionLeft {
    display: flex;
    flex-direction: column;
}

.whatwedo .sectionLeft h3 {
    font-size: 12.82em;
    line-height: 2.8rem;
    color: var(--darkBlue);
    padding: 50px 35px 35px 15px;
}
.whatwedo .sectionLeft p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--darkGrey);
    padding: 0 15px;
}
.exploreLink {
    display: flex;
    height: 100px;
    align-items: center;
    width: calc(100% - 30px);
    margin: 0 15px;
    padding: 5px 0;
    position: relative;
    background: white;
}

.exploreLink a {
    color: var(--orange);
    text-decoration: none;
    font-size: 5.13em;
    border-bottom: 1px solid var(--orange);
}
.exploreLink a:before {
    content: "Explore ";
    color: var(--darkBlue);
}
.exploreLink img {
    transition: all 0.6s;
    width: 0.6em;
    padding: 0 0 0 5px;
}
.whatwedo .sectionRight {
    height: 50vh;
    display: flex;
    justify-content: center;
    background: url(/assets/images/what-we-do.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
}
/*    .whatwedo .sectionRight img {
    width: calc(100% - 30px);
    padding: 15px 15px;
}*/
/*   WHAT WE DO END   */

/*   EXPERTISE   */
.sectionUnique {
}
.sectionUnique .sectionInteractive {
    display: flex;
    flex-direction: column-reverse;
/*        padding: 0 0 50px 0;*/
}
.sectionUnique .sectionInteractive .sectionCanvas p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--darkGrey);
    padding: 0 15px 25px 15px;
}
.sectionUnique .sectionInteractive .sectionCanvas img {
    justify-content: space-between;
    width: 100%;
}
.sectionUnique .sectionInteractive .sectionControls {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 30px);
    padding: 0 15px;
    column-gap: 5px;
}
.sectionUnique .sectionInteractive .sectionControls span {
    font-size: 1rem;
    padding: 25px 0 10px;
    color: var(--midGrey);
    width: 30%;
    cursor: pointer;
    width: fit-content;
}
.sectionUnique .sectionInteractive .sectionControls span:hover {
    color: var();
}
.sectionUnique .sectionInteractive .sectionControls span.active {
    color: var(--darkBlue);
    border-bottom: 1px solid var(--darkBlue);
}

.expertise {
    display: flex;
    justify-content: center;
    font-size: 12.82em;
    color: var(--darkBlue);
    padding: 25px 15px;
}

.designImg {
    position: relative;
    transition: opacity 0.2s;  
    opacity: 1;
}

.fadeOut {
    opacity: 0;
}

/*   EXPERTISE END   */


/*   SECTION SOLO, OUR PRODUCT   */
.heading {
    display: flex;
    justify-content: center;
    font-size: 12.82em;
    color: var(--darkBlue);
    padding: 25px 15px;
}
.ourProduct .productContent {
    background: url(/assets/images/our_product.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 400px;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.ourProduct .productContent p {
    font-size: 4.5em;
    line-height: 1.5rem;
    color: var(--darkGrey);
    padding: 25px 15px;
}
/*   SECTION SOLO, OUR PRODUCT END   */

/*   LOGO ANIM          */

.logoAnim {
display: flex;
align-items: flex-end;
opacity: 1;
transition: all 1s ease-out;
/*    background: #c6cdce;*/
}
#logoVideo {
width: 100%;
transition: all 1s ease-out;
}

.fadeVideo {
opacity: 0;
}
.reduceHeight {
height: 10px;
}

/*   LOGO ANIM END      */


/*   
GET INSPIRED
*/

.getInspired {
background: white;
/*    padding: 50px 0 0;*/
}
.getInspired .heading {
color: var(--darkBlue);
font-size: 12.82em;
}
.getInspired .carousal {
display: flex;
overflow: hidden;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
/*    margin: 50px 0 0;*/
scroll-snap-type: x mandatory;
}
.getInspired .carousal .carousalSlide {
width: 100vw;
scroll-snap-align: center;
}
.getInspired .carousal img {
aspect-ratio: 1 / 1;
height: 100vw;
object-fit: cover;
transition: all 0.5s ease-in-out;
}

.carousalSlide a {
position: relative;
height: 100vw;
width: 100vw;
display: flex;
}

.carousalSlide a:hover img {
filter: brightness(30%);
z-index: 2;
}

.carousalSlide span {
display: flex;
align-items: end;
padding: 0 0 10% 10%;
position: absolute;
font-size: var(--fs-subheading);
color: white;
width: calc(100% - 10%);
z-index: 5;
left: 0;
height: calc(100% - 10%);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
text-transform: uppercase;
}
/*   
GET INSPIRED END
*/

/*    LARGE SCREEN    */
@media only screen and (min-width: 650px) 
{
/*  HERO  */
    .hero {
        background: var(--green);
    }
/*  HERO END  */

/*   WHAT WE DO   */
    .whatwedo .sectionRight, .whatwedo .sectionLeft {
        width: 50%;
    }

    .whatwedo {
        flex-direction: row;
    }
    .whatwedo .sectionLeft {
        justify-content: center;
    }
    .whatwedo .sectionRight {
        height: 100vh;
        justify-content: flex-end;
        background: url(/assets/images/what-we-do.jpg);
        background-repeat: no-repeat;;
        background-size: 50%;
        background-attachment: fixed;
        background-position: top right;
    }
    .whatwedo .sectionRight img {
        padding: 0;
        height: auto;
        width: 100%;
    }
    .whatwedo .sectionLeft h3 {
        font-size: 7.46em;
        line-height: 0.9em;
        padding: 0 50px;
    }
    .whatwedo .sectionLeft p {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
        width: 50%;
        padding: 50px 50px 0 50px;
    }
    .exploreLink {
        padding: 5px 35px;
        width: calc(100% - 85px);
        background: white;
    }
    .exploreLink a {
        font-size: 1.33em;
    }

    @keyframes linkAnimation {
        0% { 
            transform: translateX(-200px);
            opacity:0; 
        }
        100% { 
            transform: translateX(0px);
            opacity: 1;
        }
    }
    .exploreLink a:hover img {
        animation-name: linkAnimation;
        animation-duration: 0.6s;
    }
/*   WHAT WE DO, END   */


.carousalSlide a span {
    opacity: 0;
    transition: opacity 1s ease-in;
    font-size: 1.5em;
}
.carousalSlide a:hover span {
    opacity: 1;
}

/*   EXPERTISE   */
    .sectionUnique {
        perspective: 1px;
        transform-style: preserve-3d;
    }
    .expertise {
        position: relative;
/*            top: 140px;
        z-index: -1;*/
        font-size: 11em;
    }
    .sectionUnique .sectionInteractive {
        flex-direction: row;
    }
    .sectionUnique .sectionInteractive .sectionCanvas {
        display: flex;
        flex-direction: row;
/*            align-items: center;*/
        width: 100%;
    }
    .sectionUnique .sectionInteractive .sectionCanvas p {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
        width: 40%;
        margin: 0 50px 0 0;
        padding: 0;
    }
    .sectionUnique .sectionInteractive .sectionControls {
        width: 30%;
        padding: 0 50px 100px 50px;
        flex-direction: column;
        justify-content: center;
    }
    .sectionUnique .sectionInteractive .sectionCanvas picture {
/*            position: absolute;*/
        top: 340px;
        left: 60%;
        width: 25%;
        transition: all 0.5s ease-out;
        transform: "translateY(350px)";
        z-index: 100;
    }
    .sectionUnique .sectionInteractive .sectionControls span {
        font-size: 1.1em;
        text-transform: uppercase;
        border-bottom: none !important;
        padding: 0.2em 0;
        width: unset;
        cursor: pointer;
    }
    /* .sectionUnique .sectionInteractive .sectionControls span:hover {
        color: var();
    } */
    .sectionUnique .sectionInteractive .sectionControls span:hover {
        color: var(--darkBlue);
    }
    .designImg {
        position: absolute !important;
    }
/*   EXPERTISE END   */

/*  OUR PRODUCT  */
    .ourProduct {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 3em 0 0;
    }
    .ourProduct .heading {
        font-size: 11em
    }
    .ourProduct .productContent {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 50em;
        background-position: center center;
        background-size: auto 50em;

    }
    .ourProduct .productContent p {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
        width: 20%;
        padding: 25px 50px;
    }
/*  OUR PRODUCT END  */

/*   
    GET INSPIRED
*/
.getInspired .carousal .carousalSlide {
    width: calc(100% / 3);
    scroll-snap-align: center;
}
.getInspired .heading {
    display: block;
/*        font-size: 7.46em;*/
    font-size: 11em;
    text-align: center;
    width: calc(100% - 30px);
}
.carousalSlide a {
    height: auto;
    width: 100%;
}

.getInspired .carousal img {
    height: fit-content;
    width: calc(100vw / 3);
}

.getInspired .carousal {
    overflow: hidden;
    scroll-snap-type: none;
}

.getInspired .carousal .carousalSlide {
    transform: translateX(2000px);
}
.getInspired .carousal .carousalSlide:nth-child(1) {
    transition: all 1s;
}
.getInspired .carousal .carousalSlide:nth-child(2) {
    transition: all 1.5s;
}
.getInspired .carousal .carousalSlide:nth-child(3) {
    transition: all 2s;
}

/*   
    GET INSPIRED END
*/


}
@media only screen and (min-width: 768px) and (orientation: portrait) {
/*
    WHAT WE DO
*/
    .whatwedo .sectionRight {
        height: 100vh;
    }
/*
    WHAT WE DO END
*/



/*   EXPERTISE   */
    .expertise {
        position: relative;
        top: 80px;
    }
    .sectionUnique .sectionInteractive .sectionCanvas p {
        padding: 0;
    }
    .sectionUnique .sectionInteractive .sectionControls {
        padding: 0 50px 0 50px;
    }
/*   EXPERTISE END   */
}