@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');


:root {
  --primary: #ED7655;
  --secondary: #ED7655; 
  --white: #fff;
    --black: #1E293B;
    --body-text: #1E293B;
    --pure-black: #000;
    --sky: #b7c1ff;
    --light-blue: #697cf8;
   /* --blue: #b1bbff;*/
    --primary-light: rgba(237, 118, 85, 0.1);
            --primary-lighter: rgba(237, 118, 85, 0.05);
            --primary-border: rgba(237, 118, 85, 0.25);
    --light-grey: #f7f7f7;
    --grey: #808080;
    --yellow: #E9C41C;
    --yellow-opacity:rgba(247, 222, 58, 0.2);
    
    --blue: #3B7DED;
    --light-blue: #C7E6FB;
    --green: #2CCE7E;
     --light-green: #D1F2C9;
    --orange: #F5A623;
    --light-yellow: #FFE9B0;
    --light-coral: #FAD2C4;
    
    --dark-blue: #1E3A8A;
    --dark-green: #065F46;
    --dark-orange: #92400E;
    --dark-coral: #7F1D1D;
    

    --light-green: #9fe6a0;
    --bg: #f7f7f7;
    --badge1: #2563eb;
    --badge2: #8b5cf6;
   
    /* spacing */
    --spacing-none: 0px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 72px;
    --spacing-5xl: 96px;
    --spacing-6xl: 128px;
    
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* This prevents horizontal scrolling if any element overflows */
    color: var(--black);
    background-color: #fff;
      line-height: 1.6
    
}

.section-bg {
    background-color: #fff
}

  .top-xs {
    margin-top: var(--spacing-xs);
  }

  .top-sm {
    margin-top: var(--spacing-sm);
  }

  .top-md {
    margin-top: var(--spacing-md);
  }

  .top-lg {
    margin-top: var(--spacing-lg);
  }

  .top-none {
    margin-top: var(--spacing-none);
  }

  .top-xl {
    margin-top: var(--spacing-xl);
  }

  .top-2xl {
    margin-top: var(--spacing-2xl);
  }

  .top-3xl {
    margin-top: var(--spacing-3xl);
  }

  .top-4xl {
    margin-top: var(--spacing-4xl);
  }

  .top-5xl {
    margin-top: var(--spacing-5xl);
  }

  .top-6xl {
    margin-top: var(--spacing-6xl);
  }

  .bottom-5xl {
    margin-bottom: var(--spacing-5xl);
  }

  .bottom-3xl {
    margin-bottom: var(--spacing-3xl);
  }

  .bottom-xl {
    margin-bottom: var(--spacing-xl);
  }
  
  .mt-0 {
    margin-top: 0!important
  }

  .w-90 {
    width:68%
  }
  
  a, a:hover {
    color: var(--pure-black)
  }

  body{ overflow-x: hidden;
    
}


.chapter {
   margin: 0px
  }
  

.section {
    padding: 0px 0;
}

.section p {
  font-weight: normal
}

.section.first-sec {
  padding: 45px 0 0;
}



/* ----- TEXT ----*/
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:300,400,500,600,700,800,900&display=swap');




html {
    scroll-behavior: smooth;
  }


h1, h2, h3, h4, h5, h6 {
   /* font-family: 'Raleway'; 
    font-family: "Roboto Condensed", sans-serif;*/
    font-family: Helvetica, sans-serif;
    color: var(--pure-black);
    font-weight: 600;
}

h2 {
  font-size: 22px
}

h3 {
    font-size: 1.75rem; /* 28px */
  margin-bottom: 1rem;
    line-height: 1.3
}

.welcome {
    font-weight: 400;
    color: var(--black);
    line-height: 1.7;
    font-size: 22px;
}


.custom-navbar.affix .nav .item .link {
  color: var(--grey);
}

.heroCol h6 {
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 300;
}


p {
   /* font-family: 'Roboto', sans-serif; 
   font-family: Helvetica, sans-serif;*/
   line-height: 1.65;
    font-size: 16px;
  margin-bottom: 1.25rem;
    color: var(--black);
}


li {
    line-height: 1.65;
    font-size: 16px;
    color: var(--black);
}



.lead {
    font-size: 18px;
    margin-bottom: 1.25rem;
    color: var(--black);
     line-height: 1.6;
    
}


.text section h1 {
    box-sizing: border-box;
    padding: 0 0 35px;
    font-size: 52px;
   /* text-align: center */
}


.yellow-text {
  color: var(--yellow)
}

.contact {
  height: calc(100vh - 45px);
  display: flex; /* Use Flexbox */
  flex-direction: column; /* Stack children vertically */
 /* justify-content: center;  Center content vertically */
  padding-top: 10%
}

.section h1 span {
    position: relative;
    z-index: 10;
    font-size: 52px;
}


.text section h4 span {
  position: relative;
  z-index: 10;
  font-size: 22px;
}

@media (min-width: 1024px) {
  h6 {
    font-size: 20px;
    line-height: 1.35;
  }

  h3 {
    font-size: 2rem; /* 32px */
    line-height: 1.35;
  }

  p.lead {
    font-size: 20px;
    line-height: 1.7;
  }

  p {
    font-size: 17px;
    line-height: 1.7;
  }
}


.section h1 span::before {
    content: '';
    width: 100%;
    height: 20px;
    background: var(--sky);
    position: absolute;
    left: 0;
    bottom: 2px;
    z-index: -1;
    border-radius: 2px;
    transform: rotate(-1deg);
    transition: .2s;
}

.text section h4 span:before {
    content: '';
    width: 100%;
    height: 6px;
    background: var(--primary);
    position: absolute;
    left: 0;
    bottom: 2px;
    z-index: -1;
    transition: .2s;
}

a.next.blue strong {
    position: relative
}


a.next.blue strong::before  {
    content: '';
    width: 100%;
    height: 4px;
    background: var(--sky);
    position: absolute;
    left: 0;
    bottom: 2px;
    z-index: -1;
    transition: .2s;
}

a.next.yellow strong {
  position: relative;
  font-size: 20px
}


a.next.yellow strong::before  {
  content: '';
  width: 100%;
  height: 4px;
  background: var(--primary);
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  transition: .2s;
}



a.next.blue:hover strong::before {
    height: 6px;
    transition: .2s;
}

a.next.yellow:hover strong::before {
  height: 6px;
  transition: .2s;
}


.text section .breakout {
 /* width: 850px;*/
  background: #f6f8ff;
  box-shadow: inset 0 0 0 10px #ecf0fe, inset 0 0 0 20px #f1f4fe;
  box-sizing: border-box;
  border-radius: 16px;
  margin: 20px auto 0px;
  padding: 60px 60px;
}

.text section .breakout p{
    margin:0
}



.text section .breakout h2 {
    margin: 0 0 32px;
    font-size: 13.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0;
    color: var(--light-blue);
    text-align: center;
}


.text section h2 {
    padding: 0 0 8px;
    font-size: 36px;
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
}

.text section h6 {
    padding: 0 0 0px;
    z-index: 1;
    color: var(--primary);
    font-weight: 300;
    font-size: 18px;
  margin-bottom: 0.5rem; /* 8px */
}

.text-container h6 {
  margin: 0 0 18px;
  padding: 0 0 0px;
  z-index: 1;
  color: var(--grey);
  font-size: 16px!important;
  font-weight: 300
}

.contactText h2{
  text-align: left!important;
}

.contactText h6{
  color: var(--grey);
  font-size: 16px!important;
  font-weight: normal
}

.contactText h4{
  font-weight: normal!important
}

.hero .small {
  font-weight: 300;
  line-height: 1.6;
  font-size: 14px;
  text-align: center;
  color: white; 
}

.section h6 {
  position: relative;
  padding-left: 70px; /* Adjust as needed */
}

/*

.section h6::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
 background-color: var(--light-blue); 
    
}
*/

.go-to-top {
    position: fixed;
    bottom: 20px; /* Distance from bottom */
    right: 20px; /* Distance from right */
    border: none; /* Removes border */
    background: transparent; /* No background */
    cursor: pointer; /* Makes it clickable */
    padding: 10px; /* Adds space around */
    display: flex; /* Aligns content */
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensures it's above other elements */
}

.go-to-top svg {
    width: 30px; /* Slightly larger for better UX */
    height: 30px;
    fill: var(--primary); /* Change color as needed */
    transition: transform 0.2s ease-in-out;
}

.go-to-top:hover svg {
    transform: scale(1.2); /* Slight zoom effect on hover */
}

@media only screen and (max-width: 980px) {
.text section .breakout {
    width: 100%;
    margin-right: 0;
    padding-left: 10%;
    padding-right: 10%;
    margin-left: 0;
    }
}

#deliverables h4 {
    padding-bottom: 20px
}

#deliverables p {
    padding-bottom: 24px
}

.note {
  border-left: 5px solid var(--primary);
  padding-left: 34px
}


figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
}

figcaption {
    font-style: italic;
    font-size: 14px;
    color: var(--grey); /* Subtle gray for readability */
    margin-top: 8px;
}

img {
    width: 100%;  
    border-radius: 20px !important;
}

video {
    border-radius: 20px; /* Adjust the radius as needed */
}

figcaption.img-cap {
  color: var(--grey);
  padding-top: 30px;
  font-style: italic;
}


/*
.sectionDivider  {
    position: relative;
    display: block;
    margin: 90px auto 0px; 
    border: none;
    height: 10px;
    width: 200px;
    background: var(--light-blue);
    -webkit-mask: url(../imgs/wavy-line.svg) center no-repeat;
    mask: url(../imgs/wavy-line.svg) center no-repeat;
}
*/

