/* featured -> motion-design 
graphic-design -> strong-copy
developing -> our-services */

:root {
    /* Colors */
    --yellow: #FDE300 ; /* main */
    --orange: #F9A462; /* support */
    --pink: #F299BD; /* support */
    --blue: #6ACDEA; /* pop */
    --white: #FFF2EA; /* neutral */
    --black: #396b77; /* off-black */
    
    /* Typography */
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'IBM Plex Sans', sans-serif;
}


*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  
  body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

  
  }
  
  /* 5. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 6. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* 7. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* 8. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  /*
    9. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }

  *{
    color:var(--black);
  }
/* intro animation cover */
@keyframes intro {
    0% {
        background-color: var(--white);
    }
    
}



html{
  background-color: var(--white);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

h1, h2, h3, h4, h6 {
  font-family:var(--heading-font);
  text-transform: uppercase;
  
}

h1 {
  font-size: clamp(2rem, 8vw, 6rem);
}
h2{
  font-size:clamp(1.25rem, 5vw, 3rem);

}
h2:not(#js-type) {
  /* styles for all h2s except the one with id="js-type" */
  font-size: clamp(1.75rem, 6vw, 4rem);
  text-transform: uppercase;
  font-family: var(--heading-font);
  color: var(--black);
}

#heading-caption{
margin-inline: 2em;
}
p, li, a {
  font-family: var(--body-font);
  font-weight: 410;
  
}
li{
  list-style: none;
}

#hero {
  display: flex;
  flex-direction: column;
  gap:20px;
  min-height: 100vh;
  text-align: center;
  
  
}

header {
  position: sticky;
  top: 0;
  background-color: var(--white);
}
#navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  z-index: 100px;
  padding-block: 20px;
  padding-left: 0;
}

#site-logo {
  width: clamp(80px, 15vw, 200px);
  display: inline;
  padding-block: 10px;

}
a {
  text-decoration: none;
  font-weight: 700;
}

.cta{
  text-align: center;

}



#featured{
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 2rem;
  /* padding-inline: 2rem; */
  align-items: center;
  text-align: center;
  
}
.featured-div{
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  
}


#GDUSA, #trusted-by{
height: 100%;
border-radius: 8px;
}

#GDUSA{
background-color: var(--pink);
}


#gdusa-img{
  display: inline;
  max-width: 4rem;
  
}

#copy-animation-img{
  max-width: 400px;
}

#trusted-by{
background-color: var(--orange);
margin-right: 2rem;

}



@keyframes bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(10px);
  }
}

.down-arrow{
  display: block;
  font-size: 3rem;
  animation: bounce 1.5s infinite ease-in-out;
  cursor: pointer;
  transition: 1s ease-in-out;

}

.cta-buttons{
  border: none;
  font-size: 1.25rem;
  padding: 1em;
  font-family: var(--body-font);
  font-weight: 700;
  border-radius: 10px;
  margin-inline:5px;
  cursor: pointer;

}

.pre-form{
  animation: gradientCycle 2s infinite;  background-size: 200% 100%;
  transition: background 0.5s ease-in-out;
  
}
.pre-form:hover{
  background-color: var(--orange);
}

@keyframes gradientCycle {
  0% { background-color: var(--orange); }
  33% { background-color: var(--pink) }
  66% { background-color: var(--yellow) }
  100% { background-color: var(--orange) }
}

#feel {
  animation: gradientCycle 2s infinite;
  background-size: 200% 100%;
  transition: color 0.5s ease-in-out;
  border-radius: 10px;
}

section:not(#hero) {
  padding-block:100px;
}


 #our-services {
  grid-template-columns: 1fr; 
  text-align: center;
  /* margin-inline: 50px; */
  gap: 80px;
  display: block; /* Change from grid to block */
  overflow: visible;
  position: relative;
  
}

 #strong-copy {
  display: grid;
  grid-template-columns: 1fr; 
  text-align: center;
  /* margin-inline: 50px; */
  gap: 80px;
}
.the-strong-copy{
display: flex;
flex-direction: column;
gap: 1rem;
}

#strong-copy-header{
grid-column: span 2;
text-align: center;
}

.strong-copy{
display: grid;
grid-template-columns: 60% 40%;
text-align: left;
}

section{
padding-inline: clamp(1rem, 5vw, 2rem);
}

.section-header {
  grid-column: span 2; 
  text-align: center; 
}

img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  
}

h3 {
  margin-block:10px;
}

img:not(#site-logo, #copy-animation-img){
  margin-block:20px;
  cursor: pointer;
}

