html {scroll-behavior: smooth;}
body {background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none; font-family: "Poppins", sans-serif;}
.padding-lr-30 {padding:0px 30px}
.padding-l-30 {padding-left:30px}
.padding-tlr-30 {padding:30px 30px 0px 30px}
.padding-tb-80 {padding-top:80px;padding-bottom:80px}
.padding-r-30 {padding-right:30px}
.padding-t-30 {padding-top:30px}
.padding-b-50 {padding-bottom:50px}
.mainsection {padding:50px 0px}
.padding-all-30 {padding:30px}
.padding-all-20 {padding:20px}
h1, h2, h3, h4, p {font-family: "Poppins", sans-serif}
h2 { font-size: 50px !important; font-weight: 600 !important;font-family: "Poppins", sans-serif}
h3 { font-size: 38px !important; font-weight: 600 !important;font-family: "Poppins", sans-serif}
p, li { font-size: 18px; line-height:28px;font-family: "Poppins", sans-serif}
p.font14, .font14 p { font-size: 14px; line-height:22px;font-family: "Poppins", sans-serif}
p.font17, .font17 p { font-size: 17px; line-height:25px;font-family: "Poppins", sans-serif}
p.font20, .font20 p { font-size: 20px; line-height:30px;font-family: "Poppins", sans-serif}

