/*
  Template Name: Medozo - Health & Medical Premium HTML5 Template
  Theme URL: https://themeforest.net/user/dsathemes
  Description: Medozo - Health & Medical Premium HTML5 Template
  Author: DSAThemes
  Author URL: https://themeforest.net/user/dsathemes
  Version: 1.1.0
  Website: www.dsathemes.com
  Tags: DSAThemes, Medical, Health, Healthcare, Doctor, Family Doctor, Hospital, Clinic, Dental, Care
*/

:root {
  --main-font: "Onest", sans-serif;
  --base-font: 'Inter', sans-serif;
  --header-color: #023a65;
  --text-color: #6c757d;
  --azure: #f2f7f8;
  --black: #233645;
  --blue: #3d9be9;
  --catalina: #143359;
  --cloud: #f1f7fc;
  --cobalt: #005b96;
  --cyan: #00bde0;
  --ghost: #f9fcfd;
  --navy: #20265b;
  --pink: #f9669d;
  --royal: #004879;
  --silver: #ccc;
  --sky: #d7e5ee;
  --sky-blue: #39baf5;
  --smoke: #e7e7e7;
  --teal: #17a8d8;
  --white: #fff;
  --white-smoke: #f5f9fc;
  --yellow: #fbd043; 
  --tra-black: rgba(5, 5, 5, .05);
  --tra-gray: rgba(96, 96, 96, .13);
  --tra-white: rgba(255, 255, 255, .2); 
}

html {
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
} 
 
body {
  background-color: var(--white-smoke);
  font-family: var(--base-font);
  color: var(--text-color);
  font-weight: 400;
}

.main-font { 
  font-family: var(--main-font);
  line-height: 1.3;
}

.base-font { 
  font-family: var(--base-font); 
}

/*------------------------------------------*/
/*  BORDER RADIUS SETTING
/*------------------------------------------*/ 

.r-0 { border-radius: 0px; }
.r-02 { border-radius: 2px; }
.r-04 { border-radius: 4px; }
.r-06 { border-radius: 6px; }
.r-08 { border-radius: 8px; }
.r-10 { border-radius: 10px; }
.r-12 { border-radius: 12px; }
.r-14 { border-radius: 14px; }
.r-16 { border-radius: 16px; }
.r-18 { border-radius: 18px; }
.r-20 { border-radius: 20px; }
.r-22 { border-radius: 22px; }
.r-24 { border-radius: 24px; }
.r-26 { border-radius: 26px; }
.r-28 { border-radius: 28px; }
.r-30 { border-radius: 30px; }
.r-32 { border-radius: 32px; }
.r-34 { border-radius: 34px; }
.r-36 { border-radius: 36px; }

/*------------------------------------------*/
/*	PAGE CONTENT
/*------------------------------------------*/

#page { overflow: hidden; }

.bg--fixed,
.bg--scroll {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
}

.bg--scroll {
  background-attachment: fixed!important;
}

/*------------------------------------------*/
/*  SECTION DIVIDER
/*------------------------------------------*/

hr.divider {
  width: 100%;
  height: 1px;
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%);
  opacity: .4;
  border: none;
  margin: 0;
}

/*------------------------------------------*/
/*  HEADERS
/*------------------------------------------*/

h1, h2, h3, h4, h5, h6 {  
  font-family: var(--main-font);
  color: var(--header-color);
  font-weight: 600;
  margin-bottom: 0;
}

/*------------------------------------------*/
/*  CONTENT
/*------------------------------------------*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--header-color);
  text-decoration: none;
  transition: all 400ms ease-in-out; 
}

a:hover {
  color: var(--header-color);
  text-decoration: none;
}

a:focus {
  outline: none;
  text-decoration: none;
}

.img-fluid {
  display: inline-block; 
}

.btn {
  font-size: 0.975rem;
  line-height: 1;
  font-weight: 600;
  background-color: transparent;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  transition: all 400ms ease-in-out; 
}

.btn.btn-md {
  font-size: 1.05rem;
  padding: 0.9rem 1.8rem;
}

/*------------------------------------------*/
/*  WHITE BUTTON
/*------------------------------------------*/

.btn--white, 
.hover--white:hover, 
.color--white .btn--white, 
.color--white .hover--white:hover {
  color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important; 
}