.enlarged {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
  transform: scale(1.25); /* Adjust the scale value as needed */
  
  transition: transform 0.3s ease; /* Smooth transition */
  z-index: 10; /* Ensures the image stays above other content */
  
  
}

@media (max-width: 768px) {
  
}
a:hover:not(.down-arrow){
  color: var(--orange);
  text-decoration: underline;
  
}


@keyframes flashOrange {
  0% {
    color: var(--black); /* Starting color (adjust as needed) */
  }
  50% {
    color: orange; /* Flashing color */
  }
  100% {
    color: var(--black); /* Returning to the original color */
  }
}

.award-winning {
  animation: flashOrange 2s ease-in-out infinite; /* Adjust timing and easing */
}

/* p:not(.extra-context){
  margin-block: 10px;
} */


footer{
  text-align: center;
}


iframe{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  
}

.services-col{
 
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two equal columns */
    gap: 2rem;                             /* space between columns */

}



#services-header{
  grid-column: span 2;
}

/* portofolio slideshow logic */
.slideshow {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;

  position: relative;
  justify-content: center;
  z-index: 1;
  height: auto; /* Change from fixed 400px */
  min-height: 400px; /* Minimum height */
  overflow: visible; /* Disable clipping */
  position: relative; /* New stacking context */
}

.slideshow-track {
  display: flex;
  gap:1rem;
  height:100%;
  animation: scroll-left 20s linear infinite;
  width: max-content; /* Lets content expand naturally */
  position: relative; /* Not absolute */
  height: 100%; /* Fill container */
  will-change: transform;
}

.slideshow img {
  height: 100%;
  width: auto;
  /* margin-right: 2rem; */
}
.slideshow-track img {
  width: 300px;
  height: 300px;
  object-fit: contain; /* show the whole image, even if it's small */
  object-position: center;
   /* background-color: #f7f7f7; optional: makes portrait gaps look intentional */
  border-radius: 8px;

}



/* trusted logos logics */
/* Container hides overflow */
.trusted-slideshow {
  overflow: hidden;
  width: 100%;
  max-width: 800px; /* or whatever max width fits your design */
  margin: 0 auto; /* center horizontally */
}

/* Track is a flex container that scrolls */
.trusted-track {
  display: flex;
  gap: 5rem;
   animation: sway 20s linear infinite alternate;
  animation-timing-function: ease-in-out;
}

/* Logos sizing */
.trusted-track img {
  height: 50px; /* adjust logo size */
  max-width: 100px;       /* New max width */
  height: auto;           /* Maintain aspect ratio */


  object-fit: contain;
}


@keyframes sway {
   0% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(-80px); /* Scroll left */
  }
  55% {
    transform: translateX(80px); /* Brief pause */
  }
  100% {
    transform: translateX(0); /* Return right */
  }
}




/* Animation: scroll from right to left */
@keyframes scroll-left-trusted {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}



@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.5rem)); }
}


/* mobile logic
@media (max-width: 768px) {
  #featured, #strong-copy, #product-design, #our-services {
    display: flex;
    flex-direction: column;
}
 #trusted-by{
    width: 100%;
    margin-right: 0rem;
  }
  .strong-copy{
    display: grid;
    grid-template-columns: 1fr;
    text-align: left;
  }
  
} */

@media (max-width: 768px) {
   .our-services {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .services-col{
      grid-template-columns: 1fr;
    }
    #services-header{
      grid-column: span 1; 
    }

  #featured, #our-services {
    display: flex;
    flex-direction: column;
  }
  
  #trusted-by {
    width: 100%;
    margin-right: 0;
  }
  
  /* Fix for strong-copy section */
  .strong-copy {
    display: flex;
    flex-direction: column;
    text-align: center; /* Center align for mobile */
    gap: 2rem;
  }
  
  /* Make sure the image in strong-copy fits on mobile */
  #copy-animation-img {
    max-width: 100%;
    margin: 0 auto;
  }
  
  /* Adjust text alignment for mobile */
  .the-strong-copy {
    text-align: center;
  }
  
  /* Optional: Adjust padding for mobile */
  section:not(#hero) {
    padding-block: 50px;
  }
 
}


@keyframes restBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -10px); }
}

@keyframes floatIn1 {
  0% { top: 200px; left: 30%; opacity: 0; }
  50% { top: 130px; left: 45%; opacity: 1; }
  100% { top: 200px; left: 30%; opacity: 0; }
}

@keyframes floatIn2 {
  0% { top: 200px; left: 70%; opacity: 0; }
  50% { top: 130px; left: 55%; opacity: 1; }
  100% { top: 200px; left: 70%; opacity: 0; }
}


/* on scroll logic */

.fade-in-section {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  
}