/* @import url(/css/all.css); */
.height{
      margin-top: 100px !important;
}
@media screen and (min-width : 600px) {
      .responsive{
            width: 90% !important;
            margin: auto;
      }
}

.index1{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.index1_header{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index1_img_border{
      display: flex;
      gap: 10px;
}
.index1_img{
      width: 50%;
      overflow: hidden;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
}
.index1_img img{
      height: 100%;
      width: 100%;
}
/* .index1_img_2 img{
      height: 75%;
} */
@media screen and (min-width : 800px) {
      .index1{
            flex-flow: row;
            padding: 30px 3rem;
            justify-content: center;
            align-items: center;
      }
      .index1_header, .index1_image{
            width: 50%;
      }
}

.index2{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.index2_div{
      border: 1px solid var(--light_grey);
      border-bottom: 6px solid var(--primary_light) !important;
      padding: 10px;
}
.index2_icon{
      border-radius: 50%;
      padding: 10px;
      width: 50px;
      height: 50px;
      font-size: 20px;
      color: var(--primary_color);
}
.index2_text{
      width: calc(100% - 60px);
}
@media screen and (min-width : 800px) {
      .index2{
            flex-flow: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: 10px;
      }
      .index2_div{
            width: 48%;
      }
}
@media screen and (min-width : 1000px) {
      .index2{
            flex-flow: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
      }
      .index2_div{
            width: 24%;
      }
}

/* index 3 */
.index3{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 30px;
}
.index3_text{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index3_image{
      display: flex;
      justify-content: end;
}
.index3_image img{
      width: 70%;
      box-shadow: 6px 6px var(--primary_color), -6px -6px var(--primary_light);
      padding: 10px;
}

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

.index4{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.index4_image{
      flex-flow: column;
      gap: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
}
.index4_image img{
      width: 70%;
}

@media screen and (min-width : 800px) {
      .index4{
            flex-flow: row-reverse;
            justify-content: center;
            align-items: center;
      }
      .index4_header{
            width: 60%;
      }
      .index4_image{
            width: 40%;
      }
      .index4_image img{
            width: 100%;
      }
}

.index5{
      position: relative;
      max-height: 50vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
}
.index5_img{
      width: 100%;
}
.index5_text{
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      gap: 10px;
      text-align: center;
      padding: 10px;
      background: var(--opaque);
}

@media screen and (min-width : 600px) {
      .index5_text{
            padding: 10px 5rem;
      }
}