.sectionDivider  {
  position: relative;
  display: block;
  margin: 90px auto;
  border: none;
  height: 5px;
  width: 48%;
  background: #fff;
}

.smileDivider  {
  position: relative;
  display: block;
  margin: 60px auto; 
  border: none;
  height: 30px;
  width: 200px;
  background: var(--light-blue);
  -webkit-mask: url(../imgs/smile.svg) center no-repeat;
  mask: url(../imgs/smile.svg) center no-repeat;
}


.icon-text p {
    line-height: 1.6;
    margin:0;
    text-align: left;
}

.icon-img {
  position: relative; /* Ensures the container is positioned */
  height: 42px; /* Example height, adjust as needed */
  display: flex; /* Keeps the SVG inline and allows for alignment adjustments */
  justify-content: center; /* Horizontally centers the SVG in the container */
}

.icon-img svg {
  align-self: flex-end; /* Aligns the SVG to the bottom of the flex container */
  width: auto; /* Adjust based on your needs */
  height: 42px; /* Make sure to include 'px' for pixels */
  fill: #fff; /* Default color, change as needed */
}

.case svg {
  align-self: flex-end; /* Aligns the SVG to the bottom of the flex container */
  width: auto; /* Adjust based on your needs */
  height: 38px; /* Make sure to include 'px' for pixels */
  fill: #fff; /* Default color, change as needed */
}


/* VIDEO */ 

.video-container {
  position: relative;
  overflow: hidden;
}

#myVideo, #myVideo2, #myVideo3 {
  width: 100%;
  height: 100%;
  cursor: pointer;
}



.play-button, .pause-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  width: 60px;
  height: 60px;
  background: rgb(0, 0, 0, 0.5);
  border-radius: 50%;
  color: white;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Add this line to prevent click events on the buttons initially */
}

.play-button::before {
    content: "\25B6";
    position: absolute;
    position-absoluteleft: 5px;
    left: 22px;
}

.pause-button::before {
  content: "\II"; /* Unicode for pause symbol */
}

/* Add the following lines to initially hide the pause button */
.pause-button {
  opacity: 0;
  pointer-events: none; /* Ensure the pause button is not clickable initially */
}

.play-button:hover, .pause-button:hover {
  cursor: pointer;
}



.play-button2, .pause-button2 {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  width: 60px;
  height: 60px;
  background: rgb(0, 0, 0, 0.5);
  border-radius: 50%;
  color: white;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Add this line to prevent click events on the buttons initially */
}

.play-button2::before {
  content: "\25B6"; /* Unicode for play symbol */
}

.pause-button2::before {
  content: "\II"; /* Unicode for pause symbol */
}

/* Add the following lines to initially hide the pause button */
.pause-button2 {
  opacity: 0;
  pointer-events: none; /* Ensure the pause button is not clickable initially */
}

.play-button2:hover, .pause-button2:hover {
  cursor: pointer;
}

.play-button3, .pause-button3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  width: 60px;
  height: 60px;
  background: rgb(0, 0, 0, 0.5);
  border-radius: 50%;
  color: white;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Add this line to prevent click events on the buttons initially */
}

.play-button3::before {
  content: "\25B6"; /* Unicode for play symbol */
}

.pause-button3::before {
  content: "\II"; /* Unicode for pause symbol */
}

/* Add the following lines to initially hide the pause button */
.pause-button3 {
  opacity: 0;
  pointer-events: none; /* Ensure the pause button is not clickable initially */
}

.play-button3:hover, .pause-button3:hover {
  cursor: pointer;
}

.quote-container {
  position: relative; /* Positioning context for the author name */
}

.quote {
  font-style: italic;
  color: var(--grey); /* Adjust color as needed */
  margin: 0; /* Remove default margins */
  padding: 10px; /* Add padding for better readability */
}

.quote::before {
  content: "“"; /* Quote sign */
  font-size: 2em; /* Adjust size as needed */
  color: #ccc; /* Adjust color as needed */
  position: absolute;
  top: 0;
  left: -20px; /* Adjust position as needed */
}

.author {
  text-align: right;
  margin-top: 5px; /* Adjust spacing as needed */
  color: #888; /* Adjust color as needed */
}


/*-------------------- NAVBAR -------------------- */

.footerLogo {
  display: block;
  width: 40px;
  height: 40px;
}

a.footerLogo {
  width: 32px;
  height: 40px;
  background: var(--light-blue);
  -webkit-mask: url(../imgs/logo.svg) center no-repeat;
  mask: url(../imgs/logo.svg) center no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  transition: background .2s;
}

.footerLinks {
  display: flex;
  justify-content: space-between; /* Aligns items at the start and end of the row */
}

.soc-links {
  display: flex;
  justify-content: flex-end; /* Aligns items to the right side of the container */
}

.soc-link {
  margin-left: 16px; 
  font-size: 14px;
  color: var(--grey);
}


a.text-primary:hover, a.text-primary:focus {
  color: var(--light-blue) !important;
}


.showcase {
  display: grid;
  grid-template-columns: auto auto; /* Adjust column widths as needed */
  gap: 10px; /* Adjust gap between columns as needed */
  align-items: center;
  margin-bottom: 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth transition for transform property */
}

.icon-text-container {
  display: flex; 
  flex: 1;
  align-items: center;
}


.text-container {
  padding: 40px
}

.image-container {
  width: 660px; /* Set the desired width for the image container */
  height: 520px; /* Set the desired height for the image container */
  overflow: hidden; /* Ensure any overflowing content is hidden */
}

.image-container img {
  width: 100%; /* Ensure image fills its container */
  height: 100%; /* Ensure image fills its container */
  object-fit: cover; /* Maintain aspect ratio and cover entire container */
}


.showcase:hover {
  transform: translateY(-2px); 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer
}




@media only screen and (max-width: 768px) {
  .showcase {
      grid-template-columns: auto; /* Change to single column layout on mobile */	
      margin-bottom: 50px;
    }

      h3 {
      font-size: 18px;
      margin-bottom: 0px;
      line-height: 1.5
      }

      .text-container p {
      margin-top: 12px
      }

      .image-container {
        width: 100%; /* Set the desired width for the image container */
      }

  .lead {
    font-size: 18px;
    line-height: 1.6
}


.text section h1 {
 font-size: 34px;
  }

  .footerLinks {
    display: flex;
    flex-direction: column;
  }

  .soc-links {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    margin-left: 0;
    font-size: 12px
  }


  .soc-link:first-child {
    margin-left: 0; /* Removes left margin for the first link */
  }
  
}
/* Media query for smaller screens */
@media (max-width: 768px) {
  .showcase {
    grid-template-columns: auto; /* Change to single column layout */
  }
}

@media (max-width: 1200px) {
  .text-container {
    padding: 30px; /* Reduce padding for smaller screens */
  }
  .image-container {
    width: 100%;
    height: 420px;
    overflow: hidden;
}
}
/* Media query for screens up to 991px */
@media (max-width: 991px) {
  .showcase {
    grid-template-columns: auto; /* Change to single column layout */
  }
  .text-container {
    padding: 30px; /* Reduce padding for smaller screens */
  }
}


@media only screen and (min-width: 350px) and (max-width: 767px) {
.alien-container {
display:none;
  }
}

.ufo-container {
  position: absolute;
  overflow: hidden;
  display: block;
  width: 305px;
  height: 50%;
  background: url(../imgs/alien/alien.png) center center no-repeat;
  background-size: contain;
  top: 20%;
  left: 55%;
  z-index: 1;
}

