:root {
  --clr-accent-500: hsl(357.16, 69.81%, 41.57%);
  --clr-accent-100: hsl(356, 48.39%, 93.92%);
  
  
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-200: hsl(210, 7.14%, 94.12%);
  --clr-neutral-300: hsl(203.45, 40.09%, 57.45%);
  --clr-primary-350: hsl(213.53, 45.95%, 14.51%);
  --clr-primary-400: hsl(216, 45.45%, 4.31%);
  
  
  
  
  --ff-primary:"Urbanist", sans-serif;
  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);
  
  --fw-regular: 400;
  --fw-bold:500;
	
  --fs-300: 0.688rem;
  --fs-300: .875rem;
  --fs-400:1rem;
  --fs-450:1.5rem;
  --fs-500: 2rem ;
  --fs-600: 5rem;
  
  
  
  --fs-body: var(--fs-400);
  --fs-primary-heading: var(--fs-600);
  --fs-secondary-heading: var(--fs-500);
  --fs-nav: var(--fs-400);
  --fs-button: var(--fs-400);
}


--size-300: .875rem;
--size-400: 1rem;
--size-450: 1.5rem;
--size-500: 2rem;
--size-600: 5rem;




@media (min-width: 50em) {
    :root {
        --fs-600: 5rem;
        --fs-500: 2rem;
        --fs-body: var(--fs-400);
        --fs-primary-heading: var(--fs-600);
        --fs-secondary-heading: var(fs-500);
        --fs-nav: var(--fs-400);
        --fs-button: var(--fs-400);
    }
}


.page-content {
  opacity: 1;
}

@supports (animation-timeline: view()) {
  .page-content {
    animation-name: reveal;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero {
background-color: var(--clr-primary-350);
background-size: cover;
background-repeat: no-repeat;
min-block-size: 80vh;
place-content: center;
text-align: center;
padding-bottom: 16px;
vertical-align: top;
position: relative;
background-repeat: no-repeat;
background-position: center;
justify-content: center;
 position: relative;
  
height: 90vh;
    display: block;
    width: 100%;
    
    z-index: 0;
    object-fit: cover;


 


}


.hero-scroll {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 10px;
  text-decoration: none;
}

.hero-scroll span {
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}










header {
  width: 100%;
  height: 80px;
  background: #fff;
  display:flex;
  font-weight: var(--fw-semibold);
    font-size: var(--fs-400);
    color: var(--clr-primary-400);
    flex-direction: row;
}


h1
 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
  color: var(--clr-primary-350);
  font-size: var(--fs-600);
  text-transform: uppercase;
  

}

h2
 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
  color: var(--clr-primary-350);
  font-size: var(--fs-500);
  

}

h2
 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
  color: var(--clr-neutral-300);
  font-size: var(--fs-500);
  

}



h4
 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
  color: var(--clr-neutral-300);
  font-size: var(--fs-500);
  

}


h5
 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
  color: var(--clr-primary-350);
  font-size: var(--fs-450);
  

}




h5:hover{
    color: var(--clr-accent-500);

}


.copyright
 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-regualr);
  color: var(--clr-primary-350);
  font-size: 11px;
	 padding-bottom:1rem;
  

}


h2:hover{
    color: var(--clr-accent-500);

}

.text-primary-400 {
    color: var(--clr-primary-400)       
}

.text-neutral-200 {
    color: var(--clr-neutral-200)
}

.text-neutral-100 {
    color: var(--clr-neutral-100)
}

.text-neutral-300 {
    color: var(--clr-neutral-300)
}

.text-primary-350 {
    color: var(--clr-primary-350)       
}


.bg-primary-350 {
    background-color: var(--clr-primary-350)        
}


.bg-primary-400 {
    background-color: var(--clr-primary-400)        
}


.bg-neutral-100 {
    background-color: var(--clr-neutral-100)
}

.bg-neutral-200 {
    background-color: var(--clr-neutral-200)
}


.bg-neutral-300 {
    background-color: var(--clr-neutral-300)
}


.fw-bold { font-weight: var(--fw-bold); }
.fw-semi-bold { font-weight: var(--fw-semibold); }
.fw-regular { font-weight: var(--fw-regular); }

.fs-primary-heading {
    font-size: var(--fs-primary-heading);
    line-height: 1.1;
}

.fs-secondary-heading {
    font-size: var(--fs-secondary-heading);
    line-height: 1.1;
    
}

