@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* GENERAL LAYOUT */

    *{
        margin:0;
        padding:0;
        
    }

/* PRELOADER */
    #preloader{
        height:100vh;
        width:100%;
        position:fixed;
        background-color:#fefefe;
        text-align:center;
        padding-top:25%;
        z-index:3;
    }
            
    @keyframes spin{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
            }
            
    #preloader img{
        animation:spin 1s linear infinite;
            }


/* NAVIGATION HEADER */

header{height:136px;
    background-color:#fefefe;
    }

.navUp{animation: 2s anim-navUp ease-out;}
@keyframes anim-navUp {
  0% {opacity: 0;
    transform: translateY(-30%);}
  20% {opacity: 0;}
  50% {opacity: 1;
    transform: translateY(0%);}
  100% {opacity: 1;
    transform: translateY(0%);}
}


.home{cursor: pointer;
        width:200px;
        height:100px;
        margin-top:20px;
        margin-bottom:0px;
       margin-left:46px;
    text-align:left;
  float: left;
    }


nav{
    position:relative;
    top:0;
    height:86px;   
    z-index:1; 
    margin-right:48px;
    float: right;
     text-align: center;
    margin-top:50px;
   }

nav a{
    margin-left: 30px;
    font-size:1.25em;
    color:#333;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-weight:400;}

nav a:hover{
    text-align:center;
    margin:0px 0px 0px 30px;
    cursor: pointer;
    font-weight:200;
    text-decoration:none;
    font-family: 'Montserrat', sans-serif;
    font-size:1.25em;
    color:#aa1b6d;}


nav a:visited{
    font-weight:400;
    text-decoration:none;
    font-family: 'Montserrat', sans-serif;
    }

nav a.active{border-bottom:2px solid #aa1b6d;
padding-bottom:2px;
    color:#333;}

nav a.active:hover{border-bottom:.75px solid #aa1b6d;
color:#aa1b6d;}

#reload{border-bottom:0px solid #aa1b6d;
}


/* MAIN */


 main{min-height:1000px;
background-color:#fefefe;}
    

/* SIDE NAV */


/* DAISY */


#daisy{
}

/* SECTION DAISY1 */

#daisy1{}

#top{background-color:rgba(202,219,247,.9);
    padding:48px 48px 48px 0px;
    display: flex;
    flex-wrap:wrap;
    max-width:100%;
    align-items:center;
    }

#name-daisy{width:52%;
float: left;}

#name{font-size:4em;
     margin: 48px 48px 12px 48px;
    font-weight:600;
       color: #333;
      font-family: 'Montserrat', sans-serif; 
       text-align:left;
    }

    #blurb{
    color:#333;
    font-size:1.5em;
     margin: 0px 12px 48px 48px;
    font-family: 'Montserrat', sans-serif;
    }

/* SHORT STORY */

 .mockup2{max-width:48%;
flex: 1 1 48%;
  object-fit: contain;
    }

#over-info{max-width:100%;
display:flex;
flex-wrap: wrap;
    align-items: flex-start;
    margin: 72px 104px 0px 104px;
    gap:48px;
    justify-content: space-between;
}

#overview{max-width:47%;
}

.title4{
    margin-bottom:8px;
    margin-right:24px;
    font-family: 'Montserrat', sans-serif;
    color:#00148A;
    font-size:1.25em;
    font-weight:500;}

.content{font-weight:400;
    font-family: 'Montserrat', sans-serif;
    color:#333;
font-size:1em;
margin-bottom:24px;}


.column{
    max-width:47%;
    list-style-type:none;
    font-family:'Montserrat', sans-serif;
    text-align: left;
    column-count:1;
    margin-top:4px;
        }

.title{
    font-weight: 600;
    margin-bottom:8px;
    font-family: 'Montserrat', sans-serif;
    color:#00148A;
    font-size:1em;}

    .group1{
    }

    .content2{
    font-weight:400;
    margin-bottom:24px;
    font-family: 'Montserrat', sans-serif;
    text-align:left;
    color:#333;
      min-height:48px;
    line-height: 24px;
    }


/* SHORT STORY */

.short{}

