html::-webkit-scrollbar {
    display: none;
}

*{
    box-sizing: border-box;
}

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

.na-container,
.container {
    max-width: 1400px;
    position: relative;
    width: 100%;
    height: 100%;
    /* padding: 0 20px; */
    margin: 0 auto;
}


ul,
p {
    padding: 0;
    margin: 0;
    z-index: 9;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}



section {
   
    /* position: relative; */
    z-index: 9;
}

/* ---- [Fonts Family] ---- */


.georgia-700 {
    font-family: 'Georgia';
    font-style: normal;
    font-weight: 700;
}

.georgia-400 {

    font-family: 'Georgia';
    font-style: normal;
    font-weight: 400;
}

.commons-700 {
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 700;
}

.commons-600 {
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 600;
}

.commons-500 {
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 500;
}

.commons-400 {
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 400;
}

.commons-300 {
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 300;
}

.commons-250 {
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 250;
}


/* ---- [Fonts Size] ---- */

.s-72 {
    font-size: 72px;
    line-height: 85.5%;
}

.s-64 {
    font-size: 64px;
    line-height: 150%;
}

.s-64-100 {
    font-size: 64px;
    line-height: 100%;
}

.s-64-120 {
    font-size: 64px;
    line-height: 120%;
}

.s-64-88 {
    font-size: 64px;
    line-height: 88.9%;
}

.s-50 {
    font-size: 50px;
    line-height: 59px;
}

.s-48 {
    font-size: 48px;
    line-height: 105.5%;
}

.s-48-85 {
    font-size: 48px;
    line-height: 85.5%;
    letter-spacing: -0.02em;
}
.s-48-125 {
    font-size: 48px;
    line-height: 125%;
    letter-spacing: -0.02em;
}

.s-42 {
    font-size: 42px;
    line-height: 80%;

}

.s-40 {
    font-size: 40px;
    line-height: 120%;
}

.s-40-149 {
    font-size: 40px;
    line-height: 149.4%;

}

.s-36 {
    font-size: 36px;
    line-height: 150%;
}

.s-36-120 {
    font-size: 36px;
    line-height: 120%;
}

.s-32 {
    font-size: 30px;
    line-height: 32px;
}

.s-30 {
    font-size: 30px;
    line-height: 166.9%;
}

.s-24 {
    font-size: 24px;
    line-height: 174%;
}

.s-24-88 {
    font-size: 24px;
    line-height: 88%;
}

.s-20 {
    font-size: 20px;
    line-height: 150%;
}

.s-20-166 {
    font-size: 20px;
    line-height: 166.9%;
}

.s-18 {
    font-size: 18px;
    line-height: 22px;
}

.s-15 {
    font-size: 15px;
    line-height: 172.06%;
}

.s-14 {
    font-size: 14px;
    line-height: 100%;
}

/* ---- [Text Color] ---- */

.white {
    color: #FFFFFF;
}

.black {
    color: #000000;
}

.purple {
    color: #3B0096;
}

.gray {
    color: #000000;
    opacity: 0.3;
}


/* ---- [Naked Ape Nav] ---- */

#na-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 120px;
    width: 100%;
    background-color: transparent;
    z-index: 999;
}

.blog #na-nav,
.single #na-nav{
    background-color: #ffffff;
}

.page-template-template-process #na-nav {
    background-color: #ffffff;
}

.page-template-template-us #na-nav {
    background: linear-gradient(234.62deg, #030C13 18.71%, #000000 70.76%)
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 70px;
    /* width: 100%; */
}

#nav-logo {
    margin-right: auto;
    z-index: 9999999;
}

#contact-us {
    margin-right: 40px;
    transition: all ease 0.5s;
}

#contact-us:hover{
    opacity: 0.6;
    transition: all ease 0.5s;
}

#burger-icon,
#close-icon {
    margin-top: 10px;
    cursor: pointer;
    transform: scale(0.75);
}

#menu-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(29, 29, 29, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: 100%;
    height: 100%;
    z-index: 99999;
    align-items: start;
    justify-content: end;
}

.sidemenu {
    min-width: 350px;
}


.sidemenu>div {
    height: 120px;
    display: flex;
    padding-right: 70px;
    align-items: center;
    justify-content: end;
}

.sidemenu li {
    margin-bottom: 30px;
}

.sidemenu li a:hover {
    text-decoration: underline;
}

/* ---- [Naked Ape HERO] ---- */

#na-hero {
 width: 100vw;
    height: 100vh;
    background: linear-gradient(120deg, #2d009b, #1b0a43, #2d009b);
    background-size: 150% 150% !important;
    animation: gradientAnimation 24s ease-in-out infinite alternate both;
}

#heroAnimation{
    width: 100%;
}

#heroAnimationMobile{
    display: none;
    width: 100%;
}

.indexNav{
    background: linear-gradient(120deg, #2d009b, #1b0a43, #2d009b);
    background-size: 150% 150% !important;
    animation: gradientAnimation 24s ease-in-out infinite alternate both;
}

    @keyframes gradientAnimation {

        0%{background-position: right top}
        50%{background-position: left bottom}
        100%{background-position: right top}

    }


.center-content {
    min-width: 1023px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.center-content .hero-para {
    max-width: 810px;
    margin: 0 auto;
}


.hero-center img {
    width: 100%;
}

/* ---- [Naked Ape ABOUT] ---- */

#na-about {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(234.62deg, #030C13 18.71%, #000000 70.76%);
}

#h2-ant,
#h2-semi,
#h2-story {
    font-style: italic;
    min-height: 96px;
    margin: 0;
    opacity: 0;
}

#aboutPara{
    opacity: 0;
}

.center-content p {
    max-width: 566px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    min-height: 126px;
}

/* ---- [Naked Ape PROCESS] ---- */

#na-process {
    padding-top: 160px;
    padding-bottom: 100px;
    
    background-image: url("../img/process/sea-of-clarity.svg"), url("../img/process/land-of-discovery.svg");
    background: none;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left -150px bottom, right -250px bottom -100px;
    height: 100%;
    position: relative;
}

#sea-clarity{
    position: absolute;
    bottom: 0;
    left: -150px;
    opacity: 0;
}

#sea-discovery{
    position: absolute;
    bottom: -100px;
    right: -265px;
    opacity: 0;
}

.process-title,
.insights-title {
    max-width: 685px;
}

.process-title .title-purple,
.insights-title  .title-purple {
    margin-bottom: 20px;
}

#mobile-process {
    display: none;
}

#placeholder-img {
    margin-top: 120px;
    width: 100%;
}


/* ---- [Naked Ape LOGOS] ---- */

#na-logos {
    height: 100%;
}

.logo-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


    .logo-container  a {
        display: block;
    }


/* ---- [Naked Ape COLLAGE] ---- */

#na-collage {
    display: flex;
    position: relative;
    z-index: 9;
    width: 100vw;
    height: 100vh;
}

#na-collage:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000;
    opacity: 0.5;
    z-index: 15;
    width: 100%;
    height: 100%;
    display: block;
    content: "";
}

#na-collage.index-v2:hover:after {
 
    max-width: 100%;
    transition: all ease 1s;
}

#na-collage.index-v2:after {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to top, #3F06B7 51.12%, rgba(255, 255, 255, 0.270323) 108.71%);
    opacity: 0.7;
    z-index: 15;
    width: 100%;
    height: 100%;
    display: block;
    content: "";
    max-width: 0;
    transition: all ease 1s;
}

#na-collage::before {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #3F06B7;
    opacity: 0.3;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: block;
    content: "";
}

#hover-collage {
    display: none;
    position: absolute;
    max-width: 550px;
    height: fit-content;
    bottom: 0;
    top: 0;
    margin: auto;
    left: 70px;
    z-index: 99999;
    text-align: left;
}

#hover-collage.index-v2 {
    text-align: left;
}

#na-collage:hover #hover-collage {
    display: block;
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.collage-link {
    height: 100%;
    width: calc(100% * 1/8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collage-link img {
    display: block;
    object-fit: cover;
    height: 100%;
    margin: 0 auto;
    filter: grayscale(100%);
}

#col-3 img {
    scale: 1.7;
    margin-top: -190px;
    margin-right: 94px;
}

#col-4 img {
    scale: 1.2;
    margin-left: 350px;
}

