@font-face {
  font-family: 'Mona Sans';
  src:
    url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'),
    url('../fonts/Mona-Sans.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-stretch: 100% 120%;
}
@font-face {
  font-family: 'awards';
  src: url('../fonts/Awards.woff2') format('woff2');     
}
html {
  scroll-behavior: smooth;
}
/*WHOLE WEBSITE*/
* {
  text-decoration: none;
  font-family: 'Mona Sans';
  font-weight: 400;
  font-stretch: 112%;
  list-style: none;
  color:var(--font-color);
}
/*VARIABLES*/
:root{
 --blue_medium: #003260;
 --blue_radialgradient: radial-gradient(158.5% 8895.57% at 19.23% 49.72%, #003566 0%, #001325 51.56%, rgba(0, 19, 37, 0) 51.57%);
 --font-color: #2D2D2D;
 --orange:rgba(255,184,0,1);
 --background-color:#EDEDED;
}
/*REMOVE STYLE ON LINK*/
a { text-decoration: none; color:var(--font-color); cursor:pointer; }
a:visited { text-decoration: none; color:var(--font-color); }
a:hover { text-decoration: none; color:var(--font-color); }
a:focus { text-decoration: none; color:var(--font-color); }
a:hover, a:active { text-decoration: none; color:var(--font-color) }

/*Add basic styling to the body */
body{ 
  background: var(--background-color);
  /* Place things left center */  
 }
/* Everything below is the styling for a CTA */

  .CTA {    
    display: block;
    padding: 1rem;    
    width: fit-content;
  }

  .CTA_Orange > p {
    /* Style the text insite the CTA */
    font-size: 0.875rem;
    color:black;
    font-weight: 564;
    font-stretch: 112%;
    line-height: 1rem;
  }
  
  .CTA_Color > img {
    /* This is the arrow appearing on hover */
    color:black;
    /* Create the spaing inside the flex-box */
    margin:0 0 0 0.5rem;
    /* For the hover animation, the arrow appears. We need it to resize the block. For the arrow appearing, see the animation below */
    display:none;
  }

  .CTA_Color { 
    /* Create the base for the button */
    padding: 1rem;    
    border-radius: 0.25rem;
    /* Need the position relative for the background to be aligned */
    position:relative;
    display: flex;
    flex-direction: row;
    width:fit-content
      
  }
  .CTA_Orange { 
    background-color: var(--orange);
    z-index: 0;
  }

  .CTA:hover > .CTA_Orange::after {
    /* Create the background animated svg, used in the hover animation */
    content: '';
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
    background-image: url(../img/Button_Orange_Hover.svg);
    background-repeat: no-repeat;
    /* No matter the size of the button, the svg will cover it */
    background-position: 50% 0;
    background-size: cover;
    z-index: -1;
  }
  

  /* --------------------------------------- CTA hover animation */

  .CTA:hover > .CTA_Color::before{
    /* Creates the border around the CTA on demand. It's complicated but it's the only way I know to have a gradient as a border, while seeing the aniamted svg of the ::after */
   content: "";
   position: absolute;
   /* Makes sure every corner is covered */
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 0.2rem; 
   border: 2px solid transparent;
   /* Masking the center like a boolean operation */
   /* webkit is need for chrome, opera, and edge, only firefox supports it natively */
   /* Removes the background to see the animated svg */
   mask:
   linear-gradient(#fff 0 0) padding-box, 
   linear-gradient(#fff 0 0);
   -webkit-mask:
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
   -webkit-mask-composite: destination-out;
   mask-composite: exclude;
   /* Makes the border gradient move a bit, subtle, useless, so necessary */
   
  } 

  .CTA:hover > .CTA_Orange{
    /* Defines the color for the orange ones, linked to the previous one */
    background-color: rgba(255,184,0,0);
  }



  .CTA:hover > .CTA_Orange::before { 
    /* Actual gradient used for the border */
    background: radial-gradient(100% 116.84% at 76.84% 100%, #FFF1CE 0%, #FFB800 15%, #FFFFFF 50%, #FFF1CE 75%, #FFB800 100%) border-box;
    animation: CTA_Border_hover 3s ease-in-out infinite;
    background-size: 120%;
  }

  @keyframes CTA_Border_hover {
    /* Wiggle the background making the border */
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
 
  

  .CTA:hover > .CTA_Color > img {
    /* Makes the arrow appear*/
    display:block;
    animation: CTA_Arrow_hover 0.2s ease-in forwards ;
    
  }

  @keyframes CTA_Arrow_hover {
    /* Makes the arrow grow, so we can use the animation to have a smooth transition between states */
    0% {
      width:0rem;
    }
    100% {
      width:2rem;
    }
  }

main {       
  width:100%;       
  background-color: var( --background-color);
  display: flex;
  flex-direction: column; 
  gap:120px; 
  scroll-behavior: smooth;  
}
@media screen and (max-width: 800px) {
  main {
    gap:48px;
   }
   .Projects_links{
    margin-top:64px;
   }
}

.main-content-change{
  padding: 0 0 0 6rem;
}

.hero {  
  padding: 3rem 0rem 0rem 0rem;
  position:relative; 
  background: var( --blue_radialgradient);
  width: 100%; 
  box-sizing: border-box;
  padding: 96px 40px 40px 40px;
  display: flex;
  flex-direction: row;
  align-items: last baseline;
  flex-wrap: wrap;
 }

.hero  h1,
.hero h2 {
  font-size: clamp(3.5rem, 10vw, 17.5rem);
  color:white;  
  z-index: 9;
}


.hero h1,
.casestudies-description h1,
footer h2 {
font-family: awards;
line-height: 85%;
}

.hero h2 {
  font-family: Mona Sans;
  font-size: clamp(3.5rem,4.5vw, 8.5rem);
  font-weight: 600;
  text-align: right;
  flex:1;
  white-space: nowrap;
}

@media screen and (max-width: 560px) {
  .hero h2 {
    font-family: Mona Sans;
    font-size: clamp(3.5rem,4.5vw, 8.5rem);   
    font-weight:600;
    text-align: right; 
    bottom: 12px;
    right:12px;
  }
  .hero {  
    padding: 3rem 0rem 0rem 0rem;
    position:relative; 
    background: var( --blue_radialgradient);
    width: 100%; 
    box-sizing: border-box;
    padding: 96px 12px 40px 12px;
   }
}
.hero video {    
  background-color:#FFB800;
  position:absolute;
  top:50%;
  left:50%;
  width:50vw;
  aspect-ratio: 5/3 ;
  transform: translate(-50%, -50%);
 }
 @media screen and (max-width: 800px) {
  .hero video {
    width:90%;
   }
}

.Projects_links {
  padding: 0 80px;
  display:flex;
  flex-direction: column;
  gap:200px;
 }
 .Homepage_Projects {
   display:flex;
   flex-direction: row;
   justify-content: center;
   align-items: top;
   gap:80px;
   position: relative;
   z-index: 0;
 }
 .Homepage_Projects > div {
  position: sticky;
  top:144px;
  height:fit-content;
 }
 .Homepage_Projects h4 {
  line-height: 110%;
  font-weight: 800;
  font-size:2rem; 
  margin-bottom: 1rem;   
}
.casestudies-title p > a,
.Homepage_Projects span + a,
.link {
  position:relative;
  display:inline-block;
  font-weight: 600;
  padding: 8px 8px 8px 24px;
  margin: -8px -8px;
  background: rgba(186, 230, 255, 0);
  transition: background 0.3s; 
}
.casestudies-title p > a::before,
.Homepage_Projects span + a::before,
.link::before {
  content:url("data:image/svg+xml;charset=UTF-8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M15 10L7 15V5L15 10Z' fill='black'/></svg>");
  position:absolute;
  height: 20px;
  width: 20px;
  left: 4px;
  top:47%;
  transform:translateY(-50%);
  z-index: 20;
}
.Homepage_Projects span + a::before {
  top:50%;
}
.casestudies-title p > a:hover,
.Homepage_Projects span + a:hover,
.link:hover {
  background: rgba(186, 230, 255, 1);
  border-radius: 0.25rem;
  color:#002241;
}
.casestudies-title p > a:hover:before,
.Homepage_Projects span + a:hover::before,
.link:hover::before{
  content:url("data:image/svg+xml;charset=UTF-8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M15 10L7 15V5L15 10Z' fill='black'/></svg>");
}

.Homepage_Projects > a {
  width: 40vw;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.Homepage_Projects > a > img {
   width: 100%;
   transition: 0.3s;
 }
 .Homepage_Projects > a:hover > img {
   transform: scale(1.05);
 }
 .Homepage_Projects .CTA,
 .Homepage_Projects > .Homepage_Projects_Description > p {
  padding: 2rem 0 0 1rem;
 }
 .Homepage_Projects > .Homepage_Projects_Description > p {
   font-size:1.25rem;
   max-width: 37rem;  
   line-height: 150%;  
 }
 .Homepage_ProjectsTags {
   display: flex;
   flex-direction: row;
   padding-top:4rem;
 }
 .Homepage_ProjectsTags > h5 {
   font-size: 1rem;  
   margin: 0 2rem 0 0;
   width: fit-content;
 }

@media screen and (max-width: 1200px) {
  .Projects_links {
    padding: 0 12px;
   }
   .Homepage_Projects {
    flex-direction: column-reverse;
  }
   .Homepage_Projects_Description {
    width:100%;    
  }
  .Homepage_Projects > a {
    width: 100%;
    flex-direction:row;
    gap:8px;
  }
  .Homepage_Projects > a > img:nth-child(2) {
    display:none;
  }
  .Homepage_Projects > div {
    position: relative;
    top:0;
  }
  .Homepage_ProjectsTags {
    padding-top:1rem;
  }
  .Homepage_Projects .CTA,
  .Homepage_Projects > .Homepage_Projects_Description > p {
   padding: 2rem 0 0 0rem;
  }
  .Homepage_ProjectsTags {
    flex-wrap: wrap;
  }
  .Homepage_ProjectsTags > h5 {
    margin:24px 0 0 0;
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .Homepage_Projects > a {
    flex-direction:column;
  }
  .Homepage_Projects {
    gap:40px;
  }
}


footer  {
  width:100%;  
  background-color: var(--font-color);
  display: grid;
  grid-template-columns: min-content 1fr ;
  grid-template-rows: min-content 1fr min-content;
  padding: 4rem 0 2rem 0;
  bottom:0;  
}

.footer-image{
  height: clamp(12rem, 20vw, 24rem);
  transition: 0.5s ease-out;
  margin: 0 clamp(1rem, 0.01vw, 2rem);
  grid-row: 1/4;
 }
 .footer-image-change {
  height: clamp(9rem, 26vw, 24rem);
  margin: 0 clamp(1rem, 0.09vw ,8rem);
 }
footer >  h2 {
  font-family: awards;
  font-size: clamp(6rem, 10vw, 17.5rem);  
  color:white; 
  font-weight: 350;
  grid-row: 1/1;
  padding: 0 0 0 1rem; 
}
footer > a {
  grid-column: 2/2;
  grid-row: 2/2;
}
footer >  h6 {
  position: relative;
  color:white;
  font-weight:350;
  font-size:1rem;
  padding: 0 0 0rem 1rem;
  grid-column: 2/2;
  grid-row: 3/3;
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 820px) {  
  .hero-title {
    padding:0 1rem
  }
  .hero  h2 {
    font-size: clamp(2.5rem,4.5vw, 8.5rem);   
    text-align: right;   
    padding: 0 0rem 0.65vw 0;
  }
  .video-hero {    
    padding: 1rem;
    transition: 0.5s ease-out;  
   }  
}
@media screen and (max-width: 720px) {
  footer  {   
    grid-template-columns: min-content 1fr ;
    grid-template-rows: min-content 1fr min-content;
    padding: 2rem 0 2rem 0;    
  }
  .hero-title {
    padding:0 0.5rem
  }
  .footer-image{ 
    grid-column: 1/1;     
    grid-row: 2/3;
   }
  footer >  h2 {
    grid-column: span 2;
    grid-row: 1/1; 
  }
  footer > a {
    grid-column: 2/2;
    grid-row: 2/2;
  }
  footer >  h6 {
    grid-column: 2/2;
    grid-row: 3/3;
  }
  
  }
  
  img {
    -webkit-filter:drop-shadow(rgba(0, 0, 0, 0.25) 0px 24px 40px) drop-shadow(rgba(0, 0, 0, 0.25) 0px 8px 8px);
    filter:drop-shadow(rgba(0, 0, 0, 0.15) 0px 12px 12px) drop-shadow(rgba(0, 0, 0, 0.10) 0px 4px 4px);
 }
 footer img,
 nav img,
 .CTA img,
 .contact-bubble img,
 #content-section1 img,
 .transparent-image {
  filter:none;
  -webkit-filter: none;
 }
 
 strong {
  font-weight: 575;  
  font-stretch: 120%;
  opacity: 0.98;
 }

 .Homepage_Projects_Description::before {
    font-family: mona sans;
    font-weight: 800;        
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--blue_medium);
    color: var(--background-color);
    font-size: max(200px, 15vw);
    position: absolute;
    top: -6rem;
    left: -80px;    
    z-index: -1; 
    opacity:0.25;
 }
 #project-1 .Homepage_Projects_Description::before {
  content:'01';
 }
 #project-2 .Homepage_Projects_Description::before {
  content:'02';
 }
 #project-3 .Homepage_Projects_Description::before {
  content:'03';
 }
 #project-4 .Homepage_Projects_Description::before {
  content:'04';
 }
 @media only screen and (max-width: 1200px) {
  .Homepage_Projects_Description::before {    
    left: 4px;    

 }
}