:root {
    
  --desktopRootFontSize:16px;  
  --mobileRootFontSize:6px;
  --XSmall:0.785rem;
  --Small:1rem;
  --Medium:1.3rem;
  --Large:1.75rem;
  --XLarge:3rem;
  --XXLarge:3.75rem;
  --XXXLarge:6rem;

  --gridSize1:92%;
  --gridSize2:72%;

  --darkBlue:#1a1a33;
  --darkGreen:#55a7a2;
  --green:#6bdccb;
  --lightGreen:#e1f8f5;
  --darkGray:#333333;
  --orange:#e98466;


}





ul, li {
    all: unset; /* Resets all inherited and non-inherited properties */
    list-style: none; /* Removes bullet points */
    margin: 0;
    padding: 0;
    display: block;
  }
  
a{
    text-decoration: none;
    color: inherit;
}
p{
    margin:0;
}

h1{margin:0;}
h2{margin:0;}
h3{margin:0;}
h4{margin:0;}
h5{margin:0;}
h6{margin:0;}

html,body {
    font-family: "Inter Tight", serif;
    font-size:var(--desktopRootFontSize);
    cursor:default;
    margin:0;
    width:100vw;
    height: auto;
    background-color: var(--green);
    overflow-x:hidden;
}


#landingPage{  
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.sectionDiv{
    width:100vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 7rem;
    
}




/*---------- Video  ---------*/


.border-right{
    border-right: 4px solid white;
}


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



/*--------------------------        N A V I G A T I O N       -----------------------------*/

#section-navigation{
    width:100vw;
    height:7rem;
    background-color: var(--green);
}

#navBar{
    width:var(--gridSize1);
    z-index: 2;
}

#navLogo{
    display:block;
    height:3rem;
    width:auto;
}

.navBtn{
    cursor: pointer;
    font-size:var(--Medium);
    font-weight: 700;
    margin-left:7vw;
    color:var(--darkBlue);
    letter-spacing: 0px;
    /*text-transform: uppercase;*/
}
.navBtn:hover{
    color:var(--darkBlue);
}


/*--------------------------      I S O M E T R I C   S L I D E    -----------------------------*/

#section-slide{
    position: relative;
    margin-top:2rem;
    width:100vw;
    height:60vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-y: hidden;
    overflow-x:hidden;
    padding-bottom:10vh;
    background-image:linear-gradient(180deg, var(--green),var(--lightGreen));
}

#slideImageObject{
    position: absolute;
    display: flex;
    flex-direction: row;
    left: 0;
    width: 500vw;
    overflow: hidden;
    z-index: 3;
    animation: slide-image-animation 15s infinite; /* 3s per image x 3 images */
}
.slideImgHolder {
    position: relative;
    width: 25%;
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items:flex-start;
    background-color: transparent;
}
.slideImg{
    display: block;
    width:60vw;
    height:auto;
    padding-right:4vw;
}

/*
.slide:nth-child(1) { background: #FF0000; animation-delay: 0s; }
.slide:nth-child(2) { background: #0000FF; animation-delay: 3s; }
.slide:nth-child(3) { background: #33FF57; animation-delay: 10s; }
*/

/* Keyframes for sliding effect */
@keyframes slide-image-animation {
    0% { left: 0; }
    20% { left: 0; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; } 
}