.process{font-size:2.25em;
     margin: 72px 48px;
      font-family: 'Montserrat', sans-serif;
    color:#050A0F;
    border-left: 4px solid #00148A;
    padding-left:8px;
    text-align:left;
    }

.block{display:flex;
    flex-wrap:wrap;
margin:24px 104px 72px 104px;
    justify-content: space-between;
    max-width:100%;
gap:48px;
    }

#probsol{display:flex;
flex-direction: column;
    max-width:47%;}

#q{}

#answer{}

.title2, .title3{
    margin-bottom:8px;
    font-family: 'Montserrat', sans-serif;
    color:#00148A;
    font-size:1.25em;
font-weight:500;}

.title2{background:url(images/daisy/icon-problem.png)no-repeat;
    background-size:24px; 
    background-position: left center;
    padding-left:32px;
    }

.title3{background:url(images/daisy/icon-solution.png)no-repeat;
    background-size:24px; 
    background-position: left center;
    padding-left:32px;
    }

    .content3{font-weight:400;
    margin-bottom:24px;
    font-family: 'Montserrat', sans-serif;
        color:#333;}



#b{max-width:47%;
    display:flex;
     justify-content:center;
    align-items: center;
    }

#b-text{
    padding:24px 24px 0px 24px;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:48px;
    border: 1px solid #285482;
background-color:#fefefe;
}

.flower5{max-width:8%;
     margin-top:-292px;
    margin-left:-40px;
}

.title5{
    margin-bottom:8px;
    font-family: 'Montserrat', sans-serif;
    color:#00148A;
    font-size:1.25em;
    font-weight:500;
    
 background:url(images/daisy/icon-business.png)no-repeat;
    background-size:24px; 
    background-position: left center;
    padding-left:32px;
    }

/* CAROUSEL */

.small-margins{margin: 0px 80px;}

.small-margins1{margin: 0px 48px;}

.carousel{
            width: 100%;
            max-width: 100%;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
    margin-top:48px;
        }

        .carousel-images {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-slide {
            display: flex;
            width: 100%;
            flex-shrink: 0;
            justify-content:center;
        }

  /* Single image style */
.carousel-slide.single-image img {
    width:90%;
        object-fit: cover;
        }
 
 /* Two-image style */
        .carousel-slide.two-images img {
            width: 50%;
            object-fit: cover;
            padding: 0 4px;
            box-sizing: border-box;
        }
    
        .carousel-controls {
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
        }

        .carousel-controls .prev{
            background: rgba(85,85,85,.8);
            color: #fefefe;
            border: none;
            padding: 3px 12px 3px 10px;
            cursor: pointer;
            user-select: none;
            border-radius:100px;
            font-size:1.5em;
        }

.carousel-controls .next{
            background: rgba(85,85,85,.8);
            color: #fefefe;
            border: none;
            padding: 3px 10px 3px 12px;
            cursor: pointer;
            user-select: none;
            border-radius:100px;
            font-size:1.5em;
        }

        .carousel-dots {
            display: flex;
            justify-content: center;
            margin-top: 16px;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            background: #ccc;
            border-radius: 50%;
            margin: 0 8px;
            cursor: pointer;
        }

        .carousel-dot.active {
            background: #333;
        }




#scroll{font-family: 'Montserrat', sans-serif;
    text-align:center;
    font-size:1.5em;
    margin-top:48px;
    color:#757575;
    max-width: 100%; 
   text-align: center; 
   border-bottom: 3px dashed #cbcbcb; 
   line-height: 0.01em;
    font-weight:300;
   }

#scroll span{background:#fff; 
    padding:0 24px;
    margin-right:24px;
    margin-left:24px;
    }


