@import url("/css/all.css?v=1");
.responsive{
      width: 100%;
}
.height{
      margin-top: 100px !important;
}
.navbar{
      margin-bottom: 0px !important;
}

/* index1 */
.index1{
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(12, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
}
.index1_text{
      grid-area: 1 / 1 / 13 / 13;
      padding: 10px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 10px;
      z-index: 1;
      background: var(--more_opaque);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
}
.index1_image{
      grid-area: 1 / 1 / 13 / 13;
}
.index1_flex{
      display: flex;
      flex-flow: column;
      gap: 10px;
      justify-content: center;
      align-items: center;
}

@media screen and (min-width : 800px) {
      .index1{
            padding: 10px;
      }
      .index1_image{
            grid-area: 1 / 5 / 13 / 13;
      }
      .index1_text{
            grid-area: 3 / 1 / 11 / 7;
            text-align: left;
            align-items: flex-start;
            padding: 10px 20px;
            background: var(--more_opaque);
            box-shadow: 0 8px 32px 0 var(--opaque);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
      }
      .index1_flex{
            flex-flow: row;
      }
}

/* index2 */
.index2{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.index2_text{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index2_image img{
      width: 100%;
}

@media screen and (min-width : 600px) {
      .index2_image{
            display: flex;
            justify-content: right;
            padding: 10px 20px;
      }
      .index2_image img{
            width: 400px;
            box-shadow: 7px 7px var(--bg);
      }
}
@media screen and (min-width : 900px) {
      .index2{
            flex-flow: row;
            gap: 0px;
      }
      .index2_image{
            padding: 0;
      }
      .index2_image img{
            box-shadow: none;
      }
      .index2_text{
            justify-content: center;
            padding: 10px 20px;
            background: var(--lighter_bg);
      }
}

/* index3 */
.index3{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.index3_text{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.step2{
      padding: 40px 10px !important;
}
.index3_div{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index3_item{
      background: var(--lighter_bg);
      color: var(--bg);
      padding: 10px;
}

@media screen and (min-width : 800px) {
      .index3{
            flex-flow: row;
      }
      .index3_text{
            justify-content: center;
            width: 40%;
      }
      .index3_div{
            width: 60%;
      }
}

/* index4 */
.index4{
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.index4_text{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index4_item{
      display: flex;
      gap: 10px;
}
.index4_box{
      width: 30px;
      height: 30px;
      padding: 0px 5px;
      background: var(--lighter_bg);
}
.index4_box i{
      font-size: 30px !important;
}
.index4_image{
      display: flex;
      flex-flow: column;
}

@media screen and (min-width : 800px) {
      .index4{
            flex-flow: row;
      }
      .index4_text{
            width: 45%;
      }
      .index4_image{
            width: 45%;
      }
}

/* index5 */
.index5{
      /* border: 1px solid red; */
      display: flex;
      padding: 10px;
}
.index5_form{
      border: 1px solid var(--bg);
      box-shadow: 4px 4px var(--bg);
      width: 100%;
}
.index5_image{
      display: none;
}

@media screen and (min-width : 800px) {
      .index5{
            flex-flow: row;
            gap: 0px;
      }
      .index5_form{
            width: 60%;
            box-shadow: none;
            padding: 20px 30px;
            border: none;
      }
      .index5_image{
            display: block;
            width: 40%;
      }
}

/* index 6 */
.index6{
      padding: 50px 10px;
      background: var(--lighter_bg);
      color: var(--bg);
      display: flex;
      flex-flow: column;
      gap: 10px;
}
@media screen and (min-width : 1000px) {
      .index6{
            flex-flow: row;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
      }
      .index6_header{
            width: 55%;
      }
      .index6_form{
            width: 42%;
      }
}

@media screen and (min-width : 800px) {
      .responsive{
            width: 90%;
            margin: auto;
      }
}