.ufo-container {
-webkit-animation: baloon-shift 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: baloon-shift 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes baloon-shift {
0% {
-webkit-transform: translate3d(-5%, 0%, 0) scale(1);
transform: translate3d(-5%, 5%, 0)  rotate(3deg) scale(1);
}
100% {
-webkit-transform: translate3d(5%, 3%, 0);
transform: translate3d(8%, 12%, 0) rotate(-2deg) scale(1.1);
}
}

.ufo-container-404 {
width: 280px;
height: 50%;
background: url(../imgs/alien/alien.png) center center no-repeat;
background-size: contain;
top: 24%;
left: 52%;
}

/* ------------------ */


@media only screen and (min-width: 350px) and (max-width: 1500px) {
.alien-container {
background-image: none;
width: 62%;
}
}

.designer {
 position: absolute;
  overflow: hidden;
  display: block;
  width: 82px;
  height: 204px;
  background: url(../imgs/alien/designer.png) center center no-repeat;
  background-size: contain;
  top: 40%;
  left: 30%;
  z-index: 1;
}

.designer {
  -webkit-animation:designer-move  12s infinite ease-in-out ;
  animation-name: designer-move  12s infinite ease-in-out ;

}

@keyframes designer-move {
0%{transform: translateY(50px) translateX(0px) rotate(-2deg)}

 50%{transform: translateY(0px) translateX(5px) rotate(2deg)}

 100%{transform: translateY(50px) translateX(0px) rotate(-2deg)}
}

.table {
  position: absolute;
  overflow: hidden;
  display: block;
  width: 156px;
  height: 120px;
  background: url(../imgs/alien/table.png) center center no-repeat;
  background-size: contain;
  top: 62%;
  left: 20%;
  z-index: 1;
}

.table {
  -webkit-animation:table-move 12s infinite linear;
  animation-name: table-move 12s infinite linear;

}

@keyframes table-move {
0%{transform: translateY(30px) translateX(0px) rotate(-4deg)}

 50%{transform: translateY(10px) translateX(5px) rotate(2deg)}

 100%{transform: translateY(30px) translateX(0px) rotate(-4deg)}
}

.chair {
 position: absolute;
  overflow: hidden;
  display: block;
  width: 63px;
  height: 150px;
  background: url(../imgs/alien/chair.png) center center no-repeat;
  background-size: contain;
  top: 55%;
  left: 28%;
  z-index: 0;
}

.chair {
  -webkit-animation:chair-move 10s infinite linear;
  animation-name: chair-move 10s infinite linear;

}

@keyframes chair-move {
0%{transform: translateY(30px) translateX(0px) rotate(-6deg)}

 50%{transform: translateY(10px) translateX(5px) rotate(3deg)}

 100%{transform: translateY(30px) translateX(0px) rotate(-6deg)}
}


.cup {
position: absolute;
  overflow: hidden;
  display: block;
  width: 17px;
  height: 90px;
  background: url(../imgs/alien/cup.png) center center no-repeat;
  background-size: contain;
  top: 54%;
  left: 50%;
  z-index: 1;
}

.cup {
  -webkit-animation:cup-move 12s infinite ease-in-out;
  animation-name: cup-move 12s infinite ease-in-out;

}

@keyframes cup-move {
0%{transform: translateY(30px) translateX(0px) rotate(-12deg)}

 50%{transform: translateY(-70px) translateX(10px) rotate(2deg)}

 100%{transform: translateY(30px) translateX(0px) rotate(-12deg)}
}

.envelope {
position: absolute;
  overflow: hidden;
  display: block;
  width: 38px;
  height: 60px;
  top: 54%;
  left: 50%;
  z-index: 1;
}

.envelope1 {
left: 40%;
background: url(../imgs/alien/envelope.png) center center no-repeat;
background-size: contain;
}

.envelope1 {
  -webkit-animation:envelope1 12s infinite ease-in-out;
  animation-name: envelope1 12s infinite ease-in-out;
}

@keyframes envelope1 {
0%{transform: translateY(30px) translateX(0px) rotate(-12deg)}
50%{transform: translateY(-70px) translateX(10px) rotate(2deg)}
100%{transform: translateY(30px) translateX(0px) rotate(-12deg)}
}

.envelope2 {
top: 44%;
  left: 45%;
background: url(../imgs/alien/envelope2.png) center center no-repeat;
background-size: contain;
}

.envelope2 {
  -webkit-animation:envelope2 10s infinite ease-in-out;
  animation-name: envelope2 10s infinite ease-in-out;
}

@keyframes envelope2 {
0%{transform: translateY(50px) translateX(0px) rotate(-6deg)}
50%{transform: translateY(-70px) translateX(-5px) rotate(0deg)}
100%{transform: translateY(50px) translateX(0px) rotate(-10deg)}
}

.envelope3 {
top: 34%;
  left: 40%;
width: 38px;
  height: 60px;
background: url(../imgs/alien/envelope4.png) center center no-repeat;
background-size: contain;
}

.envelope3 {
  -webkit-animation:envelope3 14s infinite ease-in-out;
  animation-name: envelope3 14s infinite ease-in-out;
}

@keyframes envelope3 {
0%{transform: translateY(40px) translateX(0px) rotate(-14deg)}
50%{transform: translateY(-30px) translateX(12px) rotate(0deg)}
100%{transform: translateY(40px) translateX(0px) rotate(-14deg)}
}



.mug {
position: absolute;
  overflow: hidden;
  display: block;
  width: 16px;
  height: 90px;
  background: url(../imgs/alien/stakan.png) center center no-repeat;
  background-size: contain;
 top: 51%;
  left: 63%;
  z-index: 1;
}

.mug {
  -webkit-animation:mug-move 11s infinite ease-in-out;
  animation-name: mug-move 11s infinite ease-in-out;

}

@keyframes mug-move {
0%{transform: translateY(60px) translateX(0px) rotate(12deg)}

 50%{transform: translateY(-20px) translateX(5px) rotate(2deg)}

 100%{transform: translateY(60px) translateX(0px) rotate(12deg)}
}

.cactus {
position: absolute;
  overflow: hidden;
  display: block;
  width: 30px;
  height: 90px;
  background: url(../imgs/alien/cactus.png) center center no-repeat;
  background-size: contain;
 top: 51%;
  left: 23%;
  z-index: 1;
}

.cactus {
  -webkit-animation:cactus-move 11s infinite ease-in-out;
  animation-name: cactus-move 11s infinite ease-in-out;

}

@keyframes cactus-move {
0%{transform: translateY(60px) translateX(0px) rotate(12deg)}

 50%{transform: translateY(-20px) translateX(5px) rotate(2deg)}

 100%{transform: translateY(60px) translateX(0px) rotate(12deg)}
}



.comp {
position: absolute;
  overflow: hidden;
  display: block;
  width: 79px;
  height: 90px;
  background: url(../imgs/alien/comp.png) center center no-repeat;
  background-size: contain;
  top: 54%;
  left: 50%;
  z-index: 2;
}

.comp {
  -webkit-animation:comp-move 11s infinite ease-in-out;
  animation-name: comp-move 11s infinite ease-in-out;

}

@keyframes comp-move {
0%{transform: translateY(30px) translateX(0px) rotate(-12deg)}

 50%{transform: translateY(-70px) translateX(10px) rotate(2deg)}

 100%{transform: translateY(30px) translateX(0px) rotate(-12deg)}
}

.title-container {
  display: flex;
  align-items: center;
}

.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: 2, 4, infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}

.custom-navbar .container {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all, 0.3s;
  transition: all, 0.3s;
}


body {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}


}

.body-no-scroll {
  overflow: hidden; /* Prevents scrolling */
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  position: fixed; /* Keeps the body in place */
}


/*   ----- HERO ----*/



.linkContainer {
   display: flex;
  flex-wrap: wrap;
  gap: 16px; /* Adjust the gap between links */
  justify-content: center; /
}

.workLinks {
  text-decoration: none;
  padding: 0 10px;
  border-radius: 5px;
  color: #cfcfcf;
  transitrgb(136, 136, 136) color 0.3s ease; /* Smooth transition for color change */
  font-size: 20px;
}

.workLinks:hover {
  color: #f1f1f1; /* Change color on hover */
}

.workLinks.active {
  color: #fff; /* Black color for active link */
}



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

.text-white {
  color: white; /* Set text color to white */
}
	
.card-container {
  column-count: 2; /* Number of columns */
  column-gap: 0px;
}

.card {
position: relative;
width: calc(100% - 10px); /* Adjusted width to accommodate gap */
margin-bottom: 10px;
overflow: hidden;
}


/* Media query for tablets and mobile devices */
@media only screen and (max-width: 768px) {
.card-container {
  column-count: 1; /* Number of columns */
  column-gap: 0px;
}
}

.card__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
opacity: 1; /* Overlay visible from the beginning */
transition: opacity 0.5s; /* Slower transition */
}

.card__title,
.card__subtitle {
font-family: 'Open Sans', sans-serif;
margin: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
transition: bottom 0.3s ease-in-out; 
color: white
}

.card__title {
bottom: 40px;
font-size: 22px;
}

.card__subtitle  {
bottom: 10px;
color: rgb(225, 225, 225);
font-size: 18px;
}


.card__link {
color: var(--light-blue);
text-decoration: none;
font-weight: bold;
position: absolute;
bottom: -20px; /* Hide initially */
left: 50%;
transform: translateX(-50%);
transition: bottom 0.3s ease-in-out; /* Smoother transition */
}

.card:hover .card__link {
bottom: 20px; /* Show link on hover */
}

.card:hover .card__title {
bottom: 80px; 
}

.card:hover .card__subtitle {
bottom: 50px; 
}

.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
transition: transform 0.5s; /* Slower transition */
}

.card:hover::before {
transform: scale(1.05);
}

/* Define background images for each card */
.card:nth-child(1)::before {
background-image: url('/assets/imgs/card-uktv.jpg');
height: 400px; /* Set height for the first card */
}

.card:nth-child(1) {
height: 400px; /* Set height for the first card */
}

.card:nth-child(2)::before {
background-image: url('/assets/imgs/card-bus.jpg');
height: 600px; /* Set height for the second card */
}

.card:nth-child(2) {
height: 600px; /* Set height for the first card */
}


.card:nth-child(3)::before {
background-image: url('/assets/imgs/card-bank.jpg');
background-size: 740px auto;
height: 600px; /* Set height for the fourth card */
}

.card:nth-child(3) {
height: 600px; /* Set height for the first card */
}

.card:nth-child(4)::before {
background-image: url('/assets/imgs/promo3.png');
height: 400px; /* Set height for the third card */
}

.card:nth-child(4) {
height: 400px; /* Set height for the first card */
}


/* Base Styles */
.myNavbar {
  position: absolute;
  top: 0;
  width: 100%;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; /* Add transition for background color, box shadow, and link color */
  z-index: 1000; /* Ensure it's above other content */
}

.myContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* Add padding for better spacing */
  background-color: transparent; /* Add transparent background */
}

.MyLogo {
  width: 43px;
  height: 38px;
  background: var(--primary);
  -webkit-mask: url('/assets/imgs/logo.svg') center no-repeat;
  mask: url('/assets/imgs/logo.svg') center no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  transition: background 0.2s;
  z-index: 999; /* Ensure the logo is above other elements */
  display: flex;
  align-items: center;
  justify-content: center;
     z-index: 99;
}

/* Change Logo Color based on Navbar Background */
.myNavbar.transparent .MyLogo {
  background: var(--primary); /* Set logo background to white when navbar is transparent */
}