/* PROGRESS BAR */


 .step-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #fefefe;
            padding: 20px 0;
            display: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .step-progress-container {
            max-width: 92%;
            margin: 0 auto;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .progress-line {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: #ccc;
            transform: translateY(-50%);
            z-index: 1;
            margin-right:24px;
            margin-left:24px;
        }

        .progress-line-filled {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: #333;
            width: 0;
            transition: width 0.3s ease;
        }

        .step-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
             cursor: pointer;
        }

        .step {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            transition: all 0.3s ease;
             font-family: 'Montserrat', sans-serif;
            
        }

        .step-label {
            margin-top: 8px;
            font-size: 1em;
            color: #333;
            transition: all 0.3s ease;
             font-family: 'Montserrat', sans-serif;
        }


        .step-wrapper.active .step {
            background: #00148A;
            color: #fefefe;
            font-weight:600;
        }

        .step-wrapper.active .step-label {
            color: #00148A;
            font-weight: 600;
        }

        .step-wrapper.completed .step {
            background: #333;
            color: #fefefe;
        }

        .step-wrapper.completed .step-label {
            color: #333;
        }

    
/* GENERAL */

#daisy2, #daisy3, #daisy4, #daisy5, #daisy6{
   padding-top:104px;
    margin-bottom:104px;
    min-height: 100vh;
}

.margins{
    margin-left:60px;
    margin-right:60px;
    }


.h2{font-size:2em;
    font-weight:600;
    margin-bottom:48px;
    padding:24px 60px;
    max-width:100%;
    font-family: 'Montserrat', sans-serif;
    background-color:rgba(202,219,247,.9);
    color:#333;}


.h3{font-family: 'Montserrat', sans-serif;
    color:#333;
    font-size:1.75em;
    margin-bottom:24px;
    margin-top:72px;
    font-weight:500;}

.h4{font-family: 'Montserrat', sans-serif;
    color:#555;
    font-size:1.25em;
     margin-top:32px;
    margin-bottom:12px;
font-weight:500;}

.h4-2{font-family: 'Montserrat', sans-serif;
    color:#00148A;
    font-size:1.25em;
    margin-left:12px;
    margin-bottom:4px;
font-weight:500;}


.content5{font-weight:400;
    margin-left:12px;
    margin-right:0px;
    font-family: 'Montserrat', sans-serif;
    color:#333;
font-size: 1em;
margin-top:8px;}


.subsub{color:#555;
    font-size:1em;
    font-family: 'Montserrat', sans-serif;
    margin-top:-16px;}

  .content4{font-weight:400;
    margin-bottom:24px;
    margin-right:24px;
    font-family: 'Montserrat', sans-serif;
        color:#333;}

 .content6{font-weight:400;
    margin-bottom:24px;
     margin-left:24px;
    font-family: 'Montserrat', sans-serif; 
        color:#333;}

 .content7{font-weight:400;
    margin-bottom:12px;
     margin-right:24px;
    font-family: 'Montserrat', sans-serif; 
        color:#333;}

.content-list-top{list-style:decimal;
 margin-top:12px;
margin-left:32px;
padding-left:8px;
    max-width:50%;
}

.content-list{list-style:decimal;
margin-left:32px;
padding-left:8px;
    margin-top:8px;
    max-width:50%;
}

.list-top{list-style:disc;
 margin-top:12px;
margin-left:32px;
padding-left:8px;
    font-family: 'Montserrat', sans-serif;
}

.list{list-style:disc;
 margin-top:12px;
margin-left:32px;
padding-left:8px;
   font-family: 'Montserrat', sans-serif;
}

.sub-list{list-style:decimal;
margin-left:32px;
padding-left:8px;
margin-bottom:8px;
margin-top:8px;
    font-family: 'Montserrat', sans-serif;
}


.sub-list-final{font-family: 'Montserrat', sans-serif;
list-style-type: none;
 background:url(images/daisy/icon-flower2.png)no-repeat;
    background-size:32px; 
    background-position: left top;
    padding:8px 0px 8px 36px;
}

.insights{margin-left:32px;
    padding-left:8px;
    margin-bottom:8px;
    font-family: 'Montserrat', sans-serif;
    color:#333;
    }

.insights-last{margin-left:32px;
    padding-left:8px;
    margin-bottom:24px;
    font-family: 'Montserrat', sans-serif;
    color:#333;
    }


.imagefig{font-family: 'Montserrat', sans-serif;
color:#555;
    font-weight:600;
  
}


.imagefigblue{font-family: 'Montserrat', sans-serif;
color:#00148A;
font-weight:700;
  margin-top:8px;
    margin-bottom:12px;
}

.blue2{
border: 2px solid #00148A;
padding:2px;
border-radius:8px;
     background-color:#EEEFF2;
    font-size: 1.1em; 
}

.blue{color:#00148A;
font-weight:700;
}

/* SECTION DAISY2 - DISCOVERY */



#comp-annotations{max-width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap:48px;
   }

.annotations{max-width:48%;
}

.annotations img{max-width:100%;
flex: 1 1 100;
  object-fit: contain;
    
}


#full-existing{max-width:100%;
    display: flex;  
    flex-wrap:wrap;
    gap:24px;
    align-items:flex-end;
}

#existing1{max-width:44%;
}

#existing2{max-width:53.7%;
}

 #existing1 img{max-width:100%;
      box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;
}