#col-5 img {
    scale: 1.5;
}

#col-6 img {
    scale: 1.1;
    margin-left: 290px;
    margin-top: 50px;
}

#col-6 img {
    scale: 1.1;
    margin-left: 290px;
    margin-top: 50px;
}

#col-7 img {
    scale: 1.4;
    margin-left: 150px;
}

#col-8 {
    justify-content: flex-start;
}

#col-8 img {
    margin-left: -35px;
}


/* ---- [Naked Ape Team] ---- */

#na-team {
    height: 100%;
}

#team-text {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(234.62deg, #030C13 18.71%, #000000 70.76%);
    min-height: 575px;
}

#team-text.index-v2 {

    background: linear-gradient(175.82deg, #3F06B7 41.25%, #FFFFFF 108.71%);

    /* padding-top: 40px; */
}

#team-text .center-content {
    min-width: 920px;
    text-align: left;
}

#team-text .center-content .georgia-400 {
    font-style: italic;
    line-height: 72px;
}

.card-container {
    padding: 110px 0;
    display: flex;
    align-items: self-start;
    justify-content: space-between;
}

.card-info {
   
    position: relative;
}


.card-info .member-name {
   
    margin: 0;

}

.card-info .member-position {

margin: 0;
margin-bottom: 25px;

}

.team-img-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-img-container img {
    
    display: block;
    padding: 28px 12px 12px 12px;
}

.card-info p { max-width: 90%;}

#card-1::after {
    position: absolute;
    background-image: url('../img/icons/arrow.svg');
    background-repeat: no-repeat;
    background-size: auto;
    height: 220px;
    width: 90px;
    content: "";
    display: block;
    bottom: -170px;
    right: 30px;
    transform: rotate(145.17deg);
    scale: 0.9;
}

#card-2::after {
    position: absolute;
    background-image: url('../img/icons/arrow.svg');
    background-repeat: no-repeat;
    background-size: auto;
    height: 220px;
    width: 90px;
    content: "";
    display: block;
    bottom: -180px;
    right: 50%;
    transform: rotate(199.47deg);
    scale: 0.9;
}

#card-3::after {
    position: absolute;
    background-image: url('../img/icons/arrow.svg');
    background-repeat: no-repeat;
    background-size: auto;
    height: 220px;
    width: 90px;
    content: "";
    display: block;
    bottom: -160px;
    right: 42%;
    transform: rotate(154.4deg);
    scale: 0.9;
}

#card-4::before {
    position: absolute;
    background-image: url('../img/icons/arrow.svg');
    background-repeat: no-repeat;
    background-size: auto;
    height: 220px;
    width: 90px;
    content: "";
    display: block;
    top: -180px;
    right: 45%;
    scale: 0.9;
}

#card-5::before {
    position: absolute;
    background-image: url('../img/icons/arrow.svg');
    background-repeat: no-repeat;
    background-size: auto;
    height: 220px;
    width: 90px;
    content: "";
    display: block;
    top: -190px;
    right: 30%;
    transform: rotate(43.05deg);
    scale: 0.9;
}

#card-6::before {
    position: absolute;
    background-image: url('../img/icons/arrow.svg');
    background-repeat: no-repeat;
    background-size: auto;
    height: 220px;
    width: 90px;
    content: "";
    display: block;
    top: -170px;
    left: 0;
    transform: rotate(-40.52deg);
    scale: 0.9;
}

.index-v2 #card-1::after,
.index-v2 #card-2::after,
.index-v2 #card-3::after,
.index-v2 #card-4::before,
.index-v2 #card-5::before,
.index-v2 #card-6::before {
    display: none;
}


.team-img-container span {
    position: relative;
    margin-right: 35px;
}


.index-v2 .card-container {
    padding-bottom: 50px;
    padding-top: 70px;
}


.arrow-bentUp{
    /* display: block; */
    display: block;
    top: -55px;
    right: -25px;
    position: absolute;
    border: none !important;
}

.arrow-bentDown{
    display: block;
    bottom: -60px;
    right: 10px;
    position: absolute;
    border: none !important;
}



/* ---- [Naked Ape Intro] ---- */


#na-intro {
    background: linear-gradient(234.62deg, #030C13 18.71%, #000000 70.76%);
    height: 100%;
    padding-top: 130px;
    padding-bottom:40px ;
    /* display: flex; */
    align-items: center;
}

#na-intro .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* height: 100%; */
}

#na-intro .intro-title {
    margin-top: 0;
    margin-bottom: 60px;
}



#na-intro ul li {
    display: flex;
    position: relative;
    margin-bottom: 40px;
    align-items: center;
}

#na-intro ul li span {
    max-width: 275px;
}

.accordion::before {
    background-image: url("../img/icons/li-icon.svg");
    background-repeat: no-repeat;
    background-size: auto;
    content: "";
    display: block;
    width: 125px;
    height: 100px;
    margin-right: 20px;
}


/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
    padding: 18px 0;
    width: auto;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-top: -1px;
    display: flex;
    align-items: center;
    max-width: 370px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active {
    background-color: transparent;
    border-top: none;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: transparent;
    color: white;
    display: none;
    overflow: hidden;
    padding: 0 20px;
    max-width: 638px;
    border-top: none;
}

#na-intro .panel p {
    min-width: auto;
    max-width: 595px;
    text-align: left;
}

#na-intro .panel {
    
    transition: max-height ease 0.5s;
    max-height: 0;
   animation: pannelbackHeight steps(40, end);
   animation-duration: 0.5s;
}

#na-intro .active+.panel{
    width: 100%;
    max-height: 100%;
   animation: pannelHeight steps(40, end);
   animation-duration: 0.5s;
   
}

@keyframes pannelHeight {
    from {
        max-height: 0
    }

    to {
        max-height: 500px
    }
}


@keyframes pannelbackHeight {
    from {
        max-height: 500px
    }

    to {
        max-height: 0
    }
}

#na-intro .left-sect {
    width: 65%;
 }

#na-intro .right-sect {
   width: 30%;
}

/* ---- [Naked Ape FOOTER] ---- */

#na-footer {
    height: 100%;
    padding-top: 190px;
    padding-bottom: 120px;
    /* min-height: 100vh; */
    overflow: hidden; 
    position: relative;
}

#na-footer .container {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: relative;
}

#form-title{
    color: #3F06B7;
    position: relative;
}

#banana{
    position: absolute;
    z-index: -1;
    width: 510.241px;
    height: 482.538px;
    left: -60px;
    top: -10px;
}

#bananaBot{
    position: absolute;
    z-index: -1;
    width: 510.241px;
    height: 482.538px;
    right: -50px;
    bottom: 200px;
    transform: scale(-1,1);
}


#na-footer .top {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 70px;
    position: relative;
}

#na-footer.index-v2 .top {
    justify-content: start;
}

#na-footer.index-v2 .top form,
.top .top > div {
    width: 100%;
    max-width: 720px;
}

#na-footer.index-v2 .top {
    width: 100%;
    /* padding: 0 20px; */
}


#na-footer .top .label {
    max-width: 650px;
    margin-bottom: 20px;
    margin-top: 0;
    /* font-size: 48px; */
}

#na-footer .top p {
   margin-bottom: 40px;
}

#na-footer .top form p {
    margin-bottom: 0px !important;
 }

#na-footer .top form {
    display: flex;
    flex-direction: column;

}

#na-footer .wpcf7-text,
#na-footer .wpcf7-textarea,
.input-style {
    background: #FCFCFC;
    border: 3px solid #3F06B7;
    border-radius: 6px;
    padding: 14px 20px;
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 166.9%;
    color: #000000;
    min-width: 380px;
    resize: none;
    box-sizing: border-box;
    width: 100%;
}

.input-style {
    margin-bottom: 20px;
}

textarea.input-style {
   height: 164px;
}

.work { margin-bottom: 0px !important;}


@media (max-width: 767px) { 
.work { margin-bottom: 10px;}

#na-footer .wpcf7-text,
#na-footer .wpcf7-textarea,
.input-style { width: 100%; min-width: auto !important;}
}

#work .input-style,
#insights .input-style,
#single-page .input-style,
.custom .input-style{
    background: transparent;
    border: 1px solid #FFFFFF;
    color: white;
    /* padding: 60px; */
}

.input-style::placeholder {
    color: #000000;
    opacity: 0.3;
}

