@import url("/css/all.css?v=1");
#navbar{
      display: block;
}
.index_navbar2{
      padding: 10px;
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      border-radius: 10px;
}
@media screen and (min-width : 600px) {
      .index_navbar2{
            padding: 15px 5%;
      }
}

.height{
      margin-top: 80px !important;
}
.toggle_600{
      display: none;
}
@media screen and (min-width : 900px) {
      .responsive{
            width: 90%;
            margin: auto;
      }
}

.index1{
      padding: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      max-height: 60vh;
      border-radius: 10px;
}
.index1_img{
      width: 100%;
      filter: brightness(50%);
      border-radius: 10px;
}
.index1_text{
      position: absolute;
      padding: 10px;
      margin: 10px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 10px;
}
@media screen and (min-width : 600px) {
      .toggle_600{
            display: block;
      }
      .index1{
            padding: 0;
            justify-content: flex-start;
      }
      .index1_text{
            width: 75%;
            display: flex;
            text-align: left !important;
            justify-content: flex-start !important;
            align-items: flex-start !important;
            gap: 20px;
      }
}

.index2{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 30px;
}
.index2_text{
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      gap: 10px;
}
.index2_carousel {
      width: 100%;
      overflow: hidden;
}
.index2_carousel img {
      width: 100%;
      height: auto;
      border-radius: 10px;
}

