/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
 */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
    display: block;
 }


body {
   min-width: 320px;
   width: 100%;
   line-height: 1;
 }
 
 ol, ul {
    list-style: none;
 }

 blockquote, q {
    quotes: none;
 }

 blockquote:before, blockquote:after,
 q:before, q:after {
    content: '';
    content: none;
 }

 table {
    border-collapse: collapse;
    border-spacing: 0;
 }

 .white{
   color: #fff;
 }

 /*FONTS*/

 @font-face {
  font-family: Montserrat-Regular;
  src: url("../fonts/Montserrat-Regular.ttf");
}

@font-face {
  font-family: Montserrat-Medium;
  src: url("../fonts/Montserrat-Medium.ttf");
}

@font-face {
  font-family: Montserrat-SemiBold;
  src: url("../fonts/Montserrat-SemiBold.ttf");
}

@font-face {
  font-family: Montserrat-Bold;
  src: url("../fonts/Montserrat-Bold.ttf");
}

@font-face {
  font-family: Montserrat-Black;
  src: url("../fonts/Montserrat-Black.ttf");
}

body{
     font-family: Montserrat-Regular;
     font-size: 16px;
     line-height: 1.2em;
     overscroll-behavior: none;
}

#header{
   width: 100%;
   height: 100px;
   box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, .2);
   position: sticky; top: 0;
   background-color: #fff;
   z-index: 999;
}

#header-inner{
   margin: 0 auto;
   height: 100%;
   width: 1200px;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

#logo-wrapper{
   width: 150px;
}

#logo-wrapper img{
   width: 100%;
}

#nav{
   display: flex;
   align-items: center;
}

.menu-item{
   padding: .75em 1.2em;
   font-size: 16px;
   color: #1a123f;
   text-decoration: none;
   font-family: Montserrat-SemiBold;
   border-radius: 100px;
   white-space: nowrap;
}

.menu-item:hover{
   transition: background-color .3s;
   background-color: #A4E8E6;
}

.menu-button{
   margin-left: 1em;
   padding: .75em 1.2em;
   display: inline-block;
   background-color: #1a123f;
   font-size: 16px;
   color: #fff;
   border-radius: 50px;
   text-decoration: none;
   font-family: Montserrat-SemiBold;
   white-space: nowrap;
}

.menu-button:hover{
   transition: background-color .3s;
   background-color: #A4E8E6;
   color: #1a123f;
}

 .btn-dropdown{
   color: #1a123f;
   font-size: 16px;
   border: none;
   outline: none;
   background-color: transparent;
  	font-family: Montserrat-SemiBold;
   padding: .75em 1.2em;
   border-radius: 100px;
   margin: 0;
}

.dropdown{
    overflow: hidden;
    display: inline-block;
}

.dropdown-content {
   padding: 1em;
   border-radius: 12px;
   display: none;
   position: absolute;
   min-width: 160px;
	background-color: #6A2D91;
   z-index: 999;
	box-shadow: 1px 1px 4px 1px rgba(0,0,0,.2);
}

.dropdown-content a{
   padding: .75em 1.2em;
    z-index: 999;		
}

.btn-dropdown:hover{
	transition: .5s all;
    background-color: #A4E8E6;
    cursor: pointer;
}

.dropdown-content .menu-item{
	color: #fff;
}

.dropdown-content .menu-item:hover{
   color: #1a123f;
}

#menu-btn{
   padding: .5em 1.25em;
   border-radius: 100px;
	cursor: pointer;
   background-color: #1a123f;
   display: none;
}

.bar1, .bar2, .bar3{
	border-radius: 2px;
	width: 36px;
	height: 4px;
	background-color: #fff;
	margin: 6px auto;
	transition: 0.3s;
}

.blue{
   color:#A4E8E6;

}

.banner-home{
   height: calc(100vh - 100px);
   width: 100%;
   /*background-image: url('../img/hero-banner.png');*/
   background-size: cover;
   background-position: right;
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
}

.banner-home-text-wrapper{
   margin: 0 auto;
   width: 1200px;
   color: #fff;
   position: relative;
   z-index: 990;
}

#banner-home-title{
   font-family: Montserrat-Bold;
   font-size: 50px;
   line-height: 1.2em;
   opacity: 0;
   transform: translateY(50px);
}

#banner-home-text{
   margin-top: 20px;
   opacity: 0;
   transform: translateY(50px);
}

.background-video-wrapper{
   position: absolute;
   width: 100%;
   height: 100%;
}

.background-video{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.btn-blue{
   margin-top: 20px;
   padding: .75em 1.2em;
   text-decoration: none;
   display: inline-block;
   background-color: #A4E8E6;
   color: #1a123f;
   font-size: 16px;
   font-family: Montserrat-Bold;
   border-radius: 50px;
   cursor: pointer;
}

.btn-white{
   margin-top: 20px;
   padding: .75em 1.2em;
   text-decoration: none;
   display: inline-block;
   background-color: #fff;
   color: #1a123f;
   font-size: 16px;
   font-family: Montserrat-Bold;
   border-radius: 50px;
   cursor: pointer;
}

.btn-outline{
   margin-left: 20px;
   margin-top: 20px;
   padding: .75em 1.2em;
   text-decoration: none;
   display: inline-block;
   outline: 2px solid #A4E8E6;
   color: #fff;
   font-size: 16px;
   font-family: Montserrat-Bold;
   border-radius: 50px;
   cursor: pointer;
}

.btn-outline:hover{
   transition: all .5s;
   background-color: #fff;
   outline: none;
   color: #1a123f;
}

.btn-hidden{
   opacity: 0;
   transform: translateY(50px);
}

.btn-blue:hover{
   transition: background-color .3s;
   background-color: #1a123f;
   color: #fff;
}

.btn-purple, .btn-purple-white{
   margin-top: 20px;
   padding: .75em 1.2em;
   text-decoration: none;
   display: inline-block;
   background-color: #1a123f;
   color: #fff;
   font-size: 16px;
   font-family: Montserrat-Medium;
   border-radius: 50px;
   cursor: pointer;
   outline: none;
   border: none;
}

.btn-purple:hover, .btn-white:hover{
   transition: background-color .3s;
   background-color: #A4E8E6;
   color: #1a123f;
}

.btn-purple-white:hover{
   transition: background-color .3s;
   background-color: #fff;
   color: #1a123f;
}

/*TESTIMONIAL SECTION STYLES START*/

.testimonial-section-wrapper{
   margin: 0 auto;
   width: 1200px;
}

.testimonials-wrapper-outer{
   position: relative;
   opacity: 0;
   transform: translateY(100px);    
}

.testimonials-wrapper{
   margin: 30px auto;
   width: 900px;
   overflow: hidden;
}

.testimonials{
   display: flex;
   gap: 200px;
   transition: transform .3s;
}

.testimonial{
   padding: 10px;
   min-width: 100%;
   font-size: 20px;
   line-height: 1.5em;
   border-radius: 30px;
   box-sizing: border-box;
}

.testimonial-customer{
   margin-top: 40px;
   display: flex;
   align-items: center;
}

.testimonial-name{
   font-size: 22px;
}

.testimonial-title{
   font-size: 16px;
}

.testimonials-btn-wrapper{
   width: 1200px;
   position: absolute;
   bottom: calc(50% - 44px);
   left: 0px;
   display: flex;
   justify-content: space-between;
}

.testimonial-btn{
   width: 68px;
   height: 68px;
   border: none;
   outline: none;
   background-color: #1a123f;
   border-radius: 150px;
   display: flex;
   justify-content: center;
   align-items: center;
 cursor: pointer;
   transition: background-color .3s;
}

.testimonial-btn:hover{
   background-color: #000;
}

.testimonial-btn:hover img{
   transform: scale(1.1);
}

.testimonial-btn img{
   width: 30px;
   display: block;
   transition: transform .2s;
}

/*TESTIMONIAL SECTION STYLES END*/


.text-section{
   margin: 0 auto;
   width: 1200px;
   padding: 20px 0 30px 0;
}

.text-section-small{
   margin: 0 auto;
   width: 1000px;
   padding: 20px 0 30px 0;
}


.text-section-two-column{
   margin: 2em 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.section-two-column-fifty{
   margin-top: 2em;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   justify-content: space-between;
   gap: 30px;
}

.text-section-three-column{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.text-section-borderleft-small{
   margin-top: 2em;
   padding: 40px 20px;
   width: calc((100%/3) - 1em );
   background: #1A123F;
   background: linear-gradient(31deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 52%, rgba(170, 221, 223, 1) 100%);
   box-sizing: border-box;
   border-radius: 8px;
   box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, .2);
   display: flex;
   opacity: 0;
   align-items: center;

}

.text-section-borderleft-small .text-wrapper-borderleft{
   border-left: none;
}

.section-two-column-fifty .text-section-borderleft{
   margin-top: 0;
   padding: 30px;
   width: calc((100%/2) - 15px );
   font-size: 16px;
   background: #fff;
   box-sizing: border-box;
   border-radius: 8px;
   box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .3);
   flex-wrap: wrap;
   align-items: flex-start;
   align-content: flex-start;
}

.text-section-two-column .text-section-borderleft{
   margin-top: 0;
   padding: 2em 1em;
   width: calc((100%/2) - 10px);
   font-size: 16px;
   background: #1A123F;
   box-sizing: border-box;
   border-radius: 8px;
   box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, .2);
}


