/*-----------------------------------*\
 * #style.css
\*-----------------------------------*/

/**
 * copyright 2022 @codewithsadee
 */

/*-----------------------------------*\
 * #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --rich-black-fogra-29: hsl(240, 13%, 8%);
  --silver-chalice: hsl(0, 0%, 70%);
  --floral-white: hsl(38, 100%, 98%);
  --raisin-black: hsl(240, 8%, 18%);
  --sonic-silver: hsl(240, 3%, 45%);
  --mango-tango: hsl(20, 100%, 64%);
  --orange-web: hsl(39, 100%, 50%);
  --cultured: hsl(210, 17%, 98%);
  --mantis: hsl(118, 41%, 62%);
  --gambog: hsl(39, 100%, 45%);
  --black: hsl(0, 0%, 0%);
  --white: #fff;
  --onyx: hsl(0, 0%, 23%);

  --gradient: linear-gradient(90deg, hsl(38, 100%, 98%) 21.32%, hsl(144, 45%, 98%) 130%);

  /**
   * typography
   */

  --ff-poppins: 'Poppins', sans-serif;
  --ff-rubik: 'Rubik', sans-serif;
  --dm-sans: 'DM Sans', sans-serif;

  --fs-1: 30px;
  --fs-2: 28px;
  --fs-3: 24px;
  --fs-4: 20px;
  --fs-5: 18px;

  --fw-500: 500;
  --fw-700: 700;

  /**
   * transition
   */

  --transition: 0.2s ease-in-out;

  /**
   * spacing
   */

  --sectionwa-padding: 60px;

}


/*-----------------------------------*\
 * #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a { text-decoration: none; }

a,
img,
span,
button,
ion-icon { display: block; }

button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

html { scroll-behavior: smooth; }

body { background: #6da6cd63 ; }


/*-----------------------------------*\
 * #REUSED STYLE
\*-----------------------------------*/

.coontainer { padding-inline: 15px; }

#element {
  display: inline-block;
  min-width: 150px; /* Base value for small devices */
}

.h11,
.h22,
.h33 {
  font-family: var(--ff-poppins);
  color: var(--rich-black-fogra-29);
}

.h11 {
  font-size: var(--fs-1);
  line-height: 1.4;
  font-weight: var(--fw-700);
}

.h22 {
  font-size: var(--fs-1);
  line-height: 1.6;
}

.h33 {
  color: var(--onyx);
  font-size: var(--fs-3);
  line-height: 1.3;
}

.section-text,
.card-text,
.card-subtitle {
  font-family: var(--ff-rubik);
  color: var(--sonic-silver);
  font-size: var(--fs-5);
  line-height: 1.8;
}

.vector-line { display: none; }


/*-----------------------------------*\
 * #zero
\*-----------------------------------*/

.zero {
  background: #fff;
  padding: 150px 0 var(--sectionwa-padding);
}

.zero-banner { margin-bottom: 30px; }

.zero-banner img { width: 100%; }

.zero-title { margin-bottom: 20px; }

.zero .section-text { margin-bottom: 45px; }


/*-----------------------------------*\
 * #MEDIA QUERIES
\*-----------------------------------*/

/**
 * Responsive for 320px to 549px screen (small devices)
 */
@media (min-width: 320px) and (max-width: 549px) {
  #element {
    display: inline-block;
    min-width: 130px; /* Base value for small devices */
  }
  .zero {
    background: #fff;
    padding: 100px 0 var(--sectionwa-padding);
  }
  .h22 {
    font-size: 25px;
  }
  .h33 {
    font-size: 18px;
  }
}


/**
 * Responsive for 550px and above
 */

@media (min-width: 550px) {
  .zero {
    background: #fff;
    padding: 100px 0 var(--sectionwa-padding);
  }
  :root {
    --fs-1: 45px;
  }

  .coontainer {
    max-width: 550px;
    margin-inline: auto;
  }

  #element {
    display: inline-block;
    min-width: 130px; /* Base value for small devices */
  }

}


/**
 * Responsive for 768px and above
 */

@media (min-width: 768px) {

  :root {
    --fs-1: 55px;
  }

  .coontainer { max-width: 750px; }

  #element {
    min-width: 190px;
  }
  .zero {
    background: #fff;
    padding: 100px 0 var(--sectionwa-padding);
  }
  .zero-banner {
    max-width: 600px;
    /* margin-inline: auto; */
  }

}


/**
 * Responsive for 1024px and above
 */

@media (min-width: 1024px) {

  :root {
    --fs-1: 65px;
  }

  .coontainer { max-width: 950px; }

  .h22 { --fs-1: 40px; }
  .h33 {
    --fs-3: 30px;
  }
  .vector-line {
    display: block;
    position: absolute;
  }

  #element {
    min-width: 220px;
  }

  .zero .coontainer {
    display: grid;
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 50px;
  }

  .zero-banner {
    margin-bottom: 17%;
    order: 1;
  }

}


/**
 * Responsive for 1200px and above
 */

@media (min-width: 1200px) {

  .coontainer { max-width: 1150px; }

  #element {
    min-width: 210px;
  }

  /*Industry-carousel-cards*/

}


.video-container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */
}

.video-card {
  max-width: 920px;
  width: 100%;
  background: #DCF3FF;
  border-radius: 24px;
  backdrop-filter: blur(16px);
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  animation: floatCard 6s ease-in-out infinite;
}

.video-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: linear-gradient(135deg, #DCF3FF, #DCF3FF);

  filter: blur(80px);
  z-index: 0;
  animation: rotateGlow 20s linear infinite;
}

.video-title,
.video-description {
  position: relative;
  z-index: 2;
  text-align: center;
}

.video-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 10px;
}

.video-description {
  font-size: 1.1rem;
  color: #4a5568;
  margin-bottom: 28px;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
}

.video-thumbnail,
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 16px;
  transition: transform 0.4s ease;
}

.video-thumbnail {
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.video-thumbnail:hover {
  transform: scale(1.02);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  margin-top: -45px;
  margin-left: -45px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid #fff;
  border-radius: 50%;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  animation: pulse 2s infinite;
  transition: transform 0.3s;
}

.play-button:hover {
  transform: scale(1.1);
}

.play-button::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 28px solid white;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (max-width: 640px) {
  .video-card {
    padding: 24px;
  }

  .video-title {
    font-size: 1.6rem;
  }

  .video-description {
    font-size: 1rem;
  }

  .play-button {
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-left: -32px;
  }

  .play-button::before {
    border-left: 20px solid white;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
  }
}