:root {
    --cyan: #5DFBFF; /* rgb: 93, 251, 255 */
    --navy: #032238; /*  rgb: 3, 34, 56 */
    --gap: 40px;
    --spacing: 4rem; /* Section spacing top and bottom */
    --overlap: 300px /* spacing for overlapping sections */
}


/* header:before{
    position: absolute;
    width: 100%;
    height: 400px;
    top: 40px;
    background: linear-gradient(0deg, rgba(6,47,66,0) 0%, rgba(6,47,66,.5) 50%, rgba(6,47,66,1) 80%, rgba(6,47,66,1) 100%);
}  */

#banner{
    z-index: 25;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    align-items: center;
}

main h2{
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1em;
    text-align: center;
    margin-bottom: .5em;
}

h2:after{
    content:'';
    display: block;
    width: 100px;
    height: 8px;
    background: #2FBEC2;
    margin: var(--gap) auto;
}


main.container{
    z-index: 20;
}

main section .textSection{
    padding: var(--spacing) 0;
}

#subBanner{
    position: relative;
    padding-top: 2rem;
    padding-bottom: var(--overlap);
    background: #35bcc5 url('/thumbnaillarge/Doctors-Sub_BG.jpg') no-repeat top center / contain;
    overflow: hidden;
    color: white;
}

#subBanner .container{
    overflow: hidden;
    max-width: 1400px;
}


#subBanner:before{
    content:'';
    position: absolute;
    width: 100%;
    height: 400px;
    top: 0px;
    background: linear-gradient(0deg, rgba(6,47,66,0) 0%, rgba(6,47,66,.5) 50%, rgba(6,47,66,1) 80%, rgba(6,47,66,1) 100%);
}

#subBanner:after{
    content: '';
    background: url(thumbnaillarge/DNA-Overlay.png) no-repeat center bottom / cover;
    width: 775px;
    height: 678px;
    display: block;
    position: absolute;
    top: 400px;
    right: -20px;
    z-index: 19;
}

#subBanner .grid .sub-text{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 8;
}

#subBanner .sub-text h1{
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 0.9em;
    text-align: left;
    margin-bottom: .5em;
}

#subBanner .sub-text h1 span{
    color: var(--cyan);
    display: block;
}

#subBanner .sub-text p{
    text-align: left;
    line-height: normal;
    font-size: 24px;
}

#subBanner .sub-text a.cta-btn.primary{
    display: flex;
    justify-content: center;
    align-content: center;
    width: auto;
    padding: .8em 2em;
    background: var(--navy);
    margin: 1em 0 0;
    color: white;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2em;
    text-align: left;
    transition: all .3s ease;
    cursor: pointer;
    text-shadow: none;
    border-color: var(--navy);
    box-shadow: 1px 1px 10px rgba(0,0,0,0);
}

.cta-btn.primary::before{
    display: none;
}

#subBanner .sub-text a.cta-btn.primary:hover{
    background:var(--navy) ;
    color:var(--cyan);
    box-shadow: 1px 1px 10px rgba(var(--cyan), 1);
}

#subBanner .grid .sub-med-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 14;
}

#subBanner .grid .sub-med-img img{
    width: 100%;
    max-width: 410px;
}

#subBanner .sub-features{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    justify-content: center;
    align-items: center;
    background: var(--navy);
    padding: 1em 1em;
    border-radius: 5em;
    font-size: .9em;
    position: absolute;
    bottom: 50px;
    right: 20px;
    z-index: 21;
    width: 100%;
    max-width: 550px;
}

#subBanner .sub-features .feature{
    width: 70px;
    height: 70px;
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    flex-wrap:wrap;
    text-align: center;
    line-height: 1em;
    font-size: 10px;
    line-height: 1em;
    padding: 3px;
    color: white;
}

#subBanner .sub-features .feature .feature-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: normal;
    text-transform: uppercase;
    font-style: normal;
    padding-top: 5px;
}

#subBanner .sub-features .feature .feature-icon img{
    width: 25px;
    height: auto;
    margin: 0;
    padding: 0;
}

#subBanner .sub-features .feature .star {
  display: inline-block;
  font-family: 'fontAwesome';
  color: #fff;
}

#subBanner .sub-features .feature .star:after {
  content: "\2605";
}

#section1 .textSection{
    padding: 0 0 var(--spacing);
}

#section1{
    position: relative;
    margin-top: calc(0px - var(--overlap));
}

#section1 .textSection:before{
    display: none;
}

#section1 .container,
#section3 .container,
#section5 .container{
    background: var(--navy);
    max-width: 1600px;
    color: white;
    border-radius: 20px;
    padding: 4em 100px;
    z-index: 20;
}

#section1 .container h2,
#section3 .container h2,
#section5 .container h2{
    color: white;
}

#section2 .container,
#section4 .container,
#section6 .container{
    max-width: 1400px;
}

section{
    padding: 0
}

#section1 .container{
    padding: 3em 100px;
}