#work .input-style::placeholder,
#insights .input-style::placeholder,
#single-page .input-style::placeholder,
.custom .input-style::placeholder{
    color: #ffffff;
    opacity: 1;
}

.wpcf7-textarea{
    height: 200px;
}

.btn-style {
    background: #000000;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    padding: 10px 0;
    cursor: pointer;
    transition: all ease-in-out 0.4s;
    border: 1px solid #000000;
}

#na-footer .info-footer a:hover { text-decoration: underline; }

.index-v2 .btn-style,
#na-footer .wpcf7-submit {
    background: #3F06B7;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    padding: 20px 80px;
    cursor: pointer;
    transition: all ease-in-out 0.4s;
    border: 1px solid #3F06B7;
    font-family: 'TT Commons';
    font-style: normal;
    font-size: 30px;
    line-height: 166.9%;
    color: #fff;
    margin-top: 20px;
}

.index-v2 .btn-style{
    max-width: 245px;
    padding: 20px;
}

#work .btn-style,
#insights .btn-style,
#single-page .btn-style,
.custom .btn-style {
    background: #AF91F1;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    padding: 25px 80px;
    cursor: pointer;
    transition: all ease-in-out 0.4s;
    border: 1px solid #AF91F1;
}

.btn-style:hover,
#na-footer .wpcf7-submit:hover {
    background: #FFFFFF;
    color: #000000;
    transition: all ease-in-out 0.4s;
}

#work .btn-style:hover,
#insights .btn-style:hover,
#single-page .btn-style:hover,
.custom .btn-style:hover {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    transition: all ease-in-out 0.4s;
}


#insights .social div a img,
#work .social div a img,
#single-page .social div a img,
#contact .social div a img,
.custom .social div a img  {
    margin-bottom: -10px;
    margin-left: 10px;
    margin-right: 10px;
    scale: 1.55;
}

#work .social,
#insights .social,
#single-page .social,
#contact .social,
.custom .social{
    display: flex;
    align-items: end;
    justify-content: end;
}

#work .info-footer,
#insights .info-footer,
#single-page .info-footer,
#contact .info-footer,
.custom .info-footer {
    display: flex;
    align-items: end;
}

#work .info-footer p,
#work .info-footer a,
#insights .info-footer p,
#insights .info-footer a,
#single-page .info-footer p,
#single-page .info-footer a,
#contact .info-footer p,
#contact .info-footer a,
.custom .info-footer a,
.custom .info-footer p  {
    margin-right: 10px;
    text-transform: capitalize;
}

#work .info-footer p.mail,
#insights .info-footer p.mail,
#single-page .info-footer p.mail,
#contact .info-footer p.mail,
.custom .info-footer p.mail{
    text-transform: lowercase;
}


#na-footer .bot {
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
}

.social{
    display: flex;
    align-items: center;
    justify-content: center;
}

.social>div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
}

.social div img {
    height: 50px;
    width: 50px;
}

.index-v2 .social img {
    margin-bottom: -15px;
}

.info-footer {
    text-align: right;
    text-transform: capitalize;
}

.info-footer .mail{
    text-transform: lowercase;
}

.index-v2 .info-footer {
    display: flex;
    align-items: center;

}

.index-v2 .info-footer  p {

    margin-right: 10px;
    margin-left: 10px;

}

.index-v2 .info-footer+a {
    margin-left: 20px;
}


.info-footer a:hover {

    text-decoration: underline;

}


/* ---- [Naked Ape typwriter animation ] ---- */

#banding {

    height: 75px;

    width: auto;

    display: block;
}



.black-bg {
    background: linear-gradient(234.62deg, #030C13 18.71%, #000000 70.76%);
}



#team-mobile {
    display: none;
}



/*  ----------- [ Work Style  ] -----------  */

#work #na-hero {
    background: linear-gradient(175.82deg, #3F06B7 41.25%, #FFFFFF 108.71%);
}

#work .center-content .hero-para {
    max-width: 1025px;
    width: 100%;
    /* padding: 0 20px; */
}


#na-work {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}


.work {

    /* width: 100%; */
    height: auto;
    padding: 100px 90px;
    position: relative;
    display: block;
    overflow: hidden;
    /* align-items: stretch; */
    /* justify-content: stretch; */
}

.bg-article{
    position: absolute;
    width: 100%;
    z-index: -1;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.insight {

    height: auto;
    padding: 100px 90px;
    position: relative;
    display: block;
    overflow: hidden;
}



.grid-container{
    display: grid;
    grid: repeat(2,1fr)/repeat(2,1fr);
}


.work .work-title,
.insight .blog-title {
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
    margin-top: 0;
}

.insight .blog-title {
    min-height: 132px;
    max-height: 132px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
}


 .work p,
.insight p {
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
    max-width: 310px;
}

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

.insight p {
    max-width: 100%;
    
}

.work a,
.insight a {
    /* align-self: flex-start; */
    display: block;
    /* margin-bottom: 80px; */
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    /* text-decoration: underline; */
    width: auto;
    /* line-height: 117%; */
    
    padding-bottom: 10px;

}

.insight a::after,
 .work a::after {
    display:block;
    width: 0;
    content: '';
    height: 1px;
    background-color: #FFFFFF;

    transition: all 0.8s ease-in-out;
    position: absolute;
    z-index: 2;}

.insight:hover a::after,
.work:hover a::after  {
    width: 100%;
    transition: all 0.8s ease-in-out;
}

.work .line,
.insight .line {
    height: 1px;
    width: 180px;
    display: block;
    background-color: #FFFFFF;
}

.work .work-hover,
.insight .insights-hover {
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}

.work:hover:after,
.insight:hover:after {
    max-width:100%;
    transition: all ease 1s;
}

.work:after,
.insight:after {
    width: 100%;
    max-width:0;
    transition: all ease 1.5s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
    display: block;
    content: "";
    z-index: 1;
    background: linear-gradient(90deg, #3F06B7 51.12%, rgba(255, 255, 255, 0.270323) 108.71%);
    opacity: 1;
    transition: all ease 0.8s;
}

 .author{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;

}

 .author div{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

#single-page .author,
#single-page .author div {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

 .author img{
    border-radius: 50%;
    width: 42px !important;
    height: 42px !important;
    z-index: 9;
    object-fit: cover;
    margin-right: 15px;
    border: #ffffff 4px solid;
}

#single-page .author img{
    margin: 0;
}

.insights-hover span{
    display: block;
    z-index: 9;
}

#single-page .author div span{
    display: block;
    z-index: 9;
    margin-bottom: 0 !important;
}



 .work:hover .work-hover,
 .insight:hover .insights-hover {
    opacity: 1;

}


@keyframes widthSlide {
    from {
        max-width: 0
    }

    to {
        max-width: 100%
    }
}

@keyframes widthSlideout {
    from {
        max-width:  100%
    }

    to {
        max-width: 0
    }
}


#template .slick-prev{
    left: 80px;
}
#template .slick-next{
    right: 50px;
}

#insights #na-footer,
#single-page #na-footer {
    background: radial-gradient(circle farthest-side at top left, #3F06B7 0%, #231154 100%);
}



/* [ Work testimonial ] */

#na-testimonial {
    background-color: #000000;
    height: 100%;
    width: 100%;
    /* padding: 150px 0; */
}

#na-testimonial p {
    padding-top: 150px;
    margin-bottom: 40px;
}

#na-testimonial span {

    display: block;
    padding-bottom: 200px;

}

.slick-dots {
    bottom: 60px !important;
}

#template .slick-dots{
    bottom: -60px !important;
}

.slick-dots li {
    margin: 0;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #BFA1FE !important;
    font-size: 12px !important;;
}

.work-slide,
.testimonials-slide {

    max-width: 100%;
    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    position: relative;

    /* padding-top: 50px; */
}

.work-slide {
    max-width: 100%;
    width: 100%;
}




/*  ----------- [ Work template Style  ] -----------  */


/* [ Work template hero ] */

#na-workHero {
    padding: 170px 0;
    height: 100%;
    width: 100%;
}

#na-workHero .img-container {

    position: relative;
    /*height: 205px;*/
}

#na-workHero .img-container img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 860px;
    object-fit: cover;
}


/* [ Work template workTitle ] */