#existing2 img{max-width:100%;
     box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:10px;
}


/* SECTION DAISY3 - SPRINT 1 */

#full-comp{max-width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom:24px;
}

#competition{max-width:100%;
flex: 1 1 100%;}


#full-inspo{
   display: flex;
    flex-wrap: wrap;
justify-content: center;
gap:24px;
}

.comp-image{max-width:40%;
    }

.comp-image img{max-width:100%;
    flex: 1 1 100%;
    object-fit: contain;
     box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;
    }

.full-lo-fi{max-width:100%;
    display: flex;
    flex-wrap: wrap;
     justify-content: center;
    align-items: flex-end;
    margin-bottom:24px;
gap:24px;
}

.lofi{max-width:40%;
}

.lofi img{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;
 box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;}


/* SECTION DAISY4 - SPRINT 2 */


.pipeline-inspo{max-width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    justify-content: center;
    align-items:flex-end;
    margin-bottom:24px;
}

.copyai{max-width:40%;
}

.copyai img{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;
 box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;}

.calendly{max-width:40%;
}

.calendly img{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;
     box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;
}




.fullncpi{max-width:100%;
    display: flex;
    flex-wrap: wrap;
align-items: center;
    margin-bottom:48px;
}

.ncpitext{max-width:100%;}

.ncpinotes{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;}


#full-screens{max-width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
margin-bottom:24px;}

.lofi-screen{max-width:50%;
flex: 1 1 50%;
  }



#options{max-width:90%;
    margin: 0 auto;
    margin-bottom:48px;
}



#tasks, #refine{margin-top:24px;}

.hifi-screens{max-width:100%;
display: flex;
flex-wrap:wrap;
gap:24px;
margin-bottom:40px;
    margin-top:16px;
justify-content: center;}

.hifi{max-width:40%;
}

.hifi img{max-width:100%;
    flex: 1 1 100%;
  object-fit: contain;
     box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;
}


#fun{
    display:flex;
      margin:0px 0px 24px 0px;
    justify-content:center;
    align-items: center;
    max-width:100%;
}

.how-to{
    display:flex;
    flex-wrap:wrap;
    max-width:30%;
    float:right;
    padding:24px 24px;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:48px;
    border: 1px solid #00148A;
background-color:#fefefe;
    margin-left:-8px;
}



.mockup1{
    margin-top:24px;
    margin-bottom:24px;
    max-width:60%; 
    float:left;
    }

.flower{max-width:4%;
    margin-top:-184px;
    margin-left:-36px;
}



/* DAISY5 - DELIVERY */


#full-type{max-width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top:24px;
    margin-bottom:24px;
}

#type-text{max-width:75%;
flex: 1 1 75%;}

#icon-image{max-width:25%;
flex: 1 1 25%;
  object-fit: contain;
}


#full-palette{max-width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
margin-bottom:48px;}



.full-colors{max-width:100%;
margin-bottom:24px;
   display: flex;
justify-content: center;
gap:48px;}

.palette{max-width:30%;
    }

.palette img{max-width:100%;
     box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;
    }


#palette-center{max-width:100%;
margin-bottom:24px;
   display: flex;
justify-content: center;}

#palette-image{max-width:85%;
}


#palette-image img{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:8px;
}



#full-system{max-width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom:24px;
    }

#system-text{max-width:100%;
flex: 1 1 100%;
  }

