/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (min-device-width: 2500px) and (max-device-width: 2600px) { 
.main_banner .carousel-container {
    display: flex;
    align-items: center;
    position: absolute;
     bottom: auto; 
    top: 25%;
    left: 4%;
    right: 50px;
    width: 35%;
    }
    .mv_bg {
    padding: 115px;
   }
   #hero .carousel-item {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
   }
   .align-center {
    position: absolute;
    top: -22%;
    bottom: -442px;
    left: 52%;
    right: 0;
    margin: auto;
/*    height: 6%;*/
  }
  .about {
    background-image: url(../img/images/about_bg.png);
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    margin-top: -62px;
    z-index: 99;
    height: auto;
    background-size: 100% 45%;
   }
   .facts_pos {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    text-align: center;
    left: 0%;
   }
   .background {
    height: 50vh;
    }

    .main_banner {
    background-repeat: no-repeat;
    height: 920px;
    margin-top: 90px;
    background-size: 100%;
    }

}

@media screen and (min-device-width: 1901px) and (max-device-width: 2000px) { 
    .background {
    height: 60vh!important;
    }
    .circular .numb {
    font-size: 14px;
    }
    .main_banner .carousel-container {
    display: flex;
    align-items: center;
    position: absolute;
     bottom: auto; 
    top: 35%;
    left: 50px;
    right: 50px;
    width: 35%;
    }
    .mv_bg {
    padding: 115px;
   }
   .about {
    background-image: url(../img/images/about_bg.png);
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    margin-top: -65px;
    z-index: 99;
    height: auto;
    background-size: 100%;
    }
    #hero .carousel-item {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    }
    .align-center {
    position: absolute;
    top: -22%;
    bottom: -316px;
    left: 53%;
    right: 0;
    margin: auto;
    /* height: 6%; */
    }
    .bdr_bottom {
    content: '';
    position: absolute;
    left: 51%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1010px;
    bottom: -5px;
    height: 4px;
    background: linear-gradient(to right, #68d366 0%, #68d366 41%, #68d366 10%, rgb(21 213 110 / 85%) 18%, #00b2c9 64%, #00b2c9 100%);
    /* background: #68d366; */
    }
    .facts_pos {
    position: absolute;
    top: 0;
    z-index: 999;
    text-align: center;
    left: 0%;
    right: 0;
    }
    .main_banner {
    background-repeat: no-repeat;
    height: 700px;
    margin-top: 90px;
    background-size: 100%;
    }
}


@media screen and (min-device-width: 1600px) and (max-device-width: 1900px) { 
    .background {
    height: 60vh!important;
    }
    .circular .numb {
    font-size: 14px;
    }
    .main_banner .carousel-container {
    display: flex;
    align-items: center;
    position: absolute;
     bottom: auto; 
    top: 35%;
    left: 50px;
    right: 50px;
    width: 35%;
    }
    .mv_bg {
    padding: 115px;
   }
   .about {
    background-image: url(../img/images/about_bg.png);
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    margin-top: -65px;
    z-index: 99;
    height: auto;
    background-size: 100%;
    }
    #hero .carousel-item {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    }
    .align-center {
    position: absolute;
    top: -22%;
    bottom: -316px;
    left: 58%;
    right: 0;
    margin: auto;
/*    height: 6%;*/
    }
    .bdr_bottom {
    content: '';
    position: absolute;
    left: 51%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1010px;
    bottom: -5px;
    height: 4px;
    background: linear-gradient(to right, #68d366 0%, #68d366 41%, #68d366 10%, rgb(21 213 110 / 85%) 18%, #00b2c9 64%, #00b2c9 100%);
    /* background: #68d366; */
    }
    .facts_pos {
    position: absolute;
    top: 0;
    z-index: 999;
    text-align: center;
    left: 0%;
    right: 0;
    }
    .main_banner {
    background-repeat: no-repeat;
    height: 640px;
    margin-top: 90px;
    background-size: 100%;
    }
}
@media screen and (min-device-width: 1380px) and (max-width: 1599px) {
    .facts_pos {
    position: absolute;
    top: 0;
    z-index: 999;
    text-align: center;
    left: 0;
    right: 0;
    }
    .background {
    height: 80vh;
    }
    .about {
    background-size: contain;
   }
   .bdr_bottom {
    content: '';
    position: absolute;
    left: 51%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1015px;
    bottom: -5px;
    height: 4px;
    background: linear-gradient(to right, #68d366 0%, #68d366 41%, #68d366 10%, rgb(21 213 110 / 85%) 18%, #00b2c9 64%, #00b2c9 100%);
    /* background: #68d366; */
   }
   .mv_bg {
    padding: 115px;
    }
    .main_banner .carousel-container {
    top: 0;
    }
    .circular .numb {
    font-size: 14px;
    }
    #hero .carousel-item {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    }
    .align-center {
    position: absolute;
    top: -41%;
    bottom: -453px;
    left: 60%;
    right: 0;
    margin: auto;
/*    height: 6%;*/
    }
    .main_banner {
    height: 570px!important;
    
    }
  
}

@media (max-width:1366px) and (min-height:768px){
.align-center {
    position: absolute;
    top: -22%;
    bottom: -240px;
    left: 41%;
    right: 0;
    margin: auto;
/*    height: 6%;*/
}
#hero {
  width: 100%;
  height: 80vh;
  background-color: rgba(4, 12, 21, 0.8);
  overflow: hidden;
  position: relative;
}
.about {
   
    margin-top: -65px;
   
}
}
@media (max-width:1025px) and (min-height:1365px){
#hero {
    height: 45vh!important;
    }
}

@media (max-width:1025px) and (max-height:600px){

.background {
    height: 115vh!important;
}
.align-center {
    position: absolute;
    top: -22%;
    bottom: -300px!important;
    left: 55%!important;
    right: 0;
    margin: auto;
}

}



@media (max-width:1025px){

    #footer .footer-top .footer-links ul li {
    white-space: break-spaces;
    padding: 6px 0;
    display: flex;
    align-items: baseline;
    font-family: "Poppins", sans-serif;
    align-items: center;
    }

    #footer .footer-top .footer-links ul a {
    color: #201f1f;
    transition: 0.3s;
    display: inline-block;
    line-height: 0;
    }

    .facts_pos {
    left: 2%;
    }
    .pulse-effect {
    top: 11%;
    left: 33%;
    }
    .testimonials .testimonial-wrap {
    /* padding-left: 90px; */
    width: 500px;
    margin: auto;
    }
    .main_banner .carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    bottom: 0;
    top: 150px;
    left: 13px;
    right: 50px;
    width: 44%;
    }
    .main_banner {
    background-repeat: no-repeat;
    height: 380px;
    margin-top: 90px;
    background-size: 100%;
    }
    .mv_bg {
    background-image: url(../img/db_circle.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 20px;
    padding: 25px 34px;
    }
    .circular .numb {
    font-size: 13px;
    }
    .value_wrap {
    height: 380px;
    }
    .inners_item {
    width: 400px;
    padding: 34px;
    background-color: #f8f9fa;
    margin: auto;
    }
    #hero {
    height: 80vh;
    }
    .section-title_abt h3 {
    font-size: 30px;
    }
    .section-title_abt h3 span {
    font-size: 60px;
    }
    .section-title_abt {
    padding: 15px 20px;
    }
    .install_process .section-title_facts h2 span {
    font-size: 60px;
    }
    .install_process .section-title_facts h2 {
        font-size: 30px;
    }
    .srvice_heading span {
        font-size: 60px;
    }
    .srvice_heading {
        font-size: 30px;
    }
    .facts_txt {
    height: 350px;
    }
    .background {
    height: 84vh;
    }
    .about_card .inner_card_txt {
    padding: 20px 10px;
    text-align: justify;
    }
    .align-center {
    position: absolute;
    top: -22%;
    bottom: -240px;
    left: 55%;
    right: 0;
    margin: auto;
   
    }
    .about_card .carrd_inner_img img {
    height: 200px;
    }

    .thought_wrapper .circle-img {
    height: 230px;
    width: 100%;
    /* overflow: hidden; */
    /* border-left: 6px solid #02934f; */
    position: relative;
    border-radius: 50%;
    /* margin: auto; */
    padding: 5px;
    z-index: 3;
    background-color: #ffffff;
}
    