.btn--tra-white, 
.hover--tra-white:hover, 
.color--white .hover--tra-white:hover {
  color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important; 
}

.scroll .hover--tra-white:hover {
  color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important; 
}

.scroll .hover--white:hover {
  color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important; 
}

/*------------------------------------------*/
/*  BLUE BUTTON
/*------------------------------------------*/

.btn--blue, .hover--blue:hover, .scroll .hover--blue:hover, .color--white .hover--blue:hover {
  color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important; 
}

.btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue {
  color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important; 
}

/*------------------------------------------*/
/*  MODULE SUBTITLE
/*------------------------------------------*/

.module-subtitle {
  display: block;
  font-size: 0.825rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 35px; 
}

/*------------------------------------------*/
/*  SECTION TITLE
/*------------------------------------------*/

.section-title {
  text-align: center;
  margin-bottom: 75px;
}

.section-title h2 {
  font-size: 3.45rem; 
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.section-title p {
  color: #444;
  font-size: 1.25rem;
  margin: 24px 14% 0;
}

.color--white,
.color--white a,
.color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white)!important; }

.color--blue,
.color--blue a,
.color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); }

/*------------------------------------------*/
/*  PRELOAD SPINNER   
/*------------------------------------------*/

#loading {
  background-color: var(--white);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 99999999;
  margin-top: 0px;
  top: 0px;
}

.cssload-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -35px;
  margin-left: -35px;
  width: 70px;
  height: 70px;
  border: 6px solid var(--blue);
  animation: cssload-loader 3.9s infinite ease;
}

.cssload-loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: var(--blue);
  animation: cssload-loader-inner 3.9s infinite ease-in;
}


@keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-o-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-ms-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-webkit-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-moz-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

/*------------------------------------------*/
/*   HEADER   
/*------------------------------------------*/

#header {
  width: 100%;
  display: block;
  padding-top: 0px;
}

.header-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.headerwp {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
}

.wsmainwp {
  max-width: 1320px;
}

.posrlt {
  position: relative;
}

/*------------------------------------------*/
/*  HEADER LOGO
/*------------------------------------------*/

.desktoplogo img {
  width: auto;
  max-width: inherit;
  max-height: 42px;
  transition: all 450ms ease-in-out;
}

/*------------------------------------------*/
/*  NAVIGATION MENU
/*------------------------------------------*/

.wsmainfull {
  width: 100%;
  height: auto;
  z-index: 1031;
  padding: 20px 0;
  background-color: transparent!important;
  box-shadow: none;
  transition: all 450ms ease-in-out; 
}

/*------------------------------------------*/
/*  HEADER LINK
/*------------------------------------------*/ 

.wsmenu > .wsmenu-list > li > a {
  display: block;
  font-size: 0.975rem;
  line-height: 60px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;  
  margin: 0 14px;
  padding: 10px 15px;
}

.navbar-dark .wsmenu > .wsmenu-list > li > a.h-link {
  color: var(--black);
}

.navbar-light .wsmenu > .wsmenu-list > li > a.h-link {
  color: var(--white);
}

/*------------------------------------------*/
/*  HEADER BUTTONS
/*------------------------------------------*/

.wsmenu > .wsmenu-list > li a.btn {
  font-size: 0.925rem;
  line-height: 30px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 17px;
  padding: 7px 24px;
}

.nl-simple.m-left .btn {
  margin-left: 60px;
}

/*------------------------------------------*/
/*  NAVBAR SCROLL
/*------------------------------------------*/

.tra-menu .wsmainfull.scroll,
.white-menu .wsmainfull.scroll {
  padding: 0;
  border: none;
  background-color: rgba(255, 255, 255, .7)!important;
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 3px var(--tra-gray);
}

.tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a.h-link, 
.tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a.h-link {
  color: var(--black);
}

.navbar-light .scroll .wsmenu-list > li > a.h-link:hover {
  color: var(--ink)!important;
}

/*------------------------------------------*/
/*  WHITE BUTTON
/*------------------------------------------*/

.scroll .btn--tra-white {
  color: var(--black)!important;
  border-color: var(--black)!important;
}