/*logo row */
.max1140 {max-width:1140px}
.marginauto {margin:auto}
.toplogos {display:flex; align-items: center; width:50%;padding:0px !important}
.toplogos .img1 {border-right: 1px solid #cccccc;}
.toplogos .img1 img {width: 90%; height:auto; max-height: 65px; object-fit: contain; }
.toplogos .img2 img {width: 90%; height:auto; max-height: 55px; object-fit: contain; object-position: left;padding-left:25px}
.toplogos .img1, .toplogos .img2 { display: flex; align-items: center;}
.logorow {background-color: #ffffff; padding:20px 0px}
.logorow > div {display: flex; justify-content: space-between;align-items: center;flex-wrap: wrap;}
.contact {color:#3c7dbc; font-size:16px; text-align:right; font-family: "Poppins", sans-serif}
.contact a {color:#3c7dbc; text-decoration: none; transition: 0.2s}
.contact a:hover {color:#5ecbf0; text-decoration: none}







/*********** MENU ***********/
.topnav {
  font-family: "Poppins", sans-serif;
  overflow: hidden;
  background-color:#033778;
}
.close {
  font-weight: normal !important;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 25px 12px 25px;
  text-decoration: none;
  font-size: 15px;
  border-bottom:4px solid #033778;
    transition: 0.3s

}

.topnav a:hover {
  background-color: #033778;
  color: white;
  text-decoration: none;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
  padding: 11px 15px 14px 15px;
  border-bottom:0px;
}
/*********** END MENU ***********/




/*********** header ***********/
.headerrow.hero {
  background-image: url(images/teah-helpline-header-2025.jpg);
  min-height:520px;
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}
.headercopyparent {
  width: 100%;
  background: #F2F2F2;
  background: linear-gradient(90deg,rgba(242, 242, 242, 0.8) 50%, rgba(255, 255, 255, 0) 70%);
  display: flex;
  flex-direction: column;
}
.headercopy {
  max-width: 1140px;
  width:100%;
  margin:auto;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;

}
.headercopy h2 {
  font-weight: 700;
  color:#407dbb;
  margin-top:-10px;
}
.headercopy p {
  color:#033778;
  margin-bottom:10px;
}
.headercopy sup {
  font-size:10px;
  top: -0.8em;
}
.contactbuttons a {
  background-color: #033778;
  border-radius: 25px;
  padding:7px 25px 9px 25px;
  color:#ffffff;
  font-size:18px;
  margin-right:10px;
  margin-top:20px;
  text-align: center;
  transition: 0.3s;
}
.contactbuttons.playstore {
  display: inline-block;
  padding-top:20px;
}
.contactbuttons.playstore a {
    background-color: #ffffff;
      text-align: left;
      padding-left:0px;
      padding-right: 0px;
}
.contactbuttons.playstore a img {
  width:80%;
  max-width: 179px;
}
.contactbuttons.playstore a:hover {
  background-color: #ffffff;
}
.contactbuttons a:hover {
  text-decoration: none;
  background-color: #074da5 ;
  color:#ffffff;
}
.contactbuttons {
  display:flex;
  flex-wrap: wrap;
}
.contactbuttons a > i {
  padding-right:8px;
}
/*********** End header ***********/









/*********** blue row ***********/
.bluerow {
  background-image: url(images/blueback-lines.gif);
}
.bluerow p {
 margin-bottom:0px;
}
.threeboxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom:70px;
}
.threeboxes > div {
  background-color: #ffffff;
  border-radius: 10px;
  max-width:330px;
  width:100%;
  text-align: center;
  padding:25px;
  margin-top:40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 15px;
  box-shadow: 0px 0px 14px #1d4a75;
}
.threeboxes > div img {
  width:100px;
  margin-bottom:15px;
}
.threeboxes h4 {
  color:#3c7dbc;
  margin-bottom:10px;
  font-size:22px;
  font-weight: 600;
}
/*********** End blue row ***********/









/*********** movie row ***********/
.movierow iframe {box-shadow: 0px 0px 14px #2f567b;}
.movierow > div {
  display: flex;
  justify-content: center; 
  flex-direction: column;align-items: center;
}
.movierow h3 {color:#033778}
.movierow {background-image: url(images/blueback-lines.gif);background-repeat: repeat-x;padding-top: 10px !important;}
  @media screen and (max-width: 550px) {
.movierow {background-position: center -15%}
  }
/********** END movie row **************/






/*********** how work row ***********/
.grayback {background-color: #f5f5f7}
.grayback.howrow {padding-bottom: 70px !important}
.info {display: flex; align-items: center}
.info .image {flex-grow: 0;flex-shrink: 0;max-width: 500px;}
.info .howbullets {margin:28px 0px}
.info .howbullets td:nth-child(2) {
  font-weight:600;
  font-size: 23px;
  color:#033778;
  line-height: 30px;
}

.info .howbullets td:nth-child(1) {
width:60px;
}
.info .howbullets td {
  padding-bottom:20px;
}

.info .howbullets tr:last-child td {
padding-bottom:0px;
}
/********** END how work row **************/





/********** try today row **************/
.darkblueback {background-image: url(images/darkblueback-lines.gif);}
.darkblueback .info .image {overflow: visible;}
.darkblueback .info .image img {margin-top:-60px}
.darkblueback .contactbuttons a {background-color: white; color:#033778; transition: 0.3s}
.darkblueback .contactbuttons a:hover {background-color: #5cccf1;}
.darkblueback h3, .darkblueback p {color:#ffffff}
.hours {  font-weight:600;
  font-size: 23px; line-height: 33px}

/********** END try today row **************/



/********** testimonials row **************/
.testimonials p, .testimonials h3 {text-align: center}
.testimonials .name {font-size: 22px; font-weight: 700; font-style:italic; margin-top:50px; color:#033778}
.cls-1 {fill: #5ecbf0;}
.testimonials svg {max-width:50px;height:auto; margin:0px 5px; width: 25%}
.testimonials .info {flex-direction: column;}
.stars {display: flex; flex-direction: row; margin-bottom:20px; width: 70%; justify-content: center; max-width: 648px;}
/********** END testimnials row **************/




/********** footer row **************/
.footer .logo {width:65%; max-width:300px; margin:auto;margin-bottom:20px}
.footer .copy {text-align: center;}
.footer .info {justify-content: center;}
.footerlinks a {padding:0px 10px; color:#ffffff; text-decoration: none;line-height: 30px;}
.footerlinks a:hover {color:#5ecbf0; text-decoration: none}
.footerlinks {display: flex; flex-wrap: wrap;justify-content: center;}
.footer .social img {width:60px; height:auto;padding:10px 10px 20px 10px}
/********** END footer row **************/




/**************** media queries *******************/


@media screen and (max-width: 992px) {
/********************* HOW IT WORKS *********************/
.info {flex-direction: column;}
.info .image {padding-top:20px}
.image.desktop {display: none}
.darkblueback .image.mobile {display: block;}
.darkblueback .image.mobile img {width:100%;}



/********************* TRY TODAY *********************/ 
.darkblueback .info {text-align: center}
.darkblueback {padding-bottom:50px}
.darkblueback .image img {width:70%}
}


@media screen and (min-width: 993px) {
.image.desktop {display: block}
.image.mobile {display: none}
}


@media screen and (min-width: 768px) {
  .topnav {margin-right: 0px;flex-wrap: wrap;
    display: flex !important; justify-content: center !important;}
    .topnav a:hover {
      border-bottom:4px solid #5cccf1;
      padding: 14px 25px 12px 25px
    }
  }




  @media screen and (max-width: 767px) {
    .tabbuttons {flex-direction: column;align-items: center;}
    .tabbuttons .tab {width:90%}
    .headerinfo .toplogos .img1, .headerinfo .toplogos .img2 {margin-bottom:15px; width:90% !important; height:80px !important; border:0px}
    .headerinfo .toplogos .img2 img, .headerinfo .toplogos .img1 img {max-height:70px; object-position: center;padding:0px}
    .headerinfo .contact {font-size:18px}

    .headerinfo div {
      width: 100%; display:block;
      text-align: center;
      justify-content: center; margin:auto}
      .topnav {
        background-color:transparent;
      }
      .topnav a {
        display: none;
      }
      .topnav a.icon {
        display: block;
        background-color:#033778; margin-right: 0px;
        position: fixed;
        top: 0;
        right: 0;
        background-color: transparent;
      }

      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive .fa-bars:before {
        content:'\f00d';
        font-weight: normal;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
      .topnav.responsive .fa.fa-bars.close:before, .topnav.responsive .fa.fa-bars.close {
        color:#ffffff !important;
        opacity: 1 !important;
        text-shadow:none;
      }
      .topnav .fa.fa-bars.close:before, .topnav .fa.fa-bars.close {
        color:#033778 !important;
        opacity: 1;
        text-shadow:none;
      }
      .topnav.responsive a.icon:hover {
        background-color: transparent;
      }
      .topnav.responsive a:hover {
        background-color: #074da5;
      }
      .topnav.responsive {
        background-color:#033778;
        position: fixed;
        width: 100%;
        top: 0;
        right: 0;
      }
    }


/*header mobile*/
@media screen and (max-width: 1200px) {
  .headercopyparent {
    background-image:url(none);
    background-color: rgb(251 251 251 / 90%) !important;
  }
  .headerrow.hero {
    background-position: 90% 80%;
  }
  .headercopy h2 {
    font-size:40px !important;
    text-align: center;
  }
  h3 {font-size:35px !important;}
  .headercopy > div {max-width:600px !important;
    margin:auto}
    .headercopy p {
      text-align: center;
    }
    .contactbuttons {
      justify-content: center;
    }
    

  }
  @media screen and (max-width: 550px) {
   .contactbuttons a {
    display:block;
    width:90%;
    margin-left:0;
    margin-right:0;
  }
     .contactbuttons.playstore a {display: inline}
  .threeboxes > div {max-width: 100%}
  .howrow .image.padding-lr-30, .support .image.padding-lr-30 {padding-left:0px;padding-right:0px}
  .movierow iframe {width:93% !important}
}

/**************** END media queries *******************/


/**************** TABS ***********************/

.tab-content {
            display: none;
            min-height:365px;
        }
.tab-content .copy {
            padding-top:15px;

        }
        .tab-content.info {
         align-items: flex-start; 
        }
.tabbuttons {
  display: flex;
  justify-content: center;
}
.tabbuttons .tab {
  background-color: #ececec;
    border-radius: 10px;
    padding: 7px 25px 9px 25px;
    color: #033778;
    font-size: 18px;
    margin:0px 7px;
    margin-top: 20px;
    text-align: center;
    transition: 0.3s;
    font-weight: 600;
    border:2px solid #ececec;
}
.tabbuttons .tab:hover, .tabbuttons .active {
  cursor: pointer;
  border:2px solid #5cccf1;
  background-color: #f5f5f7;

}