#na-workTitle {
    margin-top: -530px;
    padding-top: 530px;
    height: 100%;
    padding-bottom: 180px;
    background: #000000;
}

#na-workTitle .project-name {
    margin-top: 30px;
}

#na-workTitle .container {

    display: flex;

}

.work-name {
    margin-left: 20px;
}

.work-info {
    display: flex;
    align-items: start;
    margin-top: 150px;
}

.work-info p {
    margin-bottom: 20px;
}

.work-info>div {
    margin-right: 60px;
}

.work-block {
    margin-bottom: 15px;
    max-width: 340px;
}

.work-line {
    height: 394px;
    width: 5px;
    background-color: #3F06B7;
    margin: 0 90px;
}


/* [ Work template presentation ] */

#na-presentation {
    padding-top: 120px;
    height: 100%;
    padding-bottom: 60px;
}

#presentation-head {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-height: 860px;
    object-fit: cover;
}

.presentation-section {
    margin-top: 80px;
    margin-bottom: 120px;
}

.presentation-section.right {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: 20px;
}

.presentation-title{
    margin-top: 0;
    margin-right: 40px;
    max-width: 200px;
}

.presentation-section .presentation-title::after,
#na-outcome .presentation-title::after {
    display: block;
    content: "";
    width: 100%;
    height: 25px;
    background-image: url(../img/underline-h2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    
}

.presentation-section.right>div {
    max-width: 760px;
}


.presentation-section.right>div p {
    margin-bottom: 45px;
}

.presentation-section.left {
    display: flex;
    justify-content: left;
    align-items: center;

}
.presentation-section.left img {
    width: 50%;
    height: auto;
    object-fit: cover;
    max-height: 900px;
}

@media (max-width: 1024px) {

	.presentation-section.left img {
	width: 100%;
    max-height: 860px;
    object-fit: cover;
	}
}


.presentation-section.left p {
    margin-bottom: 25px;
}

.presentation-section.left>div .presentation-title {

    margin-bottom: 60px;

}


.presentation-section.left>div {
    /*max-width: 422px;*/
    margin-left: 70px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

/* [ Work template banner ] */

#na-banner {



    background-repeat: no-repeat;

    background-size: cover;

    height: 100%;
}

#na-banner img { display: block; margin: 0px auto; width: 100%; max-height: 800px; object-fit: cover;}

.wylde #na-banner {
    background-image: url(../img/wylde/4.png);
}

.spruce #na-banner {
    background-image: url(../img/spruce/4.png);
}

.dame #na-banner {
    background-image: url(../img/dame/4.png);
}

.work-block ul {

    list-style-type: disc;
    margin-left: 30px;
    margin-top: 25px;

}


/* [ Work template outcome ] */

#na-outcome {

    padding-top: 130px;
    padding-bottom: 200px;
    height: 100%;

}


#na-outcome .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#na-outcome p {
    max-width: 590px;
    margin-bottom: 30px;
}


#na-outcome .presentation-title {

    margin-left: 100px;
    max-width: 200px;
}


/* -- [ more style ] -- */

#na-more {
    padding: 100px 0;
    background: #19191A;
    height: 100%;
}

#na-more .more-title {
    
    margin-left: 60px;
}

#na-more .container {
    max-width: 90% !important;
}

.img-container {
    display: flex;
    width: 100%;
    align-items: end;
    justify-content: end;
}

.project-link-name {
    margin-top: 50px;
    margin-left: 20px;
}

.project-link-name .title {
    margin-bottom: 15px;
    margin-top: 0;
}

.project-link-name .title+p {
    padding-bottom: 80px;
}

/* -- [ contact ] -- */


#contact {
    background: radial-gradient(circle farthest-side at top left, #3F06B7 0%, #231154 100%);
}

#contact #na-nav {
    background: transparent;
}

#na-contact {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 160px;
    height: 100%;
    padding-bottom: 80px;
}

#na-contact .label,
#na-contact p {
    max-width: 575px;
}




#contact form {
    display: flex;
    flex-direction: column;
    max-width: 740px;
}

#contact form input,
#contact form textarea {
    background: transparent;

    border: none;
    border: 3px solid #AF91F1;
    border-radius: 6px;
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 166.9%;
    color: #FFFFFF;
    padding: 10px 23px 15px 23px;
    width: 100%;
    max-width: 740px;
    outline: none;
    box-sizing: border-box;
}

#contact form input::placeholder,
#contact form textarea::placeholder {
    font-family: 'TT Commons';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 166.9%;
    color: #FFFFFF;
    opacity: 0.8;
}



#contact form .wpcf7-submit {

background: #AF91F1;

border-radius: 4px;

font-family: 'TT Commons';

font-style: normal;

font-weight: 400;

font-size: 30px;

line-height: 166.9%;

text-transform: uppercase;

color: #000000;

padding: 6px 21px;

max-width: 245px;

border: none;
cursor: pointer;
margin-top: 20px;
}




/* SINGLE PAGE */

#na-singlePage {
    height: 100%;
    padding-top: 120px;
    position: relative;
}

#single-page #na-nav,
#insights #na-nav{
    background: #FFFFFF;
}

#single-page #burger-icon, #single-page #close-icon,
#insights #burger-icon, .insights #close-icon{
    margin: 0;
}

#na-singlePage .article-hero-img img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    margin-bottom: 40px;
}

#na-singlePage p {
    margin-bottom: 30px;
}

#na-singlePage .article-hero-img {
    max-height: 660px;
    overflow: hidden;
}

#na-singlePage .container span,
#na-singlePage .container .title-purple {
    text-align: center;
}

#na-singlePage .container span{
    text-transform: capitalize;
    margin-bottom: 15px;
    display: block;
}

#na-singlePage .container .title-purple{
    text-transform: capitalize;
    margin-bottom: 50px;
    letter-spacing: -0.3px;
    line-height: 1;
}

#na-singlePage .container .section-title{
    text-transform: capitalize;
    margin-top: 80px;
    margin-bottom: 50px;
    position: relative;
}

#na-singlePage .container {
    padding-top: 50px;
    background: #FFFFFF;
    border-radius: 10px;
}

#back-insight{
    display: block;
    position: relative;
    margin: 0px auto;
    margin-bottom: 40px;
    width: fit-content;
    font-size: 13px;
    color: grey;
    text-transform: uppercase;
}

#back-insight:hover{

   opacity: 0.7;
   color: grey;   
}

#back-insight::before{
    content: '<';
    margin-right: 4px;
    font-size: 20px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

#back-insight::after{
    display: block;
    width: 0;
    content: '';
    height: 1px;
    background-color: gray;
    opacity: 0.7;
    transition: all 0.5s ease-in-out;
    position: absolute;
    z-index: 2;
    margin-top: -4px;
}

#back-insight:hover::after{
    width: 100%;
    transition: all 0.5s ease-in-out;
}


#back-insight:hover::before{
    opacity: 1;
    transition: all 0.5s ease-in-out;
}


/*  BLOG  */



#na-insights {
    height: 100%;
    padding-top: 160px;
}



a.learn {
    margin-top: 25px;
    display: block;
    background: #3F06B7;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    padding: 10px 70px;
    cursor: pointer;
    transition: all ease-in-out 0.4s;
    border: 1px solid #3F06B7;
}

a.learn:hover {
    background: #FFFFFF;
    color: #3F06B7;
}


#last-dot  {
    position: absolute;
    top: 80px;
    right: 120px;
    stroke-dasharray: 20;
    stroke-dashoffset: 40;
    animation: animateDash 1.5s linear reverse infinite;

}

#third{
    position: relative;
    left: 140px;
    stroke-dasharray: 20;
    stroke-dashoffset: 40;
    animation: animateDash 1.5s linear forwards infinite;
}

#fifth{
    transform: rotate(180deg);
    stroke-dasharray: 20;
    stroke-dashoffset: 40;
    animation: animateDash 1.5s linear forwards infinite;
    position: relative;
    left: 145px;
}

#long-left{
    position: relative;
    stroke-dasharray: 20;
    stroke-dashoffset: 40;
    animation: animateDash 1.5s linear forwards infinite;
    left: 360px;
    margin-top: 10px;
    /* bottom: 0; */
}

#long-rigth{
    position: relative;
    right: 40px;
    top: -20px;
    stroke-dasharray: 20;
    stroke-dashoffset: 40;
    animation: animateDash 1.5s linear reverse infinite;
}