.fs-300 { font-size: var(--fs-300) }
.fs-400 { font-size: var(--fs-400) }
.fs-500 { font-size: var(--fs-500) }
.fs-600 { font-size: var(--fs-600) }


.h2 { color: darkblue; }
.h3  { color: orange; }

.page-wrap {
  padding: 2rem 0;
}



body {

     background-color: #fff;
      font-family: var(--ff-primary);
  font-weight: var(--fw-regular);
  color: var(--clr-primary-350);
  font-size: var(--fs-400);
  line-height: 1.6;

    
 }




.container > .Logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}


img.header-logo {
    height: 60px !important;
    width: auto !important;
    object-fit: contain;
    display: block;
    padding-bottom: 0px! imp;
     
}

.header-logo:hover{
     
   -webkit-filter: grayscale(100%);
  filter: grayscale(100%);

}



 .main img {
    width: 100%;
    height:auto;
 }

 .body {
    padding-top: 2rem;
 }

header .top-bar { 
	list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
   padding: 1rem 1rem;
  color: var(--clr-primary-350);
  justify-content: right;
  align-items: right;

  
}

header .top-bar li a {
    color: var(--clr-primary-400);
  text-decoration: none;

}


header .top-bar li {
  position: relative;
}


header .top-bar li a:hover {
    color: var(--clr-accent-500);
}

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




header .top-bar li .sub-menu {
  display:none;
  position:absolute;
  z-index: 999;
  top: 100%;
  right: 0;
  background:#ffffff;
  box-shadow:1px 1px 10px rgba(239, 240, 241, 1);
  margin: 0;
  padding: 0.5rem 1rem;
  width:200px;
  list-style-type: none;
  border-radius: 14px;
  line-height: 1;

  
}


header .top-bar li .sub-menu a {
    display: block;
    color: var(--clr-primary-400);
    padding: 0.5rem 1rem;
    text-decoration: none;
font-size: var(--fs-400);
    
}

header .top-bar .menu-item:hover .sub-menu{
display: block;
}


header .top-bar li .sub-menu a:hover {
    color: var(--clr-accent-500)
}

a,
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}

a {
  cursor: pointer;
  font-family: var(--ff-primary);
  font-weight: var(--fw-regular);
  color: var(--clr-primary-400);
  font-size: var(--fs-400);
  line-height: 1;
  text-decoration: none;

}

a:hover {
  color: var(--clr-accent-500);
}


 
 .footer {
     padding-top: 2rem;
	 padding-bottom:2rem;
 }

.scroller{ 
   
    background-color: #142336;
    position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
	overflow:hidden;
	
	
}


.scroller_inner {
    display:flex;
    gap: 1rem;
    flex-wrap: wrap;
    width: max-content; 
	padding-block:2rem;
	
	
    
}
.scroller_inner img {
    height: 300px;
    border-radius: 16px;
}

.scroller[data-animated="true"] {
    overflow:hidden;
    
}

.scroller[data-animated="true"] .scroller_inner{ 
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll 60s linear infinite;
    
}

@keyframes scroll {
    to{
        transform: translate(calc(-50% - 0.5rem));
    }
}



.bento-card {
    padding-top: 0rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
     border-radius: 28px;
    box-shadow:0px 0px 10px rgba(239, 240, 241, 1);


}

.bento-card:hover .image-text,
.bento-card:hover .image-text h2,
.bento-card:hover .image-text p {
  color: var(--clr-accent-500);
}


.bento-card a {
  position: relative;
  z-index: 20;
}


.bento-card .image-text {
     pointer-events: none;
    position: absolute;
    inset:0;
    z-index: 500;
    top: 16px;
    left: 16px;
    color: var(--clr-primary-350);
    top:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    margin:0;
    padding: 20px;
border-radius: 28px;
background: linear-gradient(
    180deg,
    rgba(242, 243, 244, 1) 0%,
    rgba(242, 243, 244, 0) 50%,
    rgba(242, 243, 244, 0) 100%);
}



.bento-card-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  z-index: 20;
}

.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    height: 100%;
    
    
}

.bento-card .projectimage {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;}







.bento-grid {
    padding-top: 0rem;
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: 
    "box-1 box-2" "box-3 box-4"
      "box-5 box-5" ;
}


.portfolio-bento {
    display: grid;
    gap: 16px;

    
}

.portfolio-bento > div {
    min-width: 0;
    overflow: visible;
    border-radius: 14px;

}