.border-line{
   display: none;
   height: 100%;
   min-width: 2px;
   max-width: 2px;
   background-color: #A4E8E6;
}

.section-two-column-fifty .text-section-borderleft .text-wrapper-borderleft{
   padding: 10px 0 0 0;
   width: 100%;
   border: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   align-content: center;
   color: #000;
}

.text-section-two-column .text-section-borderleft .text-wrapper-borderleft{
   border-left: 2px solid #fff;
   min-height: 250px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   align-content: center;
   color: #fff;
}

.section-two-column-fifty .frosted{
   background: rgba(255, 255, 255, 0.38);
   border-radius: 16px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.3);
}

.two-column-section{
   margin: 4em auto;
   width: 1200px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 1em;
}

.text-section-background{
   padding: 60px;
   width: 100%;
}

.top-left-corner{
   position: absolute;
   top: -70px;
   left: -80px;
}

.bottom-left-corner{
   position: absolute;
   bottom: -40px;
   left: -50px;
}

.bottom-right-corner{
   position: absolute;
   bottom: -70px;
   right: -80px;
}

.text-section-inner{
   margin: 80px auto;
   width: 1200px;
   position: relative;
}

.text-hidden{
   opacity: 0;
}

#wholesale{
   position: absolute;
   margin-top: -100px;
}