#line-mobile{
    stroke-dasharray: 20;
    stroke-dashoffset: 40;
}



#first-dot  {
    position: absolute;
    bottom: -55px;
    left: 185px;
    stroke-dasharray: 20;
    stroke-dashoffset: 40;
    animation: animateDash 1.5s linear forwards infinite;
}



@keyframes animateDash {
  to {
    stroke-dashoffset: 0;
  }
}


.proc{
    position: relative;
}

.proc-block{
    max-width: 360px;
}

#proc-cult{
    opacity: 0;
    margin-top: 40px;
    margin-left: 65px;
    /* line-height: 1; */
}


.proc-block p,.block-title {
    line-height: 1;
}

.block-title {
    margin-bottom: 15px;
    margin-top: 0;
}

#proc-opp{
    display: block;
    opacity: 0;
    text-align: center;
    padding: 20px;
    height: 153px;
    max-width: 217px;
    background-image: url('../img/icons/start-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

#opp-txt{
    display: block;
    transform: rotate(336deg);
    position: relative;
    left: -15px;
    top: 17px;
    line-height: 1;
}

.process-container{
    position: relative;
    /* background-image: url('../img/process/valley.png'); */
    background-repeat: no-repeat;
    background-position: top left 45%;
}

#valley-brand{
    position: absolute;
    left: 480px;
    opacity: 0;
}

.process-title,
.insights-title{
    max-width: 865px;
    margin: 0 auto;
    text-align:center;
    margin-bottom: 30px;
}

.process-title .title-purple,
.insights-title .title-purple{
   line-height: 120%;
}

#proc-end,
#proc-sus,
#proc-cre{
    position: absolute;
    top: 0;
    right: 0;
}

#proc-sus,
#proc-cre{
    margin-top: -35px;
}

#proc-creTxt,
#proc-susTxt,
#proc-endPoint{
    opacity: 0;
}


#proc-end img{
    position: relative;
    left: -35px;
    top: 20px;
}

#end-txt{
    max-width: 155px;
    display: inline-block;
    text-align: center;
    line-height: 1;
    transform: rotate(336deg);
}

#proc-semio{
    /* margin-top: 120px; */
    margin-left: 230px;
    opacity: 0;
}

#proc-story{
    position: relative;
    margin: 0 auto;
    bottom: 35px;
    left: 70px;
    opacity: y;
    opacity: 0;
}

#proc-end.right-proc, #proc-sus.right-proc,
#proc-cre.right-proc{
    right: 200px;
}

#us #na-intro {
    margin-top: 110px;
}



.slick-prev:before{
    content: "";
    background-image: url("../img/icons/arrow-template.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 35px;
    height: 35px;
    position: absolute;
    transform: scale(-1,1);
    opacity: 1;
    left: 0;
    top: 0;
}

.slick-next:before{
    content: "";
    background-image: url("../img/icons/arrow-template.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 35px;
    height: 35px;
    position: absolute;
    opacity: 1;
    left: 0;
    top: 0;
}

#template .slick-prev,#template .slick-next{
    bottom: 0;
    top: unset;
}

#template .slick-prev:before{
    right: 0;
}

#template .slick-prev{
    left: 5%;
}

#na-contact+#na-footer{
    padding-top: 90px;
}

#contact form textarea{
    height: 200px;
}

#na-intro{
    padding: 130px 0;
}

@media (max-width: 1600px){
 


    #na-intro .panel p{
        width: 100%;
        max-width: calc(100% - 20px);
    }


    .panel{
        max-width: 100%;
    }

    #na-intro{
        padding: 130px 70px;
    }

}


@media (max-width: 1499px) {

    #work .social,
    #insights .social,
    #single-page .social,
    #contact .social,
    .custom .social,
    .social {
        flex-direction: column;
        align-items: flex-start;
    }

    .social>div {
        margin-left: 0;
        margin-top: 20px;
    }

    #work .social>div,
    #insights .social>div,
    #single-page .social>div,
    #contact .social>div,
    .custom .social>div {
        margin-left: -20px;
    }

    .team-img-container .team-img{
        height: 230px;
        width: 150px;
    }
   
    #na-team .container{
        max-width: 1300px;
    }

    #na-footer .container,
    #na-footer .na-container{
        max-width: 1300px;
    }

    
    #na-intro .container {
        max-width: 1250px;
    }

    #banana{
        left: -120px;
    }

    #bananaBot{
        right: -135px;
    }

}

@media (max-width: 1400px) {

    .na-container,
    .container  {
        max-width: 1300px;
        /* scale: 0.9; */
    }

    
    #proc-end.right-proc, #proc-sus.right-proc,
    #proc-cre.right-proc{
        right: 100px
    }

    #proc-story{
        left: 120px;
    }

    .process-container{
        background-position: top left 48%;
    }

    .process-container{
        scale: 0.88;
    }

}

@media (max-width: 1339px) {

    #na-footer .container,
    #na-footer .na-container{
        max-width: 1200px;
    }

    .team-img-container .team-img{
        height: 230px;
        width: 150px;
    }
   
    #na-team .container{
        max-width: 1200px;
        padding: 0 20px;
    }

    .team-img-container span{
        margin-right: 20px;
    }

    .na-container,
    .container  {
        max-width: 1200px;
        /* padding: 0 20px; */
    }
    #na-footer.index-v2 .container {
        background-size: 60%;
    }

    #work .info-footer,
    #insights .info-footer,
    #single-page .info-footer,
    #contact .info-footer,
    .custom .info-footer,
    .index-v2 .info-footer{
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

    .index-v2 .info-footer p{
        margin:  0;
    }

    #proc-end.right-proc, #proc-sus.right-proc,
    #proc-cre.right-proc{
        right: 0
    }

    #proc-story{
        left: 170px;
    }

    .process-container{
        background-position: top left 60%;
    }


    #na-process {
         zoom: 85%; 
    }

    #na-process .container{ 
        scale: 0.9;
    }

    
    #banana,
    #bananaBot{
        scale: 0.7;
    }
}

@media (max-width: 1249px) {
    #na-footer .container,
    #na-footer .na-container{
        max-width: 1050px;
    }
    #banana{
        left: -180px;
        top: -40px;
    }
    #bananaBot{
        right: -210px;
    }

}

@media (max-width: 1229px) {

    #na-footer.index-v2 .container {

        background-size: 60%;

    }

    .process-container{
        background-position: top left 60%;
    }



    .team-img-container .team-img{
        height: 230px;
        width: 150px;
    }
   
    #na-team .container{
        max-width: 1050px;
        padding: 0 20px;
    }

    .team-img-container span{
        margin-right: 0px;
    }

    #na-footer .container,
    #na-footer .na-container{
        max-width: 1050px;
    }

    .card-info .member-name,
    .card-info .member-position{
        font-size: 36px;
    }

}

@media (max-width: 1200px) {

    #valley-brand{
        left:380px
    }

    #work .info-footer,
    #contact .info-footer,
    .custom .info-footer{
        flex-direction: column;
        /*align-items: center;*/
    }

    #na-footer.index-v2 .container{
        /* background-image: url(../img/banana.svg); */
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center right;
    }

    #na-contact{
        padding-left: 50px;
    }

    .team-img-container .team-img {
        height: 230px;
        width: 150px;
    }

    #na-intro .container {
        flex-direction: column;
        align-items: center;
        text-align: center;

        /* min-height: 1500px; */
    }

    #na-intro .accordion {
        width: 100%
    }

    .panel {
        max-width: 100%;
    }

    #na-footer.index-v2 .container {

        background-size: 45%;
    }


    .na-container,
    .container  {
        max-width: 1060px;
    }

    #proc-end.right-proc, #proc-sus.right-proc,
    #proc-cre.right-proc{
        right: -50px
    }

    #proc-story{
        left: 200px;
       
    }
    
    .process-container{
        scale: 0.9;
    }



    #na-intro .left-sect,
    #na-intro .right-sect{
        width: 100%;
        max-width: 800px;
    }

    
    #na-intro .left-sect {
        margin-bottom: 90px;
    }

    #na-workTitle{
        padding-top: 330px;
        margin-top: -330px;
    }

    .accordion{
        max-width: 100%;
        justify-content: center;
    }

    #na-contact{
        margin: 0 auto;
        max-width: 740px;
        text-align: center;
        padding-left: 0;
    }

     #na-contact p {
        
     }

     #contact form .wpcf7-submit{
        max-width: 100%;
        width: 100%;
        margin-top: 20px !important;
     }

  
    #na-intro .panel p{
        text-align: center;
    }

    .accordion span {
        min-width: 534px;
        display: block;
        max-width: 575px;
    }

}