#slideTextObject{
    margin-top:-3vw;
    z-index: 2;

}
.slideTextDiv{
    width:100vw;
    background-image: linear-gradient(90deg,rgba(225,248,245,0.4),rgba(225,248,245,0.0));
    line-height: 1.1;
    margin-bottom:0.8vw;
    height:9vw;
    padding-left:4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.slideLabel{
    color:var(--darkGreen);
    font-size:var(--Medium);
    font-weight: 600;

}

.slideValueDiv{
    display: grid;
    place-items:start;
    width: auto; /* Adjust as needed */
    height: auto; /* Adjust based on text size */
    overflow: hidden;
    font-size:var(--XXLarge);
}

.slideValue{
    grid-area: 1 / 1; /* Stacks all items in the same grid cell */
    opacity: 0;
    font-weight: 600;
    color:var(--darkGreen);
    animation: slide-text-animation 15s infinite; /* 3s per image x 3 images */
}

.slideValue:nth-child(1) { opacity:1 }
.slideValue:nth-child(2) { animation-delay: 3.3s; }
.slideValue:nth-child(3) { animation-delay: 6.9s; }
.slideValue:nth-child(4) { animation-delay: 10.5s; }
.slideValue:nth-child(5) { animation-delay: 14.4s; }


/* Keyframes for sliding text */
@keyframes slide-text-animation {
    0% { opacity: 0; }
    5% { opacity:1; }
    25% { opacity: 1; }
    30% { opacity:0;}
    100%{ opacity:0;}
}

/*--------------------------     H E A D E R  I N T R O     -----------------------------*/

#section-header{
    width: 100vw;
    background-color:var(--lightGreen);
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    padding-top:20vh;
    padding-bottom:8rem;
    /*
    margin-top:-130vh;
    width: 100vw;
    height:120vw;
    clip-path: polygon(0% 44%, 100% 0%, 100% 100%, 0% 100%);
    */
}



#header-intro{
    display: table;
    width:1%;
    
}
#header-headline{
    white-space: nowrap;
}

/*--------------------------     A D U   T Y P E S     -----------------------------*/


#section-adu{
    background-color: var(--lightGreen);   
}
#aduTypesDiv{
    margin-top:64px;
}

/*--------------------------     P O R T F O L I O      -----------------------------*/

#portfolio-section{
    background-color: var(--lightGreen); 
    padding-bottom:0;  
}

#portfolioBox{
    width:100vw;
    gap:0; 
}

.portfolioDiv{
    background-color: white;
    font-size:1.5rem;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items:flex-start;
}

.portfolioImg{
    width: 100%;
    height:90vh;
    animation: portfolio-animation 20s linear infinite alternate;
    background-position: bottom left;
    background-repeat: no-repeat; 
    background-size: cover; 
}

.portfolioLabelDiv{
    position:absolute;
    left:2rem;
    color:white;
    bottom:2rem;
    display: flex;
    font-size:2rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    line-height:1.1;
}

.portfolioCity{
    width:100%;
    margin:0;
}

.portfolioType{
    width:100%;
    margin:0;
    font-weight: 500;
}

.portfolioCriteriaDiv{
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size:1.25rem;

}

.portfolioCriteria{
    background-color: rgba(225,248,245,0.8);
    padding: 0.4rem 0.6rem 0.4rem 0.6rem;
    margin-right:0.625rem;
    color:var(--darkBlue);
    margin-top:1.250rem;
}

#portfolioImg1{background-image: url(../images/adustudio-desktop-portfolio-1.webp);}
#portfolioImg2{background-image: url(../images/adustudio-desktop-portfolio-2.webp);}
#portfolioImg3{background-image: url(../images/adustudio-desktop-portfolio-3.webp);}


@keyframes portfolio-animation {
  0% {
    background-position: bottom left;
  }
  100% {
    background-position: bottom right;
  }
}


/*--------------------------     P R O C E S S     -----------------------------*/

#section-process{
    background-color:var(--lightGreen);  
} 

#process-intro{
    margin-top:16vw;
}
#process-headline{
    white-space: nowrap;
}
.processDuration{
    color:var(--darkGreen);
}

#process-paragraph{
    line-height: 1.15;
    color:var(--darkGreen);
    width:70vw;
}


/*--------------------------     P R O C E S S    D I A G R A M     -----------------------------*/


#diagramDiv{
    width:var(--gridSize1);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 10rem;
    padding-bottom: 2rem; 
   
}
#diagramLine{
    width: calc( ((92vw - (3vw * 3)) / 8)*6 + 3*3vw + 6px);
    height:0.25rem;
    background-color:var(--darkGreen) ;
    position: absolute;
    
}
#diagramCirclesDiv{
    width: calc( ((92vw - (3vw * 3)) / 8)*6 + 3*3vw + 6px);
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    z-index: 2;
   
}
.circleDiv{
    width:1.5rem;
    height:1.5rem;
    border-radius: 100%;
    background-color:var(--darkGreen);
}