#text-section-home{
   background-image: url(../img/packaging_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#text-section-contract{
   background-image: url(../img/contract/baggies_lifestyle_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#two-column-section-antibiotic{
   background-image: url(../img/antibiotic/antibiotic_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#section-two-column-unit-dose{
   background-image: url(../img/antibiotic/antibiotic_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#section-hospital-services{
   background-image: url(../img/antibiotic/antibiotic_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#section-two-column-software{
   background-image: url(../img/dispensing/blister_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#section-software{
   background-image: url(../img/software/resources_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#two-column-packaging{

   background-image: url(../img/packaging/group_packaging_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

#two-column-ordering{
   background-image: url(../img/antibiotic/antibiotic_background.png);
   background-size: cover;
   background-position: left;
   box-sizing: border-box;
}

.text-column{
   width: 60%;
}

.text-column-large{
   width: 68%;
}

.img-column-small{
   width: 28%;
   border-radius: 10px;
   overflow: hidden;
   opacity: 0;

}

.img-column{
   width: 35%;
   position: relative;
   border-radius: 10px;
   overflow: hidden;
   opacity: 0;

}

#bedside-background{
   min-width: 390px;
   height: 470px;
   background-image: url(../img/unit-dose-repackaging/background-bedside-card.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;
}

.flip-card {
  width: 300px;
  height: 370px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;

}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; 
}

.flip-card-back {
  transform: rotateY(180deg); 
}

.flip-card-front img, .flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-column img{
   width: 100%;
   display: block;
}

.img-column-small img{
   width: 100%;
   display: block;
}

.section-title{
   font-family: Montserrat-Bold;
   font-size: 32px;
   line-height: 1.25em;
   color: #222;
   opacity: 0;

}

.section-title-white{
   font-family: Montserrat-Bold;
   font-size: 32px;
   line-height: 1.25em;
   color: #fff;
   opacity: 0;

}

.section-title-center{
   text-align: center;
   font-family: Montserrat-Bold;
   font-size: 32px;
   line-height: 1.25em;
   color: #222;
}

.section-title-center-white{
   text-align: center;
   font-family: Montserrat-Bold;
   font-size: 32px;
   line-height: 1.25em;
   color: #fff;
}

.dash{
   width: 0;
}

.dash-bottom{
   margin: 10px auto 12px auto;
   width: 40%;
   height: 2px;
   background-color: #A4E8E6;
}

.text-section-numbered{
   padding: 2em;
   margin-top: 2em;
   display: flex;
   align-items: center;
   background-color: #fff;
   border-radius: 16px;
}

.number{
   min-width: 70px;
   height: 70px;
   background-color: #1a123f;
   color:#A4E8E6;
   font-family: Montserrat-Bold;
   font-size: 40px;
   border-radius: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
}

.numbered-text-wrapper{
   margin: 0 0 0 30px;
   opacity: 0;
}

.sub-title{
   font-family: Montserrat-Bold;
   color: #222;
   font-size: 22px;
   line-height: 1.2em;
}

.sub-title-white{
   font-family: Montserrat-Bold;
   color: #fff;
   font-size: 22px;
   line-height: 1.2em;
}

.sub-title-small-white{
   font-family: Montserrat-Bold;
   color: #fff;
   font-size: 20px;
   line-height: 1.5em;
}

.sub-title-small-teal{
   font-family: Montserrat-Bold;
   color: #A4E8E6;
   font-size: 20px;
   line-height: 1.2em;
}

.text{
   margin-top: 12px;
   font-size: 16px;
   line-height: 1.5em;
}

.text-small{
   margin-top: 12px;
   font-size: 16px;
   line-height: 1.5em;
}

.text-large{
   margin-top: 12px;
   font-size: 20px;
   font-weight: 700;
   color: #6a2d91;
   line-height: 1.3em;
}

.text-white{
   margin-top: 12px;
   font-size: 17px;
   line-height: 1.5em;
   color: #fff;
}

.link-white{
   color: #fff;
}

.section{
   padding: 4em 0;
   margin: 0 auto;
   width: 1200px;
}

.blue-wrapper{
   padding: 2em 0;
   background: #1A123F;
   background: linear-gradient(31deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 52%, rgba(170, 221, 223, 1) 100%);
}

.center{
   text-align: center;
   opacity: 0;
   transform:translateY(100px);
}

.three-column-lrn-more{
   margin: 3em 0 0 0;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   opacity: 0;
   transform: translateY(-100px);
   gap: 20px;
}

.column-lrn-more{
   width: calc((100%/5) - 16px);
}

.lrn-more-icon{
   width: 130px;
   margin-bottom: 1em;
}

.lrn-more-icon img{
   width: 100%;
}

.lrn-more-text{
   margin-top: 12px;
   font-size: 14px;
   line-height: 1.5em;
}

.sub-title-small{
   font-family: Montserrat-Bold;
   color: #6A2D91;
   font-size: 20px;
   line-height: 1.1em;
}

.step-title{
   margin-bottom: 10px;
   padding: 5px 10px;
   font-family: Montserrat-Bold;
   color: #6A2D91;
   font-size: 16px;
   line-height: 1.1em;
   display: inline-block;
   border: 2px solid #A4E8E6;
}

.four-column-who-we-serve{
   margin: 2em auto 1em auto;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   opacity: 0;
}

.column-serve{
   width: calc((100%/3) - 13.33333px);
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   align-content: flex-start;
   box-sizing: border-box;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .2);
   background-color: #efefef;
}

.column-serve-top{
   width: 100%;
   height: 260px;
   background: #1a123f;
   background-size: cover;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   box-sizing: border-box;
   overflow: hidden;
}

.column-serve-bottom{
   padding: 20px;
   width: 100%;
   box-sizing: border-box;
}

.column-serve-text{
   padding: 20px;
}

.subtitle-light{
   color:#FFF;
   font-size: 25px;
   line-height: 1.2em;
   font-family: Montserrat-SemiBold;
}

/*INDEX*/

.img-column-blister{
   opacity: 0;
}

.who-we-serve-icon{
   position: absolute;
   top: 0;
   right: 0;
   height: 175px;
}

.white-section-wrapper{
   background-color: #fff;
   position: relative;
   overflow: hidden;
}

.light-section-wrapper{
   background-color: #EFEFEF;
   box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, .4);
}

.section-nomargin{
   margin: 0 auto;
   width: 1200px;
}

/*subpages*/

.banner{
   height: 400px;
   width: 100%;
   background-image: url(../img/gradient-background.png);
   background-size: cover;
   background-color: #a4e8e6;
   opacity: 0;
}

.banner-inner{
   margin: 0 auto;
   max-width: 1200px;
   height: 100%;
   display: flex;
   align-items: center;
   position: relative;
}

.banner-text-wrapper{
   border-radius: 10px;
   padding: 2em 0 2em 3em;
   color: #fff;
   box-sizing: border-box;
   width: 50%;
   position: relative;
}

.banner-text-wrapper::before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   border-left: 4px solid #fff;
   border-bottom: 4px solid #fff;
   border-bottom-left-radius: 10px; 
}


.banner-title{
   margin-bottom: .25em;
   font-size: 42px;
   line-height: 1.1em;
   font-family: Montserrat-Bold;
   opacity: 0;
   transform: translateY(50px);
}

.banner-text{
   font-size: 18px;
   line-height: 1.5em;
   opacity: 0;
   transform: translateY(50px);
}

.text-section-borderleft-full-wrapper{
   margin-top: 2em;
   background-color: #fff;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, .2);
}

.text-section-borderleft-full-wrapper .text-wrapper-borderleft{
   padding: 3em 2em;
   color: #000;
}

.text-section-borderleft-full-wrapper .text-section-borderleft{
   margin: 0;
   background-color: transparent;
   border-radius: 0px;
}

.text-section-borderleft{
   padding: 20px;
   margin-top: 2em;
   display: flex;
   align-items: center;
   opacity: 0;
   border-radius: 10px;
   background:#fff;
}

.text-wrapper-borderleft{
   padding: .25em 0 .25em 20px;
   border-left: 3px solid #6a2d91;
}

.icon img{
 width: 100px;
}

.icon-small{
   padding-right: 1em;
}

.icon-small img{
   width: 75px;
}

.icon-med{
   padding-right: 1em;
}

.icon-med img{
   width: 150px;
}

.text-wrapper-center{
   margin: 0 auto;
   width: 1000px;
   color: #FFF;
}

.three-column-outline{
   margin: 2em 0 0 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 2em;
   opacity: 0;
   transform: translateY(100px);
}

.three-column{
   margin: 2em 0 0 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 20px;
   opacity: 0;
   transform: translateY(100px);
}

.column-outline{
   padding: 2em;
   width: calc((100%/3) - 1.3333333em);
   background-color: #fff;
   box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .2);
   border-radius: 10px;
   box-sizing: border-box;
   overflow: hidden;
}

.column-full{
   width: calc((100%/2) - 10px);
   background-color: #fff;
   box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .2);
   border-radius: 10px;
   box-sizing: border-box;
   overflow: hidden;
}

.column-outline-white{
   padding: 2em;
   width: calc((100%/3) - 1.3333333em);
   background-color: #fff;
   box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .2);
   border-radius: 10px;
   box-sizing: border-box;
   overflow: hidden;
}

.column-outline-icon{
   margin-bottom: 20px
}

.column-outline-icon img{
   width: 75px;
}

.column-outline-full{
   width: 100%;
   overflow: hidden;
   max-height: 250px;
   min-height: 250px;
}

.column-outline-full img{
   width: 100%;
   min-height: 250px;
   max-width: none;
   display: block;
}

a.column-outline-white{
   padding: 0;
   text-decoration: none;
   transition: transform .3s;
}

a.column-outline-white:hover{
   transform: translateY(-6px);
   outline: 2px solid #333;
   box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, .4);
}

.column-outline-text{
   padding: 20px;
   height: 100%;
   background-color: #1a123f;
}

.packaging-section{
   margin: 2em auto 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 1em;
   opacity: 0;
   transform: translateY(100px);
}

