@import url(/css/all.css);
.height{
      margin-top: 120px !important;
}

/* index 1 */
.index1{
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(12, 1fr);
}
.index1_carousel{
      grid-area: 1 / 1 / 13 / 13;
      border-radius: 10px;
      height: 100%;
}
.index1_text{
      color: white;
      background: var(--opaque);
      grid-area: 1 / 1 / 13 / 13;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-flow: column;
      border-radius: 10px;
      padding: 10px;
}
.index1_image{
      border-radius: 10px 0 0 10px;
      display: none;
}
.index1_image img{
      width: 100%;
      border-radius: 10px 0 0 10px;
}

@media screen and (min-width : 600px) {
      .index1{
            padding: 0;
            width: 90%;
            margin: auto;
      }
}
@media screen and (min-width : 900px) {
      .index1{
            width: 100%;
            margin: 0;
      }
      .index1_carousel {
            grid-area: 3 / 1 / 11 / 9;
            border-radius: 0 10px 10px 0;
      }
      .index1_text {
            grid-area: 4 / 7 / 10 / 13;
            border-radius: 10px 0 0 10px;
      }
}
@media screen and (min-width : 1000px) {
      .index1{
            width: 90%;
            margin: auto;
      }
}
@media screen and (min-width : 1300px) {
      .index1{
            width: 100%;
            margin: 0;
      }
      .index1_carousel {
            grid-area: 3 / 1 / 11 / 7;
            height: fit-content;
      }
      .index1_image {
            grid-area: 1 / 8 / 13 / 13;
            display: block;
            height: fit-content;
      }
      .index1_text {
            grid-area: 4 / 5 / 10 / 9;
            height: fit-content;
      }
}

/* index2 */
.index2{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.index2_text{
      display: flex;
      flex-flow: column;
      gap: 40px;
}
.index2_text_2{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.index2_img{
      text-align: right;
      border-radius: 50%;
}
.index2_img img{
      width: 70%;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 4px 4px var(--primary), -4px -4px var(--primary);
}

@media screen and (min-width : 600px) {
      .index2_img img{
            width: 400px;
      }
}
@media screen and (min-width : 700px) {
      .index2_text_2{
            display: flex;
            flex-flow: row;
            gap: 10px;
      }
}
@media screen and (min-width : 950px) {
      .index2{
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            gap: 20px;
      }
}

/* index 3 */
.index3{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 40px;
}
.index3_image{
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: repeat(16, 1fr);
      padding: 10px;
      animation: rotate 10s infinite;
      width: 70%;
      margin: auto;
}
@keyframes rotate {
      0% {
            transform: rotate(0deg);
      }
      50% {
            transform: rotate(180deg);
      }
      100% {
            transform: rotate(360deg);
      }
}
.index3_border{
      grid-area: 1 / 1 / 17 / 17;
      display: flex;
      justify-content: center;
      align-items: center;
}
.index3_border div{
      width: 70%;
      height: 70%;
      border-radius: 50%;
      background: linear-gradient(to right, var(--primary), var(--secondary));
      border: 6px solid var(--primary) !important;
}
.index3_img1{
      grid-area: 1 / 1 / 7 / 7;
}
.index3_img2{
      grid-area: 1 / 11 / 7 / 17;
}
.index3_img3{
      grid-area: 11 / 6 / 17 / 12;
}

@media screen and (min-width : 600px) {
      .index3_image{
            width: 400px;
            margin: auto;
      }
}
@media screen and (min-width : 950px) {
      .index3{
            display: flex;
            flex-flow: row-reverse;
      }
      .index3_text{
            width: 60%;
            display: flex;
            flex-flow: column;
            justify-content: center;
      }
      .index3_image{
            width: 40%;
            margin: 0;
      }
}

/* index 4 */
.index4{
      position: relative;
      height: fit-content;
      overflow: hidden;
}
.index4_img{
      width: 100%;
}
.index4_img img{
      width: 100%;
}
.index4_text{
      z-index: 10;
      padding: 10px;
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      flex-flow: column;
      align-items: center;
      gap: 10px;
      background: var(--opaque);
      text-align: center;
}
.index4_btn{
      width: 60px; height: 60px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      color: white;
}
@media screen and (min-width : 600px) {
      .index4{
            height: 50vh;
      }
}

/* index 5 */
.index5{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.index5_gallery{
      display: flex;
      flex-flow: row;
      gap: 10px;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      white-space: nowrap;
      width: 100%;
}
.index5_img{
      width: 200px !important;
      scroll-snap-align: start;
      display: flex;
      flex-flow: column;
      margin-bottom: 15px;
}
.index5_img img{
      border-radius: 10px;
}
.index5_line{
      width: 200px !important;
}
.index5_more{
      border-radius: 10px;
      border: 1px solid var(--light_grey);
      height: 100%;
}

/* index 6 */
.index6{
      /* border: 1px solid red; */
      padding: 70px 10px;
      border-radius: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
      background: var(--primary);
}
.index6_text{
      margin-bottom: 40px;
      color: white;
      width: 100%;
}
.index6_image{
      display: none;
      border: 6px solid var(--white);
      border-radius: 10px;
}
.index6_grid{
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: repeat(16, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
}
.index6_g1 { grid-area: 3 / 8 / 14 / 17; }
.index6_g2 { grid-area: 1 / 1 / 8 / 7; }
.index6_g3 { grid-area: 10 / 1 / 17 / 7; }
.index6_form{
      background: white;
      padding: 10px;
      border-radius: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
}

@media screen and (min-width : 600px) {
      .index6{
            padding: 70px 4rem;
      }
}
@media screen and (min-width : 800px) {
      .index6{
            padding: 70px 2rem;
            display: flex;
            column-gap: 20px;
            flex-flow: row;
            flex-wrap: wrap;
            align-items: center;
      }
      .index6_image{
            display: block;
            width: 48%;
      }
      .index6_form{
            width: 48%;
      }
}
@media screen and (min-width : 1000px) {
      .index6{
            column-gap: 30px;
            padding: 70px 6rem;
      }
}
@media screen and (min-width : 1300px) {
      .index6{
            padding: 70px 8rem;
      }
}

/* index 7 */
.index7{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.index7_image{
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: repeat(16, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
}
.index7_img1{
      grid-area: 1 / 1 / 17 / 11;
      border-radius: 10px;
      background: var(--primary);
}
.index7_img2{
      grid-area: 3 / 7 / 15 / 17;
      border-radius: 50%;
}
.index7_img2 img{
      border-radius: 50%;
}

@media screen and (min-width : 600px) {
      .index7{
            padding: 10px 10%;
      }
}
@media screen and (min-width : 800px) {
      .index7{
            padding: 10px 20%;
      }
}
@media screen and (min-width : 950px) {
      .index7{
            padding: 10px;
            flex-flow: row;
            gap: 20px;
            justify-content: center;
            align-items: center;
      }
      .index7_image{
            width: 40%;
      }
      .index7_text{
            width: 58%;
      }
}











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