/*--------------------------     S E R V I C E S     -----------------------------*/

#section-services{
    background-color: var(--green); 
    background-color:#89e3d5;
} 


section{
    display: flex;
}

#service-headline{
    color:var(--darkBlue);
}










.sectionHeadlineDiv{
    width:var(--gridSize1);
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top:2em;
    padding-bottom:1em;
}
.sectionTextDiv{
    width:var(--gridSize1);
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top:4em;

}

#sectionTextDiv{
   
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: calc( ((92vw - (3vw * 3)) / 8)*6 + 3*3vw + 6px);
}


/*----------------------------------       G R I D S       ----------------------------------*/

.grid4Col{
    width:var(--gridSize1);
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3vw;
    
}
.grid3Col{
    width:var(--gridSize1);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
    row-gap:3rem;
}

.gridColImg{
    width:80%;
    height:auto;
    padding-bottom: 2rem;
    mix-blend-mode: multiply;
}
.columnHeadlineSmall{

    letter-spacing: 1px;
    color:var(--darkGreen);
}
.columnHeadline{
    width:100%;
    text-align: center;
    color:var(--darkBlue);
}
.columnHeadParagraph{
    color: var(--colorDarkGray);
    margin-top:0.75rem;
}



#serviceColDiv{
    margin-top:2vw;
    margin-bottom:4vw;
    width:var(--gridSize1);
    gap:0px;
    column-gap: 0px;
    color:var(--darkBlue);
}

.serviceCol{
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    background-color:transparent;
    background-color: #63ccbc;
    border:1px solid var(--darkBlue);
    box-sizing: border-box;
    padding:1.25rem;
}

#serviceCol1{background-color: #a1e9dd;}
#serviceCol2{background-color: #b8eee6;}
#serviceCol3{background-color: #d0f4ee;}
#serviceCol4{background-color:#e7f9f7;}

.serviceTitle{
    color:var(--darkBlue);
}

.serviceDescription{
    margin-top:1rem;
    flex-grow: 1; 
}

.serviceCaption{

    margin-top: 1.5rem;
    padding-bottom: 0.25rem;
    color:var(--darkBlue);
    font-weight: 300;
}

.servicePrice{
    display: block;
    color:var(--darkBlue);
    font-size:2.25rem;
    font-weight:500;

    
}
.serviceItems{
    border-bottom: 1px solid #666666;
    border-top:1px solid #666666;
    font-size:--var(--Small);
    font-weight: 500;
    margin-top:-1px;
    padding-top:0.325rem;
    padding-bottom:0.325rem;
}

.negativeFill{
    background-color:var(--lightGreen);
    color:var(--darkBlue);
}

/*--------------------------     P E R S O N A     -----------------------------*/

#section-persona{
    background-color: var(--lightGreen);   
}

#personaBox{
    margin-top:6rem;
}

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

.personaPortrait{
    height:7.5rem;
    width:7.5rem;
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;
    margin-bottom:1rem; 
}

#personaPortrait1{
    background-image: url(../images/adustudio-client-portrait1b.png);
}
#personaPortrait2{
    background-image: url(../images/adustudio-client-portrait2.png);
}
#personaPortrait3{
    background-image: url(../images/adustudio-client-portrait3.png);
}
#personaPortrait4{
    background-image: url(../images/adustudio-client-portrait4.png);
}

.personaTitle{
    padding-top:1rem;
    font-weight: 600;
    color:var(--darkBlue);
}
.personaParagraph{
    padding-top: 0.75rem;
}
/*--------------------------     V I D E O     -----------------------------*/

#wide-video{
    width:100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the screen */
}


/*--------------------------     C O N T A C T     -----------------------------*/

#section-contact{
    width:100vw;
    height:100vh;
    position: relative;
    overflow: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
}