.myNavbar.white .MyLogo {
  background: var(--primary); /* Set logo background to black when navbar is white */
}

.blueLogo {
  background: var(--primary)!important;
}

.myNav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.myItem {
  margin-right: 26px; /* Adjust spacing between items */
}

.myLink {
  text-decoration: none;
  font-size: 16px;
  transition: opacity 0.3s ease; 
  color: #c7c7c7
}

.customLink {
  color: var(--grey);
}

.myLink:hover {
  color: #f3f3f3
}

.customLink.active {
  color: #000!important;
}

.customLink:hover {
  color: #000!important;
}

.intro {
  position: relative;
  z-index:0!important
}


/* Hamburger Icon Styles */
.hamburger {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
  z-index: 1001; /* Ensure it's above other content */
  color: #fff; /* Set initial color for hamburger icon */
  outline: none; /* Remove outline */
  position: relative;
  z-index: 9999!important; 
}

.hamburger:focus {
  outline: none; /* Remove focused outline */
}


.hamburger-box {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  z-index: 9999!important; 
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--black);
    transition: transform 0.3s ease, opacity 0.3s ease;
    content: '';
    z-index: 9999!important; 
    
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;
    transition: transform 0.3s ease;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}


.hamburger.open .hamburger-inner::before {
  transform: translateY(8px) rotate(90deg); /* Move and rotate top line */
  
}

.hamburger.open .hamburger-inner::after {
  opacity:0; /* Move and rotate bottom line */
}

.hamburger.open .hamburger-inner {
  transform: rotate(45deg); /* Rotate middle line to create the X close icon appearance */
}

.myNavbar.white .myLink {
  color: var(--grey); /* Set link color to black when navbar is white */
}


/* Responsive Styles */
@media screen and (max-width: 768px) {
  p {
    line-height: 1.6;
    font-size: 16px;
   
}

.sectionDivider  {
  
  margin: 60px auto;
  
}
  
  
  .myNav {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease;
      transform: translateY(-100%);
      backdrop-filter: blur(8px); /* Blur effect */
  }

 

.MyLogo {
  width: 43px;
  height: 38px;
}
  

  .myNav.open {
      transform: translateY(0);
  }

  .myItem {
      margin: 20px 0; /* Adjust margin for better spacing */
  }

  .MyLogo {
      align-self: flex-end; /* Align logo to the right */
      margin-right: 20px; /* Add margin for better spacing */
  }

  .hamburger {
      display: block;
  }

  .myLink {
      font-size: 20px; /* Increase font size for better readability */
  }

  /* Change Hamburger Icon Color based on Navbar Background */
  .myNavbar.white .hamburger {
      color: #fff; /* Set hamburger icon color to black when navbar is white */
  }
}


.myNavbar.transparent .myLink.active {
  color: var(--white); /* Style for active link */
  
}

.myLink.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  
  transform: scaleX(1); /* Initially set to scale 0 to hide the underline */
  transform-origin: bottom left;
  transition: transform 0.3s ease; /* Add transition for smooth animation */
}

/* Change Hamburger Lines Color based on Navbar Background */
.myNavbar.transparent .hamburger-inner,
.myNavbar.transparent .hamburger-inner::before,
.myNavbar.transparent .hamburger-inner::after {
    background-color: var(--white); /* Set lines color to white when navbar is transparent */
}

.myNavbar.white .hamburger-inner,
.myNavbar.white .hamburger-inner::before,
.myNavbar.white .hamburger-inner::after {
    background-color: var(--white); /* Set lines color to black when navbar is white */
}

  /* Hero Section Styles */
        .first-hero-container {
            width: 60%;
            height: 90vh;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }
        
        .hero-title-wrapper {
            position: relative;
            z-index: 2;
            max-width: 1400px;
        }
        
        .hero-title {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1.1;
            text-align: center;
            color: var(--black);
            position: relative;
        }

.about-hero-container {
  display: flex;
  align-items: center;      /* Vertical centering */
  justify-content: center;  /* Horizontal centering */
  flex-direction: column;   /* Stack h4 and h2 vertically */
  text-align: center;

  max-width: 960px;
  min-height: 300px;
  margin: 80px auto 60px;
  padding: 0 24px;
}

.about-title-wrapper h4 {
  font-size: 20px;
    line-height: 1.4;
  font-weight: 500;
  color: #ED7655; /* Your primary coral tone */
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

.about-title-wrapper h2 {
  font-size: 38px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--black); /* Dark neutral */
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .about-title-wrapper h2 {
    font-size: 28px;
  }

  .about-title-wrapper h4 {
    font-size: 18px;
  }
}
        
        .title-highlight {
            color: var(--primary);
        }
        
        /* Badge Styles */
        .hero-badge {
            position: absolute;
            padding: 0.5rem 1.25rem;
            border-radius: 2rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--white);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transform-origin: center;
            z-index: -1;
        }
        
        .badge-1 {
            background-color: var(--blue);
            top: 71px;
            right: -28px;
            transform: rotate(3deg);
        }
        
        .badge-2 {
            background-color: var(--badge2);
            bottom: -17px;
            left: 100px;
            transform: rotate(-5deg);
        }
        
        /* Emoji Styles */
        .emoji {
            position: absolute;
            font-size: 4rem;
            animation: float 6s ease-in-out infinite;
            z-index: 1;
        }
        
        .emoji-1 {
            top: 30%;
            left: 15%;
            animation-delay: 0s;
        }
        
        .emoji-2 {
                top: 29%;
                right: 21%;
                animation-delay: 1.5s;
               
                animation: floatPerson 10s ease-in-out infinite;
        }
        
        .emoji-3 {
            bottom: 31%;
            right: 18%;
            animation-delay: 3s;
        }
        
        .emoji-4 {
            bottom: 25%;
            left: 29%;
            animation-delay: 3s;
            z-index: 3;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-10px) rotate(5deg);
            }
        }

    @keyframes floatPerson {
            0%, 100% {
                transform: translateY(0) rotate(-5deg);
            }
            50% {
                transform: translateY(-10px) rotate(-3deg);
            }
        }
        
        /* Responsive Styles */
        @media (max-width: 1200px) {
            .hero-title {
                font-size: 4rem;
            }
            
            .emoji {
                font-size: 3.5rem;
            }
            
            .hero-badge {
                font-size: 0.8rem;
                padding: 0.4rem 1rem;
            }
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 3rem;
            }
            
            .emoji {
                font-size: 3rem;
            }
            
            .badge-1 {
                top: -10px;
                right: 20px;
            }
            
            .badge-2 {
                bottom: -10px;
                left: 40px;
            }
        }
        
        @media (max-width: 480px) {
           .first-hero-container {
            width: 90%;
            height: 60vh;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }
            
           
            .hero-title {
                font-size: 2.25rem;
            }
            
            .emoji {
                font-size: 2.5rem;
            }
            
            .hero-badge {
                font-size: 0.7rem;
                padding: 0.3rem 0.8rem;
            }
            
                     .emoji-1,
  .emoji-2,
  .emoji-3,
  .emoji-4 {
    display: none; /* optional: hide emojis on mobile for simplicity */
  }
            
    
        }

/* ------ PORTFOLIO FIRST PAGE ---- */

     .portfolio-container {
            margin: 0 auto;
        }
        
        .portfolio-row {
            display: flex;
            justify-content: center; /* This centers the cards horizontally */
            align-items: center; /* This keeps vertical alignment in the middle */
            gap: 100px;
            margin-bottom: 100px
        }

        .top-row {
             align-items: flex-start;
        }

       .portfolio-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
           
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: inherit;
            width: 30%; /* Custom width - adjust as needed */
        }

 .portfolio-card-horizontal {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            text-decoration: none;
            color: inherit;
            width: 100%; 
     height: 600px;
     gap: 24px;
            
        }

 .portfolio-card-horizontal .media-container {
            width: 60%; 
     flex-shrink: 0;
     }

    .portfolio-card {
            width: 400px; /* Specific width for each card */
            flex-shrink: 0;
        }
        
        
        .media-container {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
        }
        
        .card-large .media-container {
            height: 600px;
        }
        
        .card-small .media-container {
            height: 400px;
        }

        .card-full {
            width: 87%; /* Match the combined width of the two cards plus the gap */
            max-width: 900px; /* Optional: set a maximum width to prevent it from getting too wide */
        }

        /* You may want to adjust the media container height for the full-width card */
        .card-full .media-container {
            height: 450px; /* Adjust as needed */
        }
        


        .media-container img, 
        .media-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .portfolio-card:hover .media-container img,
        .portfolio-card:hover .media-container video {
            transform: scale(1.05);
        }

.card-left-aligned .media-container img,
.card-left-aligned .media-container video {
    object-position: -70px center; /* Align content to the left */
}

.card-left-aligned2 .media-container img {
    object-position: -200px center; /* Align content to the left */
}

.card-top-aligned .media-container video {
    object-position: center top; /* Align content to the left */
}
  
        
        .card-content {
            padding: 1.5rem 0;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        
        .card-title {
            font-size: 1.4rem!important;
            font-weight: 700;
            margin-bottom: 0px!important;
            color: var(--black);
        }
        
        .card-description {
            color: var(--black);
            margin-bottom: 12px;
            font-size: 17px;
            line-height: 1.6;
            flex-grow: 1;
        }
        
        .card-badge {
            display: inline-block;
           font-size: 14px;
            font-weight: 400;
            color: var(--primary);
        }
        
        
      @media (max-width: 768px) {
  .portfolio-row {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 16px;
  }

  .portfolio-card {
    width: 100% !important;
    max-width: 100%;
  }

  .card-large .media-container,
  .card-small .media-container {
    height: 360px;
  }

  .card-content {
    padding: 1rem 0;
  }

  .card-title {
    font-size: 1.25rem !important;
  }

  .card-description {
    font-size: 16px;
  }
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start; /* ✅ allows cards to grow naturally */
  gap: 20px;
}

.why-card {
   width: 240px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  color: var(--black);
  transition: transform 0.3s ease;
  height: auto;
}

.why-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
    line-height:24px;
}