.project-image-link,
.projectimage {
  display: block;
  width: 100%;
  height: 100%;
}

.project-image-link {
  position: absolute;
  inset: 0;
  z-index: 0;
}



.portfolio-bento img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
   box-shadow: 0 0 10px rgba(239, 240, 241, 1);
    border-radius: 14px;
}

/* Confidential Client: box-5 spans both columns */
.bento-grid-C {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
     "box-text-20 box-text-20"
        "box-20 box-21"

         "box-text-22 box-text-22"
        "box-22 box-27"
        "box-23 box-27"
        "box-24 box-27"
        "box-25 box-27"
        "box-26 box-27"

 "box-text-27 box-text-27"
        "box-28 box-33"
        "box-29 box-33"
        "box-30 box-33"
        "box-31 box-33"
        "box-32 box-33"

;

}

.box-text-18 {

  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
  color: var(--clr-primary-350);
  font-size: var(--fs-500);

}


/* Unilingo */
.bento-grid-u {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
     "box-3 box-3"
    
        "box-4 box-5"
        "box-6 box-7"
        "box-8 box-9"     

}

/* Fintros */
.bento-grid-f {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "box-1 box-1" "box-2 box-2"
        
}

/* Skrumble */
.bento-grid-s {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "box-9 box-10" 
        "box-11 box-12" 
        "box-13 box-14"
        
}




/* Misc */
.bento-grid-m {
    display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
    "box-text-15 box-text-16"
        "box-15 box-16" 
        "box-text-17 box-text-17"
        "box-17 box-17"  
        "box-35 box-36"      
}



.portfolio-button {
    cursor: default!important;
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 2rem;
  margin-left: 1rem;
  padding: 5px 5px;
  background: var(--clr-neutral-200);
  color: var(--clr-primary-350);
  width:10%;
  text-decoration: none;
  border-radius: 7px;
  border: none !important;

}


/* Assign each image to its named grid area */
.box-text { grid-area: box-text; }
.box-text-15 { grid-area: box-text-15;
  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500);
 }
 .box-text-3 { grid-area: box-text-3;
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500);}

.box-text-16 { grid-area: box-text-16;
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500);}

  .box-text-35 { grid-area: box-text-35;
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500);}

.box-text-17 { grid-area: box-text-17; 
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500);}
.box-text-18 { grid-area: box-text-18;
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500); }
.box-text-20 { grid-area: box-text-20;
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500); }
.box-text-22 { grid-area: box-text-22;
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500); }
.box-text-27 { grid-area: box-text-27;
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500); }
.box-text-31 { grid-area: box-text-31; 
 font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
color: var(--clr-neutral-300);
  font-size: var(--fs-500);}
.box-1 { grid-area: box-1; }
.box-2 { grid-area: box-2; }
.box-3 { grid-area: box-3; }
.box-4 { grid-area: box-4; }
.box-5 { grid-area: box-5; }
.box-6 { grid-area: box-6; }
.box-7 { grid-area: box-7; }
.box-8 { grid-area: box-8; }
.box-9 { grid-area: box-9; }
.box-10 { grid-area: box-10; }
.box-11 { grid-area: box-11; }
.box-12 { grid-area: box-12; }
.box-13 { grid-area: box-13; }
.box-14 { grid-area: box-14; }
.box-15 { grid-area: box-15; }
.box-16 { grid-area: box-16; }
.box-17 { grid-area: box-17; }
.box-18 { grid-area: box-18; }
.box-19 { grid-area: box-19; }
.box-20 { grid-area: box-20; }
.box-21 { grid-area: box-21; }
.box-22 { grid-area: box-22; }
.box-23 { grid-area: box-23; }
.box-24 { grid-area: box-24; }
.box-25 { grid-area: box-25; }
.box-26 { grid-area: box-26; }
.box-27 { grid-area: box-27; }
.box-28 { grid-area: box-28; }
.box-29 { grid-area: box-29; }
.box-30 { grid-area: box-30; }
.box-31 { grid-area: box-31; }
.box-32 { grid-area: box-32; }
.box-33 { grid-area: box-33; }
.box-34 { grid-area: box-34; }
.box-35 { grid-area: box-35; }
.box-36 { grid-area: box-36; }

@media (max-width: 600px) {
    .portfolio-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 140px;
    }
}


.footer{
    background-color: var(--clr-neutral-200);
     padding: 2rem 0;
 

}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}