/*------------------------------------------*/
/*  LOGO IMAGE
/*------------------------------------------*/

.logo-white, 
.logo-black {
  display: block;
}

.navbar-dark .logo-white,
.navbar-light .logo-black,
.tra-menu.navbar-light .scroll .logo-white {
  display: none;
}

.tra-menu.navbar-light .scroll .logo-black {
  display: block;
}

/*------------------------------------------*/
/*  HERO    
/*------------------------------------------*/

#hero {
  position: relative;
  background-image: url(../images/hero.jpg); 
  padding: 185px 10% 140px;
}

.hero-txt .module-subtitle {
  font-size: 0.975rem; 
  letter-spacing: 6px;
  margin-bottom: 35px;  
}

.hero-txt h2 { 
  font-size: 5.35rem;
  line-height: 1.1;
  font-weight: 600;
}

.hero-txt h3 { 
  font-size: 3.525rem;
  line-height: 1;
  font-weight: 300;
  margin-top: 4px;
}

.hero-txt p {
  font-size: 1.3rem; 
  font-weight: 500;
  margin: 24px 12% 32px;
}

/*------------------------------------------*/
/*  SELECT    
/*------------------------------------------*/

#select,
#i-pages {   
  position: relative; 
  padding-top: 120px;
  padding-bottom: 60px;
  z-index: 3;
}

.select_link {
  position: relative;
  z-index: 3;
  margin: 0 5px 60px;
}

.hover-overlay {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  z-index: 999;
  -webkit-box-shadow: 0 3px 21px 0 rgb(0 0 0 / 7%);
  box-shadow: 0 3px 21px 0 rgb(0 0 0 / 7%);
  transition: all 400ms ease-in-out; 
}

.hover-overlay:hover {
  top: -12px;
}

.select_link p {
  color: #023a65;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 30px 0 0 10px;
}

.select_link span {
  position: absolute;
  right: 15px;
  bottom: 2px;
  color: #023a65;
  font-size: 1.1rem;
  font-weight: 700;
}

/*------------------------------------------*/
/*  BANNER
/*------------------------------------------*/

#banner-2 {
  background-image: url(../images/banner-2.jpg);
  padding: 110px 20%;
}

#banner-3 {
  background-image: url(../images/banner-3.jpg);
  margin: 50px 0;
}

#banner-4 {
  padding-top: 25px;
  padding-bottom: 100px;
}

.banner-2-txt h2 {
  font-size: 3.5rem;
}

.banner-3-txt h2,
.banner-4-txt h2 {
  font-size: 3.25rem;
}

.banner-2-txt p {
  font-size: 1.2rem;  
  margin: 22px 10% 30px;
}

.banner-3-txt p {
  font-size: 1.1rem;  
  margin: 22px 4% 30px 0;
}

.banner-4-txt p {
  font-size: 1.1rem;  
  margin: 22px 0 40px;
}

.devices {
  margin: 0 40px 0 0;
}

.devices img {
  width: auto;
  max-width: inherit;
  max-height: 65px;
}

.devices h6 {
  font-size: 0.935rem;
  line-height: 1;
  font-weight: 600;
  margin: 25px 0 3px;
}

.devices span {
  font-size: 0.935rem;
  font-weight: 500;
  margin-top: 18px;
}

.banner-3-img {
  position: relative;
  margin: -70px -35% -70px -15px;
  z-index: 8;
}

.banner-4-img {
  margin: 0 50px 0 0;
}

/*------------------------------------------*/
/*  FOOTER  
/*------------------------------------------*/   

.footer {
  text-align: center;
  padding: 50px 0 40px;
}

.footer p {
  font-size: 1.05rem; 
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 8px;
}

@media (min-width: 1200px) {

  html { font-size: 18px; }
  .division { padding-left: 30px; padding-right: 30px; }

  .wsmainwp { padding-left: 50px; padding-right: 50px; }
  .headerwp { padding-left: 40px; padding-right: 40px; }
  .desktoplogo img { max-height: 42px; }

}