.why-card p {
  font-size: 14px;
  line-height: 1.5;
margin-bottom: 0;
}


.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image: radial-gradient(white 1%, transparent 0);
  background-size: 2px 2px;
  opacity: 0.03; /* adjust to control visibility */
  mix-blend-mode: overlay;
  filter: blur(0.4px);
}


.rotate-left {
  transform: rotate(0deg);
  background-color: var(--light-blue); /* Example purple */
}

.rotate-slight-right {
  transform: rotate(0deg);
  background-color: var(--light-green); /* Example green */
}

.rotate-slight-left {
  transform: rotate(0deg);
  background-color: var(--light-yellow); /* Example orange */
}

.rotate-right {
  transform: rotate(0deg);
  background-color: var(--light-coral); /* Example violet */
}


.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6, .hero p, .hero .lead {
  color: white;
}

.hero h1 {
  font-size: 3.4rem;
}

.hero h3 {
  padding-top: 0px;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px
}


.hero h4 {
  padding-bottom: 24px;
    font-size: 20px;
    font-weight: 300;
}


.myNavbar {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 9999;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 99;
}

.heroRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.heroCol {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.right-col {
  text-align: left;
  padding-left: 30px;
}

.right-col .lead {
  padding-bottom: 0;
}

.right-col p {
  margin-bottom: 0;
}

.left-col {
  padding-right: 30px;
}

.icon-row {
  display: flex;
  justify-content: center;
  align-items: top;
  padding-top: 50px;
  width: 100%; /* Ensure the row takes full width */
}

.icon-row > div {
  flex: 1; 
  max-width: 230px; /* Set the fixed width as needed */
 padding: 0 5px; /* Reduced padding for less space */
 flex-direction: column;
 align-items: center;
}



.icon-text {
  display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:8px
}


.footer-text {
  display: flex;
    flex-direction: column;
    align-items: left;
}

.footer-text p {
 margin-bottom: 0
}

#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 150px;
  
}

.container-fluid {
  width: 83%
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .welcome {
    font-weight: 300;
    color: var(--black);
    line-height: 1.7;
    font-size: 18px;
}

  
  #scrollTopBtn {
    display: none!important
  }

  .workLinks {
    padding: 0 0px;
    color: #cfcfcf;
    font-size: 16px;
}

.hero-mini {
  height: 20vh!important
}
  
  
  .heroRow {
      flex-direction: column; /* Stack columns vertically on small screens */
  }
  .right-col {
    padding: 50px 50px;
    text-align: center
  }

  .left-col {
    padding: 0px 50px;
    text-align: center
  }

  .hero h1 {
    font-size:3.4rem
  }

  .icon-text-container {
    max-width: 100%; /* Each container takes full width on small screens */
}

.container-fluid {
  width: 95%
  }

  .icon-row {
    display: none
  }
}
.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Adjust the gap between cards */
}

.summary-container {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  width: 32%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.top-card {
  background-color: #fff;
  padding: 20px 30px 20px 26px;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  position: relative;
  height: 100px
}

.bottom-card {
  flex: 1;
  background-color: white;
  padding: 54px 30px 20px 26px;
}


.summary-container svg {
  position: absolute;
  top: 40px;
  left: 30px; /* Adjust to align icon to the left */
  width: 80px;
  height: 80px;
  z-index: 999;
}

.icon-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #f0f0f0; /* Use color value from CSS */
  top: 85%; /* Adjust line height */
  left: 0;
  z-index: 0;
}

.subtitle {
  color: var(--grey); /* Use color value from CSS */
  font-size: 14px;
  margin-left: auto; /* Align subtitle to the right */
  white-space: nowrap; /* Prevent subtitle from taking whole width */
}

.subtitle-top {
  margin-left: auto;
  white-space: nowrap;
  display: flex;
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--blue);
  padding: 8px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  font-size: 12px;
  align-items: center;
  height: 26px;
  margin-top: 20px;
}



.badge {
   
  display: inline-block;
  color: #2563eb;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  position: relative;
    padding-left: 12px;
}

.badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #2563eb;
}

.process-step {
  margin-bottom: 1.5rem;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 12px;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--primary); /* Darker blue for contrast */
  color: white;
  font-size: 0.75rem;

}

.step-name {
  color: var(--primary); /* Lighter blue for contrast with the circle */
  font-size: 0.875rem;
  font-weight: 500;
}

.step-title {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0.25rem;
}

.step-description {
  color: #4b5563;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

h2.title {
  font-size: 20px !important;
  padding: 0 0 16px!important;
  margin-top:0!important;
  text-align: left!important;
  
}

.description {
  font-size: 18px;
 /* margin-bottom: 0; */
}

/* GOALS */

.goal-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.goals {
  position: relative;
  flex: 1 0 calc(33.33% - 20px); 
  /*border: 1px solid #ccc;
  border-radius: 8px;*/
  padding: 20px;
  margin-bottom: 20px;
}

.goals .big-digit {
 /* position: absolute;
    top: -47px;
    left: 18px;*/
    font-size: 60px;
    color: var(--primary);
    opacity: 1;
    font-weight: bold;
    line-height: 17px;
}

.goals .content h2 {
  margin-top: 0;
  font-size: 24px;
  text-align: left;
}

.goals .content p {
  margin-bottom: 0;
}

/* PROBLEM LIST */

.problemContainer {
  display: flex;
  flex-wrap: wrap;
  position: relative; /* Positioning context for absolute positioning */
}

.problem::before {
  content: "";
    position: absolute;
    top: -8px;
    left: -27px;
    width: 40px;
    height: 40px;
    background-color: #dde1fd;
    border-radius: 50%;
    z-index: -1;
}

.problem {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  z-index:999;
  flex: 0 0 calc(30% - 20px); /* Adjust width for three items per row with spacing */
  margin: 20px 40px 20px 0; /* Adjust spacing between items */
  box-sizing: border-box;
}

.problem p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}


/* Styling for process cards */
.process-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.process {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  z-index: 999;
  flex: 0 0 calc(19% - 20px); /* Adjust width for three items per row with spacing */
  max-width: calc(19% - 20px); /* Limit maximum width */
  margin-right: 30px; 
  margin-top: 50px;
  box-sizing: border-box;
}

.process h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.process svg {
  width: 70px;
  height: 70px;
  margin-right: 10px;
  margin-bottom: 22px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li.word  {
  margin-bottom: 10px;
  position: relative;
  padding-left: 24px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

.word::before {
  content: '\2705'; /* Unicode checkmark symbol */
  position: absolute;
  left: 0;
  top: 0;
  
}

.word.disabled::before {
  content: '\00D7'; 
  position: absolute;
  left: 0px;
  top: -7px;
  color: #999;
  font-size: 26px;
}

.word.disabled {
  color: #999;
  text-decoration: line-through;
}

@media (max-width: 1290px) {
  .processSec {
   display: none
}
}

/* Media query for mobile devices */
@media (max-width: 768px) {

.card-wrapper {
  flex-direction: column;
}

.summary-container {
  width: 100%;
}

h2.title {
  font-size: 20px !important;
  padding: 0 0 16px !important;
  margin-top: 0 !important;
  text-align: left !important;
}

.description {
  font-size: 16px;
  /* margin-bottom: 0; */
}

.text section h2 {
  font-size: 24px;

}

.problem {
  flex: 0 0 calc(100% - 20px);
}

}

.greyJJ {
  filter: grayscale(100%);
}

#slider {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--primary);
  width: 6px;
  height: 0px;
  z-index: 999999!important;
    transition: width 0.1s ease-in-out;
}

.badge-container {
    display: flex;
    gap: 10px; /* Space between the badges */
    justify-content: start; /* Aligns badges to the left */
    align-items: center;
    margin-bottom: 20px
}


.logo-container {
    display: flex;
    gap: 20px; /* Space between logos */
    justify-content: center; /* Align logos horizontally */
    padding: 20px;
}

.logo {
    width: 100px; /* Adjust as needed */
    filter: grayscale(100%); /* Grayscale effect */
    transition: filter 0.3s ease-in-out; /* Smooth transition effect */
}

.logo:hover {
    filter: grayscale(0%); /* Restore original colors on hover */
}


        
        .quote-card {
            background-color: var(--primary-bg);
            border-radius: 1rem;
            padding: 1.5rem;
            position: relative;
        }
        
        .quote-mark {
            font-size: 4rem;
            color: var(--primary-light);
            opacity: 0.2;
            position: absolute;
            top: 1rem;
            left: 1.5rem;
            line-height: 1;
        }
        
        .quote-text {
            font-size: 18px;
            font-style: italic;
            color: var(--black);
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
            padding-left: 1.5rem;
        }
        
        .quote-author {
            font-size: 14px;
            font-weight: 600;
            color: var(--grey);
            padding-left: 1.5rem;
        }
        
        /* Problem Cards */
        .problems-container {
            margin-bottom: 3rem;
        }
        
        .problem-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }
        
        .problem-card {
            background-color: white;
            border-radius: 1rem;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        
        .problem-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .problem-card-header {
            display: flex;
            align-items: center;
            padding: 1.25rem;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
        }
        
        .problem-number {
            width: 36px;
            height: 36px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-right: 1rem;
        }
        
        .problem-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .problem-card-body {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .problem-description {
            color: var(--secondary);
            font-size: 16px;
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }
        
        .problem-impact {
            margin-top: auto;
        }
        
        .impact-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--black);
            margin-bottom: 0.5rem;
        }
        
        .impact-metric {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .impact-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--danger);
        }
        
        .impact-description {
            font-size: 14px;
            color: var(--secondary);
        }