/*    kalpana*/

.about .content h5 {
    font-size: 21px !important;
   
}
.product_slider .owl-carousel .owl-item img{
    width: 95%;
    height:315px;
}

.btn-learn-more{
    left: 15% ;
    top: -21px;
}
.fof h3 {
    font-size: 137px;
  
}
.product_slider .owl-carousel .owl-prev {
    position: absolute;
    left: -27px;
    top: 32%;
    font-size: 57px!important;
}

.product_slider .owl-carousel .owl-next {
    position: absolute;
    right: -27px;
    top: 32%;
    font-size: 57px!important;
}
#footer .footer-top .footer-links ul a {
    display: contents;
    line-height: 0;
}
}
@media screen and (max-width: 991px) {
    #hero {
    height: 50vh!important;
    }
    .about .content h5 {
    padding: 30px 20px;
    }
    .card_box .mt-4{
        margin-top: 0px!important;
    }
    .card_box {
    margin-top: 0px;
    }
    .pulse-effect {
    top: 13%;
    left: 33%;
    }
    .about_card {
    height: 600px;
    }
    .water_magement_sec.mt-4 {
    margin-top: 0rem!important;
    }
    .shapes_des {
   
    display: none;
    }
    .shapes_des_3rd {
        display: none;
    }
    .shapes_des_4th {
        display: none;
    }
    .bdr_bottom {
        display: none;
    }
    .gradient-box {
    padding: 15% 0em;
   
    }

    .background {
    height: 1160px;
    }
    .facts .icon-box {
    margin-top: 30px;
    }
    
   .rain_water{
    width: 100%;
    overflow: hidden;
    }
    #hero .carousel-container {
    width: 50%;
    }
    #hero p {
    font-size: 25px;
    margin:0;
    }
    .testimonials .testimonial-wrap {
    /* padding-left: 90px; */
    width: 100%;
    }
    .facts_pos {
    left: 11%;
    }
    #hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
    display: none;
    }

    #hero .carousel-container {
    text-align: left;
    top: 74px;
    left: 5px;
    }

    .main_banner {
    background-repeat: no-repeat;
    height: 300px;
    background-size: cover;
    width: 100%;
    }
    .main_banner .carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    bottom: 0;
    top: 82px;
    left: 10px;
    right: 50px;
    width: 50%;
    }
    .main_banner h2 {
    color: #00c7d4;
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    font-family: 'black_ocean_threeregular';
    letter-spacing: 4px;
    }
    .main_banner p {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    color: #fff;
    margin-top: 0px;
    font-size: 18px;
    line-height: 35px;
    }
    .circular {
    height: 100px;
    width: 100px;
    /* background: #c8c7cc; */
    position: relative;
    transform: scale(2);
    margin: 0 auto;
    margin-block: 40px;
    margin-bottom: 60px;
    }
    .circular .numb {
    font-size: 10px;
    }

    .mv_bg {
    background-image: url(../img/db_circle.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 20px;
    padding: 10px 20px;
    }

    .mv_image {
    width: 40px;
    height: 40px;
    text-align: center;
    margin: auto;
    border-radius: 50%;
    border: 5px solid #00a3bd;
    padding: 2px;
    background: #00a3bd;
    }

    .MV_parent h1 {
    color: #00b0fd;
    display: inline-block;
    position: relative;
    /* width: fit-content; */
    margin: auto;
    font-size: 20px;
     padding: 2px; 
    transition: 0.5s ease all;
    }
    .MV_parent p {
    padding: 10px;
    line-height: 16px;
    font-family: 'Open Sans';
    font-size: 10px;
    color: grey;
    text-align: center;
    }
    .MV_parent {
    /* box-shadow: 1px 1px 6px -1px #00b0fd; */
    padding: 2px;
    margin: 40px;
    transition: 0.5s ease all;
    }
    .value_wrap {
    height: 450px;
    }
    .about_us {
    padding-block: 0px;
    }
    .section-title_abt h3 {
    font-size: 30px;
    }
    .section-title_abt h3 span {
    font-size: 60px;
    }
    .section-title_abt {
    padding: 15px 20px;
    }
    .install_process .section-title_facts h2 span {
    font-size: 60px;
    }
    .install_process .section-title_facts h2 {
        font-size: 30px;
    }
    .srvice_heading span {
        font-size: 60px;
    }
    .srvice_heading {
        font-size: 30px;
    }
    #hero .carousel-item {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    }
    .error {
    width: 100%!important;
    }

    .thought_wrapper .circle-img {
    height: 165px;
    width: 100%;
   
    position: relative;
    border-radius: 50%;
    /* margin: auto; */
    padding: 5px;
    z-index: 3;
    background-color: #ffffff;
    }

    .thought_wrapper .circle-img::before {
    position: absolute;
    content: " ";
    height: 100px;
    width: 100px;
    bottom: -4px;
    right: 43px;
    border-radius: 13px;
    opacity: 0.3;
    background: #00924e;
    z-index: -1;
    }
    
    img.wrappedimg {
    float: left;
    margin: 15px;
    width: 100%;
    }
   
 
}
/*end 991*/
@media  (max-width:820px){
    .facts_pos {
    left: 7%;
    }
    

}
@media screen and (max-width: 768px) {
 .facts_pos {
    left: 3%;
    }
    /*.about_card {
    height: 550px;
    }*/
}
/*767 end*/