@media (min-width: 992px) and (max-width: 1199.98px) {

  .division { padding-left: 20px; padding-right: 20px; }

  .btn.btn-md { font-size: 1.1rem; padding: 0.9rem 2rem; }

  .section-title { margin-bottom: 50px; }
  .module-subtitle { font-size: 0.95rem; margin-bottom: 28px; }
  .section-title h2 { font-size: 3.25rem; }
  
  .desktoplogo img { max-height: 40px; } 
  .wsmenu > .wsmenu-list > li > a { font-size: 1.1rem; }
  .wsmenu > .wsmenu-list > li a.btn { font-size: 1rem; padding: 5px 24px; }

  #hero { padding: 170px 5% 120px; }
  .hero-txt .module-subtitle { font-size: 0.9rem; margin-bottom: 40px; }
  .hero-txt h2 { font-size: 5.25rem; padding: 0 10%; line-height: 1.2; }
  .hero-txt h3 { font-size: 3.45rem; }
  .hero-txt p { font-size: 1.3rem; margin: 20px 10% 30px; }

  #select, #i-pages { padding-top: 100px; padding-bottom: 40px; }
  .select_link { margin: 0 0 55px; }

  #banner-2 { padding: 90px 10%; }
  #banner-3 { margin: 40px 0; }
  .banner-3-txt { margin-right: -20px; }
  .banner-4-txt { margin-top: 40px; }
  .banner-2-txt h2 { font-size: 3.45rem; padding: 0 3%; }
  .banner-3-txt h2, .banner-4-txt h2 { font-size: 3.125rem; }
  .banner-2-txt p { font-size: 1.2rem; margin: 15px 10% 30px; }
  .banner-3-txt p { font-size: 1.1rem; margin: 18px 0 25px; }
  .banner-4-txt p { font-size: 1.1rem; margin: 18px 0 30px; }

  .banner-3-img { margin: -40px -35% -40px -15px; }
  .banner-4-img { margin: 0 25px 0 0; }

  .devices { margin: 0; }
  .devices .col-sm-3 { padding: 0 5px; }
  .devices img { max-height: 54px; }
  .devices h6 { font-size: 0.95rem; margin: 20px 0 3px; }

  .footer { padding: 45px 0 35px; }
  .footer p { font-size: 1.1rem; }

}

@media (min-width: 768px) and (max-width: 991.98px) { 

  .section-title { margin-bottom: 55px; }
  .module-subtitle { font-size: 0.925rem; margin-bottom: 28px; }
  .section-title h2 { font-size: 3.15rem; }
  
  .headtoppart { display: none; }
  .wsmobileheader { height: 80px; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } 
  .tra-menu .wsmobileheader, .white-menu .wsmobileheader { background-color: var(--white); }
  .tra-menu.border-header .wsmainfull { border: none; }
  .wsmobileheader .smllogo { display: block; margin-top: 20px; padding-left: 22px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 40px; }
  .wsanimated-arrow { padding: 14px 22px 14px 0px; margin: 24px 28px 0 0; }
  .wsanimated-arrow span:before { top: -8px; width: 26px; }
  .wsanimated-arrow span:after { bottom: -8px; width: 20px; }

  .wsactive .wsanimated-arrow span:before, .wsactive .wsanimated-arrow.active span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span { background: transparent; }

  .wsmenu > .wsmenu-list > li > .wsmenu-click { height: 64px; }
  .wsmenu > .wsmenu-list > li > a { font-size: 1.1rem; line-height: 46px; padding: 5px 32px 6px 20px; margin: 0; }
  .tra-menu .wsmenu > .wsmenu-list > li > a.h-link, 
  .tra-menu.navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-color); }
  .wsmenu > .wsmenu-list > li a.btn {  
    font-size: 1.1rem;
    line-height: 44px; 
    border-width: 2px;
    padding: 5px 22px;
    margin: 0;
    border-radius: 0; 
  }

  #header .btn--tra-white, #header .btn--tra-black { 
    color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; 
  }

  #hero { margin-top: 80px; padding: 90px 2% 100px; }
  .hero-txt h2 { font-size: 4.5rem; line-height: 1.3; }
  .hero-txt h3 { font-size: 2.95rem; }
  .hero-txt p { font-size: 1.25rem; margin: 18px 6% 28px; }

  #select, #i-pages { padding-top: 90px; padding-bottom: 30px; }
  .select_link { margin: 0 0 50px; }

  #banner-2 { padding: 90px 2%; }
  #banner-3 { text-align: center; padding: 90px 0 0; margin-top: 0; margin-bottom: 80px; }
  #banner-4 { text-align: center; padding: 90px 0 0; }

  .banner-3-txt { padding: 0 7%; }

  .banner-2-txt h2 { font-size: 3.35rem; }
  .banner-3-txt h2, .banner-4-txt h2 { font-size: 3.15rem; }
  .banner-3-txt h2 { padding: 0 6%; }
  .banner-2-txt p { font-size: 1.25rem; margin: 18px 10% 30px; }
  .banner-3-txt p { font-size: 1.1rem; margin: 18px 0 30px; }
  .banner-4-txt p { font-size: 1.1rem; margin: 18px 6% 35px; }

  .banner-3-img { margin: 50px 0 -80px 0; }
  .banner-4-img { margin: 50px 4% 0; }

  .devices { margin: 0 12%0; }
  .devices .col-lg-3 { padding: 0 8px; }
  .devices img { max-height: 62px; }
  .devices h6 { font-size: 1.1rem; margin: 23px 0 3px; }
  .devices span { font-size: 1.05rem; }

  .footer { padding: 45px 0 35px; }
  .footer p { font-size: 1.1rem; }

}