#background-color{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;}


.full-take{display:flex;
      margin:48px 0px;
    justify-content:center;
    align-items: center;
    max-width:100%;
}

.take{
    max-width:80%;
    padding:24px;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:48px;
    border: 1px solid #00148A;
background-color:#fefefe;
}

.flower4{max-width:4%;
    margin-top:-94px;
    margin-left:-36px;
}

/* HANDOFF */


 .handoff-image{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;
    margin-bottom:104px;
    }


.full-success{display:flex;
      margin:0px 0px 48px 0px;
    justify-content:center;
    align-items: center;
    max-width:100%;
}

.success{
    max-width:80%;
    padding:24px;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:48px;
    border: 1px solid #00148A;
background-color:#fefefe;
}

#success-text{margin-right:12px;}

.flower2{max-width:4%;
     margin-top:-84px;
    margin-left:-40px;
}






/* SECTION DAISY6 - REFLECTION */

.full-wins{display:flex;
      margin:48px 0px 24px 0px;
    justify-content:center;
    align-items: center;
    max-width:100%;
}

.wins{
    max-width:80%;
    padding:24px;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
    border-radius:48px;
    border: 1px solid #00148A;
background-color:#fefefe;
}

.flower3{max-width:4%;
     margin-top:-194px;
    margin-left:-40px;
}

#screen-options{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;
margin-bottom:24px;}


.mockup3{max-width:100%;
margin-top:48px;}



/* OTHER WORK */


.other-work{
     border-top: 1px solid #cbcbcb;
}

#otherw{margin:104px 80px 80px 80px;
}

#othercs{max-width:100%;
    display: flex;
    gap:24px;
}

.othera{text-decoration: none;}

.othera:hover{
text-decoration: none;}

.othera:visited{
text-decoration: none;}


.other-image, .other-image2{max-width:100%;}

.other-image:hover{cursor: pointer;
    transform: scale(1.01);
}

.otherfig{
    font-family: 'Montserrat', sans-serif;
    color:#333;
font-size: 1em;}

/* BACK NEXT NAV */

    .backnext{margin:0px 80px 0px 80px;
       display:flex;
        justify-content: center;
        gap:48px;
        border-top: 1px solid #cbcbcb;
        }

    .backnext a{
        font-size: 1.25em;
        color:#333;
        font-family: 'Montserrat', sans-serif;
        text-decoration: none;
        text-align:center;
        margin: 80px 0px;
   }

    .backnext a:hover{
        color:#aa1b6d;
        cursor: pointer;
        font-weight:200;
        text-decoration:none;
        font-family: 'Montserrat', sans-serif;
        font-size:1.25em;}

    .backnext a:visited{
        font-weight:400;
        text-decoration:none;
        font-family: 'Montserrat', sans-serif;
    }



/*BACK TO TOP BUTTON */

#myBtn {
  display: none; 
  position: fixed; 
  bottom: 100px; 
  right: 16px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background-color: #757575; 
  cursor: pointer;
  padding: 10px 8px 2px 8px; 
  border-radius: 100px; 
  font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #fefefe;
    font-size:1.8em;
    opacity: 0px;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.08);
}

#myBtn:hover{
    background-color:#555;}


/* FOOTER */

#footer{
    position:relative;
    bottom:0;
    width:100%;
    height:80px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background-color:#fefefe;
    padding-bottom: 10px;
    
     border-top: 2px solid;
    border-image:linear-gradient(90deg, rgba(196,161,68,1) 0%, rgba(217,191,86,1) 50%, rgba(196,161,68,1) 100%);
    border-image-slice: 1;
    
}

#footer a{
    position:absolute;
    color:#aa1b6d;
    font-family: 'Montserrat', sans-serif;
    font-size:1em;
    flex-grow:0; 
    text-decoration: none;
}

#copyright{
    position:absolute; 
    right:2em;
    color:#333;
    font-family: 'Montserrat', sans-serif;
    bottom:15px;}

#infinity{
    width:100px;
    height:auto;
    margin-bottom:95px;
    margin-top:150px;
    flex-grow:0;
    position:absolute;
    
}
}