body {
  margin: 0px;
  padding: 0px;
}
.azeret-mono {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


/* shared style */
.description {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: #0D1321;
  margin-top: 24px;
  margin-bottom: 0px;
}
.section-title {
  font-size: 30px;
  font-weight: 900;
  margin-top: 0px;
  margin-bottom: 0px;
}
.title {
  margin: 90px 294px 48px;
  text-align: center;
}

/* nav style */
.logo {
  font-size: 28px;
  font-weight: 900;
  text-decoration: none;
  color: #0D1321;
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  padding: 38px 150px;
}
.btn {
  font-family: "Azeret Mono", monospace;
  border: 2px solid #0D1321;
  border-radius: 5px;
  background-color: white;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  padding: 17px 24px;
}
.btn:hover {
  cursor: pointer;
  color: white;
  background-color: #0D1321;
}


/* banner style */
.banner-title {
  font-size: 38px;
  font-weight: 900;
  line-height: 68px;
}
.banner {
  padding: 48px 216px 48px 216px;
  text-align: center;
  background-image: url("../assets/Hero-bg.png");
  
  max-height: 652px;
}
.banner-margin {
  margin-bottom: 32px;
}
.banner-btn {
  font-family: "Azeret Mono", monospace;
  border-radius: 5px;
  background-color: #0D1321;
  color: white;
  font-size: 20px;
  font-weight: 500;
  padding: 17px 24px;
  border: none;
}
.banner-btn:hover {
  cursor: pointer;
  background-color: #3c4252;
}


/* why-development */
.column-title {
  font-size: 22px;
  font-weight: 800;
  color: rgba(13, 19, 33, 0.7);
  line-height: 36px;
}
.why-development {
  margin: 74px 150px;
  background-color: rgba(13, 19, 33, 0.02);
  padding: 80px 97px;
  border-radius: 16px;
}
.dev-section {
vertical-align: middle;
}
.alignment {
  text-align: center;
}
.reasons {
  display: flex;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1) , rgba(255, 255, 255, 0));
  border-radius: 16px;
  padding: 48px;
  gap: 98px;
  margin-top: 48px;
  align-items: center;
}
.reasons-02 {
  display: flex;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) , rgba(255, 255, 255, 1));
  border-radius: 16px;
  padding: 48px;
  gap: 98px;
  margin-top: 48px;
  align-items: center;
}
.btn-style {
  font-family: "Azeret Mono", monospace;
  border: 2px solid rgba(13, 19, 33, 0.7);
  border-radius: 5px;
  background-color: white;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  color: rgba(13, 19, 33, 0.7);
  margin-top: 16px;
}
.btn-style:hover {
  cursor: pointer;
  color: white;
  background-color: #0D1321;
}


/* my inspiration section */


.youtube-video {
display: flex;
justify-content: center;
border: 0.25px solid rgba(13, 19, 33, 0.2);
padding: 32px;
margin: 48px 150px;
border-radius: 16px;
}
iframe {
aspect-ratio: 16 / 8;
max-width: 1050;
width: 100%;
border-radius: 16px;
}


/* targeted skill section */
.targeted-skill {
  display: flex;
  margin: 48px 150px 111px 150px;
  gap: 24px;
}
.skill-title {
  font-size: 22px;
  margin-bottom: 8px;
}
.skill-description {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: #0D1321;
  margin-top: 0px;
  margin-bottom: 22px;
}
.learn-more {
  font-size: 16px;
  font-weight: 800;
  color: #0D1321;
}
.skill1 {
  padding: 40px;
  background-color: rgba(255, 76, 30, 0.05);
  border-radius: 14px;
}
.skill2 {
  padding: 40px;
  background-color: rgba(0, 76, 232, 0.05);
  border-radius: 14px;
}
.skill3 {
  padding: 40px;
  background-color: rgba(255, 223, 0, 0.05);
  border-radius: 14px;
}


/* next targeted skill */

.next-target {
  margin: 48px 150px;
}
.next-skill {
  display: flex;
  gap: 24px;
  align-items: last baseline;
  padding: 40px;
  border: 0.25px solid rgba(13, 19, 33, 0.2);
  margin-bottom: 22px;
  border-radius: 14px;
}
.skill-title2 {
  font-size: 22px;
  margin-top: 0px;
  margin-bottom: 08px;
}


/* support sectio */

/* .support-section {
  padding: 64px 228px;
  margin: 0px 150px;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: url(/assets/handshake.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
} */

.support-section {
  padding: 64px 228px;
  margin: 0px 150px;
  background: url(../assets/handshake.jpg) rgba(0, 0, 0, 0.4);
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  border-radius: 14px;
}
.support-title {
  font-size: 22px;
  margin-bottom: 8px;
  color: white;
}
.support-description {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0px;
  margin-bottom: 22px;
}
.support-input {
  font-family: "Azeret Mono", monospace;
  padding: 19px 50px 19px 20px;
  border-radius: 8px;
  border: none;
  color: rgba(13, 19, 33, 0.4);
  width: 350px;
}
.support-input:focus {
 outline: none;
 color: #0D1321;
}
.support-btn {
  font-family: "Azeret Mono", monospace;
  font-size: 16px;
  font-weight: 600;
  padding: 17px 20px;
  background-color: white;
  border: none;
  color: #0D1321;
  border-radius: 8px;
}
.support-btn:hover {
  cursor: pointer;
  color: white;
  background-color: #3c4252;
}

/* footer style */
.footer-section {
  display: flex;
  justify-content: space-between;
  padding: 30px 150px 25px 150px;
  background-color: rgba(13, 19, 33, 0.03);
  margin-top: 80px;
  align-items: center;
}
.social-icon {
  display: flex;
  gap: 24px;
}