.wrapper {padding-top: 60px !important;}

  .navbar {background: #FFFFFF; box-shadow: 0 1px 40px rgba(0,0,0,0.4);}
  .navbar ul li a {
      background-color: transparent;
      /* transform: scale(1.1); */
      color: #212529 !important;
  }
  .navbar div a i {color: #212529 !important;}
  
  .header_section {
      position: relative;
      width: 100%;
      height: 700px;
      background: url(../images/AboutHeaderImg.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
  }
  .header_content {
      position: relative;
      z-index: 1;
      margin: 15% 0;
  } 
  .header_section .header_content h1 span {
      font-size: 65px !important;
      color: #FFFFFF;
      display: block;
      text-shadow: 5px 5px 9px rgba(0,0,0,0.7);
  }
  .header_section .header_content h1 span.outline-text {
      color: transparent;
      -webkit-text-stroke: 1.5px white;
      -ms-text-stroke: 1.5px white;
      -moz-text-stroke: 1.5px white;
  }
  .header_section .header_content p {
      
      font-size: 21px !important;
      color: #FFFFFF;
      text-shadow: 5px 5px 9px rgba(0,0,0,0.7);
  }
  
.about-section{
    position: relative;
    z-index: 2;
    padding-bottom: 64px;
    padding-top: 64px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
.about_section_bg {
    width: 100%;
    background: url(../images/about/about-header-bg.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}
.about-section h1{
    font-weight: 300 !important;
    font-size: 42px !important;
    color: #000;
}
.about-section h1 b{
    background: linear-gradient(220deg, #28B4EF, #001668);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700 !important;
    font-size: 42px !important;
}
.underline img{
    margin-top: -15px;
}
.about-section p{
    text-align: justify;
    line-height: 30px;
}

.img-svg{
    width: 100%;
    height: 670px;
    background: url(../images/about/ourpartners.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    text-align: center;
}

/* ============about-latest-news=============== */

.about-latest-news h2{  
    font-weight: 300 !important;
    font-size: 42px !important;
    color: #000;
    overflow: hidden;
}
.about-latest-news h2 b{
    font-weight: 700 !important;
    font-size: 42px !important;
    overflow: hidden;
}

.overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000, transparent, transparent); 
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.image-with-text {
    position: relative;
    text-align: start;
}
.text-content {
    position: absolute;
    bottom:0; 
    left: 0;
    right: 0;
    padding: 14px;
}
.text-content span{
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #ffffff !important; 
    position: relative;
    z-index: 1;    
}
.text-content .small-text{
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #fff !important; 
}
/* ==========about-Partners=============== */
.about-partners{
    background-image: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
    padding-bottom: 150px;
    margin-bottom: -150px;
}
.about-partners h2{
    font-weight: 300 !important;
    font-size: 42px !important;
    color: #000;
    overflow: hidden;
}
.about-partners h2 b{
    font-weight: 700 !important;
    font-size: 42px !important;
    overflow: hidden;
}
.about-partners p{
    font-size: 16px; 
    padding: 10px 0 30px 0;
    margin: 0;
}
.about-partners-btn {margin-bottom: -25px; }
.about-partners-btn a{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: rgb(13, 13, 77);
}
.about-partners svg {width: 100%; height: auto;}

a.btn.rounded-pill.text-white {
    font-size: 16px !important;
}

.video-section {
    width: 500px;
    height: 400px;
    overflow: hidden;
    margin: auto;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.video-section video {mix-blend-mode: darken;}
.video-section:before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background: url(../images/CircleLarge.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: -6%;
    animation: spin 4s linear infinite;
    right: 28%;
}
.video-section:after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background: url(../images/CircleLarge.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: 28%;
    animation: spin 4s linear infinite;
    right: 45%;
}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.smartcityicon {
    width: 150px;
    margin: 15px;
}

.play_btn {
    position: absolute;
    top: 13.5%;
    right: 23.5%;
    font-size: 48px !important;
    border: 1px solid #0d6efd;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    padding: 8px 28px !important;
    cursor: pointer;
}
.mute_btn {
    position: absolute;
    z-index: 2;
    margin-top: 20%;
    right: 10%;
    font-size: 21px !important;
    color: #FFFFFF;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #0d6efd;
    border-radius: 100%;
    line-height: 1.9;
}
.mute_btn:hover i {color: #FFFFFF;}

.wacho_logo{
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

/* =================MEDIA-Query============ */
@media only screen and (max-width:7000px) {
    .img-svg {height: 810px;}
    .video-section:after {margin-top: 5.8%; right: 47%;}
    .video-section:before {margin-top: -1.5%; right: 43.5%;}
    .play_btn {top: 10%; right: 42.5%;}
    .mute_btn {margin-top: 3.8%; right: 40%;}
    .video-section {width: 400px; height: 330px;}
}
@media only screen and (max-width:5000px) {
    .video-section:after {margin-top: 7.8%; right: 46%;}
    .video-section:before {margin-top: -2%; right: 41.5%;}
    .play_btn {right: 40%;}
    .mute_btn {margin-top: 5%; right: 36.7%;}
}
@media only screen and (max-width:3000px) {
    .video-section:after {margin-top: 11.5%; right: 44%;}
    .video-section:before {margin-top: -3%; right: 37.5%;}
    .play_btn {right: 35%;}
    .mute_btn {margin-top: 7.6%; right: 30%;}
}
@media only screen and (max-width:2000px) {
    .video-section:after {margin-top: 15%; right: 42%;}
    .video-section:before {margin-top: -3.5%; right: 33.5%;}
    .play_btn {right: 30%;}
    .mute_btn {margin-top: 10.2%; right: 23.2%;}
}
@media only screen and (max-width:1800px) {
    .video-section:after {margin-top: 17%; right: 41%;}
    .video-section:before {margin-top: -4%; right: 31.5%;}
    .play_btn {right: 27%;}
    .mute_btn {margin-top: 11.5%; right: 20%;}
}
@media only screen and (max-width:1600px) {
    .video-section:after {margin-top: 18%; right: 40%;}
    .video-section:before {margin-top: -4%; right: 30%;}
    .play_btn {right: 26%;}
    .mute_btn {margin-top: 12%; right: 18.1%;}
}
@media only screen and (max-width:1440px) {
    .video-section:after {margin-top: 20.5%; right: 39%;}
    .video-section:before {margin-top: -5%; right: 28%;}
    .play_btn {right: 23%;}
    .mute_btn {margin-top: 13.5%; right: 14.2%;}
}
@media screen and (max-width: 1380px) {
    .plans_box {height: 355px !important; padding: 100px 0;}
    .img-svg {height: 760px;}
    .video-section:before {margin-top: -6%; right: 29%;}
    .video-section:after {margin-top: 28%; right: 45%;}
    .play_btn {top: 12%; right: 23.5%;}
    .mute_btn {margin-top: 20%; right: 10%;}
    .video-section {width: 500px; height: 400px;}
}
@media screen and (max-width: 1200px) {
    .video-section:before {right: 32%;}
    .video-section:after {margin-top: 32%;}
    .mute_btn {margin-top: 22%; right: 8%;}
}
@media screen and (max-width: 1024px) {
    .header_section {background-size: cover; height: auto;}
    .header_section .header_content {margin: 40% 0;}
    .img-svg {height: 560px;}
    iframe {width: 100%;}
    .video-section:after {margin-top: 36%;}
    .play_btn {top: 13%; right: 19.5%;}
    .mute_btn {margin-top: 25%; right: 3%;}
}
@media screen and (max-width: 991px) {
    .img-svg {height: 420px;}
    .text-content span{
        font-size: 15px; 
    }
    .text-content .small-text{
        font-size: 12px;
    }
    .about-partners-btn {
        margin-bottom: -19px !important;
    }
    .about-partners {
        margin: -25px 0;
        padding-bottom: 150px;
        margin-bottom: -150px;
    }
    .video-section {
        width: 100%;
        height: auto;
    }
    .video-section video {mix-blend-mode: unset;}
    .video-section:after {margin-top: 56%; right: 85%;}
    .about_section_bg {
        background: #FFFFFF;
        background-position: unset;
        background-repeat: unset;
        background-size: unset;
    }
    .play_btn {top: 27.5%; right: 44%;}
    .mute_btn {margin-top: 42%; right: 15%;}
}
@media screen and (max-width: 950px) {
    .play_btn {right: 45%;}
    .mute_btn {margin-top: 41%; right: 16%;}
}
@media screen and (max-width: 850px) {
    .video-section:after {margin-top: 60%; right: 87%;}
    .mute_btn {margin-top: 44%; right: 13%;}
}
@media screen and (max-width: 830px) {
    .video-section:after {margin-top: 62%; right: 89%;}
    .play_btn {top: 26%; right: 43%;}
    .mute_btn {margin-top: 47%; right: 11%;}
}
@media screen and (max-width: 768px) {
    .text-content span{
        font-size: 15px !important; 
    }
    .text-content .small-text{
        font-size: 10px !important;
        line-height: 10px !important;
    }
    .video-section:after {margin-top: 64%; right: 90%;}
    .play_btn {right: 44%;}
    .mute_btn {margin-top: 48%; right: 9%;}
}
@media screen and (max-width: 767px) {
    .wacho_logo {
        height: 30px;
        width: 30px;
    }
    .plans_box {width: 355px; margin: auto;}
    iframe {
      width:100%; 
    }
    .img-svg{
        width: 100%;
        height: 310px !important;
        background-size: contain !important;
    }
    .text-content span{
        font-size: 15px !important; 
    }
    .text-content .small-text{
        font-size: 10px !important;
        line-height: 10px !important;
    }
    .video-section:after {
        margin-top: 52%;
        right: 80%;
    }
    .play_btn {top: 22.5%; right: 43%;}
    .mute_btn {margin-top: 36%; right: 19%;}
}
@media screen and (max-width: 730px) {
    .play_btn {top: 20%;}
}
@media screen and (max-width: 670px) {
    .video-section:before {margin-top: -8%;}
    .video-section:after {margin-top: 56%; right: 85%;}
    .play_btn {top: 20%; right: 43%;}
}
@media screen and (max-width: 550px) {
    .video-section:before {margin-top: -10%; right: 50px;}
    .video-section:after {margin-top: 70%; right: 90%;}
    .play_btn {top: 20%; right: 41%;}
    .mute_btn {margin-top: 49%; right: 8%;}
}
@media screen and (max-width: 480px) {
    .header_section .header_content {margin: 15% 0;}
    .header_section .header_content h1 span {font-size: 54px !important;}
    .plans_box {width: 100%;}
    .img-svg {height: 235px !important;}
    a.btn.rounded-pill.text-white {font-size: 8px !important;}
    .about-partners-btn {margin-bottom: -32px;}
    .video-section:before {margin-top: -14%;}
    .smartcityicon {width: 90px; margin: 6px;}
    .mute_btn {margin-top: 45%;}
    .play_btn {width: 70px; height: 70px; font-size: 40px !important; padding: 3px 22px !important;}
    .video-section:before, .video-section:after {display: none;}
}
@media screen and (max-width: 450px) {
    .play_btn {top: 23%; right: 40%;}
}
@media screen and (max-width: 414px) {
    .play_btn {top: 23%; right: 41%;}
    .mute_btn {right: 9%;}
}
@media screen and (max-width: 413px) {
    .play_btn {top: 24%;}
}
@media screen and (max-width: 400px) {
    .header_section .header_content h1 span {font-size: 45px !important;}
    .img-svg {height: 200px !important;}
    .text-content span{font-size: 15px !important; }
    .text-content .small-text{font-size: 12px !important;}
    a.btn.rounded-pill.text-white {font-size: 8px !important;}
    .about-partners-btn {margin-bottom: -32px;}
    .video-section:before {margin-top: -10%; right: 10px;}
    .play_btn {top: 24%; right: 40%;}
    .mute_btn {margin-top: 44%;}
}
@media screen and (max-width: 380px) {
    .play_btn {top: 25%;}
}
@media screen and (max-width: 370px) {
    .play_btn {top: 25%; right: 39%;}
}
@media screen and (max-width: 300px) {
    .video-section:before {margin-top: -20%;}
    .video-section:after {right: 82%;}
    .play_btn {
        font-size: 36px !important;
        width: 65px;
        height: 65px;
        padding: 4px 20px !important;
        top: 28%; 
        right: 36%;
    }    
}