@media (max-width: 767px) { 

  .animate__animated { transition-property: none !important; transform: none !important; animation: none !important; opacity: 1; }
  .wow { animation-name: none!important; visibility: visible!important; }
  .img-anim-right, .img-anim-left, .img-anim-top { opacity: 1!important; }

  .section-title { margin-bottom: 50px; }

  .headtoppart { display: none; }
  .wsmobileheader { height: 80px; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } 
  .tra-menu .wsmobileheader, .white-menu .wsmobileheader { background-color: var(--white); }
  .tra-menu.border-header .wsmainfull { border: none; }
  .wsmobileheader .smllogo { display: block; margin-top: 25px; padding-left: 22px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 34px; }
  .wsanimated-arrow { padding: 14px 22px 14px 0px; margin: 24px 28px 0 0; }
  .wsanimated-arrow span:before { top: -8px; width: 26px; }
  .wsanimated-arrow span:after { bottom: -8px; width: 20px; }

  .wsactive .wsanimated-arrow span:before, .wsactive .wsanimated-arrow.active span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span { background: transparent; }

  .wsmenu > .wsmenu-list > li > .wsmenu-click { height: 64px; }
  .wsmenu > .wsmenu-list > li > a { font-size: 1.2rem; line-height: 46px; padding: 5px 32px 6px 20px; margin: 0; }
  .tra-menu .wsmenu > .wsmenu-list > li > a.h-link, 
  .tra-menu.navbar-light .wsmenu > .wsmenu-list > li > a.h-link { color: var(--header-color); }
  .wsmenu > .wsmenu-list > li a.btn {  
    font-size: 1.1rem;
    line-height: 44px; 
    border-width: 2px;
    padding: 5px 22px;
    margin: 0;
    border-radius: 0; 
  }

  #header .btn--tra-white, #header .btn--tra-black { 
    color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important; 
  }

  #hero { margin-top: 80px; }

  .select_link { margin: 0 0 40px; }


  #banner-3 { text-align: center; padding: 90px 0 0; margin-bottom: 80px; }
  #banner-4 { text-align: center; padding: 90px 0 0; }
  .banner-3-img { margin: 50px 0 -80px 0; }
  .banner-4-img { margin: 50px 0 0; }

} 