.packaging-wide{
   width: calc((100%/3) - .7em);
   position: relative;
   background: #fff;
   box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .3);
   background-size: cover;
   border-radius: 10px;
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.packaging-img{
   height: 300px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.packaging-img img{
   height: 100%;
   width: 100%;
      object-fit: cover; 
   object-position: center; 
}

.card-hidden{
   opacity: 0;
   padding: 1em;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   text-align: center;
   position: absolute;
   top: 0;
   background: linear-gradient(31deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 52%, rgba(170, 221, 223, 1) 100%);
   color: #fff;
   line-height: 1.5em;
   transition: opacity .5s;
   overflow: hidden;
}

#card-hidden-blister-small{
   background-image: url(../img/packaging/blister-background-small.png);
   background-size: cover;
   background-position: center;
}

#card-hidden-blister{
   background-image: url(../img/packaging/blister-background.png);
   background-size: cover;
   background-position: center;
}

#card-hidden-hdpe{
   background-image: url(../img/packaging/hdpe-background.png);
   background-size: cover;
   background-position: center;
}

#card-hidden-cup{
   background-image: url(../img/packaging/unit-cup-background.png);
   background-size: cover;
   background-position: center;
}

#card-hidden-bag{
   background-image: url(../img/packaging/unit-bag-background.png);
   background-size: cover;
   background-position: center;
}

#card-hidden-kitting{
   background-image: url(../img/packaging/kitting-background.png);
   background-size: cover;
   background-position: center;
}

#card-hidden-relabel{
   background-image: url(../img/packaging/relabel-background.png);
   background-size: cover;
   background-position: center;
}

#card-hidden-bedside-card{
   background-image: url(../img/packaging/bedside-blister-background.png);
   background-size: cover;
   background-position: center;
}

.packaging-wide:hover{
   cursor: pointer;
}

.packaging-wide:hover .card-hidden{
   opacity: 1;
}

.column-serve:hover .card-hidden{
   opacity: 1;
}

.title-wrapper{
   width: 100%;
   background: #1A123F;
   background: linear-gradient(31deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 52%, rgba(170, 221, 223, 1) 100%);
   padding: 20px;
   text-align: center;
   box-sizing: border-box;
}

.title-wrapper-solid{
   width: 100%;
   background: #1A123F;
   padding: 20px;
   text-align: center;
   box-sizing: border-box;
}

.text-section-icon-left{
   padding: 2em;
   margin-top: 3em;
   display: flex;
   align-items: center;
   opacity: 0;
   background: rgba(106, 46, 145, 0.6);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 16px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
}

.text-section-icon{
   margin-right: 1em;
   min-width: 100px;
}

.text-section-icon img{
   width: 100px;
}

/*PACKAGING*/

.text-section-list{
   margin-top: 2em;
   padding: 2em 1em;
   opacity: 0;
   border-radius: 10px;
   background-color: #fff;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.number-item{
   padding: 5px 0;
   display: flex;
   align-items: center;
   opacity: 0;
}

.number-small{
   min-width: 28px;
   height: 28px;
   background-color: #1a123f;
   color:#A4E8E6;
   border-radius: 100px;
   font-family: Montserrat-SemiBold;
   font-size: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.number-text{
   margin-left: 10px;
   line-height: 1.5em;
}

/*About*/

.our-team-wrapper{
   margin: 4em auto;
   width: 1000px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
   gap: 3em;
   opacity: 0;
   transform: translateY(100px);
}

.team-member{
   width: calc((100%/3) - 2em );
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   cursor: pointer;
   text-decoration: none;
}

.team-img{
   min-width: 250px;
   min-height: 250px;
   border-radius: 300px;
   border: 4px solid #A4E8E6;
   overflow: hidden;
}

.team-img img{
   width: 100%;
   height: 100%;
   display: block;
   box-sizing: border-box;
   transition: transform .5s;
}

.team-member:hover .team-img img{
   transform: scale(1.1);
}

.team-member:hover .team-contact{
   transform: translateY(-4px);
}

.team-text-wrapper{
   width: 100%;
   margin-top: 1em;
   text-align: center;
}

.team-text{
   font-size: 18px;
   margin-top: 6px;
   color: #fff;
}

.team-contact{
   width: auto;
   padding: 10px 15px;
   font-size: 14px;
   display: inline-block;
   margin-top: 14px;
   background:#fff;
   color: #000;
   transition: transform .3s;
   border-radius: 20px;
   font-weight: 600;
}

/*FAQS*/

.faq-wrapper{
   max-width: 1200px;
   margin: 0 auto 1em auto;
   position: relative;
   opacity: 0;
   box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .2);
   border-radius: 8px;
}

.faq-title{
   padding: .75em 1em;
   background: #1A123F;
   background: linear-gradient(31deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 52%, rgba(170, 221, 223, 1) 100%);
   color: #fff;
   font-family: Montserrat-SemiBold;
   font-size: 20px;
   line-height: 1.2em;
   box-sizing: border-box;
   border-radius: 8px;
   cursor: pointer;
}

.active-title{
   border-radius: 8px 8px 0 0;
}

.faq-text{
   box-sizing: border-box;
   visibility: hidden;
   max-height: 0;
   overflow: hidden;
   border-radius: 0 0 8px 8px;
   background-color: #fff;

}

.active-faq-text{
   padding: 0 1em 1em 1em;
   transition: max-height .3s;
   visibility: visible;
   max-height: 500px;
}

.arrow{
   width: 24px;
   position: absolute;
   top: 26px;
   right: 1em;
   cursor: pointer;
   transition: transform .2s;
}

.active-arrow{
   transform: rotate(180deg);
}

.list{
   margin-left: 26px;
   font-size: 18px;
   margin-top: 12px;
   list-style: disc;
   list-style-position: outside;
}

.list-left{
   margin-left: 26px;
   text-align: left;
   font-size: 17px;
   list-style: disc;
   list-style-position: outside;
}

.list-left li{
   font-weight: 600;
   margin-bottom: 6px;
}

.medication-list{
   font-size: 16px;
   list-style: none;
   list-style-position: inside;
}

.medication-li{
   padding: 10px;
}

.medication-li:nth-child(odd) {
   background-color: #ffffff;
}

.medication-li:nth-child(even) {
  background-color: #f2f2f2;
}

/*Contact Section*/

.contact-section{
   width: 1200px;
   margin: 4em auto;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   box-sizing: border-box;
}

.contact-img{
   margin: 0 auto;
   width: 290px;
   border: 4px solid #A4E8E6;
   border-radius: 300px;
   box-sizing: border-box;
}

.contact-img img{
   width: 100%;
   border-radius: 300px;
   display: block;
}

.contact-form{
   width: 65%;
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
   opacity: 0;
}

.contact-info-wrapper{
   padding: 2em 1em;
   width: 30%;
   text-align: center;
   background: #1A123F;
   background: linear-gradient(31deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 52%, rgba(170, 221, 223, 1) 100%);
   color: #fff;
   box-sizing: border-box;
   border-radius: 8px;
   opacity: 0;
}

.contact-info{
   margin-top: 1em;
}

.text-contact{
   margin-top: 6px;
   text-decoration: none !important;
   color: #fff !important;
   display: block;
}

.title-white{
   color: #fff;
}