#contactBox{
    position: absolute;
    width:50%;
    background-color:rgba(225,248,245,0.9);
    padding:3rem;
    box-sizing: border-box;
    z-index: 2;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#contact-headline{ 
    color:var(--darkBlue);
}
#contact-paragraph{ 
    color:var(--darkGray);
    font-weight: 400;
    margin-top:1rem;

}

.scheduleBtn{
    letter-spacing: 0.05rem;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:var(--darkBlue);
    color:var(--lightGreen);
    box-sizing: border-box;
    padding: 1rem 1.5rem 1rem 1.5rem;
    margin-top:2em;
}

.scheduleBtn:hover{
    color:var(--green);
}


.contactRowDiv{
    padding-top:0.325rem;
    padding-bottom:0.325rem;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    width:100%;

}
#contactRowDiv1{
    margin-top:1rem;
}
.contactLabel{
    width:6rem;
}

#contactParagraph{
    margin-top:1rem;
}

/*--------------------------     F O O T E R     -----------------------------*/

.footerDiv{
    background-color:var(--darkBlue);
    width:100vw;
    height: 4rem;
    display:flex;
    justify-content: center;
    align-items: center;
}
.footerTextDiv{
    width:var(--gridSize1);
    color:var(--lightGreen);
    opacity:0.8;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

#copyright{
    align-self: flex-end;
    margin-left: auto;
    font-weight:300;
}

.fa-brands{
    margin-left:1.6rem;
    font-size:1.23rem;
    cursor: pointer;
}

#footerLogo{font-weight: 600;}
.fa-youtube{font-size: 1.5rem;}


/*--------------------------     F L E X     -----------------------------*/


.flexColCenter{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}
.flexColStartC{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;  
}
.flexRowBetweenC{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; 
}
.flexRowBetweenEnd{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end; 
}
.flexRowEndC{
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center; 
}

/*--------------------------     H E A D L I N E    -----------------------------*/

.headline1{
    font-weight:500;
    font-size:var(--XXXLarge);
 
    line-height: 1.1;
    color:var(--darkGreen);
}

.headline2L{
    color:var(--darkGreen);
    font-weight: 600;
    line-height: 1.1;
}


.headline2{
    color:var(--darkGreen);
    font-size:var(--XLarge);
    font-weight: 600;
    line-height: 1.1;
}
.headline3{
    font-size:var(--Large);
    font-weight: 600;
    line-height: 1.1;
}
.headline4{
    font-size:var(--Medium);
    font-weight: 600;
}
.headline5{
    font-size:var(--Small);
    font-weight: 600;
}
.headline6{
    font-size:var(--XSmall);
    font-weight: 600;
}

.paragraph{
    font-size:var(--Small);
    font-weight:300;
    line-height: 1.25;
    color:var(--darkGray);
    margin-top:1em; 
}

.largeParagraph{
    margin-top:2em;
    font-size:var(--Large);
    font-weight:400;
    line-height: 1.15;
    color:var(--darkGreen); 
}

.highlightText{
    color:var(--darkBlue);
}

/*----------------------------------------------------------------------------------------------*/
/*---------------------------------------  M O B I L E -----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/

@media (max-width: 768px) {
    html,body {
        font-size:var(--mobileRootFontSize);
    }
    .slideValueDiv{
        font-size:var(--XLarge);
    }
    #section-slide{
        overflow-y:visible;
        padding-bottom:10vh;
    }
    #section-header{
        padding:0;
    }
    .headline1{
        font-size:var(--XXLarge);
    }
    .headline4{
        font-size:var(--XSmall);
    }
    .headline3{
        font-size:var(--Medium);
    }
    .headline2{
        font-size:var(--Large);
    }
    .paragraph{
        font-size:var(--XSmall);
    }
    .portfolioImg{
        height:50vw;
    }
    .serviceItems{
        font-size:var(--XSmall);
    }

    #section-contact{
        min-height:auto;
        height:auto;

    }
    #wide-video{
        width:100%;
        height: auto;
    }
    #contactBox{

    }
    

}