@media (min-width: 480px) and (max-width: 767.98px) { 

  .section-title { margin-bottom: 45px; }
  .module-subtitle { font-size: 0.915rem; margin-bottom: 28px; }
  .section-title h2 { font-size: 2.85rem; padding: 0 3%; }
 
  .wsmobileheader .smllogo { display: block; margin-top: 21px; padding-left: 18px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 38px; }
  .wsmenu > .wsmenu-list > li > a, .wsmenu > .wsmenu-list > li a.btn { font-size: 1.05rem; }

  .wsmenu > .wsmenu-list { width: 345px; margin-right: -345px; }
  .wsactive .wsmobileheader { margin-right: 345px; }
  .overlapblackbg { width: calc(100% - 345px); }

  .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 18px 0 0; }

  #hero { padding: 100px 0; }
  .hero-txt .module-subtitle { font-size: 0.925rem; margin-bottom: 35px; }
  .hero-txt h2 { font-size: 3.85rem; line-height: 1.25; }
  .hero-txt h3 { font-size: 2.55rem; margin-top: 2px; }
  .hero-txt p { font-size: 1.1875rem; margin: 18px 3% 28px; }

  #select, #i-pages { padding-top: 80px; padding-bottom: 30px; }
  .select_link p { font-size: 1.25rem; margin: 25px 0 0 10px; }
  .select_link span { right: 15px; bottom: 0; font-size: 1.25rem; }

  #banner-2 { padding: 85px 0; }
  #banner-3 { margin-top: 0; margin-bottom: 60px; padding-top: 85px; }
  #banner-4 { padding-top: 80px; }
  .banner-2-txt h2 { font-size: 3rem; }
  .banner-3-txt h2 { font-size: 2.85rem; padding: 0 8%; }
  .banner-4-txt h2 { font-size: 2.85rem; }
  .banner-2-txt p { font-size: 1.15rem; margin: 20px 0 30px; }
  .banner-3-txt p { font-size: 1.15rem; margin: 20px 2% 30px; }
  .banner-4-txt p { font-size: 1.15rem; margin: 20px 0 35px; }

  .banner-3-img { margin: 40px 0 -60px 0; }

  .devices { margin: 0; }
  .devices img { max-height: 65px; }
  .devices h6 { font-size: 1.05rem; margin: 20px 0 3px; }
  .devices span { font-size: 1.05rem; }

  .footer { padding: 50px 0 35px; }
  .footer p { font-size: 1.0625rem; }

}

@media (min-width: 414px) and (max-width: 479.98px) {

  .section-title { margin-bottom: 40px; }
  .module-subtitle { font-size: 0.935rem; margin-bottom: 28px; }
  .section-title h2 { font-size: 2.35rem; }

  .wsmobileheader .smllogo { display: block; margin-top: 21px; padding-left: 16px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 38px; }
  .wsmenu > .wsmenu-list > li > a, .wsmenu > .wsmenu-list > li a.btn { font-size: 1.05rem; }

  .wsmenu > .wsmenu-list { width: 325px; margin-right: -325px; }
  .wsactive .wsmobileheader { margin-right: 325px; }
  .overlapblackbg { width: calc(100% - 325px); }

  .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 16px 0 0; }

  #hero { padding: 80px 0 90px; }
  .hero-txt .module-subtitle { font-size: 0.915rem; margin-bottom: 35px; }
  .hero-txt h2 { font-size: 4.45rem; line-height: 1.1; }
  .hero-txt h2 span { display: block; }
  .hero-txt h3 { font-size: 1.8rem; font-weight: 500; margin-top: 15px; }
  .hero-txt p { font-size: 1.15rem; margin: 18px 4% 28px; }

  #select, #i-pages { padding-top: 80px; padding-bottom: 25px; }
  .select_link { margin-bottom: 40px; }
  .select_link p { font-size: 1.25rem; margin: 25px 0 0 10px; }
  .select_link span { right: 15px; bottom: 0; font-size: 1.25rem; }

  #banner-2, #banner-4 { padding: 75px 0; }
  #banner-3 { margin-top: 0; margin-bottom: 60px; padding-top: 75px; }
  .banner-2-txt h2 { font-size: 2.35rem; }
  .banner-3-txt h2, .banner-4-txt h2 { font-size: 2.35rem; }
  .banner-2-txt p { font-size: 1.1rem; margin: 15px 6% 25px; }
  .banner-3-txt p { font-size: 1.05rem; margin: 15px 0 25px; }
  .banner-4-txt p { font-size: 1.05rem; margin: 15px 0 8px; }

  .banner-3-img { margin: 40px 0 -60px 0; }
  .banner-4-img { margin-top: 40px; }

  .devices { margin: 0; }
  .devices .col-sm-3 { margin-top: 20px; }
  .devices img { max-height: 65px; }
  .devices h6 { font-size: 1.1rem; margin: 22px 0 3px; }
  .devices span { font-size: 1.05rem; }

  .footer { padding-top: 50px; padding-bottom: 35px; }
  .footer p { font-size: 1.0625rem; }

}

