/* =========================
   WEBSITE TYPES SECTION
========================= */

.website-types-section{
  position:relative;
  padding:130px 20px;
  background:
  linear-gradient(
    to bottom,
    #ffffff,
    #f8fbff
  );

  overflow:hidden;
}

/* GLOW */

.wt-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  animation:floatGlow 8s ease-in-out infinite;
}

.wt-glow-1{
  width:300px;
  height:300px;
  background:rgba(37,99,235,0.12);
  top:-100px;
  left:-100px;
}

.wt-glow-2{
  width:260px;
  height:260px;
  background:rgba(14,165,233,0.12);
  bottom:-80px;
  right:-80px;
}

/* TOP */

.wt-top{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:900px;
  margin:0 auto 90px;
}

.wt-badge{
  display:inline-block;
  padding:12px 24px;
  border-radius:100px;
  background:#eff6ff;
  color:#2563eb;
  font-weight:600;
  margin-bottom:24px;
}

.wt-top h2{
  font-size:clamp(42px,6vw,74px);
  line-height:1.1;
  margin-bottom:24px;
  color:#111;
}

.wt-top h2 span{
  background:
  linear-gradient(
    90deg,
    #2563eb,
    #0ea5e9
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.wt-top p{
  color:#666;
  line-height:1.9;
  font-size:18px;
}

/* ROW */

.wt-row{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;

  align-items:center;

  margin-bottom:120px;
}

.reverse-row .wt-image{
  order:2;
}

.reverse-row .wt-content{
  order:1;
}

/* IMAGE */

.wt-image{
  position:relative;
}

.wt-image img{
  width:100%;
  border-radius:35px;

  box-shadow:
  0 25px 70px rgba(0,0,0,0.08);

  animation:
  imageFloat 5s ease-in-out infinite;
}

/* FLOATING CARD */

.wt-floating-card{
  position:absolute;

  padding:14px 20px;

  border-radius:18px;

  background:
  rgba(255,255,255,0.85);

  backdrop-filter:blur(12px);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);

  font-weight:600;

  animation:
  popupFloat 4s ease-in-out infinite;
}

.card-1{
  top:30px;
  left:-20px;
}

.card-2{
  bottom:30px;
  right:-20px;
}

/* CONTENT */

.wt-content{
  animation:
  fadeUp 1s ease-in-out;
}

.wt-icon{
  width:90px;
  height:90px;

  border-radius:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #0ea5e9
  );

  color:white;
  font-size:38px;

  margin-bottom:28px;
}

.wt-content h3{
  font-size:54px;
  line-height:1.1;
  margin-bottom:24px;
  color:#111;
}

.wt-content p{
  color:#666;
  line-height:1.9;
  margin-bottom:24px;
}

.wt-content ul{
  list-style:none;
  margin-bottom:35px;
}

.wt-content ul li{
  margin-bottom:14px;
  color:#333;
  font-weight:500;
}

/* BUTTON */

.wt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;

  border-radius:100px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #0ea5e9
  );

  color:white;
  text-decoration:none;

  font-weight:600;

  transition:0.45s;
}

.wt-btn:hover{
  transform:
  translateY(-6px)
  scale(1.03);

  box-shadow:
  0 20px 40px rgba(37,99,235,0.25);
}

/* ANIMATION */

@keyframes imageFloat{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0);
  }

}

@keyframes popupFloat{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }

  100%{
    transform:translateY(0);
  }

}

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

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

}

@keyframes floatGlow{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(20px);
  }

  100%{
    transform:translateY(0);
  }

}

/* RESPONSIVE */

@media(max-width:1100px){

  .wt-row{
    grid-template-columns:1fr;
    gap:50px;
  }

  .reverse-row .wt-image,
  .reverse-row .wt-content{
    order:unset;
  }

}

@media(max-width:768px){

  .website-types-section{
    padding:90px 18px;
  }

  .wt-top h2{
    font-size:42px;
  }

  .wt-content h3{
    font-size:38px;
  }

  .wt-floating-card{
    font-size:13px;
  }

}

@media(max-width:480px){

  .wt-content h3{
    font-size:32px;
  }

  .wt-icon{
    width:75px;
    height:75px;
    font-size:30px;
  }

  .card-1{
    left:10px;
  }

  .card-2{
    right:10px;
  }

}