.my-container-teal { position: relative; background: #003347; background: linear-gradient(74deg,rgba(0, 51, 71, 1) 0%, rgba(6, 140, 158, 1) 100%); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }
.my-container-teal h2 { padding:100px 80px; text-align: center; z-index: 2; position: relative; }
.my-container-teal img { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 1; opacity: 0.3 ; mix-blend-mode: overlay; filter: grayscale(100%); }
.about-section{ width: 80%; margin: 5% auto; max-width: 1350px; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap: 60px; padding: 35px 0; } 
.contentLeft, .contentRight{ width: 100%; } .contentLeft .row{ width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } 
.contentLeft .row .imgWrapper{ width: 100%; height: 450px; padding: 0; margin: 0; overflow: hidden; border-radius: 10px; cursor: pointer; box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.15); } 
.contentLeft .row .imgWrapper img{ width: 100%; height: 100%; object-fit: cover; user-select: none; transition: 0.5s ease; } 
.contentLeft .row .imgWrapper:hover img{ transform: scale(1.2); } 
.contentLeft .row .imgWrapper:nth-child(odd){ transform: translateY(-20px); } 
.contentLeft .row .imgWrapper:nth-child(even){ transform: translateY(20px); } 
.contentRight .content{ display: flex; flex-direction: column; gap: 15px; } 
.contentRight .content h4{ font-size:var(--fontSize-8); font-weight: 400; color: #d35400; }
.our-vision{ background-color: var(--bg-clr3); padding: 3% 10%; text-align: center; } 
.our-vision h2{ text-align: center; } 
.our-vision p{ width: 70%; margin: 3% auto; color: var(--primary-clr); }

.our-mission{ padding: 5% 10%; } 
.our-mission .mission-img img{ width: 80%; height: 350px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } 
.our-mission .mission-cont ul li:before { content: '\f006'; font-family: 'FontAwesome'; float: left; margin-left: -1.5em; color: #0074D9; } 
.our-mission .mission-cont ul li { width: 80%; margin: 3% 0; }

.videos{ padding: 3% 5%; background: var(--bg-clr3); } 
.video .item { position: relative; padding: 10px; }
.video iframe { width: 100%; height: 200px; border-radius: 10px; border: none; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }

@media(max-width: 992px){
  .our-vision{ padding: 5%; } 
  .our-mission .mission-cont ul li { width: 100%; margin: 3% 0; }
}

@media(max-width: 768px){
  .my-container-teal h2 {padding:100px 80px 50px; text-align: center; z-index: 2; position: relative;}
  .about-section{ width: 90%; }
  .about-section{ grid-template-columns: 1fr; } 
  .contentLeft .row{ grid-template-columns: repeat(2, 1fr); } 
  .contentLeft .row .imgWrapper{ height: 150px; } 
  .contentRight .content h4{ font-size: 18px; text-align: center; } 
  .contentRight .content h2{ text-align: center; }
  .our-vision p{ width: 90%; }
  .our-mission{ padding: 5%; }
  .our-mission .mission-img img{ width: 70%; height: 300px; margin: 0 auto;} 
  .our-mission .mission-cont{
    margin: 5% auto;
  }
  .our-mission .mission-cont h2{
    text-align: center;
  }
  .our-mission .mission-cont ul li {
    text-align: justify;
    width: 90%;
  }
}

@media(max-width: 520px){
  .contentRight .content h2{ text-align: center; } 
  .video iframe { width: 100%; height: 150px; }
}

@media(max-width: 450px){
  .about-section{ margin: 5% auto 0%; }
  .contentRight .content h4{ font-size:var(--fontSize-10);} 
  .contentRight .content p{ font-size:var(--fontSize-10); text-align: justify; }
  .our-vision{ padding: 8% 5%; } 
  .our-vision p{ width: 100%; margin: 7% auto; text-align: justify; }
  .our-mission{ padding: 8% 5%; }
  .our-mission .mission-img img{ width: 100%; height: 200px;} 
  .our-mission .mission-cont ul{
    margin-top: 10px;
  }
  .our-mission .mission-cont{
    margin-top: 30px;
  }
  .our-mission .mission-cont ul li {
    width: 100%;
    font-size: var(--fontSize-10);
  }
}