/*676*/
@media screen and (max-width: 676px) {
.thought_wrapper .leader_detail {
    margin-inline: 0px;
    text-align: left;
    margin-top: 10px;
}

.city-service{
  padding:10px 0px;
}

.about_service span {
    font-family: 'black_ocean_threeregular';
    font-size: 50px;
}

.about_service h2 {
    color: #4dc7f5;
    font-weight: 400;
    font-size: 45px;
    text-align: center;
    font-size: 25px;
}

.about_service {
    background-color: #e8f9fb;
    padding: 15px 15px;
    border-radius: 8px;
    box-shadow: -2px 1px 10px 3px #e8f9fb;
}
.mob_dis{
    display:none;
}

#graph-new-container {
    height: 350px!important;
}

.arrow_card .section-title_facts h2 {
    font-weight: 500;
    font-size: 30px;
    text-align: center;
    color: #4dc7f5;
}

.arrow_card .section-title_facts h2 span {
    font-weight: 500;
    font-size: 50px;
    font-family: 'black_ocean_threeregular';
    text-align: center;
    color: #4dc7f5;
}

.thought_wrapper .leader-background {
    padding: 20px;
    margin-top:0;
   
}
.heading_left span {
    font-weight: 500;
    font-size: 65px!important;
    font-family: 'black_ocean_threeregular';
    text-align: center;
    color: #4dc7f5;
}
.chart_slice_offering ol, ul {
    padding-left: 20px;
}
.thought_wrapper .circle-img {
    height: auto;
}
.leader_detail .btn-read-more {
    margin-left: 20px;
}
.thought_wrapper .opposite .leader_detail .desig, .leader_detail .desig {
    color: #00c2dd;
    margin-block: 0;
    padding-block: 0px;
    font-size: 15px;
    /* margin-top: 10px; */
    /* line-height: 28px; */
    text-align: center;
}
.about .content h5 {
    font-size: 30px;
    color: #fff;
     padding: 0px; 
    /* float: right; */
    font-weight: 600;
    text-align: center;
}
.thought_leader_wrapper .thought_head span {
    font-family: 'black_ocean_threeregular';
    font-size: 50px;
}

