@import url("/css/all.css");
/* products */
.store_div{
      padding: 10px;
      border-radius: 10px;
      width: calc(50% - 5px);
      transition: 1s;
      display: flex;
      flex-flow: column;
      gap: 10px;
      align-items: stretch;
}
.s_d_img_div{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      transition: 1s;
      aspect-ratio: 1/1;
}
.s_d_img_div_img{
      width: 100%;
      cursor: pointer;
      transition: 1s;
      height: 100%;
      object-fit: cover !important;
}
.s_d_img_div_img:hover{
      transform: scale(1.1);
      transition: 1s;
}
.info_button{
      position: absolute;
      top: 10px; right: 10px;
}

@media screen and (min-width : 750px) {
      .store_div{
            width: calc(33% - 6.66px);
      }
}
@media screen and (min-width : 900px) {
      .store_div{
            width: calc(25% - 7.5px);
      }
}

/* login & register */
.register_form{
      position: relative;
      overflow: hidden;
}
.register_div{
      background: var(--opaque);
      padding: 20px 10px;
      border-radius: 10px;
      height: fit-content;
}
.login_img{
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: -1;
}
.login_img img{
      width: 100%;
}

/* checkout */
.store1_img{
      border: 1px solid black;
}
.checkout_form{
      display: flex;
      flex-flow: column;
      gap: 10px;
}

@media screen and (min-width : 800px) {
      .checkout_form{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: row;
            flex-wrap: wrap;
            gap: 20px;
      }
      .ch_div{
            width: 48%;
      }
}

/* index */
.height{
      margin-top: 100px !important;
}
.index1{
      position: relative;
}
.index1_text{
      position: absolute;
      inset: 0;
      display: flex;
      flex-flow: column;
      gap : 5px;
      padding: 10px;
      justify-content: center;
      background: var(--opaque);
}
.index1_image{
      overflow: hidden;
      height: 100%;
}
.index1_image img{
      height: 100%;
      width: 100%;
}
.in_1_prim{
      text-shadow: 2px 2px var(--bg);
}
.in_1_sect{
      color: white;
}
.index2{
      padding: 10px;
}
.index2_flex{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.in_2_flex2{
      display: none;
}
.in_2_flex2_border{
      width: 60%;
      background: var(--bg_sec);
      height: 60%;
      border-radius: 50%;
}
.in_2_flex2_img{
      width: 180px;
      position: absolute;
      border-radius: 50%;
}
.in_2_flex2_img_1{
      margin: auto;
      top: 0;
}
.in_2_flex2_img_2{
      right: 0px;
      bottom: 0;
}
.in_2_flex2_img_3{
      left: 0px;
      bottom: 0;
}
.index3_icon{
      width: 100px;
}
.index3_div{
      display: flex;
      flex-flow: column;
      gap: 10px;
      color: var(--bg);
      font-size: 20px;
}
.index4{
      display: flex;
      flex-flow: row;
      align-items: center;
      margin-top: 30px;
      padding: 10px;
}
.index_store{
      display: flex;
      flex-flow: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
}
.in5_div{
      width: 48%;
}

@media screen and (min-width : 600px) {
      .responsive{
            width: 90%;
            margin: auto;
      }
      .index4{
            justify-content: center;
      }
      .in5_div{
            width: 250px;
      }
}
@media screen and (min-width : 850px) {
      .index1{
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(12, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            width: 90%;
            margin: auto;
      }
      .index1_image{
            grid-area: 1 / 6 / 13 / 13;
      }
      .index1_image img{
            border-radius: 10px;
      }
      .index1_text{
            grid-area: 1 / 1 / 13 / 8;
            background: none;
      }
      .in_1_prim{
            color: var(--bg);
            text-shadow: 2px 2px var(--bg_sec);
      }
      .in_1_sect{
            color: var(--bg);
            padding: 20px 20px 20px 0;
            background: rgba( 255, 255, 255, 0.25 );
            backdrop-filter: blur( 4px );
            -webkit-backdrop-filter: blur( 4px );
      }
      .index3{
            display: flex;
            flex-flow: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: stretch;
            text-align: center;
            gap: 10px;
      }
      .index3_div{
            width: calc(33% - 6.66px);
            padding: 10px;
            border-radius: 10px;
      }
      .index3_icon{
            margin: auto;
      }
}
@media screen and (min-width : 1000px) {
      .index2_flex{
            flex-flow: row;
            align-items: stretch;
            position: relative;
      }
      .in_2_flex1{
            width: 50%;
      }
      .in_2_flex2{
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 60vh;
      }
}
@media screen and (min-width : 1200px) {
      .in_2_flex1{
            width: 60%;
      }
      .in_2_flex2{
            width: 40%;
      }
}