.design-process {
 margin-bottom: 60px;
    
}

.design-process h3 {
  font-size: 26px;
  margin-bottom: 28px
}





.trapezoid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/*  


 .trapezoid-container {
   position: relative;
   display: inline-block;
     overflow: hidden;
            border-radius: 4px;
   filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
 
     
}
.trapezoid-1 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 0px;
}

.trapezoid-2 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
}

.trapezoid-3 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
}

.trapezoid-4 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
}

.trapezoid-5 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
}

.trapezoid-6 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
}

.trapezoid-7 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
}

.trapezoid-8 {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
}
 
 
 */
 

/*

    .accent-shape {
      position: absolute;
      z-index: 1;
    }
    
    .accent-shape-1 {
      top: -30px;
      right: -20px;
      width: 120px;
      height: 120px;
      background-color: var(--yellow-opacity);
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    
    .accent-shape-2 {
      bottom: -20px;
      left: 40px;
      width: 80px;
      height: 80px;
      background-color: var(--yellow-opacity);
      border-radius: 30% 70% 50% 50% / 60% 40% 60% 40%;
    }
    
   
.accent-blob-1 {
  position: absolute;
  top: -25px;
  right: 15%;
  width: 95px;
  height: 95px;
  background-color: var(--yellow-opacity);
  border-radius: 72% 28% 61% 39% / 43% 51% 49% 57%;
  z-index: 1;
}

.accent-blob-2 {
  position: absolute;
  bottom: -15px;
  right: 30%;
  width: 65px;
  height: 65px;
  background-color: var(--yellow-opacity);
  border-radius: 44% 56% 31% 69% / 59% 38% 62% 41%;
  z-index: 1;
}

.accent-blob-3 {
  position: absolute;
  top: 30%;
  left: -25px;
  width: 80px;
  height: 80px;
  background-color: var(--yellow-opacity);
  border-radius: 51% 49% 58% 42% / 34% 63% 37% 66%;
  z-index: 1;
}


.accent-blob-4 {
  position: absolute;
  top: 30%;
  right: -20px;
  width: 120px;
  height: 120px;
  background-color: rgba(233, 196, 28, 0.15);
  border-radius: 60% 40% 70% 30% / 30% 65% 35% 70%;
  z-index: 1;
}

.accent-blob-5 {
  position: absolute;
  bottom: -25px;
  left: 15%;
  width: 90px;
  height: 90px;
  background-color: rgba(233, 196, 28, 0.18);
  border-radius: 42% 58% 35% 65% / 55% 30% 70% 45%;
  z-index: 1;
}

.accent-blob-6 {
  position: absolute;
  top: -15px;
  left: 10%;
  width: 80px;
  height: 80px;
  background-color: rgba(233, 196, 28, 0.12);
  border-radius: 55% 45% 40% 60% / 35% 45% 55% 65%;
  z-index: 1;
}


.accent-blob-small-3 {
  position: absolute;
    top: 20%;
    right: -28px;
    width: 35px;
    height: 35px;
    background-color: rgba(233, 196, 28, 0.2);
    border-radius: 64% 36% 41% 59% / 39% 50% 50% 61%;
    z-index: 3;
}

.accent-blob-small-4 {
 position: absolute;
    top: 15%;
    right: -36px;
    width: 21px;
    height: 21px;
    background-color: rgba(233, 196, 28, 0.2);
    border-radius: 64% 36% 41% 59% / 39% 50% 50% 61%;
    z-index: 3;
}

.accent-blob-4 {
  position: absolute;
  top: 30%;
  right: -20px;
  width: 120px;
  height: 120px;
  background-color: rgba(233, 196, 28, 0.15);
  border-radius: 60% 40% 70% 30% / 30% 65% 35% 70%;
  z-index: 1;
}

.accent-blob-5 {
  position: absolute;
  bottom: -25px;
  left: 15%;
  width: 90px;
  height: 90px;
  background-color: rgba(233, 196, 28, 0.18);
  border-radius: 42% 58% 35% 65% / 55% 30% 70% 45%;
  z-index: 1;
}

.accent-blob-6 {
  position: absolute;
  top: -15px;
  left: 10%;
  width: 80px;
  height: 80px;
  background-color: rgba(233, 196, 28, 0.12);
  border-radius: 55% 45% 40% 60% / 35% 45% 55% 65%;
  z-index: 1;
}


.accent-blob-small-3 {
  position: absolute;
  top: 40%;
  right: -5px;
  width: 35px;
  height: 35px;
  background-color: rgba(233, 196, 28, 0.2);
  border-radius: 64% 36% 41% 59% / 39% 50% 50% 61%;
  z-index: 3;
}

.accent-blob-small-4 {
  position: absolute;
  top: 52%;
  right: -15px;
  width: 25px;
  height: 25px;
  background-color: rgba(233, 196, 28, 0.15);
  border-radius: 53% 47% 32% 68% / 61% 44% 56% 39%;
  z-index: 3;
}


.accent-blob-7 {
 position: absolute;
 top: 15%;
 left: -30px;
 width: 100px;
 height: 100px;
 background-color: rgba(233, 196, 28, 0.14);
 border-radius: 70% 30% 50% 50% / 40% 50% 50% 60%;
 z-index: 1;
}

.accent-blob-7 {
  position: absolute;
  top: 15%;
  left: -40px; 
  width: 100px;
  height: 100px;
  background-color: rgba(233, 196, 28, 0.25); 
  border-radius: 70% 30% 50% 50% / 40% 50% 50% 60%;
  z-index: 1;
}

.accent-blob-8 {
  position: absolute;
  bottom: -30px; 
  right: 20%;
  width: 85px;
  height: 85px;
  background-color: rgba(233, 196, 28, 0.25); 
  border-radius: 45% 55% 40% 60% / 60% 35% 65% 40%;
  z-index: 1;
}

.accent-blob-small-5 {
 position: absolute;
 top: 25%;
 left: -10px;
 width: 30px;
 height: 30px;
 background-color: rgba(233, 196, 28, 0.22);
 border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%;
 z-index: 3;
}

.accent-blob-small-6 {
 position: absolute;
 top: 35%;
 left: -25px;
 width: 22px;
 height: 22px;
 background-color: rgba(233, 196, 28, 0.18);
 border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
 z-index: 3;
}


.accent-blob-10 {
 position: absolute;
 top: 20%;
 right: -35px;
 width: 110px;
 height: 110px;
 background-color: rgba(233, 196, 28, 0.18);
 border-radius: 65% 35% 45% 55% / 35% 65% 35% 65%;
 z-index: 1;
}

.accent-blob-11 {
 position: absolute;
 bottom: -15px;
 left: 30%;
 width: 95px;
 height: 95px;
 background-color: rgba(233, 196, 28, 0.15);
 border-radius: 55% 45% 65% 35% / 45% 55% 45% 55%;
 z-index: 1;
}

.accent-blob-12 {
 position: absolute;
 top: -20px;
 left: 20%;
 width: 90px;
 height: 90px;
 background-color: rgba(233, 196, 28, 0.12);
 border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
 z-index: 1;
}

.accent-blob-small-7 {
 position: absolute;
 top: 45%;
 right: -5px;
 width: 35px;
 height: 35px;
 background-color: rgba(233, 196, 28, 0.2);
 border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
 z-index: 3;
}

.accent-blob-small-8 {
 position: absolute;
 top: 40%;
 right: -25px;
 width: 25px;
 height: 25px;
 background-color: rgba(233, 196, 28, 0.15);
 border-radius: 40% 60% 55% 45% / 50% 50% 50% 50%;
 z-index: 3;
}


.accent-blob-13 {
 position: absolute;
 top: 10%;
 left: -25px;
 width: 105px;
 height: 105px;
 background-color: rgba(233, 196, 28, 0.16);
 border-radius: 33% 67% 61% 39% / 57% 33% 67% 43%;
 z-index: 1;
}

.accent-blob-14 {
 position: absolute;
 bottom: -22px;
 right: 25%;
 width: 88px;
 height: 88px;
 background-color: rgba(233, 196, 28, 0.14);
 border-radius: 62% 38% 53% 47% / 47% 51% 49% 53%;
 z-index: 1;
}

.accent-blob-15 {
 position: absolute;
 top: -18px;
 right: 15%;
 width: 92px;
 height: 92px;
 background-color: rgba(233, 196, 28, 0.13);
 border-radius: 47% 53% 37% 63% / 63% 42% 58% 37%;
 z-index: 1;
}

.accent-blob-small-9 {
 position: absolute;
 top: 22%;
 left: -5px;
 width: 32px;
 height: 32px;
 background-color: rgba(233, 196, 28, 0.22);
 border-radius: 57% 43% 38% 62% / 41% 52% 48% 59%;
 z-index: 3;
}

.accent-blob-small-10 {
 position: absolute;
 top: 34%;
 left: -15px;
 width: 24px;
 height: 24px;
 background-color: rgba(233, 196, 28, 0.18);
 border-radius: 35% 65% 58% 42% / 61% 47% 53% 39%;
 z-index: 3;
}
*/

