@import url("/css/all.css?v=1i");
/* team DONE */
.team_div{
      display: flex;
      flex-flow: column;
      gap: 30px;
}
.team_overlay_div{
      border-radius: 10px;
      position: relative;
}
.team_overlay_div img{
      width: 100%;
      border-radius: 30px;
}
.team_member_name{
      position: absolute;
      left: 10px; right: 10px; bottom: 5px;
      padding: 10px;
      background: white;
      border-radius: 30px;
      text-align: center;
      color: var(--bg);
      font-weight: 600;
}

@media screen and (min-width : 600px) {
      .team_overlay_div{
            width: 500px;
      }
}
@media screen and (min-width : 900px) {
      .team_div{
            flex-flow: row;
            gap: 20px;
      }
      .reverse{
            flex-flow: row-reverse !important;
      }
      .team_overlay_div{
            height: fit-content;
            width: 400px;
      }
      .team_text{
            width: calc(100% - 420px);
      }
}

/* contact DONE  */
.contact{
      position: relative;
      border: 1px solid var(--white);
      border-radius: 10px;
      box-shadow: 0 2px 8px 0 var(--grey);
}
.contact_header{
      position: absolute;
      margin: auto;
      width: 100%;
      text-align: center;
      top: -30px;
      display: flex;
      justify-content: center;
      align-items: center;
}
.contact_sec_text{
      margin-top: 50px !important;
}
.contact_div{
      display: flex;
      flex-flow: column;
      gap: 100px;
}
.other_c{
      background: var(--success);
}

@media screen and (min-width : 1100px) {
      .contact_div{
            flex-flow: row;
            gap: 10px;
      }
      .contact_form{
            width: calc(100% - 410px);
      }
      .other_contacts{
            width: 400px;
      }
}

/* BLOG DONE */
.article_imge{
      width: 100% !important;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
}
@media screen and (min-width : 600px) {
      .article_imge{
            border-radius: 10px;
      }
}



/* .contact{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.contact_form{
      padding: 40px 10px;
}
.other_contacts{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.other_c{
      padding: 20px 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
      background: var(--bg_sec);
}

@media screen and (min-width : 600px) {
      .contact_us{
            width: 550px;
            margin: auto;
      }
}
@media screen and (min-width : 900px) {
      .contact{
            flex-flow: row;
            align-items: flex-start;
      }
      .contact_us{
            width: 90%;
            margin: auto;
      }
      .contact_form{
            width: calc(100% - 380px);
      }
      .other_contacts{
            width: 400px;
      }
} */

