:root {
  --primary-color: #3498db;
  --secondary-color: #1CEDA4;
  --accent-color: #f39c12;
  --text-color: #333;
  --background-color: #f5f5f5;
  --bg__color1: #00ffc3;
  --bg__color2: #151720;
  --white: #ffffff;
  --color_gradient1: linear-gradient(270deg, #1ff9a9 -56.54%, #009d8d 114.77%);
  --color_gradient2: linear-gradient(180deg, #24ff87 0%, #23d3ea 100%);
}

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

html,
body {
  font-family: "Bai Jamjuree";
  font-size: 16px;
}

body {
  background-color: var(--bg__color2);
}

.container {
  width: 80%;
  max-width: 1140px;
  margin: 0 auto;
}
h2{
  font-weight: 600;
    font-size: 48px;
    line-height: 130%;
    text-align: center;
}
h3{
  font-size: 30px;
    font-weight: 600;
    line-height: 130%;
}
.wrap{
  width: 100%;
  border-radius: 16px;
  border: solid 1px transparent;
  background-image: linear-gradient(#151720, #151720),
      linear-gradient(180deg, rgba(0, 255, 166, 0) 0%, rgba(0, 255, 166, 0.5) 50%, rgba(0, 255, 166, 0) 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.circle__blur2 {
  width: 358px;
  height: 619px;
  border-radius: 100% 0 0 100%;
  background: #0F342C;
  filter: blur(60px);
  opacity: 0.3;
}

.rectangle__blur2 {
  background: linear-gradient(90deg, #15171F 0%, rgba(21, 23, 31, 0) 100%);
}


.img__1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("./img/background1.jpg");
  /* background-size: 100%; */
  height: 1590px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.bg_black_gradient {
  width: 100%;
  height: 257px;
  background: linear-gradient(0deg, #15171F 0%, rgba(21, 23, 31, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
}

.quarter__ellipse__header {
  width: 425px;
  height: 400px;
  background-color: var(--bg__color1);
  border-radius: 0 0 100% 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 30%;
  filter: blur(150px);
}

/* HEADER  */
/* TOP HEADER  */

.top__header {
  height: 100px;
  padding: 15px 0;
}

.container__top__header {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.container__top__header nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.container__top__header nav ul li {
  list-style: none;
  margin-left: 47px;
}

.container__top__header nav li a {
  display: inline-block;
  text-decoration: none;
  font-weight: 400;
  line-height: 150%;
  color: white;
  text-align: center;
}

.container__top__header nav li:first-child a,
.container__top__header nav li a:hover {
  font-weight: 600;
  font-size: 18px;
  background: var(--color_gradient2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-border {
  position: relative;
  background: var(--color_gradient2);
  width: 115px;
  height: 42px;
  border-radius: 8px;
  display: inline-block;
}

.container__top__header nav li button {
  position: absolute;
  top: 1px;
  left: 1px;
  display: inline-block;
  width: 113px;
  height: 40px;
  padding: 2px 24px;
  color: white;
  background-image: linear-gradient(180deg, #1ff9a9 0%, #028174 100%);
  border: 1px solid;
  border-radius: 8px;
  cursor: pointer;
  border: none;
}

/* BANNER */
.banner {
  height: 700px;
  margin-bottom: 80px;
}

.banner__container {
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-items: start;
  gap: 126px;
}

.banner__right img {
  width: 518px;
  position: relative;
  top: -64px;
}

.banner__left {
  width: 570px;
}

.banner__left h1 {
  font-size: 92px;
  font-weight: 600;
  line-height: 130%;
  background: var(--color_gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 24px;
}

.banner__left p {
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  color: white;
  margin-bottom: 65px;
}

.button__download__list {
  height: 56px;
  width: 396px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button__download__list .button__download {
  height: 56px;
  width: 190px;
}

.button__download__list .button__download button {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* CYBERSERRCURITY LANDSCAPE  */
.cybersecurity__landcape .circle__blur2 {
  position: absolute;
  right: -143px;
  top: -160px;
  z-index: 10;
}

.cybersecurity__landcape__container {
  position: relative;
  z-index: 5;
}

.cybersecurity__landcape {
  padding: 8px 0 90px;
}

.cybersecurity__landcape__top {
  margin-bottom: 47px;
}

.cybersecurity__landcape__top h2 {
  background: var(--color_gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cybersecurity__landcape__bottom {
  width: 100%;
  height: 502px;
  display: flex;
  border-radius: 25px;
  background: linear-gradient(269.64deg,
      rgba(25, 29, 54, 0.99) -0.15%,
      rgba(12, 98, 70, 0.99) 39.44%,
      rgba(25, 103, 85, 0.9405) 44.39%,
      rgba(14, 143, 113, 0.0495) 52.8%,
      rgba(26, 44, 31, 0.1485) 98.81%);
  border-radius: 0 25px 25px 0;
}

.cybersecurity__landcape__left {
  width: 58%;
  position: relative;
  z-index: -10;
}

.cybersecurity__landcape__left img {
  height: 100%;

}

.cybersecurity__landcape__right {
  padding: 15px 0 0;
  width: 48%;
  border-radius: 0 25px 25px 0;
}

.cybersecurity__landcape__right h6 {
  margin: 0 40px 25px 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  color: white;
}

.cybersecurity__landcape__list {
  margin-right: 24px;
}

.landcape__item__wrap {
  background-image: linear-gradient(90deg,#236753, #245F51,#25524D,#28484B,#2B3D49),
    linear-gradient(180deg, rgba(0, 255, 166, 0) 0%, rgba(0, 255, 166, 0.5) 50%, rgba(0, 255, 166, 0) 100%);
}

.landcape__item__wrap:nth-child(1),
.landcape__item__wrap:nth-child(2) {
  margin-bottom: 10px;
}

.cybersecurity__landcape_item {
  display: flex;
  padding: 14px;
  border-radius: 15px;
  background: #FFFFFF0D;
}

.landcape_item__text {
  font-weight: 400;
  size: 18px;
  line-height: 130%;
  color: white;
  letter-spacing: 0%;
}

.item__number__wapper {
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(180deg,
      rgba(0, 255, 166, 0) 0%,
      rgba(0, 255, 166, 0.5) 50%,
      rgba(0, 255, 166, 0) 100%);
  margin-right: 16px;
}

.landcape_item__number {
  width: 100px;
  border-radius: 15px;
  background-color: #377161;
  padding: 14px 6px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landcape_item__number p {
  background: var(--color_gradient2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

}

.landcape_item__number span {
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  letter-spacing: 0%;
}

/* PROTECT */
.background__image2 {
  height: 625px;
  width: 937.73px;
  background-image: url(./img/background2.svg);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  position: absolute;
  right: -350px;
  top: -336px;
  z-index: 0;
}

.protect__container {
  position: relative;
}

.protect {
  padding: 90px 0;

}

.protect__container h3 {
  color: var(--secondary-color);
  margin-bottom: 30px;
}

.protect__container p {
  font-size: 20px;
  font-style: italic;
  line-height: 130%;
  font-weight: 400;
  letter-spacing: 0%;
  color: white;
}

/* FEATURES  */
.features {
  padding: 140px 0px 90px;
}

.features__container {
  position: relative;
}

.features__container h2 {
  background: var(--color_gradient1);
  -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  margin-bottom: 48px;
}

.feature__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.features__item__wrap:nth-child(1),
.features__item__wrap:nth-child(3) {
  margin-bottom: 56px;
}

.features__item {
  padding: 24px;
  border-radius: 15px;
  background: #FFFFFF0D;

}

.features__item__title {
  margin-bottom: 16px;
}

.features__item__title h6 {
  display: inline-block;
  background: var(--color_gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: normal;
}

.features__item__text {
  color: white;
  font-size: 14px;
  line-height: 150%;
  font-weight: 400;
}

.features__img {
  margin: 0px 80px;
}

.features .background__image3 {
  width: 1000px;
  height: 610px;
  background: url(./img/background3.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: -150px;
  bottom: -221px;
  opacity: 0.2;
}

/* TESTIMONIALS */
.testimonials {
  padding: 85px 0 90px;

}

.testimonials__container {
  position: relative;
}

.testimonials__body {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.testimonials h2 {
  background: var(--color_gradient1);
  -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  margin-bottom: 48px;
}

.testimonials__left {

  width: 50%;
}

.testimonials__left img {
  position: relative;
  z-index: 2;
}

.testimonials__icon img {
  width: 28px;
  height: 22px;
  margin-bottom: 4px;
  margin-left: 8px;


}

.testimonials__right {
  width: 50%;
  margin-left: 56px;
}


.testimonials__item__wrap:nth-child(1),
.testimonials__item__wrap:nth-child(2) {
  margin-bottom: 16px;
}

.testimonials__item {
  padding: 16px 24px;
  border-radius: 15px;
  background: #FFFFFF0D;
}

.testimonials__item p {
  font-weight: 400;
  color: white;
  font-size: 18px;
  line-height: 150%;
  margin-bottom: 16px;
}

.testimonials__user img {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.testimonials__user {
  display: flex;
  justify-content: start;
  align-items: center;
}

.testimonials__user span {
  font-weight: 600;
  line-height: 150%;
  font-size: 14px;
  background: var(--color_gradient2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.testimonials .background__image4 {
  background-image: url(./img/background4.svg);
  background-repeat: no-repeat;
  background-size: auto;
  width: 1440px;
  height: 904px;
  position: absolute;
  top: -380px;
  left: -150px;
  opacity: 0.5;
}

.testimonials .circle__blur2 {
  position: absolute;
  right: -143px;
  top: 30px;
  z-index: 0;
}

.testimonials_rectangle1 {
  width: 505px;
  height: 932px;
  position: absolute;
  right: -150px;
  top: -420px;
  z-index: -2;
  rotate: -180deg;
}

.testimonials_rectangle2 {
  width: 379px;
  height: 932px;
  position: absolute;
  left: -150px;
  top: -420px;
  z-index: -2;
}

/* PARTNER  */
.partner {
  padding: 85px 0;
}

.partner__container {
  position: relative;
}

.partner h2 {
  background: var(--color_gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 48px;
}

.partner__list {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.partner__item {
  width: 348px;
  height: 96px;
  padding: 24px;
  background: #FFFFFF0D;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;

}

.partner .background__image5 {
  height: 625px;
  width: 937.73px;
  background-image: url(./img/background5.svg);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  position: absolute;
  left: -170px;
  top: -335px;
  z-index: 0;

}

.partner .circle__blur2 {
  width: 283px;
  height: 753px;
  rotate: -180deg;
  position: absolute;
  left: -150px;
  top: -110px;
  filter: blur(60px);
  opacity: 0.4;
  z-index: -1;
}

/* TRAINING AI */
.training__ai {
  padding: 92px 0;
}

.training__ai h2 {
  background: var(--color_gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 48px;

}

.training__ai__body {
  margin: 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  position: relative;
}

.training__left {
  width: 549px;
  padding: 48px 24px 58px;
  background-color: #FFFFFF0D;
  border-radius: 15px;
  border: none;
}

.training__wrap {
  width: 549px;
}

.training__top h6 {
  font-weight: 600;
  font-size: 32px;
  line-height: 130%;
  color: white;
  margin-bottom: 16px;
}

.join {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: none;


}

.traning__add__users {
  display: flex;
}

.traning__add__users img {
  width: 26px;
  height: 26px;
  position: relative;
}

.traning__add__users img:nth-child(2) {

  left: -8px;
  top: 0;
}

.traning__add__users img:nth-child(3) {
  position: relative;
  left: -16px;
  top: 0;
}

.traning__add__users img:nth-child(4) {
  position: relative;
  left: -24px;
  top: 0;
}

.join a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  line-height: 130%;
  position: relative;
  left: -26px;
  top: 0;
}

.training__top hr {
  margin: 32px 0 32px;
  background: linear-gradient(180deg, rgba(0, 255, 166, 0) 0%, rgba(0, 255, 166, 0.5) 50%, rgba(0, 255, 166, 0) 100%);
  height: 1px;
  border: 0;
}

.training__bottom p {
  margin-bottom: 16px;
  font-weight: 18px;
  font-weight: 500;
  line-height: 130%;
  color: white;
}

.training__right {
  background-image: url(./img/background6.svg);
  width: 988px;
  height: 453px;
  background-size: 83.5%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0px;
  right: -362px;
  z-index: -1;
}

.traning__rectangle {
  width: 377px;
  height: 538px;
  position: absolute;
  right: -200px;
  top: 0px;
  z-index: 0;
  rotate: -180deg;
}

/* ROADMAP */
.roadmap {
  padding: 80px 0 ;
  margin-bottom: 90px;

}

.roadmap__container {
  position: relative;
}

.roadmap h2 {
  background: var(--color_gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 48px;
}

.timeline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  justify-content: space-between;
  height: 390px;
  align-items: end;
}

.roadmap__content__wrap {
  position: relative;
}

.roadmap__content {
  padding: 16px 16px 24px;
  background: #FFFFFF0D;
  /* background: #1726271A; */
  border-radius: 15px;

}

.roadmap__item {
  width: 100%;
  position: relative;
}

.road__time {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.roadmap__content h5 {

  display: inline-block;
  padding: 7px 16px;
  border-radius: 16px;
  background: #132122;
  font-weight: 600;
  font-size: 14px;
  line-height: 130%;
  background: linear-gradient(180deg, #24FF87 0%, #23D3EA 100%);
}

.roadmap__content h6 {
  text-align: center;
  background: linear-gradient(180deg, #24FF87 0%, #23D3EA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 16px;
  line-height: 130%;
  margin-bottom: 8px;
}

.roadmap__item ul {
  min-height: 126px;
  list-style: none;
}

.roadmap__item ul li {
  margin-left: 8px
}

.roadmap__item ul li p {
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: white;

}

.roadmap__item ul li span {
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: white;
  border-radius: 50%;
  margin-right: 8px;
  margin-bottom: 3px;
}

.roadmap__container hr {
  background: linear-gradient(86.72deg, rgba(0, 255, 166, 0.2) 5.58%, rgba(0, 255, 166, 0.5) 87.07%);
  height: 3px;
  border: 0;
  rotate: -6deg;
}

.roadmap__content__wrap::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 0;
  left: 50%;
  border-radius: 50%;
  background: linear-gradient(180deg, #24FF87 0%, #23D3EA 100%);
  transform: translate(-5px, 5px);
}

.roadmap__content__wrap::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  bottom: -46px;
  left: 50%;
  border-radius: 50%;
  background: linear-gradient(180deg, #24FF87 0%, #23D3EA 100%);
  transform: translate(-2.5px, 2.5px);
}


.roadmap__item:nth-of-type(2) .roadmap__content__wrap {
  top: -62px;
}

.roadmap__item:nth-of-type(3) .roadmap__content__wrap {
  top: -91px;
}

.roadmap__item:nth-of-type(4) .roadmap__content__wrap {
  top: -134px;
}

.roadmap__item:nth-of-type(2) .roadmap__content__wrap::before,
.roadmap__item:nth-of-type(3) .roadmap__content__wrap::before {
  bottom: -78px;
}

.roadmap__item:nth-of-type(3) .roadmap__content__wrap::before {
  bottom: -76px;
}

.roadmap__item:nth-of-type(4) .roadmap__content__wrap::before {
  bottom: -88px;
}

.roadmap__item::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 41px;
  bottom: -45px;
  left: 134px;
  background: linear-gradient(180deg, #24FF87 0%, #23D3EA 100%);
  transform: translateX(-1.5px);

}

.roadmap__item:nth-of-type(2)::after {
  bottom: -14px;
  height: 73px;
}

.roadmap__item:nth-of-type(3)::after {
  bottom: 15px;
  height: 73px;
}

.roadmap__item:nth-of-type(4)::after {
  bottom: 48px;
  height: 84px;
}

.roadmap .background__image4 {
  background-image: url(./img/background4.svg);
  background-repeat: no-repeat;
  background-size: auto;
  width: 1440px;
  height: 936px;
  position: absolute;
  top: -80px;
  left: -150px;
  opacity: 0.5;
  z-index: 0;

}

.roadmap_rectangle1 {
  width: 505px;
  height: 932px;
  position: absolute;
  right: -150px;
  top: -80px;
  z-index: -2;
  rotate: -180deg;
}

.roadmap_rectangle2 {
  width: 379px;
  height: 932px;
  position: absolute;
  left: -150px;
  top: -80px;
  z-index: -2;
}

.roadmap .circle__blur2 {
  position: absolute;
  right: -143px;
  top: 216px;
  z-index: 0;
}
/* FQA */
.fqa {
  
  padding: 38px 0 148px;
}
.fqa__container {
  position: relative;
}
.fqa h2 {
    background: var(--color_gradient1);
    -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    margin-bottom: 48px;
}
.dropdown {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  height: auto;
 
  align-items: flex-start;
}
.drop__item{
  padding: 16px 24px;
  color: white;
  font-size: 16px;
  border-radius: 7px;
  line-height: 130%;
    background: #FFFFFF0D;
}
.dropdown__title {
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown__content  p {
  font-size: 14px;
  font-size: 400;
}

.dropdown__item__wrap{
  display: inline-block;
    border-radius: 8px;
}
.dropdown a:hover {
  background-color: #ddd;
}

.drop__item hr{
  margin: 16px 0;
  color: white;
  opacity: 0.1;
}
.footer h2 {
  text-align: center;
}

/* FOOTER */
footer {
  padding: 90px 0 ;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 45px;
}
.footer__logo h6{
  font-weight: 275;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  color: white;
  margin-bottom: 18px;
}
.footer__menu ul {
  color: white;
  list-style: none;
  display: flex;
  align-items: center;

}
.footer__menu ul li{
  margin-right: 28px;
}
.footer__menu ul li a{
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
}
.footer__download {
  display: grid;
  grid-template-columns: 1fr;
gap: 8px;
}
.footer__download p {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: white;
}
.footer__download button {
  border: none;
  cursor: pointer;
  background: transparent;
}

.footer__download button  img {
  width: 141px;
}
.footer__bottom a{
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: white;
  text-decoration: none;
}
.footer__bottom hr {
 color: white;
 opacity: 0.2;
 margin: 16px 0;

}
.site__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site__footer p{
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: white;
}
.site__footer p a{
  text-decoration: none;
  background: var(--color_gradient2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer__icon ul{
  display: flex;
  align-items: center;
  justify-content: end;
  height: 26px;
}
.footer__icon ul li {
  list-style: none;
  margin-left: 24px;
  width: 26px;

}
.footer__icon ul li a i {
  font-size: 20px;
}