/* Next - Prev Nav */

  .project-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
        }

        .nav-button {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--blue);
            transition: all 0.3s ease;
            position: relative;
            padding: 10px;
           
        }

        .nav-button::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-button:hover::after {
            width: 100%;
        }

        .nav-button-icon {
            width: 20px;
            height: 20px;
            margin: 0 10px;
            stroke-width: 2.5;
        }

        .nav-button-prev {
            flex-direction: row;
        }

        .nav-button-next {
            flex-direction: row-reverse;
        }

        .nav-button-details {
            display: flex;
            flex-direction: column;
        }

        .nav-button-prev .nav-button-details {
            align-items: flex-start;
        }

        .nav-button-next .nav-button-details {
            align-items: flex-end;
        }

        .nav-button-label {
            font-size: 0.7rem;
            color: var(--grey);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .nav-button-name {
            font-size: 22px;
            font-weight: 500;
        }



/* New hero */

 .intro-container {
            position: relative;
            height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

.resume {
    height: 80vh;
}

 .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
             filter: brightness(0.6);
            z-index: 1;
     
        }

.background-image.about {
            background-image: url('../imgs/about.jpg');
            background-repeat: no-repeat;         /* Prevent repeat */
            background-size: cover;               /* Scale image to cover the container */
            background-position: center -100px;      /* Align image cleanly */
            background-attachment: scroll;  
        }

  .background-image.bus {
            background-image: url('../imgs/hero-bus.jpg');
            background-repeat: no-repeat;         /* Prevent repeat */
            background-size: cover;               /* Scale image to cover the container */
            background-position: center -240px;      /* Align image cleanly */
            background-attachment: scroll;  
        }

   .background-image.bank {
          background-image: url('../imgs/hero-bank.jpg');
            background-repeat: no-repeat;         /* Prevent repeat */
            background-size: cover;               /* Scale image to cover the container */
            background-position: center top -160px;    /* Align image cleanly */
            background-attachment: scroll; 
        
         }

   .background-image.uktv {
         background-image: url('../imgs/hero-tv.jpg');
            background-size: cover;
            background-repeat: no-repeat;         /* Prevent repeat */
            background-size: cover;               /* Scale image to cover the container */
            background-position: center top -160px;    /* Align image cleanly */
            background-attachment: scroll;  
         }

  .background-image.truck {
          background-image: url('../imgs/truck.png');
            background-repeat: no-repeat;         /* Prevent repeat */
            background-size: cover;               /* Scale image to cover the container */
            background-attachment: scroll; 
            background-position: center top -160px;
         }

 .background-image.health {
         
            background-image: url('../imgs/hero-health.jpg');
            background-repeat: no-repeat;         /* Prevent repeat */
            background-size: cover;               /* Scale image to cover the container */
            background-position: center center;    /* Align image cleanly */
            background-attachment: scroll; 
         }

   .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
            z-index: 2;
        }


/* Subtle abstract background pattern */

.resume-banner {
  position: relative;
  background-image: url('../imgs/resume.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  animation: bgPulse 30s ease infinite;
  color: white; /* Ensure text is readable */
}

.resume-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(11 15 67 / 77%); /* Adjust opacity as needed */
  z-index: 0;
}

@keyframes bgPulse {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

.pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background-image: radial-gradient(circle, rgb(255 255 255 / 27%) 1px, transparent 1px);
  background-size: 2px 2px; /* tighter spacing = more visible */
  opacity: 0.3; /* stronger presence */
  pointer-events: none;
  z-index: 0;
}

/* Brighter animated lava-style blob */
.resume-banner::after {
  content: "";
  position: absolute;
  bottom: 2%;
  right: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at center, rgba(237, 118, 85, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: blobMove 14s ease-in-out infinite;
  z-index: 0;
}


@keyframes blobMove {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-40px) scale(1.1);
  }
}

@keyframes blobMoveAlt {
  0%, 100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(30px) scale(1.05);
  }
}

.background-lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      background-image: 
        linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: gridShift 60s linear infinite;
    }

    @keyframes gridShift {
      0% { background-position: 0 0; }
      100% { background-position: 80px 80px; }
    }

  .geometric-overlay {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(circle, rgb(255 255 255 / 39%) 1px, transparent 1px);
    background-size: 2px 2px;
    opacity: 0.5;
    mix-blend-mode: overlay;
    z-index: 99;
    }

    @keyframes patternShift {
      0% { background-position: 0% 0%; }
      100% { background-position: 100% 100%; }
    }


   .Myheader {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 180px 0px;
            z-index: 999;
            position: relative;
        }

     .logo {
            font-size: 24px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: -1px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .nav-links {
            display: flex;
            gap: 30px;
        }

        .nav-links a {
            text-decoration: none;
            color: #ffffff;
            font-weight: 500;
            transition: color 0.3s ease;
           
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .main-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 180px;
            z-index: 3;
            position: relative;
            color: white;
            margin-top: -30px;
        }

        .project-title {
            font-size: 18px;
            color: white;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 2px;
              max-width: 600px
        }

        .project-headline {
            font-size: 52px;
            font-weight: 700;
            color: #ffffff;
            max-width: 800px;
            line-height: 1.2;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .project-details {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 26px;
            background: #f5f5f5;
            padding: 30px 180px;
            z-index: 3;
            position: relative;
            
        }

        .project-detail-column {
            display: flex;
            flex-direction: column;
        }

        .detail-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--black);
          
        }

        .detail-content {
            color: var(--black);
            font-size: 14px;
        }

@media (max-width: 768px) {
  .main-content {
    padding: 16px 12px;
  }

  .project-headline {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .project-title {
    font-size: 0.9rem;
  }

  .hero-badges {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    padding-top: 12px;
  }

  .platform-badge {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .project-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 12px;
  }

  .project-detail-column {
    width: 100%;
  }

  .Myheader {
    flex-direction: row;
    padding: 12px;
  }

  .nav-links {
    display: none; /* Or turn into a dropdown if needed */
  }

  .hamburger {
    position: absolute;
    right: 16px;
    top: 14px;
  }
}

    /* footer */
     
        .project-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-color: white;
            padding: 30px 60px;
        }

        .project-nav-item {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #2c3e50;
            transition: all 0.3s ease;
        }

        .project-nav-prev {
            flex-direction: row;
        }

        .project-nav-next {
            flex-direction: row-reverse;
        }

        .project-nav-icon {
            width: 24px;
            height: 24px;
            margin: 0 10px;
            stroke-width: 2;
        }

        .project-nav-details {
            display: flex;
            flex-direction: column;
        }

        .project-nav-prev .project-nav-details {
            align-items: flex-start;
        }

        .project-nav-next .project-nav-details {
            align-items: flex-end;
        }

        .project-nav-label {
            font-size: 0.75rem;
            color: #7f8c8d;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .project-nav-name {
            font-size: 1rem;
            font-weight: 600;
        }


@media (max-width: 768px) {
.project-navigation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 30px 20px;
    /* margin: 0 auto; */  /* ❌ Remove this line */
}

  .nav-button {
    padding: 8px 0;
  }

  .nav-button-name {
    font-size: 18px;
  }
}
  .case-study-footer {
            display: flex;
            flex-direction: column;
            background-color: #f0f0f0;
           padding: 0 180px;
        }


        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 60px;
            background-color: #f0f0f0;
        }

        .footer-left {
            display: flex;
            flex-direction: column;
            color: #2c3e50;
        }

        .footer-right {
            display: flex;
            gap: 20px;
        }

        .footer-link {
            text-decoration: none;
            color: #2c3e50;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .footer-link:hover {
            color: #3498db;
        }

@media (max-width: 768px) {
 .case-study-footer {
            display: flex;
            flex-direction: column;
            background-color: #f0f0f0;
           padding: 0px;
        }
    
    .footer-content {
    width: 100vw;
    max-width: 100vw;
    margin: 0; /* remove centering */
    padding: 24px 16px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .footer-left,
  .footer-right {
    width: 100%;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
  }
}

.hero-badges {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    padding: 20px 0;

}

.platform-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.5); /* White stroke */
    border-radius: 100px;
    font-size: 12px;
    font-weight: 400;
    color: white;
    background: rgba(255, 255, 255, 0.05); /* Slight transparency */
    transition: all 0.3s ease;
}

.platform-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

.platform-icon {
    width: 16px;
    height: 16px;
    stroke: white;
}

