body{ font-family: roboto; }
section .banner .main-baner-image img{ width: 100%; position: absolute; height: 100%; }
section .banner .main-content .content img{ width: 30%; }
section .banner .main-content .content h2{font-size: 50px; color: #000000; font-weight: 500;}
section .banner .main-content .content p{ font-size: 17px; color: #000000; }
section .banner .main-content .content{ position: relative; z-index: 1; text-align: right; padding-top: 200px;  }
.sec-1 { min-height: 680px; position: relative;}


section .key-features .image-section .image img{width: 100%;}
.row{max-width: 100%;}
section .key-features .content-sec .content-listing{ padding-top: 25px; }
section .key-features .content-sec .content-listing .cercle{ -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite; vertical-align: top; display: inline-block; font-size: 20px; color: #000000; }
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }  

section .key-features .content-sec .content-listing p{ font-size: 17px; opacity: 0.8; color: #000000; display: inline-block; width: calc(100% - 30px); vertical-align: top; padding-left: 15px;}
section .key-features .content-sec .main-heading h2{ font-size: 35px; color: #000000; font-weight: 500; padding: 15px 0px; }
section .key-features .content-sec { padding-left: 20px; }


section .Project-story { background-color: #e8eaeb; padding: 50px; margin-top: 50px; }
section .Project-story .main-content h2{ font-size: 35px; color: #000000; font-weight: 500;  }
section .Project-story .main-content p{ font-size: 17px; color: #000000; opacity: 0.8; }
section .Project-story .main-content{ background-color: #ffffff; padding: 20px 40px; border-radius: 20px; }
section .Project-story .image-section img{ width: 85%; position: absolute;  margin-top: -20px; padding-left: 40px; }


section .Challenges .main-heading{ text-align: center; padding: 50px 0px; }
section .Challenges .main-heading h2{ font-size: 35px; color: #000000; font-weight: 500; }
section .Challenges .main-heading p{ opacity: 0.8; font-size: 17px; color: #000000; }
section .Challenges .challenge-list h2{ font-size: 26px; color: #000000; font-weight: 500; text-align: center; }
section .Challenges .challenge-list p{ opacity: 0.8; font-size: 17px; color: #000000; }
section .Challenges .challenge-list { height: 27vw; box-shadow: 1px 3px 15px #e9e9e9; padding: 20px; border-radius: 20px }

.slider-sec .swiper-slide {
    flex-shrink: 0;
    width: 30% !important;
    height: 100%;
    background: transparent;
    position: relative;
    transition-property: transform;
    margin: 20px;
}

.slider-sec .swiper-container {
      width: 100%;
      height: 100%;
      padding-top: 80px !important;
      padding-bottom: 80px !important;
    }

.slider-sec .swiper-slide {
      text-align: center;
      font-size: 18px;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

.slider-sec{ margin-top: 80px; background-image: url(../../../../public/images/portfolio/hospitap/back-1.png); background-size: cover; background-attachment: fixed; background-position: center; }
.slider-sec .swiper-button-next{ background-color: #ffffff;  padding: 35px; border-radius: 50px; opacity: 0.8; }    
.slider-sec .swiper-button-prev{ background-color: #ffffff;  padding: 35px; border-radius: 50px; opacity: 0.8; }  


section .technical .container .image-section img{ width: 100% }
section .technical{ padding: 80px 0px; background-image: url(../../../../public/images/portfolio/hospitap/back-2.png); overflow: hidden; background-position: center; background-size: cover; }
section .technical .container .main-content h2{ font-size: 35px; font-weight: 500; color: #000000; }
section .technical .container .main-content p{ padding-top: 20px; font-size: 17px; color: #000000; opacity: 0.8; }
section .technical .container .main-content{ padding: 70px 30px; }


section .Result .container .main-heading h2{text-align: center; padding-top: 60px; padding-bottom: 0px; font-size: 35px; color: #000000; font-weight: 500; }
section .Result .container .main-heading p{ font-size: 17px; color: #000000; opacity: 0.8; text-align: center; }
section .Result .container .image-sec img{ width: 100%; }
section .Result .container .image-sec .margin{ margin-top: 50px; }
section .Result .container .image-sec{ margin-top: 30px; margin-bottom: 50px; }
section .Result{ background-image: url(../../../../public/images/portfolio/hospitap/resul-back.png); background-position: center;background-size: cover; background-attachment: fixed; }










/*Responsive*/


@media(max-width: 1920px){ 

section .key-features .content-sec { padding-left: 20px; padding-right: 60px;}
section .key-features .content-sec .main-heading h2 { padding: 80px 0px;}
section .Challenges .challenge-list { height: 20vw;}
section .banner .main-content .content {
    padding-top: 365px;
    padding-bottom: 220px;
}

 }

@media (max-width: 1640px){

section .key-features .content-sec { padding-left: 20px; padding-right: 60px;}
section .key-features .content-sec .main-heading h2 { padding: 80px 0px;}
section .Challenges .challenge-list { height: 22vw;}
section .banner .main-content .content{ padding-bottom: 90px; }

}

@media (max-width: 1440px){

section .key-features .content-sec .main-heading h2 { padding: 40px 0px;}
section .Challenges .challenge-list { height: 25vw;}
}

@media only screen and (max-width: 1400px) and (min-width: 1362px){

section .key-features .content-sec .main-heading h2 { padding: 30px 0px;}
section .Challenges .challenge-list { height: 27vw;}
section .banner .main-content .content {
    padding-top: 243px;
    padding-bottom: 139px;
}
} 

@media (max-width: 1280px){

section .key-features .content-sec .main-heading h2 { padding: 15px 0px;}
section .Challenges .challenge-list { height: 28vw;}
section .banner .main-content .content {
    padding-top: 220px;
}
}

@media(max-width: 1214px){

section .key-features .content-sec .main-heading h2 { padding: 0px 0px;}
section .key-features .content-sec .content-listing { padding-top: 15px;}
section .Challenges .challenge-list { height: 30vw;}
section .banner .main-content .content { padding-top: 160px;}
}

@media (max-width: 1170px){

section .banner .main-content .content { position: relative;  z-index: 1; text-align: right;  padding-top: 190px;}
section .banner .main-content .content p { font-size: 15px; color: #000000;}
section .key-features .content-sec .content-listing p {  font-size: 15px;}
section .key-features .content-sec .main-heading h2 { padding: 10px 0px;}
section .Project-story .image-section img { width: 100%;}
section .Project-story .main-content p { font-size: 15px;}
section .Challenges .main-heading p { font-size: 15px;}
section .Challenges .challenge-list p { font-size: 15px;}
section .Challenges .challenge-list { height: 28vw;}
.swiper-slide { margin: 15px;}
}

@media (max-width: 1024px){

section .key-features .content-sec .content-listing { padding-top: 10px;}
section .key-features .content-sec {  padding-left: 20px; padding-right: 0px;}
section .Challenges .challenge-list { height: 33vw;}
.swiper-slide { margin: 25px;}

}

@media ( max-width: 800px){

section .banner .main-baner-image img { height: 65%;}
section .banner .main-content .content { padding-top: 90px; padding-bottom: 0px;}
section .banner .main-baner-image img { height: 110%;}
.sec-1 { min-height: 0px; position: relative;  margin-bottom: 39px;}
section .Project-story .image-section img { margin-top: 100px; padding-left: 0px;}
section .Challenges .challenge-list { height: 52vw;}
.swiper-slide { width: 340px !important;}
section .technical { padding: 1px 0px;}
section .technical .container .image-section img { width: 100%; padding-top: 95px;}
}

@media (max-width: 768px){

.swiper-slide { width: 293px !important;}

}

 @media(max-width: 767px){

section .key-features .image-section .image img { width: 105%; margin-top: 115px;}
section .banner .main-baner-image img { width: 101%; height: 190%;}
section .banner .main-content .content p { display: none;}
section .banner .main-content .content img { width: 40%;}
section .banner .main-content .content { padding-top: 134px;}
section .banner .main-content .content h2 { display: none;}
section .key-features .content-sec .main-heading h2 { padding: 25px 0px;}
section .Project-story .main-content p { font-size: 15px; padding-top: 10px;}
section .Challenges{ margin-top: 540px; }
section .Challenges .challenge-list {margin: 20px; height: 40vw;}
.swiper-slide { width: 284px !important;}

 }

@media(max-width: 640px){

section .Challenges .challenge-list {
    margin: 20px;
    height: 49vw;
}
.slider-sec { display: none;}

} 

@media( max-width: 480px){ 

section .Challenges .challenge-list {
    margin: 20px;
    height: 75vw;
}
section .technical .container .main-content {
    padding: 70px 30px;
    text-align: center;
}

 }


@media( max-width: 360px){

section .banner .main-baner-image img {
    width: 101%;
    height: 60%;
}
section .banner .main-content .content {
    padding-top: 85px;
}
section .key-features .image-section .image img {
    width: 110%;
    margin-top: -165px;
}
section .Challenges .main-heading {
    text-align: center;
    padding: 0px 0px;
}
section .Challenges .challenge-list {
    margin: 20px;
    height: 137vw;
}
section .Project-story .main-content {
    background-color: #ffffff;
    padding: 20px 20px;
    border-radius: 20px;
}

}


@media(max-width: 320px){



}