@media (max-width: 1089px) {

    #na-footer { padding-bottom: 40px !important;}


    #na-footer.index-v2 .top form,
    .top .top > div{
        max-width: 650px;
    }

    .top>div{
        margin-bottom: 40px;
        text-align: left;
    }


    #team-mobile {
        max-width: 900px;
        margin: 0 auto;
    }

    .process-container{
        scale: 1;
    }

    #na-process {
        zoom: 100%;
        padding-bottom: 60px;
        padding-top: 0;
    }

    #banana{
        left: -140px;
        top: -100px;
    }

    #bananaBot{
        right: -160px;
    }

    #na-footer .top.reverse{
        flex-direction: column-reverse;
    }

    #team-text .center-content {
        min-width: 100%;
        text-align: center;
    }

    #team-text {

        min-height: 640px;
    }

    #team-text .center-content .team-hero {
        padding: 0 20px;
    }

    #team-mobile .card-container {
        display: grid;
        grid: repeat(1, 1fr) / repeat(1, 1fr);
        justify-content: start;
        align-items: self-start;
    }


    #card-1>div,
    #card-3>div,
    #card-5>div {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;

    }


    


    #card-2,
    #card-4,
    #card-6 {
        margin-left: auto;
    }

    #card-1::after,
    #card-2::after,
    #card-3::after,
    #card-4::before,
    #card-5::before,
    #card-6::before {
        display: none;
    }


    .card-info {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        text-align: left;

    }

    .card-info>div {
        position: relative;
    }

    #card-1 {
        margin-top: 0;
        position: relative;
    }

    .team-img {
        margin-bottom: 40px;
    }

    #na-intro {
        height: 100%;
        width: 100%;
        text-align: center;
        padding: 60px 20px;
    }

    #na-intro .container {
        flex-direction: column;
        padding-bottom: 0;
    }

    .process-title,
    .insights-title {
        text-align: center;
        margin: 0 auto;
        margin-bottom: 30px;
     }



    .left-sect {
        padding: 0 20px;
        margin-bottom: 90px;
    }

    #na-intro ul li::before {
        margin-right: 20px;
        width: 50px;
        height: 80px;
        background-size: contain;
    }

    #na-intro ul li {
        text-align: left;
    }

    #na-footer .top {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }


    #na-footer .top>form {

        margin-bottom: 60px;

    }

    #na-footer.index-v2 .top>form {
        margin: 0;
        margin-bottom: 60px;
    }

    .input-style {
        width: calc(100% - 42px);
        /* margin: 0 auto; */
    }

    #na-footer .bot {
        align-items: flex-start;
        max-width: 800px;
        margin: 0 auto;
        padding-top: 40px;
    }

    .social {
        margin-bottom: 40px;
        text-align: center;
    }

    #work .social
    #insights .social,
    #single-page .social,
    #contact .social,
    .custom .social{
        display: flex;
        flex-direction: column;
    }

    .social > div,
    #insights .social > div,
    #single-page .social > div,
    #contact .social > div,
    #work .social > div, 
    .custom .social > div {
        display: flex;
        justify-content: center;
    }

    .social img{
        margin-left: 0;
        margin-right: 10px;
    }

    #insights .social img,
    #single-page .social img,
    #contact .social img,
    #work .social img,
    .custom .social img {
        margin-right: 0;
    }

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

    #insights .info-footer,
    #single-page .info-footer,
    #contact .info-footer,
    #work .info-footer,
    .custom .info-footer{
        margin-bottom: 0px;
        
    }

        #work .info-footer p,
        #work .info-footer a,
        #insights .info-footer p,
        #insights .info-footer a,
        #single-page .info-footer p,
        #single-page .info-footer a,
        #contact .info-footer p,
        #contact .info-footer a,
        .custom .info-footer a,
        .custom .info-footer p{
            margin: 0;
        }


    .center-content {
        min-width: 700px;
    }

    #na-footer.index-v2 .container {

        background-size: 80%;
        background-position: top 73% right 15px;

    }

    .index-v2 .info-footer+a {
        margin: 0px;
    }

    .index-v2 .info-footer {
        text-align: left;
    }

    #work .input-style {
        width: calc(100% - 44px);
    }

    #work .social,
    #insights .social,
    #single-page .social,
    #contact .social {
        flex-direction: column;
        align-items: start;
    }

    #work .social>img,
    #insights .social>img,
    #single-page .social>img,
    #contact .social>img {
        margin-bottom: 0px;
    }

    #work .info-footer {
        margin: 0;
        margin-bottom: 40px;
    }

    .social div img {
        margin-left: 0;
        margin-right: 10px;
    }

    #na-footer.index-v2 .top {
        width: 100%;
        margin: 0 auto;
    }

    .work-info>div {
        margin-right: 50px;
    }

    .work-line {
        margin: 0 50px;
    }

    .presentation-section.right div p,
    .presentation-section.left div p {
        margin-right: 20px;
    }

    .presentation-section.left {
        flex-direction: column;
    }

    .presentation-section>div div {
        max-width: 760px;
    }

    .presentation-section.left>div {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        align-items: flex-start;
        margin-top: 80px;
        max-width: 100%;
        margin-left: 0;
    }

    #na-outcome .presentation-title,
    .presentation-section.left .presentation-title {
        margin-left: 20px;
    }


     #insights .input-style, 
     #single-page .input-style,
     .custom .input-style{
         width: 100%; 
    }
    #na-footer .top p{
        margin: 0 auto;
    }

    .process-container{
        display: none;
    }

    #mobile-process {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 40px;
    }

    #proc-opp{
        opacity: 1;
    }

    #mobile-process .s-24 {
        line-height: 100%;
    }

    .line {
        margin: 20px 0;
    }


    #sea-clarity, #sea-discovery, #valley-brand{
        display: none;
    }

    #us #na-intro {
        margin-top: 110px;
        padding-top: 130px;
    }

    .grid-container{
        grid: repeat(1,1fr)/repeat(1,1fr);
    }

    .slick-prev,.slick-next{
        display: none !important;
    }

    #template .slick-next, #template .slick-prev{
        display: inline-block !important;
    }

    .slick-dotted.slick-slider{
        padding: 0 20px;
    }
    
    #team-mobile{
        display: none;
    }

}

@media (max-width: 1024px) {

    .card-container, .team-img-container{
        display: none;
    }

    #team-mobile {
        display: block;
    }

    #team-mobile .card-container {
        padding: 0px 20px;
    }

    #na-team.index-v2 .container{
        padding: 0;
        padding-bottom: 100px;
    }

    #team-mobile .slick-dots{
        bottom: -60px !important;
    }
    
    .card-info{
        max-width: 400px;
    }

    .card-container{
        max-width: 440px;
        margin:  0 auto;
    }

    .card-info .member-name{
        min-height: 0px;
    }

    .card-info p{
        max-width: 100%;
    }

    #team-mobile .slick-next:before{
        background-image: url(../img/icons/team-arrow.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 35px;
        height: 27px;
        position: absolute;
        transform: scale(-1,1);
        rotate: 180deg;
        top: 0;
        left: 0;
    }

    #team-mobile .slick-prev:before{
        background-image: url(../img/icons/team-arrow.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 35px;
        height: 27px;
        position: absolute;
        transform: scale(-1,1);
        rotate: 0deg;
        top: 0;
        left: -15px;
    }

    #team-mobile .slick-prev, #team-mobile .slick-next{
        display: block !important; 
    }

    
    #card-1>div,
    #card-3>div,
    #card-5>div,
    #card-2>div,
    #card-4>div,
    #card-6>div {
        display: flex;
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .card-info>div .member-name {
        position: relative;
        margin-top: -5px;
        line-height: 30px !important;
        word-break: break-word;
        margin-bottom: 10px;
        
        font-size: 29px;
    }

    .card-info>div .member-position {
        position: relative;
        margin-top: -5px;
        line-height: 30px !important;
        word-break: break-word;
        margin-bottom: 10px;
        
        font-size: 29px;
    }

    .card-info p {
        max-width: 100%;
    }

    .slick-slide img {
        width: 100%;
    }

    .card-info,#card-1 {
        margin-top: 90px;
    }

    .member-info {
        padding-left: 20px;
    }

}