.index3{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.index3_div{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index3_item{
      display: flex;
      flex-flow: column;
      gap: 10px;
      padding: 10px;
      box-shadow: 0 4px 16px 0 var(--grey);
      border-radius: 10px;
}
.index3_icon{
      font-size: 25px;
      width: 50px; height: 50px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--green);
      background: var(--lightest_success);
}

@media screen  and (min-width : 600px) {
      .index3_div{
            flex-flow: row;
            flex-wrap: wrap;
      }
      .index3_item{
            width: calc(50% - 10px);
      }
      .one1{
            width: 100% !important;
      }
}
@media screen and (min-width : 900px) {
      .index3_item, .one1{
            width: calc(33.33% - 10px) !important;
      }
}

.index4{
      padding: 10px;
}
.index4_div{
      display: flex;
      flex-flow: column;
      gap: 70px;
}
.index4_text{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.cover_swiper .swiper-slide{
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      flex-flow: column;
      gap: 10px;
      width: 85%;
      height: 400px;
      position: relative;
      border-radius: 10px;
}
.cover_swiper .swiper-slide img{
      width: 100%;
      border-radius: 10px;
      filter: brightness(30%);
}
.slide_text{
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-flow: column;
      gap: 10px;
      color: white;
      padding: 10px;
}

@media screen and (min-width : 800px) {
      .index4_div{
            flex-flow: row;
            gap: 20px;
      }
      .index4_text{
            width: calc(100% - 420px);
            justify-content: center;
            /* border: 1px solid blue; */
      }
      .index4_image{
            width: 400px;
      }
      .cover_swiper .swiper-slide{
            width: 75%;
      }
}
@media screen and (min-width : 800px) {
      .index4_div{
            flex-flow: row;
            gap: 40px;
      }
      .index4_text{
            width: calc(100% - 540px);
            /* border: 1px solid blue; */
      }
      .index4_image{
            width: 500px;
      }
      .cover_swiper .swiper-slide{
            width: 70%;
      }
}

.testimonials{
      padding: 50px 10px;
}
.testimonial_slide{
      padding: 10px;
}
.test_spl{
      border: 4px solid var(--green);
      background: var(--bg_sec);
      height: 100%;
      border-radius: 10px;
      padding: 20px 5px;
}
.test_image{
      border-top: 4px solid var(--green);
      border-right: 4px solid var(--green);
      border-left: 4px solid var(--bg);
      border-bottom: 4px solid var(--bg);
}

.index5{
      height: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      height: 50vh;
      position: relative;
      width: 100%;
}
.index5 img{
      filter: brightness(40%);
      width: 100%;
}
.index5_text{
      position: absolute;
      inset: 0; z-index: 1;
      color: white;
      padding: 10px;
      width: 100%;
}


























/* @import url("/css/all.css");
.index1{

      padding: 10px 10px 100px 10px;
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.index1_header{
      display: flex;
      flex-flow: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      text-align: center;
}
.index1_yt{
      border-radius: 10px;
}
.index1_yt img{
      width: 100%;
      border-radius: 10px;
      border: 6px solid var(--bg_sec);
}
.index1_yt_overlay{
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      border-radius: 10px;
}
.index1_ty_play{
      border: 6px solid var(--bg);
      cursor: pointer;
      height: 70px;
      width: 70px;
      border-radius: 50%;
      background: var(--bg_sec);
      color: var(--bg);
      font-size: 40px;
      transition: 1s;
}
.index1_ty_play:hover{
      transform: scale(1.2);
      transition: 1s;
}
.index1_sub_div{
      padding: 25px 10px;
      background: var(--bg);
      position: relative;
      bottom: 40px;
}
.in1_flex{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.index2{
      display: flex;
      flex-flow: column;
      gap: 50px;
      background: var(--bg_sec);
      padding: 70px 10px;
}
.index2_header{
      display: flex;
      flex-flow: column;
      gap: 10px;
      text-align: center;
      justify-content: center;
      align-items: center;
}
.index2_splide_list{
      height: 300px !important;
}
.index2_splide_slide{
      height: 100% !important;
      border-radius: 10px;
}
.index2_splide_slide img{
      border-radius: 10px !important;
}
.index3{
      padding: 10px;
}
.index3_flex{
      display: flex;
      flex-flow: column;
      gap: 40px;
}
.index3_header{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index3_image{
      display: flex;
      justify-content: right;
}
.index3_image img{
      width: 100%;
      box-shadow: 6px 6px var(--bg);
      padding: 5px;
      border: 1px solid var(--bg);
}
.index3_team{
      display: flex;
      flex-flow: column;
      gap: 60px;
      padding: 10px;
}
.c_us_overlay{
      position: relative;
      height: 40vh;
      overflow: hidden;
}
.c_us_img{
      width: 100%;
}
.c_us_text{
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      gap: 10px;
      text-align: center;
      padding: 10px;
      background: linear-gradient(to right, var(--opaque), var(--bg));
}
.counters{
      display: flex;
      flex-flow: column;
      align-items: center;
      gap: 40px;
      padding: 10px;
}
.counter_div{
      display: flex;
      gap: 40px;
}
.cdiv_text{
      display: flex;
      flex-flow: column;
      gap: 10px;
      justify-content: center;
      align-items: center;
}
.counter_div h1{
      width: 70px;
      height: 70px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--bg_sec);
      color: var(--bg);
      border-radius: 50%;
}
.team_div{
      box-shadow: 0 2px 6px 0 var(--grey);
      padding: 10px;
      width: 100%;
      display: flex;
      flex-flow: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
}
.team_image{
      width: 100px;
      border-radius: 50%;
      position: absolute;
      border: 4px solid var(--bg);
      top: -50px;
}
.team_header{
      display: flex;
      flex-flow: column;
      gap: 10px;
      justify-content: center;
      width: calc(100% - 120px);
      margin-top: 50px;
}
.index5{
      padding: 10px;
}
.index5_flex{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.index5_flex_item{
      display: flex;
      flex-flow: column;
      gap: 40px;
}
.index5_flex_text{
      text-align: center;
      font-size: 120%;
}
.index5_flex_image img{
      width: 100%;
      border-bottom: 6px solid var(--bg);
}
.vision{
      display: flex;
      flex-flow: column;
      border: 1px solid white;
}
.vis_icon{
      font-size: 100px;
      margin: 0 !important;
      padding: 0 !important;
}
.our_services{
      display: flex;
      flex-flow: column;
      gap: 60px;
}
.our_s_h{
      text-align: center;
}
.services{
      display: flex;
      flex-flow: row;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      align-items: stretch;
}
.services_card{
      width: 48%;
      border: none;
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.testimonials{
      padding: 70px 10px;
      background: var(--bg_sec);
}
.testimonial_slide{
      padding: 10px;
}
.test_spl{
      border: 4px solid white;
      background: white;
      padding: 20px 5px;
}
.test_image{
      border: 4px solid var(--bg);
}
.ind_proj{
      padding: 50px 10px;
      background: var(--bg);
}
.ind_proj_flex{
      margin-top: 50px;
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.ind_proj_div{
      display: flex;
      flex-flow: column;
      gap: 10px;
      color: white;
}
.ind_proj_img{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 250px;
      overflow: hidden;
}
.principles{
      position: relative;
      overflow: hidden;
}
.core_image{
      width: 100%;
}
.core_overlay{
      position: absolute;
      inset: 0;
      background: var(--opaque);
      display: flex;
      justify-content: center;
      padding: 10px;
      flex-flow: column;
      gap: 20px;
      text-align: center;
}
.core_icon{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--bg);
      color: var(--bg_sec);
      padding: 10px;
      font-size: 40px;
}
.core_text{
      color: white;
      text-align: left;
}
.core_div{
      display: flex;
      gap: 10px;
}
.index9_imgs{
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 10px;
}
.partner_img{
      width: 48%;
      border: 4px solid var(--bg_sec);
      padding: 10px;
}
.video_popup_body{
      position: fixed;
      inset: 0;
      z-index: 1000000;
      display: flex;
      justify-content: center;
      align-items: center;
}
.iframe_div{
      width: 100%;
}

.ind_st_flex{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.ins_st_text{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.ind_st_img{
      display: none;
}

@media screen and (min-width : 600px) {
      .index1{
            width: 550px;
            margin: auto;
      }
      .index3_image img{
            width: 500px;
      }
      .index5_flex{
            flex-flow: row;
            justify-content: center;
            align-items: stretch;
            flex-wrap: wrap;
      }
      .index5_flex_item{
            flex-flow: row;
      }
      .index5_flex_image{
            width: 40%;
            display: none;
      }
      .vision{
            width: 48%;
            padding: 10px;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            background: var(--bg_sec);
            color: var(--bg);
      }
      .vision:hover{
            border: 1px solid var(--bg);
      }
      .vision .header{
            font-weight: 600;
      }
      .core_overlay{
            gap: 30px;
      }
      .principles{
            height: 70vh;
      }
      .iframe_div{
            width: 550px;
      }
      .partner_img{
            width: 250px;
      }
}
@media screen and (min-width : 750px) {
      .index1_sub_div{
            bottom: 50px;
      }
      .index3_team{
            flex-flow: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            column-gap: 20px;
            row-gap: 60px;
      }
      .team_div{
            width: 48%;
            flex-flow: column;
            justify-content: center;
            align-items: center;
      }
      .team_header{
            width: 100%;
            text-align: center;
      }
      .services_card{
            width: 250px;
            margin-bottom: 20px;
      }
      .core_overlay{
            flex-flow: row;
            justify-content: center;
            align-items: stretch;
            flex-wrap: wrap;
            gap: 10px;
      }
      .core_div{
            width: 48%;
            flex-flow: column;
            gap: 20px;
            justify-content: center;
            align-items: center;
      }
      .core_text{
            text-align: center;
      }
      .ind_proj_flex{
            flex-flow: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
      }
      .ind_proj_div{
            width: 48%;
      }
      .ind_st_flex{
            flex-flow: row;
            justify-content: center;
      }
      .ins_st_text{
            width: 60%;
            display: flex;
            justify-content: center;
      }
      .ind_st_img{
            display: block;
            width: 36%;
      }

}
@media screen and (min-width : 950px) {
      .index1_sub{
            width: 90%;
            margin: auto;
      }
      .in1_flex{
            flex-flow: row;
            justify-content: center;
            align-items: center;
            padding: 10px 20px;
      }
      .in1_flex_1{
            width: 48%;
      }
      .in1_flex_2{
            width: 48%;

      }
      .responsive{
            width: 90%;
            margin: auto;
      }
      .index1{
            width: 100%;
            margin: auto;
            flex-flow: row;
            background: var(--bg_sec);
            padding: 20px 10px 100px 10px;
      }
      .index1_header{
            align-items: flex-start;
            width: 60%;
            text-align: left;
      }
      .index1_image{
            width: 40%;
      }
      .index1_yt img{
            border: none;
            box-shadow: 6px 6px var(--bg);
      }
      .index1_learn_more{
            border: 1px solid var(--bg);
            background: var(--bg);
            color: white;
      }
      .index3_flex{
            flex-flow: row;
            gap: 10px;
      }
      .index3_header{
            width: 60%;
            justify-content: center;
      }
      .index3_image{
            width: 40%;
      }
      .index3_image img{
            width: 100%;
      }
      .team_div{
            width: 32%;
      }
      .core_div{
            width: 32%;
      }
      .counters{
            flex-flow: row;
            justify-content: center;
            flex-wrap: wrap;
      }
      .counter_div{
            width: 250px;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            text-align: center;
      }
      .cdiv_text{
            text-align: center;
            justify-content: center;
            align-items: center;
      }
      .ind_proj_div{
            width: 32%;
      }
      .index5_flex_item{
            align-items: center;
            gap: 10px;
            padding: 10px;
            background-color: var(--bg);
            color: white;
      }
      .index5_flex_text{
            width: 60%;
            text-align: left;
      }
      .index5_flex_image{
            display: block;
            width: calc(40% - 20px);
      }
      .index5_flex_image img{
            border: 4px solid white;
      }
}
@media screen and (min-width : 1000px) {
      .index1{
            justify-content: space-around;
      }
      .index1_header{
            width: 45%;
      }
      .index1_image{
            width: 450px;
      }
      .in1_flex{
            justify-content: space-between;
      }
      .in1_flex_1{
            width: 40%;
      }
      .index2{
            flex-flow: row-reverse;
            padding: 10px;
            background: none;
      }
      .index2_header{
            justify-content: center;
            align-items: flex-start;
            width: 400px;
            text-align: left;
      }
      .index2_image{
            width: calc(100% - 400px);
      }
      .team_div{
            width: 24%;
      }
      .vision{
            width: 32%;
      }
      .core_div{
            width: 24%;
      }
      .principles{
            height: 50vh;
      }
      .our_services{
            flex-flow: row;
            gap: 20px;
      }
      .our_s_h{
            width: 40%;
            text-align: left;
            border: 6px solid var(--bg_sec);
            pad: 10px;
            display: flex;
            padding: 10px;
            justify-content: center;
      }
      .services{
            width: 56%;
            flex-flow: row;
            overflow: scroll;
            justify-content: flex-start;
      }
      .serv_line{
            width: 200px;
      }
      .test_spl{
            height: 100%;
            padding: 20px 5px;
            background: white;
      }
}
@media screen and (min-width : 1200px) {
      .index3_header{
            width: 65%;
            justify-content: center;
      }
      .index3_image{
            width: 35%;
      }
      .index3_image img{
            width: 100%;
      }
      .vision{
            width: 24%;
      }
      .index9_imgs{
            justify-content: center;
            gap: 10px;
      }
} */