.thought_leader_wrapper .thought_head h2 {
    color: #4dc7f5;
    font-weight: 400;
    font-size: 45px;
    text-align: center;
    font-size: 35px;
}
.product_slider{
    width: 90%;
    margin: 0 auto;
}

.product_slider .owl-carousel .owl-prev {
    position: absolute;
    left: -27px;
    top: 20%;
    font-size: 57px!important;
}

.product_slider .owl-carousel .owl-next {
    position: absolute;
    right: -27px;
    top: 20%;
    font-size: 57px!important;
}
.pulse-effect {
    background: url(../img/retas-logo_1.png) no-repeat;
    background-size: contain;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    position: absolute;
    top: 170px;
    z-index: 99;
     left: auto; 
    right: 10%!important;
}
.numb1::before {
    content: "01";
    position: absolute;
    top: -27px;
    border: 1px solid #000;
    color: #000;
    font-size: 25px;
    padding: 2px 5px;
    right: 21px;
    font-weight: 600;
}

.numb2::before {
    content: "02";
    position: absolute;
    top: -27px;
    border: 1px solid #000;
    color: #000;
    font-size: 25px;
    padding: 2px 5px;
    right: 21px;
    font-weight: 600;
}
.numb3::before {
    content: "03";
    position: absolute;
    top: -27px;
    border: 1px solid #000;
    color: #000;
    font-size: 25px;
    padding: 2px 5px;
    right: 21px;
    font-weight: 600;
}
.numb4::before {
    content: "04";
    position: absolute;
    top: -27px;
    border: 1px solid #000;
    color: #000;
    font-size: 25px;
    padding: 2px 5px;
    right: 21px;
    font-weight: 600;
}
.about_card .carrd_inner_img h5 {
    font-size: 15px;
    text-transform: uppercase;
    height: auto;
    padding: 6px 8px;
    font-weight: 600;
    margin: 10px 0px;
    margin-bottom: 12px;
    color: #444444;
}
.about_card {
    height: auto;
}
.btn-learn-more {
    left: 28%;
}
.water_magement_sec .section-title_facts h2 {
    font-weight: 500;
    font-size: 30px;
    text-align: center;
    color: #4dc7f5;
    margin-bottom: 30px;
}
.shapes_des {
   
    display: none;
}
.shapes_des_3rd {
    display: none;
}
.shapes_des_4th {
    display: none;
}
.bdr_bottom {
    display: none;
}
.gradient-box {
    padding: 14% 0em;
   
}
.facts_txt {
    height: auto;
}
.background {
    height: 1460px;
}
.facts_pos {
   left: 0;
}
.facts .icon-box {
    margin-top: 25px;
}
.sector{
  padding:20px 0;
}
.facts{
  
  padding: 20px 0px;
}
.sector .section-title_facts h2 {
  font-size: 35px;
}
.sector .section-title_facts h2 span {
    font-size: 70px;
}
.facts .section-title_facts h2 {
    font-size: 35px;
}
.facts .section-title_facts h2 span {
    font-size: 70px;
}
.section-title_rewards h2 span {
    font-size: 70px;
}
.section-title_rewards h2 {
    font-size: 35px;
}