#section1 .container h2{
    text-align: left;
    width: 100%;
    max-width: 400px;
}

#section1 .container h2:after{
    margin: var(--gap) 0;
}

#section1 .container .sect1-img{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sect1-img-bg{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 470px;
    height:360px;
    background: red;
    border-radius: 1em;
    background: linear-gradient(130deg, #30BFC3, #053558);
    position: absolute;
    /*! left: 90px; */
    bottom: 0;
    z-index: 5;
    overflow: hidden;
}

.sect1-img-bg img{
    width: 70%;
    transform: rotate(60deg);
}

#section1 .container .sect1-img img{
    position: relative;
    z-index: 10;
}

#section3 p{
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.recent-medical{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    width: 100%;
    margin: 4em auto;
}

.recent-medical .medical-website{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 10px 10px;
    position: relative;
    z-index: 2;
}

.recent-medical .medical-website img{
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;
}

.recent-medical .medical-website:after{
    content: '';
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height:0;
    padding-bottom: 80%;
    background-image: url(/RC-Screen.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.medical-services{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    width: 100%;
}

.service h3{
    font-size: 24px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
}

.service h3:after{
    content:'';
    display: block;
    width: 100px;
    height: 8px;
    background: #2FBEC2;
    margin-top: 30px;
    margin-bottom: 30px;
}

.medical-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    margin: 0 auto 1em;
}

.medical-cms{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    align-items: stretch
}

.medical-cms .service{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--gap);
    align-items: flex-start;
    padding: 2em;
    border: 1px solid #C3CFD8;
    border-radius: 10px;
}

.medical-cms .service .medical-icon{
    width: 100%;
    margin: 0;
}

#section5{
    position: relative;
    margin-bottom: 5rem;
}

#section5 .textSection{
    padding: var(--spacing) 0 1rem;
}

.reviews{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    align-items: stretch
}

.reviews .medical-review{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
    border: 2px solid #2FBEC2;
    padding: 1em;
    border-radius: 10px;
}

.reviews .medical-review .name{
    margin-top: 1em;
    font-weight: 700;
    font-size: .8em;
}

.reviews .medical-review .star{
    display: inline-block;
    font-family: 'fontAwesome';
    color: #F5BD0D;
    margin: 0em 0 1em;
}

.reviews .medical-review .medical-stars{
    display: block;
    width: 100%;
    height: auto;
    max-width: 120px;
    margin: 1em 0;
}

.reviews .medical-review p{
    font-size: .9em;
    line-height: 1.5em;
    margin-bottom: 1em;
}

.reviews .medical-review .domain{
    font-weight: 300;
    font-size: .8em;
    color: var(--cyan);
    align-self: flex-start;
    margin-top: auto;
    border: 1px solid var(--cyan);
    border-radius: 5em;
    padding: .5em 1em;
    text-transform: uppercase;
    line-height: normal;
    transition: all .3s ease;
}

.reviews .medical-review .domain:hover{
  background: var(--cyan);    
  color: var(--navy);
}

#footerTop {
    position: relative;
    background: linear-gradient(45deg, rgba(3,34,56,1) 20%, rgba(47,190,194,1) 100%);
    padding-top: var(--overlap);
    padding-top: 2em;
    background: #fff;
}

#footerTop:before{
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 200px;
    left: -200px;
    background: url(thumbnaillarge/dna-pattern.png) no-repeat center center / contain;
    height: 1200px;
    width: 400px;
}

#footerTop .formHolder{
    position: relative;
    background: none;
    padding: var(--spacing) 0 var(--spacing);
}

#footer-enquiry h2{
    text-transform: uppercase;
    font-weight: 900;
}

#footer-enquiry h2 strong{
    font-weight: 900;
}

#footer-enquiry h2:after{
    display: none;
}

#footerTop > .container{
    overflow: hidden;
}

#footerTop > .container:after{
    content: '';
    position: absolute;
    z-index: 1;
    top: 0px;
    right: -100px;
    background: url(thumbnaillarge/Stethoscope.png) no-repeat center center / contain;
    background: #eee;
    width: 518px;
    height: 465px;
    overflow: hidden;
    display: none;
}

