/* ----------- Non-Retina Screens ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  .banner-h5 {
    color: #464242;
    font-family: "Poppins!important";
    font-weight: 700;
    font-size: 3.5vh;
    line-height: normal;
  }

  .banner-btn {
    color: #295d5e !important;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 25px;
    font-weight: 700;
    font-family: "Poppins!important";
    font-size: 2vh;
  }

  .banner-p {
    padding-top: 0%;
    font-size: 2vh;
    line-height: normal;
  }

  .text-block {
    position: absolute;
    top: 20%;
    left: 5%;
    border-radius: 30px;
    background-color: #358b8d96;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    width: 50vh;
    border-radius: 50%;
    height: 50vh;
    text-align: center;
    padding: 7% 3% 3% 3%;
  }

  .text-block-1 {
    position: absolute;
    top: 8%;
    left: 18%;
    border-radius: 30px;
    background-color: #80808029;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    width: 40vh;
    border-radius: 50%;
    height: 40vh;
    text-align: center;
    padding: 7% 3% 3% 3%;
  }
}

@media screen and (min-width: 1600px){
  .banner-h5 {
    color: #464242;
    font-family: "Poppins!important";
    font-weight: 700;
    font-size: 3.5vh;
    line-height: normal;
  }

  .banner-btn {
    color: #295d5e !important;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 25px;
    font-weight: 700;
    font-family: "Poppins!important";
    font-size: 2vh;
  }

  .banner-p {
    padding-top: 0%;
    font-size: 2vh;
    line-height: normal;
  }

  .text-block {
    position: absolute;
    top: 20%;
    left: 5%;
    border-radius: 30px;
    background-color: #358b8d96;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    width: 50vh;
    border-radius: 50%;
    height: 50vh;
    text-align: center;
    padding: 11% 3% 3% 3%;
  }

  .text-block-1 {
    position: absolute;
    top: 8%;
    left: 18%;
    border-radius: 30px;
    background-color: #80808029;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    width: 40vh;
    border-radius: 50%;
    height: 40vh;
    text-align: center;
    padding: 7% 3% 3% 3%;
  }
}

/* ----------- Retina Screens ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
  .banner-h5 {
    color: #464242;
    font-family: "Poppins!important";
    font-weight: 700;
    font-size: 3.5vh;
    line-height: normal;
  }

  .banner-btn {
    color: #295d5e !important;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 25px;
    font-weight: 700;
    font-family: "Poppins!important";
    font-size: 2vh;
  }

  .banner-p {
    padding-top: 0%;
    font-size: 2vh;
    line-height: normal;
  }

  .text-block {
    position: absolute;
    top: 29%;
    left: 5%;
    border-radius: 30px;
    background-color: #358b8d96;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    width: 50vh;
    border-radius: 50%;
    height: 50vh;
    text-align: center;
    padding: 7% 3% 3% 3%;
  }

  .text-block-1 {
    position: absolute;
    top: 16%;
    left: 18%;
    border-radius: 30px;
    background-color: #80808029;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    width: 40vh;
    border-radius: 50%;
    height: 40vh;
    text-align: center;
    padding: 7% 3% 3% 3%;
  }
}

/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 280px) 
  and (max-device-width: 653px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .banner-h5 {
      color: #464242;
      font-family: "Poppins!important";
      font-weight: 700;
      font-size: 3.5vh;
      line-height: normal;
    }
  
    .banner-btn {
      color: #295d5e !important;
      background-color: #ffffff;
      border-color: #ffffff;
      border-radius: 25px;
      font-weight: 700;
      font-family: "Poppins!important";
      font-size: 2vh;
    }
  
    .banner-p {
      padding-top: 0%;
      font-size: 2vh;
      line-height: normal;
    }
  
    .text-block {
      position: absolute;
      bottom: 3%;
      left: 5%;
      border-radius: 30px;
      background-color: #358b8d96;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 91%;
      border-radius: 50%;
      height: 81%;
      text-align: center;
      padding: 20% 3% 3% 3%;
  }
  
    /* .text-block-1 {
      position: absolute;
      bottom: 40%;
      left: 18%;
      border-radius: 30px;
      background-color: #80808029;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 40vh;
      border-radius: 50%;
      height: 40vh;
      text-align: center;
      padding: 7% 3% 3% 3%;
    } */
    .pattern-layer{
      display:none;
    }
}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .banner-h5 {
      color: #464242;
      font-family: "Poppins!important";
      font-weight: 700;
      font-size: 3.5vh;
      line-height: normal;
    }
  
    .banner-btn {
      color: #295d5e !important;
      background-color: #ffffff;
      border-color: #ffffff;
      border-radius: 25px;
      font-weight: 700;
      font-family: "Poppins!important";
      font-size: 2vh;
    }
  
    .banner-p {
      padding-top: 0%;
      font-size: 2vh;
      line-height: normal;
    }
  
    .text-block {
      position: absolute;
      bottom: 3%;
      left: 5%;
      border-radius: 30px;
      background-color: #358b8d96;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 91%;
      border-radius: 50%;
      height: 81%;
      text-align: center;
      padding: 20% 3% 3% 3%;
  }
  
    /* .text-block-1 {
      position: absolute;
      bottom: 40%;
      left: 18%;
      border-radius: 30px;
      background-color: #80808029;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 40vh;
      border-radius: 50%;
      height: 40vh;
      text-align: center;
      padding: 7% 3% 3% 3%;
    } */
    .pattern-layer{
      display:none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
   
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

@media only screen 
  and (min-device-width: 540px) 
  and (max-device-width: 720px)
  and (-webkit-min-device-pixel-ratio: 1) {
    .banner-h5 {
      color: #464242;
      font-family: "Poppins!important";
      font-weight: 700;
      font-size: 3.5vh;
      line-height: normal;
    }
  
    .banner-btn {
      color: #295d5e !important;
      background-color: #ffffff;
      border-color: #ffffff;
      border-radius: 25px;
      font-weight: 700;
      font-family: "Poppins!important";
      font-size: 1.8vh;
    }
  
    .banner-p {
      padding-top: 0%;
      font-size: 2vh;
      line-height: normal;
    }
  
    .text-block {
      position: absolute;
      bottom: 3%;
      left: 5%;
      border-radius: 30px;
      background-color: #358b8d96;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 59%;
      border-radius: 50%;
      height: 61%;
      text-align: center;
      padding: 10% 3% 3% 3%;
  }
  
    /* .text-block-1 {
      position: absolute;
      bottom: 40%;
      left: 18%;
      border-radius: 30px;
      background-color: #80808029;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 40vh;
      border-radius: 50%;
      height: 40vh;
      text-align: center;
      padding: 7% 3% 3% 3%;
    } */
    
}


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
    .banner-h5 {
      color: #464242;
      font-family: "Poppins!important";
      font-weight: 700;
      font-size: 6vh;
      line-height: normal;
    }
  
    .banner-btn {
      color: #295d5e !important;
      background-color: #ffffff;
      border-color: #ffffff;
      border-radius: 25px;
      font-weight: 700;
      font-family: "Poppins!important";
      font-size: 3vh;
    }
  
    .banner-p {
      padding-top: 0%;
      font-size: 3vh;
      line-height: normal;
    }
    .text-block {
      position: absolute;
      bottom: 16%;
      left: 0%;
      border-radius: 30px;
      background-color: #358b8d96;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 45%;
      border-radius: 50%;
      height: 62%;
      text-align: center;
      padding: 10% 3% 3% 3%;
    }
    .text-block-1 {
      position: absolute;
      bottom: 44%;
      left: 23%;
      border-radius: 30px;
      background-color: #80808029;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 35%;
      border-radius: 50%;
      height: 52%;
      text-align: center;
      padding: 7% 3% 3% 3%;
  }
}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .banner-h5 {
      color: #464242;
      font-family: "Poppins!important";
      font-weight: 700;
      font-size: 2vh;
      line-height: normal;
    }
  
    .banner-btn {
      color: #295d5e !important;
      background-color: #ffffff;
      border-color: #ffffff;
      border-radius: 25px;
      font-weight: 700;
      font-family: "Poppins!important";
      font-size: 1.5vh;
    }
  
    .banner-p {
      padding-top: 0%;
      font-size: 1.5vh;
      line-height: normal;
    }
  
    .text-block {
      position: absolute;
      bottom: 2%;
      left: 5%;
      border-radius: 30px;
      background-color: #358b8d96;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 40vh;
      border-radius: 50%;
      height: 30vh;
      text-align: center;
      padding: 8% 3% 3% 3%;
  }
  
    .text-block-1 {
      position: absolute;
      bottom: 40%;
      left: 18%;
      border-radius: 30px;
      background-color: #80808029;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
      width: 40vh;
      border-radius: 50%;
      height: 40vh;
      text-align: center;
      padding: 7% 3% 3% 3%;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}