.metrics-section {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* Metrics Layout */
        .metrics-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }
        
        .metric-card {
            position: relative;
            padding-top: 2.5rem;
        }
        
        /* Metric Components */
        .metric-percentage-wrapper {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .metric-percentage {
            display: flex;
            align-items: baseline;
            font-size: 4rem;
            font-weight: 800;
            line-height: 1;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            background-size: 200% 100%;
            animation: shimmer 4s infinite linear;
        }
        
               .metric-unified .metric-percentage {
            background-image: linear-gradient(90deg, var(--green) 0%, #7BF2A7 50%, #55ED8C 100%);
        }

        .metric-faster .metric-percentage {
            background-image: linear-gradient(90deg, var(--orange) 0%, #F2C87B 50%, #EDB455 100%);
        }

        .metric-higher .metric-percentage {
            background-image: linear-gradient(90deg, #5590ED 0%, #7BAEF2 50%,  var(--blue) 100%);
        }
        
        @keyframes shimmer {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 200% 50%;
            }
        }
        
        .metric-percentage::after {
            content: '%';
            font-size: 1.75rem;
            margin-left: 0.25rem;
        }
        
        .metric-bar {
            position: absolute;
            left: 0;
            bottom: -0.5rem;
            height: 4px;
            width: 3rem;
            border-radius: 2px;
        }
        
        .metric-unified .metric-bar {
            background-color: #55ED8C;
        }
        
        .metric-faster .metric-bar {
            background-color: #EDB455;
        }
        
        .metric-higher .metric-bar {
            background-color: #5590ED;
        }
        
        .metric-content {
            max-width: 25rem;
        }
        
        .metric-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--black);
        }
        
        .metric-description {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--secondary);
        }
        
        /* Responsive Styles */
        @media (max-width: 1024px) {
            .metrics-container {
                gap: 3rem 1.5rem;
            }
            
            .metric-percentage {
                font-size: 4rem;
            }
            
            .metric-title {
                font-size: 1.25rem;
            }
        }
        
        @media (max-width: 768px) {
            .metrics-container {
                grid-template-columns: 1fr;
                gap: 4rem;
            }
            
            .metric-percentage {
                font-size: 3rem;
            }
            
            .metric-title {
                font-size: 1.5rem;
            }
        }

/* Problem Statement Design */
        .problem-wrapper {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 3rem;
}
        
        .problem-overview {
            position: relative;
        }
        
        .problem-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 1rem;
            margin-bottom: 2rem;
        }
        
        .problem-stats {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-item {
            flex: 1;
            background-color: white;
            padding: 1.25rem;
            border-radius: 0.75rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        .stat-icon {
            font-size: 30px
        }

        .stat-item p {
            font-size:18px;
            line-height: 24px;
            margin-bottom: 12px
        }
        
        .stat-value {
            font-size: 38px;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 0.25rem;
        }

  .stat-value::after {
  content: "%";
  margin-left: 2px;
  font-size: 26px;
color: var(--secondary);

}
        
        .stat-label {
            font-size: 14px;
            color: var(--black);
        }

@media (max-width: 768px) {
  .problem-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 12px;
  }


  .stat-value {
    font-size: 1.8rem;
    font-weight: bold;
   margin-bottom: 8px;
  }

  .stat-item p {
    font-size: 1rem;
    margin: 0 0 6px 0;
  }

  .stat-label {
    font-size: 0.9rem;
    color: #ccc;
  }
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  .slider-container img {
    width: 100%;
    height: auto;
    display: block;
  }
  .slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  .slider-overlay img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #fff;
    cursor: ew-resize;
    z-index: 2;
    pointer-events: auto;
    box-shadow: 0 0 0 1px #000;
    transition: background 0.2s;
  }
  .slider-handle:hover {
    background: #ccc;
  }

 .impact-section {
            max-width: 930px;
            margin: 0 auto;
        }
        
        .impact-container {
            position: relative;
            background-color: rgb(237 118 85 / 3%);
            border-radius: 20px;
             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
            /* Using outline for outer border to avoid spacing issues */
            outline: 8px solid #ed765547;
            /* Using border for inner border */
            border: 8px solid #ed765521;
            /* Adjusting outline offset to ensure borders touch */
            outline-offset: 0px;
            overflow: hidden;
        }
        
        .impact-content-wrapper {
            position: relative;
            padding: 2.5rem 6rem;
            overflow: hidden;
        }
        
        .impact-header {
            position: relative;
            z-index: 2;
        }
        

        
        /* Large Target SVG positioned at top right */
        .target-icon {
            position: absolute;
            top: -80px;
            right: -80px;
            width: 180px;
            height: 180px;
            z-index: 1;
            opacity: 0.5;
        }
        
        .impact-content {
            position: relative;
            z-index: 2;
        }
        
        .impact-content p {
            font-size: 1.0625rem;
            color: var(--black);
            margin-bottom: 1.5rem;
        }
        
        .impact-content p:last-child {
            margin-bottom: 0;
        }
        
        .highlight {
            color: var(--black);
            font-weight: bold;
        }

    .dot-pattern {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.08;
            z-index: 1;
            background-image: radial-gradient(var(--primary) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            body {
                padding: 1.5rem;
            }
            
            .impact-content-wrapper {
                padding: 1.5rem 3rem;
            }
            
            .target-icon {
                width: 120px;
                height: 120px;
                top: -20px;
                right: -20px;
            }
        }

/* -------RESUME------*/

   
        /* Header Section */
        .page-header {
            padding: 6rem 0 4rem;
            background-color: var(--black);
            color: white;
        }
        
        .header-content {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .page-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.2;
        }
        
        .page-subtitle {
            font-size: 1.25rem;
            font-weight: 400;
            max-width: 650px;
            opacity: 0.9;
        }
        
        /* Contact Section */
        .contact-section {
            padding: 2rem 0;
            background-color: green;
            border-bottom: 1px solid rgba(237, 118, 85, 0.2);
        }
        
        .contact-list {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9375rem;
        }
        
        .contact-icon {
            color: var(--primary);
        }
        
        /* Skills Section */
        .skills-section {
            padding: 4rem 0;
        }
        
        .section-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            position: relative;
            padding-bottom: 0.75rem;
        }
        
        .section-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background-color: var(--primary);
            border-radius: 2px;
        }
        
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }
        
        .skills-category {
            margin-bottom: 2.5rem;
        }
        
        .category-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--black);
        }
        
        .skills-list {
            list-style: none;
        }
        
        .skill-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
            color: var(--secondary);
            position: relative;
            padding-left: 1.5rem;
        }
        
        .skill-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--primary);
        }
        
        /* Experience Section */
        .experience-section {
            padding: 4rem 0;
            background-color: white;
        }
        
        .timeline {
            position: relative;
            margin-top: 2rem;
        }
        
        .timeline::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 0;
            left: 0;
            width: 2px;
            background-color: var(--light-grey);
        }
        
        .timeline-item {
            position: relative;
            padding-left: 2rem;
            padding-bottom: 1.8rem;
        }
        
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        
        .timeline-dot {
            position: absolute;
            left: -6px;
            top: 6px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: var(--primary);
            border: 2px solid white;
        }
        
        .timeline-date {
            display: inline-block;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 0.75rem;
            letter-spacing: 0.05em;
        }
        
        .job-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--black);
        }
        
        .company-name {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1.25rem;
            color: var(--secondary);
        }
        
        .achievements-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--black);
        }
        
        .achievements-list, .responsibilities-list {
            list-style: none;
            margin-bottom: 1.5rem;
        }
        
        .achievement-item, .responsibility-item {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.75rem;
            color: var(--black);
        }
        
        .achievement-item::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--black);
            font-weight: bold;
        }
        
        .responsibility-item::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--black);
            font-weight: bold;
        }
        
        /* Education Section */
        .education-section {
            padding: 4rem 0;
            background-color: var(--light-grey);
        }
        
        .education-grid {
            display: grid;
          grid-template-columns: 1fr; /* Single column */
          gap: 24px;
        
        }
        
        .education-item {
            padding: 2rem;
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .degree {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--black);
        }
        
        .institution {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: var(--grey);
            line-height: 1.4
        }
        
        .edu-date {
            font-size: 14px;
            color: var(--gray-dark);
            margin-bottom: 1rem;
        }
        
        /* Certificate Section */
        .certificates-section {
            padding: 4rem 0;
            background-color: white;
        }
        
      .certificates-grid {
          display: grid;
          grid-template-columns: 1fr; /* Single column */
          gap: 24px;
        }

        .certificate-item {
            padding: 1.5rem;
            border: 1px solid var(--gray);
            border-radius: 0.75rem;
            transition: all 0.3s ease;
        }
        
        .certificate-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            border-color: var(--primary-light);
        }
        
        .certificate-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--black);
        }
        
        .certificate-issuer {
            font-size: 0.9375rem;
            color: var(--secondary);
            margin-bottom: 0.5rem;
        }
        
        .certificate-date {
            font-size: 0.875rem;
            color: var(--gray-dark);
        }
        
        /* CTA Section */
        .cta-section {
            padding: 5rem 0;
            background-color: var(--light-grey);
            color: white;
            text-align: center;
        }
        
        .cta-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }
        
        .cta-text {
            font-size: 1.125rem;
            max-width: 600px;
            margin: 0 auto 2rem;
            opacity: 0.9;
            font-size: 18px;
            font-weight: 400;
        }
        
        .cta-button {
            display: inline-block;
            background-color: var(--primary);
            color: white;
            padding: 1rem 2rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .cta-button:hover {
            
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            color: white;
        }

.cta-details {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #555;
}

.cta-details p {
  margin: 4px 0;
  opacity: 0.8;
    font-weight:400
}

.cta-details a {
  color: #1A1A1A;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.cta-details a:hover {
  color: #ED7655;
}


        
        /* Responsive Styles */
        @media (max-width: 1024px) {
            .skills-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .education-grid, .certificates-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }
        
        @media (max-width: 768px) {
            .page-header {
                padding: 4rem 0 3rem;
            }
            
            .page-title {
                font-size: 2.5rem;
            }
            
            .contact-list {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }
            
            .skills-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .section-title {
                font-size: 1.75rem;
            }
            
            .job-title {
                font-size: 1.25rem;
            }
            
            .cta-title {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .skills-grid {
                grid-template-columns: 1fr;
            }
            
            .timeline::before {
                left: 7px;
            }
            
            .timeline-dot {
                width: 10px;
                height: 10px;
                left: 3px;
            }
            
            .timeline-item {
                padding-left: 2rem;
            }
        }


.aboutpage {
    height: 619px
}