.section-title_scarcity h2 span {
    font-size: 50px;
}
.section-title_scarcity h2 {
    font-size: 30px;
}


.testimonials .testimonial-wrap {
    width: 100%;
}
.circle1 {
    display: none;
}
.section-bg {
    overflow: hidden;
}
.align-center {
    display: none;
}
#hero {
    height: 30vh!important;
    margin-top:70px;
}
#header .logo img {
    max-height: 60px;
}
.hero-waves {
    height: 60px;
}
#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
    font-size: 14px;
    width: 30px;
    height: 30px;
}
.footer_bg {
    height: auto;
}
.designed_by {
    float: none;
}
#hero .carousel-container {
    text-align: left;
    top: 0;
    left: 5px;
}
#hero p {
    font-size: 12px;
    line-height: 15px;
    margin-bottom:0;
}

#hero h2 {
    font-size: 20px;
}
#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
    display: none;
}

.main_banner .carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    bottom: 0;
    top: 60px;
    left: 0px;
    right: 50px;
    width: 58%;
}
.main_banner p {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    color: #fff;
    margin: 0px;
    font-size: 12px;
    line-height: 18px;
}

.main_banner h2 {
    color: #00c7d4;
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    font-family: 'black_ocean_threeregular';
    letter-spacing: 4px;
}
.main_banner {
    background-repeat: no-repeat;
    height: 180px;
    margin-top: 70px;
    background-size: cover;
}