#footerTop > .container #enquiry{
    position: relative;
    z-index: 30;
}









  
  
  
  
  
@media (min-width:702px) and (max-width: 920px){

    .outerWrap #subBanner .grid {
      grid-template-columns: 1fr;
    }

    #subBanner  .sub-features{
        left: calc(50% - 275px);
    }
    
}
  
  
  @media (min-width:702px) and (max-width: 1140px){
  
  :root {
      --gap: 20px;
      --spacing: 3rem; /* Section spacing top and bottom */
      --overlap: 300px /* spacing for overlapping sections */
    }
  
    .grid{
        grid-template-columns: 1fr 1fr;
    }
    
    .siteBottom h2{
        font-size: 30px;
    }
  
    .medical-services, 
    .recent-medical, 
    .reviews{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .outerWrap #subBanner{
        padding: 230px 0 300px;
    }
    
    .outerWrap #subBanner h1{
          font-size: 35px;
          max-width: 100%;
      }
    
    .outerWrap #subBanner p{
        font-size: 18px;
    }
    
    .outerWrap #subBanner .container{
        padding: 0 20px;
    }
    
    .outerWrap #subBanner:after{
        display: none;
    }
    
    .outerWrap #subBanner .grid .sub-text{
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .outerWrap #subBanner h1{
        text-align: center;
    }
    
    .outerWrap #subBanner p{
        text-align: center;
    }
  
    #section1 .container,
    #section3 .container,
    #section5 .container{
        border-radius: 0px;
        padding: 4em 20px;
    }
    
    #section1 .container h2{
        max-width: none;
    }
    
    .sect1-img-bg{
        height: 25vh;
        width: 100%;
        left: auto;
    }
    
    #section2 .textSection,
    #section4 .textSection{
        padding: 0 20px;
    }
    
    .service h4{
        font-size: 20px;
    }
    .service h4:after{
        margin: var(--gap) 0;
        width: 60px;
        height: 8px;
    }
    
    .medical-icon{
        width: 80px;
    }
    
      .medical-cms{
          grid-template-columns: 1fr 1fr;
      }
  
      .medical-cms .service{
          grid-template-columns: 1fr 4fr;
      }
    
    .medical-cms .service .medical-icon{
        max-width: 80px;
    }
    
    .recent-medical{
        gap: 15% 20px;
    }
    
    .recent-medical .medical-website::after{
        height:0;
        padding-bottom: 80%;
    }
    
    #footerTop:before{
        display: none;
       }
  
    #footerTop > .container:after{
        display: none;
    }
    
    #footerTop .container .formHolder h2{
        max-width: none;
    }

}
  
  
@media all and (max-width: 392px){
    #subBanner .sub-features{
        display: none;
    }
}





  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


@media all and (max-width: 701px){
    :root {
        --gap: 20px;
        --spacing: 3rem; /* Section spacing top and bottom */
        --overlap: 300px /* spacing for overlapping sections */
      }
  
      .grid{
          grid-template-columns: 1fr;
      }
      
      main h2{
          font-size: 30px;
      }
  
      .medical-services, 
      .recent-medical, 
      .reviews{
          grid-template-columns: repeat(2, 1fr);
      }
      
      .webp .outerWrap  .siteTop:before{
          top: -40px;
      }
      
      body main section#subBanner{
          background: #35bcc5 url('/thumbnaillarge/Doctors-Sub_BG.jpg') no-repeat top center / contain !important;
      }
    
      body main section#subBanner:before{
          height: 80%;
          background: linear-gradient(0deg, rgba(6,47,66,0) 0%, rgba(6,47,66,.5) 50%, rgba(6,47,66,1) 80%, rgba(6,47,66,1) 100%) !important;
        }
      
    
    
      #subBanner h1{
          font-size: 35px;
          max-width: 100%;
      }
      
      #subBanner p{
          font-size: 18px;
      }
      
      #subBanner .container{
          padding: 0 20px;
      }
      
      #subBanner:after{
          display: none;
      }
      
      #subBanner .grid .sub-text{
          justify-content: center;
          align-items: center;
          text-align: center;
      }
      
     #subBanner h1{
          text-align: center;
      }
      
      #subBanner p{
          text-align: center;
      }
      
      #subBanner  .sub-features{
        max-width: 390px;
        left: calc(50% - 195px);
      }
    
    #subBanner .sub-features .feature .feature-icon{
        font-size: 16px;
    }
    
    #subBanner .sub-features .feature{
        font-size: 9px;
    }
    
    #subBanner .sub-features .feature:nth-child(1){
        display: none;
    }
      
      #section1 .container,
      #section3 .container,
      #section5 .container{
          border-radius: 0px;
          padding: 4em 20px;
      }
      
      #section1 .container h2{
          max-width: none;
      }
      
      .sect1-img-bg{
          height: 25vh;
          width: 100%;
          left: auto;
      }
      
      #section2 .textSection,
      #section4 .textSection{
          padding: 0 20px;
      }
      
      .service h4{
          font-size: 20px;
      }
      .service h4:after{
          margin: var(--gap) 0;
          width: 60px;
          height: 8px;
      }
      
      .medical-icon{
          width: 80px;
      }
      
        .medical-cms{
            grid-template-columns: 1fr;
        }

        .medical-cms .service{
            grid-template-columns: 1fr 4fr;
        }
      
      .medical-cms .service .medical-icon{
          max-width: 80px;
      }
      
      .recent-medical{
          gap: 15% 20px;
      }
      
      .recent-medical .medical-website::after{
          height:0;
          padding-bottom: 80%;
      }
      
      #footerTop:before{
          display: none;
         }
  
      #footerTop > .container:after{
          display: none;
      }
      
      #footerTop .container .formHolder h2{
          max-width: none;
      }



    }