.title-large{
   margin-top: 20px;
   margin-bottom: 20px;
   color: #6A2D91;
   font-family: Montserrat-SemiBold;
   font-size: 26px;
   line-height: 1.2em;
}

.list li{
   margin-bottom: 8px;

}

/*form*/

.popup{
   padding: 2em;
   position: fixed;
   top: 50%;
   left: 50%;
   margin-top: -200px;
   margin-left: -250px;
   height: 400px;
   width: 500px;
   display: flex;
   align-items: center;
   z-index: 999;
   background-color: #fff;
   box-sizing: border-box;
   box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .2);
   border-radius: 10px;
   text-align: center;
}

.hidden{
   display: none;
}

#close-wrapper{
   width: 100%;
}

.popup-img{
   margin-bottom: 20px;
}

#quote{
   position: absolute;
   top: -60px;
}

#quote-form{
   background-color: #fff;
   padding: 2em;
   box-sizing: border-box;
   border-radius: 10px;
}

#section-contact-form{
   margin: 0 auto;
   width: 1000px;
   position: relative;
}

#demo-form{
   background-color: #fff;
   padding: 2em;
   box-sizing: border-box;
   border-radius: 10px;
}

.form-wrapper{
   margin-top: 2em;
   opacity: 0;
}

.form-section{
   margin-bottom: 1.5em;
   width: 100%;
}

.form-section-captcha{
   margin-bottom: .5em;
   width: 100%;
}

.form-section-two{
   margin-bottom: 1.5em;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.form-title{
   width: 100%;
   padding-left: 10px;
   color:#6A2D91;
   font-family: Montserrat-SemiBold;
   font-size: 22px;
   line-height: 1.2em;
   border-left: 3px solid #9B7DB9;
}

.input-text{
   margin-top: 1em;
   padding: 10px 15px;
   width: 100%;
   border: none;
   outline: none;
   font-family: Montserrat-Regular;
   font-size: 18px;
   box-sizing: border-box;
   background-color: #EFEFEF;
   border-radius: 50px;
   box-shadow: inset 0px 3px 5px 1px rgba(0,0,0,.1);
}

.input-text-half-wrapper{
   width: 49%;
}

.input-text::placeholder, .input-text-half::placeholder{
   color:#1a123f;
}

.form-text{
   margin-right: 10px;
   display: inline-block;
   line-height: 1.5em;
}

.form-list{
   margin-left: 40px;
   list-style-type: disc;
   list-style-position: outside;
   line-height: 1.5em;
}

.form-list li{
   margin-bottom: 10px;
}

.checkbox-wrapper{
   margin-top: 1em;
   font-family: Montserrat-Regular;
   color:#1a123f;
}

.input-select{
   margin-top: 1em;
   padding: 10px 15px;
   width: 100%;
   border: none;
   outline: none;
   font-family: Montserrat-Regular;
   font-size: 18px;
   color:#1a123f;
   background-color: #EFEFEF;
   border-radius: 50px;
   appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;  
   background-image: url('../img/form/arrow.png');
   background-repeat: no-repeat;
   background-size: 20px;
   background-position: calc(100% - 15px) center;
   box-shadow: inset 0px 3px 5px 1px rgba(0,0,0,.1);
}

.input-select option {
  background-color: #efefef;
  color: #000;
}


.input-error{
   margin-top: 4px;
   margin-left: 10px;
   display: inline-block;
   width: calc(100% - 10px);
}

input[type="checkbox"]{
   cursor: pointer;
}

.form-section-medication{
   padding: 1em;
   position: relative;
   background-color: #F9F9F9;
   box-sizing: border-box;
   border-radius: 10px;
   box-shadow: 0px 1px 5px 1px rgba(0,0,0,.2);
}

.form-section-medication:not(:first-child){
   margin-top: 1.5em;
}

.input-text-wrapper{
   display: flex;
   gap: 1em;
}

.input-half{
   margin-top: 1em;
   padding: 10px 15px;
   width: calc(50% - 20px);
   border: none;
   outline: none;
   font-family: Montserrat-Regular;
   font-size: 18px;
   background-color: transparent;
   background-color: #EFEFEF;
   border-radius: 50px;
   box-shadow: inset 0px 3px 5px 1px rgba(0,0,0,.1);
}

.input-half::placeholder{
   color:#1a123f;
}

.file-input{
   margin-top: 1em;
   padding: 10px;
   width: calc(100% - 10px);
   border: none;
   outline: none;
   font-family: Montserrat-Regular;
   font-size: 16px;
   box-sizing: border-box;
   background-color: #EFEFEF;
   border-radius: 50px;
   box-shadow: inset 0px 3px 5px 1px rgba(0,0,0,.1);
}

.file-input::file-selector-button{
   padding: 10px 15px;
   background-color: #1a123f;
   color: #fff;
   border-radius: 50px;
   cursor: pointer;
   outline: none;
   border: none;
   font-size: 16px;
}

.message{
   margin-top: 1em;
   padding: 1em;
   width: 100%;
   height: 200px;
   border: none;
   outline: none;
   font-family: Montserrat-Regular;
   font-size: 18px;
   background-color:#EFEFEF;
   resize: none;
   box-sizing: border-box;
   box-shadow: inset 0px 3px 5px 1px rgba(0,0,0,.1);
   border-radius: 25px;
}

.remove-field{
   position: absolute;
   top: 14px;
   right: 14px;
   cursor: pointer;
   font-size: 24px;
   color: firebrick;
   transition: transform .2s;
}

.remove-field:hover{
   transform: scale(1.1);
}

.facility-form-wrapper{
   min-height: 100vh;
   position: relative;
}

#facility-form-wrapper{
   position: absolute;
   top: -100px;
}

#canvasDiv{
   margin: 1em 0;
   height: 200px;
   width: calc(100% - 10px);
   background-color: #EFEFEF;
   box-shadow: inset 0px 3px 5px 1px rgba(0,0,0,.1);
   border-radius: 25px;
   display: grid;
    grid-template-columns: max-content;
    position: relative;
}

#canvas{
   position: absolute;
   width: 100%;
}

.active-fields{
   transition: max-height 1s;
	max-height: 4000px;
   overflow: hidden;
}


.inactive-fields{
   transition: max-height .5s;
	max-height: 0px;
   overflow: hidden;
}

.submit-wrapper{
   display: flex;
   gap: 20px;
}

.btn-purple-submit{
   padding: .75em 1.2em;
   text-decoration: none;
   display: inline-block;
   background-color: #1a123f;
   color: #fff;
   font-size: 16px;
   font-family: Montserrat-Medium;
   border-radius: 50px;
   cursor: pointer;
   outline: none;
   border: none;
}

.btn-purple-submit:hover{
   transition: background-color .3s;
   background-color: #A4E8E6;
   color: #1a123f;
}

#facility-form{

   overflow: hidden;
}

.form-tabs{
   display: flex;
   align-items: flex-start;
   align-content: flex-start;
   gap: 100px;
   transition: transform .3s;
}

.form-tab{
   align-self: flex-start;
   min-width: 100%;
   background-color: #fff;
   padding: 2em;
   box-sizing: border-box;
   border-radius: 10px;
   display: none;
}