@media (max-width: 900px) {

    .slick-dots {
        left: 0px !important;
    }

    #na-intro .active+.panel{
        width: calc(100% - 40px);
    }

    #na-intro p {
        padding: 0 20px;
    }

    #na-intro .right-sect {
        width: calc(100% - 40px);
    }

    #banana,
    #bananaBot{
        display: none;
    }


    #contact form input {
        width: 100%;
    }
    #opp-txt { font-size: 22px;}

    #na-contact,
    #contact form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: cen;
        text-align: center;
        padding-left: 0;
    }

    #na-contact,
    #contact form button {
        width: 100%;
        max-width: 100%;
    }

    #na-singlePage {
        text-align: center;
    }

    #na-testimonial p,
    #na-testimonial span {
        text-align: center;
    }


    #na-workTitle {

        padding: 80px 0;
        margin-top: 0px;

    }

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

    #na-workTitle .container {
        flex-direction: column;
    }

    .work-line {
        height: 5px;
        width: 90%;
        margin: 0 auto;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .work-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0;
    }

    .work-info>div {
        margin: 0;
    }

    #na-workHero .img-container {
        height: auto;
    }

    #na-workHero .img-container img {
        position: relative;
    }

    #na-workHero {
        padding: 0;
        padding-top: 80px;
    }

    .work-name {
        margin: 0;
    }

    #na-presentation {
        padding-top: 0;
    }

    .slick-slide img{
        width: 100%;
    }

    #na-more {
        text-align: center;
    }

    #na-more .container a {
        text-align: left;
    }

    #na-insights .row > .col-xl-4 > .card-blog {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .card-blog .card-body {
        align-items: center;
    }

    #na-singlePage .container{
        width: 100%;
    }


    .slick-prev{
        display: none;
    }

    .slick-next{
        display: none;
    }

}

