*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

.overlay{
    border-image: linear-gradient( 270deg, #00000038, #00000038) fill 1;
}

.hero{
    width: 100%;
    min-height: 600px;
    background-image: url(assets/img/background-imagehero.webp);
    background-position: center;
    background-size: cover;
    padding: 10px 10%;
    position: relative;
}

nav{
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: rgba(0, 0, 0, 0);
    border-radius: 20px;
    
    border: 1px solid linear-gradient(hsla(0, 100%, 50%, 0), hsla(195, 100%, 50%, 0));
}

.btnnav{
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;   
    padding: 12px 16px;
    text-decoration: none;
    margin: 10px;
    text-shadow: 1px 1px 10px rgb(0, 0, 0);

}
.hero_landing{
    text-align: center;
    
    /* -border: 1px solid rgb(255, 255, 255); */
    
    
    padding-top: 5%;
}

.hero_landing h1{

    font-size: 5rem;
    color: rgb(255, 255, 255);
    
    text-shadow: 2px 4px 10px #000000;
}
.hero_landing h2{
    
    font-size: 2.5rem;
    color: rgb(255, 255, 255);
    text-shadow: 2px 4px 10px #000000;
    margin-left: 12%;
    margin-right: 12%;
    padding-bottom: 2%;
    border: 1px solid rgba(0, 0, 0, 0);
}
.syr_btn {
    padding-top: 100px;
    background-position: center;
    background-size: cover;
    background: #fff;
    color: #1d1d1d;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 25px;
    padding: 12px 16px;
    text-decoration: none;
    border: none;
}
/* ------------------ Section A ------------------------- */
.section_a{
    width: 100%;
    min-height: 340px;
    background-position: center;
    background-size: cover;
    padding: 10px 10%;
    position: relative;   
    background-color: #242424;
}
.section_a h2{
    margin-top: 1%;
    text-align: center;
    font-size: 1.2rem;
    color: #3ada00;
    
}
.section_a h3{
    
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
    
}
.future_grid {
    margin-top: 3%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    gap: 20px;
    margin-bottom: 3%;

    
}
.future_cube{
    height: 240px;
    width: auto;
    color: #ffffff;
    /*  */
    background: linear-gradient(#171717, #171717) padding-box,
              linear-gradient(-20deg, rgb(64, 255, 0), rgb(62, 54, 79)) border-box;
    border-radius: 1em;
    border: 4px solid transparent;
    
    
}
.future_cube h4{
    margin-top: 4%;
    text-align: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: #ffffff;
    
}
.future_cube p{
    margin-top: 5%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-size: 1.2rem;
    color: #ffffff;
}
/*------------------- SECRION_B ----------------------*/
.section_b{
    width: 100%;
    min-height: 570px;
    background-image: url(assets/img/background_img_sectionc.jpg);
    background-position: center;
    background-size: cover;
    padding: 10px 10%;
    position: relative;
}
.section_b h2{
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 3rem;
    text-shadow: 1px 1px 1px red;
}
.step-row {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 100px;
  margin: 40px;
  background: #272727;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 40px rgba(64, 64, 64, 0.35);
}

.step-left {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px;
  border-right: 1px solid #334155;
}

.step-number {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
}
.step-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}
.step-right {
  padding: 40px;
  font-size: 16px;
  line-height: 1.6;
  color: #cbd5f5;
  display: flex;
  align-items: center;
}
/*-------------------------- SERVICES section -------------------------*/
.section_c{
    width: 100%;
    min-height: 170px;
    background-color: #171717;
    background-position: center;
    background-size: cover;
    padding: 10px 10%;
    position: relative;
}
.section_c h3{
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 3rem;
    text-shadow: 1px 1px 5px rgb(0, 0, 0);
}
.div_for_middle{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    margin: 40px;
    background: #272727;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 40px rgba(64, 64, 64, 0.35);
}
.footer_text{
    background-color: #171717;
    color: #d1d1d1;
}
/* ================= MOBILE ================= */
@media (max-width: 768px) {

  /* GENERAL */
  .hero,
  .section_a,
  .section_b,
  .section_c {
    padding: 20px 6%;
  }

  /* NAV */
  nav {
    display: none;
  }

  .btnnav {
    font-size: 1rem;
    padding: 10px 14px;
  }

  /* HERO */
  .hero {
    min-height: auto;
    padding-bottom: 60px;
  }

  .hero_landing h1 {
    font-size: 2.5rem;
  }

  .hero_landing h2 {
    font-size: 1.3rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5%;
  }

  .syr_btn {
    font-size: 1rem;
    padding: 12px 18px;
  }

  /* SECTION A */
  .section_a h3 {
    font-size: 1.6rem;
  }

  .future_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .future_cube {
    height: auto;
    padding: 20px;
  }

  .future_cube p {
    font-size: 1rem;
  }

  /* SECTION B (Steps) */
  .section_b h2 {
    font-size: 2rem;
  }

  .step-row {
    grid-template-columns: 1fr;
    margin: 20px 0;
  }

  .step-left {
    border-right: none;
    border-bottom: 1px solid #334155;
    padding: 20px;
  }

  .step-right {
    padding: 20px;
    font-size: 15px;
  }

  .step-number {
    font-size: 32px;
  }

  /* SERVICES */
  .section_c h3 {
    font-size: 2rem;
  }

  .div_for_middle {
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
  }
}