/*BLOG*/

#editor{
   margin-top: 1em;
   margin-left: 10px;
   padding: 1em;
   width: calc(100% - 10px);
   height: 700px;
   border: none;
   outline: none;
   font-family: Montserrat-Regular;
   font-size: 18px;
   background-color:#EFEFEF;
   box-sizing: border-box;
   box-shadow: inset 0px 3px 5px 1px rgba(0,0,0,.1);
   border-radius: 25px;
}

.ql-toolbar{
   margin-top: 10px;
   margin-left: 10px;
   border-radius: 10px;
}

.blog-posts{
   margin-top: 2em;
   display: flex;
   flex-wrap: wrap;
   gap: 2em;
}

.blog-thumb{
   height: 200px;
   background-size: 100%; 
   background-position: top center;
   background-repeat: no-repeat;
}

.blog-link{
   text-decoration: none;
   color: #333;
}

.blog-text{
   padding: 1em;
}

.blog-date{
   font-size: 14px;
   color: #777;
}

.blog-title{
   margin-top: 10px;
   font-size: 20px;
   box-sizing: border-box;
   color: #6A2D91;
   font-family: Montserrat-Medium;
}

.blog-description{
   margin-top: 10px;
   font-size: 16px;
}

.blog-post{
   width: calc((100%/4) - 1.6em);
   background-color: #efefef;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .2);
}

.blog-post:hover{
   transition: transform .3s;
   transform: translateY(-10px);
   outline: 1px solid #1a123f;
} 

.blog-post:hover .blog-thumb{
   transition: background-size .2s;
   background-size: 105%;
}

.pagination-form{
   width: 100%;
}

.btn-back{
   display: inline-flex;
   align-items: center;
   align-content: center;
}


.back-arrow{
   width: 16px;
   margin-right: 10px;
   display: inline-block;
}

.blog-full-wrapper{
   margin-top: 1em;
}

.blog-thumb-full{
   min-height: 600px;
   background-position: center;
   background-repeat: no-repeat;
}

.blog-date-full{
   margin: 1em 0;
   font-size: 14px;
   color: #777;
}

.blog-divider{
   width: 100%;
   height: 1px;
   background-color: #A4E8E6;
   margin: 40px 0 0 0;
}

.blog-full-content h1, .ql-editor h1{
   font-family: Montserrat-Bold;
   font-size: 32px;
}

.blog-full-content h2, .ql-editor h2{
   font-family: Montserrat-SemiBold;
   font-size: 26px;
}

.blog-full-content p, .ql-editor p{
   margin-bottom: 10px!important;
}

em{
   font-style: italic;
}

strong{
   font-weight: bold;
}

.blog-full-content img{
   margin: 0 20px;
   max-width: 100%;
}

#blogedit-form{
   margin-top: 1em;
}

.background-divider{
   width: 4px;
   height: 100%;
   position: absolute;
   top: 0;
   left: 50%;
   background-color: #A4E8E6;
}

.banner-img{
   width: 50%;
   height: 100%;
}

#banner-contract{
   background-image: url(../img/contract/header.png);
   background-size: cover;
    background-position: center right;
}

#banner-wholesale{
   background-image: url(../img/wholesale/header.png);
   background-size: cover;
    background-position: center right;
}