@media (min-width: 390px) and (max-width: 413.98px) {

  .btn { font-size: 1rem; padding: 1.1rem 2rem; }
  .btn.btn-md { font-size: 1rem; padding: 1rem 2rem; }

  .section-title { margin-bottom: 40px; }
  .module-subtitle { font-size: 0.9rem; margin-bottom: 28px; }
  .section-title h2 { font-size: 2.2rem; }

  .wsmobileheader .smllogo { display: block; margin-top: 21px; padding-left: 16px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 38px; }
  .wsmenu > .wsmenu-list > li > a, .wsmenu > .wsmenu-list > li a.btn { font-size: 1.05rem; }

  .wsmenu > .wsmenu-list { width: 325px; margin-right: -325px; }
  .wsactive .wsmobileheader { margin-right: 325px; }
  .overlapblackbg { width: calc(100% - 325px); }

  .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 16px 0 0; }

  #hero { padding: 80px 0 90px; }
  .hero-txt .module-subtitle { font-size: 0.915rem; margin-bottom: 35px; }
  .hero-txt h2 { font-size: 4.35rem; line-height: 1.1; }
  .hero-txt h2 span { display: block; }
  .hero-txt h3 { font-size: 1.7rem; font-weight: 500; margin-top: 15px; }
  .hero-txt p { font-size: 1.15rem; margin: 16px 4% 25px; }

  #select, #i-pages { padding-top: 80px; padding-bottom: 25px; }
  .select_link { margin-bottom: 35px; }
  .select_link p { font-size: 1.2rem; margin: 25px 0 0 10px; }
  .select_link span { right: 15px; bottom: 0; font-size: 1.2rem; }

  #banner-2, #banner-4 { padding: 75px 0; }
  #banner-3 { margin-top: 0; margin-bottom: 60px; padding-top: 75px; }
  .banner-2-txt h2 { font-size: 2.35rem; }
  .banner-3-txt h2, .banner-4-txt h2 { font-size: 2.2rem; }
  .banner-2-txt p { font-size: 1.1rem; margin: 15px 2% 25px; }
  .banner-3-txt p { font-size: 1.0625rem; margin: 15px 0 25px; }
  .banner-4-txt p { font-size: 1.0625rem; margin: 15px 0 5px; }

  .banner-3-img { margin: 40px 0 -60px 0; }
  .banner-4-img { margin-top: 40px; }

  .devices { margin: 0; }
  .devices .col-sm-3 { margin-top: 20px; }
  .devices img { max-height: 62px; }
  .devices h6 { font-size: 1.1rem; margin: 22px 0 3px; }
  .devices span { font-size: 1.05rem; }

  .footer { padding-top: 50px; padding-bottom: 35px; }
  .footer p { font-size: 1.0625rem; }

}