/* about.php DONE */
.about_header{
      display: flex;
      flex-flow: column;
      gap: 30px;
}
.about_header .overlay_div{
      display: none;
}
.about_text{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.about_mission{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.mission_div{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.vis_icon{
      font-size: 100px;
      color: var(--green);
}
.counters{
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.cdiv_text{
      display: flex;
      flex-flow: column;
      gap: 10px;
      justify-content: center;
      align-items: center;
}
.counter_div h1{
      width: 100px;
      height: 100px;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--bg_sec);
      color: var(--bg);
      border-radius: 50%;
}
.abt_teams{
      display: flex;
      flex-flow: column;
      gap: 60px;
      padding: 10px;
      margin-top: 100px;
}
.abt_team_div{
      box-shadow: 0 2px 6px 0 var(--grey);
      padding: 10px;
      width: 100%;
      display: flex;
      flex-flow: column;
      gap: 20px;
      position: relative;
}
.abt_team_image{
      width: 100px;
      border-radius: 50%;
      position: absolute;
      border: 4px solid var(--bg);
      top: -50px;
}
.abt_team_header{
      display: flex;
      flex-flow: column;
      gap: 10px;
      justify-content: center;
      width: calc(100% - 120px);
      margin-top: 50px;
}
.abt_part_div{
      display: flex;
      flex-flow: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 10px;
}
.abt_partner{
      width: calc(50% - 5px);
      border: 4px solid var(--bg_sec);
      padding: 10px;
      border-radius: 10px;
}

@media screen and (min-width : 600px) {
      .counters{
            display: flex;
            flex-flow: row;
            justify-content: space-around;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
      }
      .counter_div{
            width: calc(33% - 10px);
            flex-flow: column;
            justify-content: center;
            align-items: center;
            text-align: center;
      }
      .cdiv_text{
            text-align: center;
            justify-content: center;
            align-items: center;
      }
      .about_mission{
            flex-flow: row;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            align-items: stretch;
      }
      .mission_div{
            width: calc(50% - 5px);
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: var(--bg_sec);
            cursor: pointer;
      }
      .mission_div .secondary_text{
            color: var(--bg);
      }
      .abt_teams{
            display: flex;
            flex-flow: row;
            flex-wrap: wrap;
            gap: 10px;
            row-gap: 60px;
            justify-content: center;
            align-items: stretch;
      }
      .abt_team_div{
            width: calc(50% - 5px);
            text-align: center;
            justify-content: center;
            align-items: center;
      }
      .abt_partner{
            width: calc(33% - 6.66px);
      }
}
@media screen and (min-width : 1000px) {
      .about_header{
            flex-flow: row-reverse;
            justify-content: center;
            align-items: center;

      }
      .about_header .overlay_div{
            display: flex;
            width: 500px;
      }
      .about_header .overlay_div img{
            border-radius: 10px;
      }
      .about_text{
            width: calc(100% - 530px);
      }
      .mission_div{
            width: calc(33.33% - 6.66px);
      }
      .abt_team_div{
            width: calc(33% - 6.66px);
      }
      .abt_partner{
            width: calc(25% - 7.5px);
      }
}
@media screen and (min-width : 1200px) {
      .mission_div{
            width: calc(25% - 7.5px);
      }
      .abt_partners{
            flex-flow: row;
            justify-content: center;
            align-items: center;
            gap: 20px;
      }
      .abt_partners .header{
            width: 30%;
      }
      .abt_partners .abt_part_div{
            width: calc(70% - 20px);
      }
}

/* careers */
.careers_div{
      border: 3px solid var(--light_grey);
      display: flex;
      flex-flow: column;
      gap: 10px;
      border-radius: 10px 10px 0 0;
      background: var(--light_grey);
      padding-bottom: 30px;
}
.careers_img{
      height: 30vh;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
}
.careers_img img{
      width: 100%;
}
.car_div{
      display: flex;
      flex-flow: column;
      gap: 10px;
}
.car_form_div{
      display: flex;
      flex-flow: column;
      gap: 10px;
}

@media screen and (min-width : 600px) {
      .car_div{
            flex-flow: row;
            flex-wrap: wrap;
      }
      .car_form_div{
            width: calc(50% - 10px);
      }
}

/* news */
.search_form{
      position: fixed;
      top: 100px; right: 10px; left: 10px;
      z-index: 1000;
}
.blog_infinite_scroll{
      display: flex;
      flex-flow: column;
      gap: 10px
}
.blog_item{
      flex-flow: column;
      gap: 10px;
}
.blog_image{
      position: relative;
      overflow: hidden;
      height: 300px;
}
.blog_image img{
      width: 100%;
      transition: 1s;
}
.blog_image img:hover{
      transform: scale(1.1);
      transition: 1s;
}
.blog_share{
      border: 1px solid var(--bg_sec) !important;
      background: var(--bg_sec);
      color: var(--bg) !important;
      width: 50px; height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
}
.blog_div{
      background: var(--bg_sec);
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 10px;
}

@media screen and (min-width : 700px) {
      .blog_infinite_scroll{
            width: 100%;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
      }
      .blog_item{
            width: calc(50% - 5px);
      }
}
@media screen and (min-width : 900px) {
      .blog_item{
            width: 48%;
            width: calc(33% - 6.66px);
      }
      .blog_image{
            height: 300px;
      }
}
@media screen and (min-width : 1100px) {
      .blog_item{
            width: 32%;
      }
}

/* blog */
.expand_button{
      position: absolute;
      bottom: 10px; right: 10px;
}

/* gallery */
#gallery-container {
      position: relative;
      width: 100%;
      height: 450px;
      overflow: hidden;
      border-radius: 12px;
}
#gallery-container img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.6s ease-in-out;
}
#gallery-container img.active {
      opacity: 1;
      transform: translateX(0);
}
#gallery-container img.prev {
      transform: translateX(-100%);
}