#banner-antibiotic{
   background-image: url(../img/antibiotic/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-dispensing{
   background-image: url(../img/dispensing/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-software{
   background-image: url(../img/software/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-ordering{
   background-image: url(../img/ordering/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-repackaging{
   background-image: url(../img/repackaging/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-packaging{
   background-image: url(../img/packaging/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-additional-services{
   background-image: url(../img/additional-services/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-about{
   background-image: url(../img/about/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-faq{
   background-image: url(../img/faq/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-contact{
   background-image: url(../img/contact/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-unit-dose{
   background-image: url(../img/unit-dose-repackaging/header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-government{
   background-image: url(../img/who-we-serve/government-header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-clinic{
   background-image: url(../img/who-we-serve/clinic-header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

#banner-hospitals{
   background-image: url(../img/who-we-serve/hospital-header.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center right;
}

.nabp-section{
   padding: 2em 0;
   display: flex;
   gap: 2em;
   align-items: center;
}

#nabp-text{
   max-width: 600px;
}

footer{
   padding: 4em 2em;
   background-color: rgba(26, 18, 63, 1);
   box-sizing: border-box;
}

.footer-section{
   margin: 0 auto;
   width: 1200px;
   color: #fff;
}

#footer-top{
   display: flex;
   gap: 40px;
}

.footer-logo{
   width: 180px;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   border-radius: 8px;
}

.footer-logo img{
   width: 100%;
}

.footer-column{
   display: flex;
   flex-direction: column;
}

.footer-title{
   margin-bottom: .5em;
   font-family: Montserrat-SemiBold;
   font-size: 22px;
}

.footer-menu-item{
   margin-bottom: .5em;
   display: inline-block;
   text-decoration: none !important;
   color: #fff !important;
   font-size: 14px;
}

.footer-text{
   margin-bottom: .25em;
   display: inline-block;
   font-size: 14px;
}

#footer-divider{
   margin: 2em 0;
   width: 100%;
   height: 1px;
   background-color: #fff;
}

#footer-bottom{
   width: 100%;
   font-size: 18px;
   display: flex;
   justify-content: space-between;
}

/*Animations*/

.home-banner-reveal{
   animation: revealBanner 2s forwards;
}

.home-banner-text-reveal{
   animation: revealBannerText .5s .5s forwards;
}

.banner-reveal{
   animation: revealBanner 2s forwards;
}

.banner-text-reveal{
   animation: revealBannerText .5s .5s forwards;
}

.reveal-title{
   animation: revealTitle 1s forwards;
}

.reveal-text{
   animation: revealText 1s .5s forwards;
}

.reveal-number{
   animation: revealNumbers 1s .2s forwards;
}
.reveal-number2{
   animation: revealNumbers 1s .5s forwards;
}
.reveal-number3{
   animation: revealNumbers 1s .8s forwards;
}
.reveal-number4{
   animation: revealNumbers 1s 1.1s forwards;
}
.reveal-number5{
   animation: revealNumbers 1s 1.4s forwards;
}
.reveal-number6{
   animation: revealNumbers 1s 1.7s forwards;
}

.reveal-number-text{
   animation: revealText 1s .4s forwards;
}
.reveal-number-text2{
   animation: revealText 1s .7s forwards;
}
.reveal-number-text3{
   animation: revealText 1s 1s forwards;
}
.reveal-number-text4{
   animation: revealText 1s 1.3s forwards;
}
.reveal-number-text5{
   animation: revealText 1s 1.6s forwards;
}
.reveal-number-text6{
   animation: revealText 1s 1.9s forwards;
}

.reveal-img-column{
   animation: revealImgColumn .75s .5s forwards;
}

.reveal-section{
   animation: revealSection .4s .5s forwards ease-in-out;
}

.reveal-who-we-serve{
   animation: revealWhoWeServe .75s .5s forwards ease-in-out;
}

@keyframes revealBanner{
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes revealBannerText{
   0%  {opacity: 0; transform: translateY(50px);}
  100% {opacity: 1; transform: translateY(0px);}
}

@keyframes revealNumbers {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes revealTitle {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes revealText {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes revealImgColumn {
   0% {opacity: 0;}
   20% {opacity: 0;}
   100% {opacity: 1;}
}

@keyframes revealSection {
  0%  {opacity: 0; transform: translateY(100px);}
  100% {opacity: 1; transform: translateY(0px);}
}

@keyframes revealWhoWeServe {
  0%  {opacity: 0; }
  30%  {opacity: 0;}
  100% {opacity: 1;}
}

@media only screen and (max-width: 1500px){
   #footer-top{
      gap: 30px;
   }
   .footer-section{
      width: 100%;
   }
}

@media only screen and (max-width: 1450px){

   .contact-section{
      padding: 0 2em;
      box-sizing: border-box;
   }

   .banner-home-text-wrapper{
      padding: 0 20px;
   }

}

@media only screen and (max-width: 1300px){

   .text-section-inner{
      width: 100%;
   }

   .testimonial-section-wrapper{
      width: 100%;
      box-sizing: border-box;
   }

   .testimonials-wrapper{
      width: 100%;
      margin: 0;
      margin-bottom: 80px;
   }

   .testimonials-btn-wrapper{
      width: 200px;
      bottom: -80px;
      left: calc(50% - 100px);
      box-sizing: border-box;
   }

   .testimonial-customer{
      margin-top: 20px;
   }

   .testimonial{
      padding: 0;
   }

}

@media only screen and (max-width: 1200px){
   #header-inner{
      padding: 1em 2em;
      width: 100%;
   }

   .banner-home-text-wrapper{
      padding: 1em 2em 1.5em 2em;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
   }

   #banner-home{
      background-position: right;
   }

   #banner-home-title, #banner-home-text{
      width: 100%;
   }

   .banner-inner{
      padding: 0 2em;
      width: 100%;
      box-sizing: border-box;
   }

   .banner-text-inner{
      margin: 0 auto;
      width: 95%;
   }
   

   .three-column-outline{
      flex-wrap: wrap;
   }

   .column-outline-white {
      width: calc((100% / 2) - 1.3333333em);
   }

   .two-column-section{
      margin: 4em auto;
      padding: 0 2em;
      width: 100%;
      box-sizing: border-box;
   }

   .text-section-background{
      width: 100%;
      border-radius: 0px;
   }

   .four-column-lrn-more{
      gap: 2em;
      flex-wrap: wrap;
   }

   .three-column-lrn-more{
      margin-top: 0;
   }

   .column-lrn-more{
      margin-top: 3em;
      width: 45%;
   }

   .four-column-who-we-serve{
      flex-wrap: wrap;
   }

   .column-serve{
      width: calc((100%/3) - 1.33333333em);
   }

   .section{
      padding: 4em 2em;
      width: 100%;
      box-sizing: border-box;
   }
   
   .section-nomargin{
      padding: 4em 2em;
      width: 100%;
      box-sizing: border-box;
   }


   .text-section-small{
      width: 100%;
   }

   .packaging{
      width: calc((100%/2) - 1em);
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
   }

   .title-wrapper{
      width: 100%; 
      align-self: flex-end
   }

   .contact-section{
      width: 100%;
   }

   .contact-img{
      width: 100%;
   }

   .contact-img img{
      width: 100%;
   }

   .banner-inner{
      padding: 0;
      position: relative;
   }

   .banner-text-wrapper{
      margin-left: 30px;
      height: auto;
      width: 90%;
      z-index: 998;
      box-sizing: border-box;
   }

   .banner-text{
      width: 100%;
   }

   .banner-text-inner{
      margin: 0;
   }

   .text-section-inner, .text-section{
      width: 100%;
   }

   .background-divider{
      display: none;
   }

   #banner-dispensing, #banner-antibiotic, #banner-software, #banner-contract, #banner-wholesale, #banner-packaging, #banner-contact, #banner-ordering, #banner-about, #banner-faq, #banner-repackaging, #banner-hospitals, #banner-clinic, #banner-government, #banner-unit-dose{
      width: 100%;
      background-position: center;
   }

   .banner-img{
      width: 100%;
   }

   .top-left-corner{
      top: -50px;
      left: -30px;
   }

   .bottom-right-corner{
      bottom: -50px;
      right: -30px;
   }



   .footer-section{
      margin: 0 auto;
      width: 100%;
   }

   #footer-top{
      flex-wrap: wrap;
   }

   .footer-logo-wrapper{
      width: 100%;
   }
}
@media only screen and (min-width: 1150px){
   .dropdown:hover .dropdown-content{
      display: flex;
      flex-direction: column;
   }

   #nav{
      width: auto !important;
   }

}

@media only screen and (max-width: 1150px){
   #header-inner{
      position: relative;
   }

   #menu-btn{
      display: block;
   }

   #nav{
        padding: 2em 0;
        position: absolute;
        top: 100.3px;
        left: 0;
        z-index: 999;
        width: 0;
        overflow: hidden;
        flex-direction: column;
        background-color: #fff;
        transition: width .3s;
        border-radius: none;
        align-items: center;
    }

   .dropdown{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
   }

   .dropdown-content{
      margin-top: 12px;
        display: none;
        flex-direction: column;
        align-items: center;
        position: static;
        min-width: 160px;
        width: 90%;
        z-index: 999;
        border-radius: 8px;
        box-sizing: border-box;
    }
    

   .show{
		display: flex;
    	flex-direction: column;
	}

   .menu-button{
      margin: .5em 0 0 0;
   }

   /* MINUS-BACK ANIMATION */
   .minus-back .bar1 {
      animation: minus-back .5s forwards;
      background-color: #fff;
   }

   .minus-back-rev .bar1 {
      animation: minus-back-reverse .5s;
      background-color: #fff;
   }

   @keyframes minus-back{
      50%{transform: translateY(12px);}
      100%{transform: rotate(-45deg) translate(-11px, -5px); width: 20px;}
   }

   @keyframes minus-back-reverse{
      0%{transform: rotate(-45deg) translate(-11px, -5px); width: 20px;}
      100%{transform: rotate(0deg) translate(0, 0);}
   }

   .minus-back .bar2 {
      background-color: #fff;
   }

   .minus-back .bar3 {
      animation: minus-back3 .5s forwards;
      background-color: #fff;
   }

   .minus-back-rev .bar3 {
      animation: minus-back-reverse3 .5s ;
      background-color: #fff;
   }

   @keyframes minus-back3{
      50%{transform: translateY(-12px);}
      100%{transform: rotate(45deg) translate(-11px, 5px); width: 20px; }
   }

   @keyframes minus-back-reverse3{
      0%{transform: rotate(45deg) translate(-11px, 5px); width: 20px;}
      100%{transform: rotate(0deg) translate(0, 0);}
   }

   #banner-home-title{
      font-size: 50px;
   }

   .banner-title{
      font-size: 40px;
   }

   .section-title, .section-title-center, .section-title-center-white, .section-title-white{
      font-size: 28px;
   }

   .sub-title, .sub-title-white{
      font-size: 22px;
   }

   .sub-title-small, .sub-title-small-teal, .sub-title-small-white{
      font-size: 19px;
   }

   .arrow{
      width: 20px;
      top: 19px;
   }

   .two-column-section{
      flex-wrap: wrap;
   }


   body, .input-text, .text, .input-half, .input-select, .input-text-half, .form-text,  .footer-menu-item, .footer-text, .list{
      font-size: 16px;
   }

   .testimonial{
      font-size: 18px;
   }

   .list-left{
      font-size: 15px;
      line-height: 1.2em;
   }

   .btn-purple, .btn-blue, .btn-purple-submit{
      font-size: 16px;
   }

   .column-outline{
      width: 100%;
   }

   .our-team-wrapper{
      justify-content: space-around;
   }

   .team-member{
      width: 270px;
   }

   .team-img{
      min-width: 270px;
      min-height: 270px;
   }

   .section{
      margin: 0 auto;
      width: 100%;
   }


   .text-column{
      margin: 1em auto 0 auto;
      width: 100%;
      order:1;
   }

   .img-column{
      margin: 0 auto;
      width: 95%;
      order: 2;
   }

   .column-serve{
      width: calc((100%/2) - 1em);
   }

   .our-team-wrapper{
      width: 100%;
   }

   .team-member{
      width: 270px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
   }

   .contact-section{
      flex-wrap: wrap;
   }
   
   .contact-form{
      width: 100%;
   }

   .contact-info-wrapper{
      width: 100%;
   }

   .contact-img{
      width: 300px;
   }

   .text-wrapper-center{
      width: 100%;
   }

   .text-section-two-column .text-section-borderleft{
      width: 100%;
   }

   .text-section-two-column{
      gap: 40px;
   }

   .text-section-two-column .text-column{
      order: 2;
   }

   .text-section-two-column .img-column{
      order: 1;
   }



   .section-two-column-fifty .text-section-borderleft{
      width: 100%;
   }

}

@media only screen and (max-width: 1050px){
   .banner-home{
      /*background-image: url('../img/hero-mobile.png');*/
      background-position: center;
   }

   #section-contact-form{
      width: 100%;
   }

   .footer-column{
      width: calc(50% - 2em);
   }

   .column-serve-top{
      height: 300px;
   }
   
}



@media only screen and (max-width: 700px){

   .packaging{
      width: 100%;

   }

   .section-two-column-fifty{
      align-items: center;
   }

   .section-two-column-fifty .text-section-borderleft{
      width: 100%;
   }


   .text-section-borderleft{
      flex-wrap: wrap;
   }

   .icon-med{
      margin-bottom: 20px;
   }

   .icon-small img{
      width: 100px;
   }

   .text-section-two-column .text-section-borderleft .text-wrapper-borderleft{
      border: none;
      padding: 0;
      min-height: auto;
   }

   .top-left-corner, .bottom-right-corner{
      display: none;
   }

   .number{
      min-width: 50px;
      height: 50px;
      font-size: 30px;
   }

   .numbered-text-wrapper{
       margin: 15px 0 0 20px;
   }

   #header-inner{
      padding: 1em;
   }

   .section, .section-nomargin, footer, .text-section-background{
      padding: 2em 1em;
   }

   .two-column-section, .contact-section{
      padding: 0 1em;
   }

   .two-column-section, .four-column-who-we-serve{
      margin: 2em auto;
   }

   .column-outline-white {
      width: 100%;
   }



   .nabp-section{
      padding: 0;
   }

   .four-column-lrn-more{
      margin: 2em 0 0 0;
   }
   
   .packaging-section, .three-column-outline, .form-wrapper{
      margin: 2em 0;
   }

   .our-team-wrapper{
      gap: 2em;
   }

   .column-outline{
      padding: 20px;
   }

   .column-serve{
      width: 100%;
   }

   .column-serve-top{
      height: 260px;
   }

   .faq-title{
      font-size: 18px;
   }

   .banner-home-text-wrapper{
      padding: 1em;
   }

   .banner-text-wrapper{
      padding: 1em;
   }

   .banner-title{
      margin-bottom: 0;
   }

   .contact-img{
      width: 250px;
   }

   .column-full{
      width: 100%;
   }
   

   .team-text{
      font-size: 14px;
   }

   .input-text-half-wrapper{
      width: 100%;
   }

   .input-text-wrapper{
      flex-wrap: wrap;
      gap: 0;
   }

   .input-half{
      width: calc(100% - 24px);
   }

   #footer-top{
      gap: 1em;
   }

   .footer-column{
      width: 100%;
   }

   .text-section-borderleft-full-wrapper .text-section-borderleft{
      flex-wrap: wrap;
   }

   .text-section-borderleft-full-wrapper .icon-small{
      width: 100%;
      display: flex;
      justify-content: flex-start;
   }

   .text-section-borderleft-full-wrapper .text-wrapper-borderleft{
      padding: 0;
      border: 0;
   }

   .form-tab{
      padding: 20px;
   }

   
}

@media only screen and (max-width: 600px){
   .dash{
      width: 0;
   }

   .border-line{
      display: none;
   }

   #banner-home-title {
        font-size: 40px;
    }

    .banner-title{
      font-size: 34px;
    }

    .banner-text-wrapper{
      margin-left: 20px;
    }


   .nabp-section{
      flex-wrap: wrap;
   }

    .four-column-lrn-more {
        gap: 3em;
    }

   .column-lrn-more{
      width: 100%;
   }

   .column-serve{
      width: 100%; 
   }

   .text-section-two-column .text-section-borderleft .text-wrapper-borderleft{
      min-height: auto;
      padding: 0;
   }
   .text-section-two-column .text-section-borderleft{
      padding: 20px;
   }

   .text-section-numbered{
      margin-top: 50px;
      flex-wrap: wrap;
   }

   .number {
        min-width: 70px;
        height: 70px;
        font-size: 40px;
    }

   .numbered-text-wrapper {
        margin: 30px 0 0 0;
    }

   .text-section-icon-left{
      flex-wrap: wrap;

   }

   .text-section-icon{
      width: 100%;
      margin-bottom: 1em;
   }

   .text-section-icon img{
      min-width: 100px;
      max-width: 100px;
   }

 

   .text-section-borderleft{
      flex-wrap: wrap;
   }
   .icon-small{
      padding-left: 1em;
      margin-bottom: 1em;
      width: 100%;
      box-sizing: border-box;
   }

   .popup{
      margin-left: 0;
      left: 5%;
      top: 50%;
      margin-top: -25vh;
      width: 90%;
      height: 50vh;
   }

}

@media only screen and (max-width: 450px){
   .our-team-wrapper{
      justify-content: center;
   }
    .team-member{
      width: 90%;
   }

   .dropdown-content{
      text-align: center;
   }

   .dropdown-content .menu-item{
      white-space: pre-wrap;
   }

}