.mv_image {
    width: 40px;
    height: 40px;
    text-align: center;
    margin: auto;
    border-radius: 50%;
    border: 5px solid #00a3bd;
    padding: 2px;
    background: #00a3bd;
}
.MV_parent h1 {
    font-size: 22px;
     padding: 0; 
}
.MV_parent p {
    padding: 15px;
    line-height: 15px;
    font-family: 'Open Sans';
    font-size: 10px;
    color: grey;
    text-align: center;
}
.MV_parent {
    /* box-shadow: 1px 1px 6px -1px #00b0fd; */
    padding: 5px;
    margin: 0;
    transition: 0.5s ease all;
}

.mv_bg {
    margin: 20px;
    padding: 95px 49px;
}
.about_us h2 {
    font-size: 25px;
    color: #00b0fd;
}
.about_us span {
    color: skyblue;
    font-family: 'black_ocean_threeregular';
    font-weight: 500;
    font-size: 33px;
    text-align: center;
    color: #4dc7f5;
    margin: 0px;
}
#main1 {
    text-align: center;
    margin: 5px;
    color: white;
}

.circle{
    margin-top:70px;
}

.heading_milestone span {
    font-size: 45px;
}
.circular .numb {
    font-size: 10px;
}

.heading_core span {
    font-size: 50px;
}
.value_wrap {
    height: auto;
    margin-bottom: 25px;
}
.heading_client span {
    font-size: 45px;
}
.install_process .time-line .dates-wrap .date .date-content {
    visibility: hidden;
    position: absolute;
    width: 320px;
     height: 160px; 
    bottom: 0%;
    margin-bottom: 140px;
    border-radius: 3px;
    transform-origin: 50% 100%;
    transform: scale(0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0);
}
.install_process .controls {
    display: none;
}
.section-title_abt {
    padding: 15px 20px;
}
.section-title_abt h3 span {
    font-size: 45px;
}
.section-title_abt h3 {
    font-size: 25px;
}
.install_process .section-title_facts h2 span {
    font-size: 45px;
}
.install_process .section-title_facts h2 {
    font-size: 25px;
}
.srvice_heading span {
    font-size: 45px;
}
.srvice_heading {
    font-size: 25px;
}
.product_slider .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 170px;
}
.fof img {
    height: 100px!important;
}
.fof h3 {
    font-size: 100px!important;
    color: skyblue;
}
.error {
    width: 100%!important;
}
.about_card .carrd_inner_img img {
    height: 350px;
}
.section-title h2 {
    text-align: end;
}
.section-title h2::after {
    right: 40%;
}
}

@media (min-width:500px) and (max-width:600px){
#hero {
    height: 40vh!important;
    }
.mv_bg {
    margin: 20px;
    padding: 69px 49px;
    background-size: 70%;
}
.MV_parent {
    padding: 10px 83px;
    
}
.main_banner {
    height: 200px;
}
.main_banner .carousel-container {
    width: 42%;
}
.thought_wrapper .circle-img {
    height: 250px;
    width: 100%;
    position: relative;
    border-radius: 50%;
    /* margin: auto; */
    padding: 5px;
    z-index: 3;
    background-color: #ffffff;
}
}


@media screen and (max-width: 380px) {
   .mv_bg {
    margin: 20px;
    padding: 70px 49px;
} 
.background {
    height: 1580px;
}
}
@media screen and (max-width: 320px) {
.background {
    height: 1700px;
}
.main_banner h2 {
    color: #00c7d4;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    font-family: 'black_ocean_threeregular';
    letter-spacing: 4px;
}
.MV_parent p {
    padding: 5px 6px;
    line-height: 14px;
    font-family: 'Open Sans';
    font-size: 9px;
    color: grey;
    text-align: center;
}
.mv_image {
    width: 40px;
    height: 40px;
    text-align: center;
    margin: auto;
    border-radius: 50%;
    border: 5px solid #00a3bd;
    padding: 2px;
    background: #00a3bd;
}
.mv_bg {
    margin: 20px;
    padding: 35px 49px;
}
.install_process .time-line .dates-wrap .date .date-content {
    visibility: hidden;
    position: absolute;
    width: 300px;
    height: 160px;
    bottom: 0%;
    margin-bottom: 140px;
    border-radius: 3px;
    transform-origin: 50% 100%;
    transform: scale(0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0);
}

.main_banner {
    background-repeat: no-repeat;
    height: 160px;
    margin-top: 90px;
    background-size: cover;
}
}