@media (min-width: 321px) and (max-width: 389.98px) {

  .btn { font-size: 1rem; padding: 0.95rem 1.85rem; }
  .btn.btn-md { font-size: 1rem; padding: 1rem 2rem; }

  .section-title { margin-bottom: 40px; }
  .module-subtitle { font-size: 0.9rem; margin-bottom: 28px; }
  .section-title h2 { font-size: 2rem; }

  .wsmobileheader .smllogo { display: block; margin-top: 22px; padding-left: 16px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 36px; }
  .wsmenu > .wsmenu-list > li > a, .wsmenu > .wsmenu-list > li a.btn { font-size: 1.05rem; }

  .wsmenu > .wsmenu-list { width: 290px; margin-right: -290px; }
  .wsactive .wsmobileheader { margin-right: 290px; }
  .overlapblackbg { width: calc(100% - 290px); }

  .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 16px 0 0; }

  #hero { padding: 80px 0 90px; }
  .hero-txt .module-subtitle { font-size: 0.9rem; margin-bottom: 30px; }
  .hero-txt h2 { font-size: 3.9rem; line-height: 1.1; }
  .hero-txt h2 span { display: block; }
  .hero-txt h3 { font-size: 1.65rem; font-weight: 500; margin-top: 15px; }
  .hero-txt p { font-size: 1.1rem; margin: 16px 2% 22px; }

  #select, #i-pages { padding-top: 80px; padding-bottom: 25px; }
  .select_link { margin-bottom: 40px; }
  .select_link p { font-size: 1.2rem; margin: 25px 0 0 10px; }
  .select_link span { right: 15px; bottom: 0; font-size: 1.2rem; }

  #banner-2, #banner-4 { padding: 75px 0; }
  #banner-3 { margin-top: 0; margin-bottom: 60px; padding-top: 75px; }
  .banner-2-txt h2 { font-size: 2.15rem; }
  .banner-3-txt h2, .banner-4-txt h2 { font-size: 2rem; }
  .banner-2-txt p { font-size: 1.0625rem; margin: 15px 0 25px; }
  .banner-3-txt p { font-size: 1rem; margin: 15px 0 25px; }
  .banner-4-txt p { font-size: 1rem; margin: 15px 0 5px; }

  .banner-3-img { margin: 40px 0 -60px 0; }
  .banner-4-img { margin-top: 35px; }

  .devices { margin: 0; }
  .devices .col-sm-3 { margin-top: 20px; }
  .devices img { max-height: 62px; }
  .devices h6 { font-size: 1.1rem; margin: 22px 0 3px; }
  .devices span { font-size: 1.05rem; }

  .footer { padding-top: 50px; padding-bottom: 35px; }
  .footer p { font-size: 1.0625rem; }

}

@media (max-width: 320.98px) { 

  .btn { font-size: 1rem; padding: 0.95rem 1.85rem; }
  .btn.btn-md { font-size: 1rem; padding: 1rem 2rem; }

  .section-title { margin-bottom: 40px; }
  .module-subtitle { font-size: 0.85rem; margin-bottom: 28px; }
  .section-title h2 { font-size: 1.8rem; }

  .wsmobileheader .smllogo { display: block; margin-top: 22px; padding-left: 15px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 36px; }
  .wsmenu > .wsmenu-list > li > a, .wsmenu > .wsmenu-list > li a.btn { font-size: 1.05rem; }

  .wsmenu > .wsmenu-list { width: 250px; margin-right: -250px; }
  .wsactive .wsmobileheader { margin-right: 250px; }
  .overlapblackbg { width: calc(100% - 250px); }

  .wsanimated-arrow { padding: 14px 30px 14px 0px; margin: 25px 15px 0 0; }

   #hero { padding: 70px 0 80px; }
  .hero-txt .module-subtitle { font-size: 0.8rem; margin-bottom: 28px; }
  .hero-txt h2 { font-size: 3.5rem; line-height: 1.1; }
  .hero-txt h2 span { display: block; }
  .hero-txt h3 { font-size: 1.45rem; font-weight: 500; margin-top: 15px; }
  .hero-txt p { font-size: 1.1rem; margin: 16px 0 22px; }

  #select, #i-pages { padding-top: 80px; padding-bottom: 25px; }
  .select_link { margin-bottom: 35px; }
  .select_link p { font-size: 1.2rem; margin: 25px 0 0 10px; }
  .select_link span { right: 15px; bottom: 0; font-size: 1.2rem; }

  #banner-2, #banner-4 { padding: 65px 0; }
  #banner-3 { margin-top: 0; margin-bottom: 60px; padding-top: 80px; }

  .banner-2-txt h2 { font-size: 2rem; padding: 0 5%; }
  .banner-3-txt h2, .banner-4-txt h2 { font-size: 1.8rem; }
  .banner-2-txt p { font-size: 1rem; margin: 15px 0 22px; }
  .banner-3-txt p { font-size: 1rem; margin: 15px 0 22px; }
  .banner-4-txt p { font-size: 1rem; margin: 15px 0 5px; }

  .banner-3-img { margin: 40px 0 -60px 0; }
  .banner-4-img { margin-top: 35px; }

  .devices { margin: 0; }
  .devices .col-sm-3 { margin-top: 20px; }
  .devices img { max-height: 60px; }
  .devices h6 { font-size: 1.1rem; margin: 22px 0 3px; }
  .devices span { font-size: 1.05rem; }

  .footer { padding-top: 50px; padding-bottom: 35px; }
  .footer p { font-size: 1rem; }

}