@media (max-width: 767px) {

    #work .social>img,
    #insights .social>img,
    #single-page .social>img,
    #contact .social>img {
        margin-bottom: 20px;
    }

    #insights .info-footer, #single-page .info-footer, #contact .info-footer, #work .info-footer, .custom .info-footer { 
        margin-bottom: 20px;
    }

    #na-footer.custom .top>div {
        margin-bottom: 40px;
        padding: 0 20px;
    }
    #na-banner img { width: 100%;}

    #na-contact+#na-footer { padding-top: 0px !important;}

    .index-v2 .info-footer+a { margin-top: 20px;}

    .accordion span {
        min-width: 300px;
        max-width: 300px;
    }

    #heroAnimation{
        display: none;
        width: 100%;
    }
    
    #heroAnimationMobile{
        display: block;
    }

    .s-64-88 {
        font-size: 43px;
    }

    .s-64 {
        font-size: 42px;
        /* line-height: 1; */
        /* margin-bottom: -8px; */
    }

    .s-48,
    .s-48-85 {
        font-size: 33px;
        line-height: 50px !important;
    }

    .s-42 {
        font-size: 30px;
    }

    /* ---- [Naked Ape nav responsive ] ---- */

    #contact-us {
        display: none;
    }

    nav {
        padding: 0 20px;
        height: 80px;
    }

    #burger-icon,
    #close-icon {
        margin: 0;
    }

    .sidemenu>div {
        padding: 0 20px;

        height: 80px;
    }

    .sidemenu {
        width: 100%;
    }

    .sidemenu ul {
        margin-top: 60px;
        text-align: center;
    }

    #banding {
        height: 85px;
    }

    /* ---- [Naked Ape HERO responsive ] ---- */

    .center-content {
        width: 100%;
        min-width: 350px;
        width: calc(100% - 40px);
        min-width: 350px;
    }

    /* ---- [Naked Ape ABOUT responsive ] ---- */


    .typewriter {
        animation:
            typing steps(35, end);
        animation-duration: 2.5s;
    }

    .center-content p {
        padding: 0 20px;
    }

    /* ---- [Naked Ape PROCESS responsive ] ---- */

    #na-process {
        text-align: center;
        padding-top: 20px;
        background-image: none;
    }

    #placeholder-img {
        display: none;

    }

    #mobile-process {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 40px;
    }

    #mobile-process .s-24 {
        line-height: 100%;
    }

    .line {
        margin: 20px 0;
    }


    /* ---- [Naked Ape LOGOS responsive ] ---- */

    .logos {
        /* display: flex; */
        flex-direction: column;
        grid: repeat(3, 1fr) /repeat(2, 1fr);
        scale: 0.8;
    }

    /* ---- [Naked Ape COLLAGE responsive ] ---- */

    #na-collage {
        flex-direction: column;
    }


    .collage-link {
        width: 100%;
        height: calc(100% * 1/8);
    }

    .collage-link img {
        width: 100%;
    }

    #col-3 img {
        scale: 1.5;
        margin-top: 0;
        margin-right: 0;
        object-position: 50% 63%;
    }

    #col-4 img {
        scale: 1.2;
        margin-left: 0;
        object-position: 50% 63%;
    }

    #col-5 img {
        scale: 1.2;
        object-position: 50% 53%;
    }

    #col-6 img {
        scale: 1.45;
        margin-left: 0;
        margin-top: 0;
        object-position: 50% -1%;
    }

    #col-7 img {
        scale: 2.2;
        margin-left: -30px;
        object-position: 50% 76%;
    }

    #col-8 img {
        margin-left: 0;
        object-position: 50% 40%;
    }
    /* ---- [Naked Ape TEAM responsive ] ---- */

    #na-team {
        display: block;
    }

    #team-mobile {
        display: block;
    }

    #team-text .center-content {
        min-width: 100%;
        text-align: center;

    }

    #team-text {

        min-height: 640px;
    }

    #team-text .center-content .team-hero {
        padding: 0 20px;
        text-align: left;
    }

    .card-container,
    .team-img-container {
        display: none;
    }

    #team-mobile .card-container {
        padding: 0px 20px;
    }


    #card-1::after,
    #card-2::after,
    #card-3::after,
    #card-4::before,
    #card-5::before,
    #card-6::before,
    #card-1>div::before,
    #card-3>div::after,
    #card-5>div::after,
    #card-2>div::before,
    #card-4>div::after,
    #card-6>div::after {
        display: none !important;
    }



    .card-info,
    #card-1 {
        margin-top: 90px;
        display: flex;

    }

    .team-img {
        margin-bottom: 40px;
        height: 200px;
    }

    .member-info{
        padding-left: 20px;
    }


    #card-1 .member-name::after,
    #card-3 .member-name::after,
    #card-5 .member-name::after {
        position: absolute;
        background-image: url('../img/icons/arrow.svg');
        background-repeat: no-repeat;
        background-size: auto;
        height: 220px;
        width: 90px;
        content: "";
        display: block;
        bottom: -200px;
        right: 40px;
        transform: rotate(200deg);
        scale: 0.9;
    }

    #card-2 .member-name::after,
    #card-4 .member-name::after,
    #card-6 .member-name::after {
        position: absolute;
        background-image: url('../img/icons/arrow.svg');
        background-repeat: no-repeat;
        background-size: auto;
        height: 220px;
        width: 90px;
        content: "";
        display: block;
        bottom: -200px;
        right: 35px;
        transform: rotate(150deg);
        scale: 0.9;
    }

    .index-v2 #card-1 .member-name::after,
    .index-v2 #card-3 .member-name::after,
    .index-v2 #card-5 .member-name::after,
    .index-v2 #card-2 .member-name::after,
    .index-v2 #card-4 .member-name::after,
    .index-v2 #card-6 .member-name::after {
        display: none;
    }




    /* ---- [Naked Ape intro responsive ] ---- */

    #na-intro {
        height: 100%;
        width: 100%;
        text-align: center;
        padding: 60px 0;
        min-height: 100%;
        margin-top: 0;
    }

    #us #na-intro {
        margin-top: 75px;
        padding: 80px 0;
    }

    #na-intro .container {
        flex-direction: column;

    }

    #na-intro p {
        width: calc(100% - 40px);
        max-width: 810px;
        font-size: 24px;
        line-height: 35px !important;
        margin: 0 auto;
        padding: 0 20px;
    }

    #na-intro .active+.panel{
        width: calc(100% - 40px);
    }

    .left-sect {
        margin-bottom: 0px;
        padding: 0;
    }

    #na-intro ul li::before {
        margin-right: 20px;
        width: 50px;
        height: 80px;
        background-size: contain;
    }

    #na-intro ul li {
        text-align: left;
    }

    #na-intro .right-sect {
        width: 100%;
        margin-top: 60px;
    }

    #na-intro .accordion {

        padding: 18px 0;
    }

    .accordion::before {

        background-size: contain;
        height: 65px;

    }


    /* ---- [Naked Ape footer responsive ] ---- */

    #na-footer {
        padding-top: 100px;
        text-align: center !important;
    }

    #na-footer .top,
    #na-footer .bot {
        flex-direction: column;
    }


    #na-footer .top form {
        margin: 0 auto;
        /*width: calc(100% - 40px);*/
        min-width: auto;
    }

    #contact form input,
    #contact form input::placeholder,
    #contact form textarea,
    #contact form textarea::placeholder{
        font-size: 24px;
    }
    
    #na-contact{
        padding-top: 80px;
        padding-left: 0;
    }

    #na-contact p,
    #na-contact #title-contact {
       padding: 0 20px;
    }

    #na-nav{
        height: 80px;
    }

    .presentation-section.right div p, .presentation-section.left div p{
        margin-right: 0;
    }

    .index-v2 .btn-style{
        width: calc(100% - 20px);
    }

    .input-style {
        min-width: calc(100% - 45px);
        /* display: block; */
        width: 100%;
    }

    #na-footer .bot {
        align-items: flex-start;
        margin-top: 40px;
        margin-left: 20px;
    }

    .social {
        margin-bottom: 20px;
    }

    .social>div {
        justify-content: center;
    }

    .social div img {
        margin-left: 0;
        margin-right: 10px;
    }


    #insights .info-footer, #single-page .info-footer, #contact .info-footer, #work .info-footer, .custom .info-footer {
        margin-top: 0;
    }

 .work {
        padding-right: 20px;
        padding-left: 20px;
        text-align: center;
    }

    /* Template mobile style */



    #na-workTitle {

        padding: 80px 0;
        margin-top: 0px;

    }

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

    .presentation-section.right {
        flex-direction: column;
        margin: 0;
        text-align: center;
        margin-top: 40px;
        align-items: center;
    }

    .presentation-section.right>div {
        margin: 0;
        text-align: center;
        margin-top: 40px;
    }

    .presentation-section.left {
        flex-direction: column;
    }

    .presentation-section.left>div {
        margin: 0;
        text-align: center;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


    #na-presentation {
        padding-bottom: 0;
    }

    #na-banner {
        background-image: url(../img/crisis/4-mobile.png);
        background-size: 100% 100%;
    }


    .wylde #na-banner,
    .dame #na-banner {
        background-position: center;
        background-size: cover;
    }

    .spruce #na-banner {
        background-size: cover;
    }

    #na-outcome .presentation-title {
        text-align: center;
        margin: 0;
        margin-bottom: 40px;

    }

    #na-more .more-title {
        margin-left: 0;
        text-align: center;
        margin-bottom: 40px;
    }

    .img-container img {
        width: 100%;
    }

    #project-name {
        text-align: center;
        margin-left: 0;
    }

    #project-name p {
        margin-bottom: 20px;
    }

    #na-outcome .container {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .card-blog .card-body {
        align-items: center;
        text-align: center;
    }

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

    .center-carousel,
    #work #na-footer .top .label,
    .process-title,
    .insights-title,
    #contact #na-contact .label,
    .presentation-section.right>div p,
    .presentation-section.left p,
    #na-outcome p {
        padding: 0 20px;
    }

    .blog-articles .row {
        margin: 0;
        width: 100%;
    }

    #na-footer .input-style {
        width: auto;
        /* max-width: calc(100% - 60px); */
    }


    #insights #na-footer textarea.input-style,
    #single-page #na-footer textarea.input-style {
       width: 100%;
    }

    .work-name {
        margin: 0;
    }

   #na-footer.index-v2 .top.reverse,
    #na-footer.index-v2 .top .reverse {
        flex-direction: column-reverse;
    }

    #na-footer.index-v2 .top .top div{
        padding: 0 20px;
        text-align: left;

    }

    #heroAnimation html {
        scale: 1.3;
    }

    #index .center-content .hero-para{
        padding: 0 15px;
    }

    #na-footer .top .label{
        font-size: 48px;
        /*padding: 0 10px;*/
    }
  .work:after, .insight:after {
        width: 100%;
        transition: all ease 1.5s;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 15;
        width: 100%;
        height: 100%;
        display: block;
        content: "";
        z-index: 1;
        background: linear-gradient(0deg, #3F06B7 51.12%, rgba(255, 255, 255, 0.270323) 108.71%);
        opacity: 1;
        transition: all ease 0.8s;
        max-width: 100%;
    }

     .insight {
       padding: 100px 20px;
    }

     .insight a::after,  .work a::after{
        width: 100%;
    }

     .work,
     .insight  {
        margin-bottom: 10px;
    }

     .work:last-child,
     .insight:last-child{
        margin-bottom: 0;
    }

     .work .work-hover {
        opacity: 1;
    }

     .insight:after{
        max-width: 100%;
    }

     .insight .insights-hover{
        opacity: 1;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

     .insight a::after{
        width: 100%;
    }

    #na-insights .insights-title p {
        margin-bottom: 25px;
        line-height: 120%;
    }

    #na-collage.index-v2:after{
        max-width: 100%;
        background: linear-gradient(to top, #3F06B7 51.12%, rgba(255, 255, 255, 0.270323) 108.71%);
    }

    #na-collage #hover-collage{
        text-align: center;
        display: block;
        padding-right: 30px;
        left: 30px;
    }

    .slick-prev, .slick-next {
        display: none !important;
    }

    #template .slick-prev,#template .slick-next{
        display: inline-block !important;
    }

    .center-content #h2-ant, .center-content #h2-semi, .center-content #h2-story{
        min-height: 60px;
    }

    .logos:last-child {
        margin-top: -80px;
    }

    .na-container, .container{
        width: 100%;
        /* padding: 0 20px; */
    }

    #na-singlePage .container {
        padding-top: 0;
    }

    .logo-container {
        display: grid;
        grid: auto / repeat(2, 1fr);
        align-items: center;
        justify-content: center;/* width: 100%; */}
    
        .logo-container img {width: 100%;}

        #work .center-content .hero-para{
            max-width:730px
        }

    .presentation-title{
        margin-right: 0;
    } 
    
    #na-footer .top p{
        padding: 0;
    }

    #na-footer.index-v2 .top form{
        margin: 0;
        /*max-width: calc(100% - 20px);*/
    }

   

}

@media (max-width: 540px) {

    #team-mobile .slick-prev{
        left: -10px;
    }

    #team-mobile .slick-next{
        right: -10px;
    }
    
}

@media (max-width: 500px) {
    .card-blog .blog-img{
        width: 100%;
        height: 100%;
    }

    #team-mobile .slick-prev,
    #team-mobile .slick-next{
    display: none !important;
    }

    
}

@-moz-document url-prefix() {

    @media(max-width:1400px) {

        .process-container{
            scale: 0.8;
        }

    }

    @media(max-width:1200px) {

        .process-container{
            scale: 0.74;
        }

    }

}

.custom { background: radial-gradient(circle farthest-side at top left,#3F06B7 0%,#231154 100%); }
#na-footer.custom .info-footer a:hover { color: #fff !important;}

.post-content { padding: 0 40px; padding-left: 30%; padding-bottom: 50px; max-width: 90%;}
#na-singlePage .top { padding: 0 20px;}

@media (max-width: 900px) {
    .post-content { padding: 0 40px; padding-bottom: 50px; max-width: 100%;}
}

#na-testimonial .slick-prev {
    left: -150px;
} 

#na-testimonial .slick-next { 
    right: -150px;
}

.member-name { margin-bottom: 34px !important;}