/* 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;
   line-height: 1;
   overflow-x: hidden;
 }
 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;
 }

 /*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: 1400px;
   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: 18px;
   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: 18px;
   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: 18px;
   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;
   display: inline-block;
}

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


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

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

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

.btn-blue{
   margin-top: 20px;
   padding: .75em 1.2em;
   text-decoration: none;
   display: inline-block;
   background-color: #A4E8E6;
   color: #1a123f;
   font-size: 18px;
   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: 18px;
   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: #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: 18px;
   font-family: Montserrat-Medium;
   border-radius: 50px;
   cursor: pointer;
   outline: none;
   border: none;
}

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

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

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

.text-section-two-column .text-section-borderleft{
   margin-top: 2em;
   padding: 1em;
   width: calc((100%/2) - 1em );
   font-size: 16px;
   background-color: rgba(26, 18, 63, 1);
   background: linear-gradient(128deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 100%);
   box-sizing: border-box;
   border-radius: 8px;
   box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, .2);
}

.border-line{
   height: 90%;
   min-width: 3px;
   background-color: #A4E8E6;
}

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


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

.two-column-background{
   margin: 4em auto;
   padding: 4em;
   width: 1400px;
   border-radius: 10px;
}

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

#two-column-section-contract{

   background-image: url(../img/contract/baggies_lifestyle_background.png);
   background-size: cover;
   background-position: right;
   box-sizing: border-box;
}

#two-column-section-antibiotic{

   background-image: url(../img/antibiotic/antibiotic_background.png);
   background-size: cover;
   background-position: right;
   box-sizing: border-box;
}

#section-two-column-software{

   background-image: url(../img/dispensing/blister_background.png);
   background-size: cover;
   background-position: right;
   box-sizing: border-box;
}

#section-productivity{

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

#two-column-packaging{

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

#two-column-ordering{

   background-image: url(../img/ordering/order_background.png);
   background-size: cover;
   background-position: right;
   box-sizing: border-box;
}


.text-column{
   width: 50%;
}

.section-title{
   display: flex;
   align-items: center;
   font-family: Montserrat-Bold;
   font-size: 34px;
   line-height: 1.1em;
   color: #6A2D91;
   opacity: 0;
   transform: translateX(100px);
}

.section-title-white{
   display: flex;
   align-items: center;
   font-family: Montserrat-Bold;
   font-size: 34px;
   line-height: 1.1em;
   color: #fff;
   opacity: 0;
   transform: translateX(100px);
}

.section-title-center{
   font-family: Montserrat-Bold;
   font-size: 34px;
   line-height: 1.1em;
   color: #A4E8E6;
}

.dash{
   width: 0;
}

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

.img-column{
   width: 45%;
   border-radius: 10px;
   overflow: hidden;
   opacity: 0;
   transform: translateX(100px);
}

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

.text-section-numbered{
   padding: 2em;
   margin-top: 2em;
   display: flex;
   align-items: center;
   background: rgba(106, 45, 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);
   color: #fff;
}

.number{
   min-width: 70px;
   height: 70px;
   background-color: #1a123f;
   color:#A4E8E6;
   font-family: Montserrat-SemiBold;
   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-SemiBold;
   color: #6A2D91;
   font-size: 26px;
   line-height: 1.1em;
}

.sub-title-white{
   font-family: Montserrat-SemiBold;
   color: #fff;
   font-size: 26px;
   line-height: 1.1em;
}

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

.sub-title-small-teal{
   font-family: Montserrat-SemiBold;
   color: #A4E8E6;
   font-size: 22px;
   line-height: 1.1em;
}

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

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

.link-white{
   color: #fff;
}

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



.blue-wrapper{
   padding: 2em 0;
   background-color: rgba(26, 18, 63, 1);
   background: linear-gradient(128deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 100%);
}

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

.four-column-lrn-more{
   margin: 3em 0 0 0;
   display: flex;
   justify-content: space-between;
   opacity: 0;
   transform: translateY(-100px);
}

.column-lrn-more{
   width: 320px;
}

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

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

.sub-title-small{
   font-family: Montserrat-SemiBold;
   color: #6A2D91;
   font-size: 22px;
}


.four-column-who-we-serve{
   margin: 3em auto;
   display: flex;
   flex-wrap: wrap;
   gap: 2em;
   transform: translateX(200px);
   opacity: 0;
}

.column-serve{
   padding: 1em;
   width: calc((100%/4) - 1.5em);
   height: 170px;
   background-color: #1a123f;
   background: linear-gradient(128deg, rgb(26, 18, 63) 0%, rgb(108, 46, 144) 100%);
   position: relative;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   border-radius: 10px;
   overflow: hidden;
}

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

/*INDEX*/

.img-column-blister{
   opacity: 0;
   transform: translateX(100px);
}

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

.white-section-wrapper{
   padding: 2em 0;
   background-color: #fff;
}

.light-section-wrapper{
   padding: 2em 0;
   background-color: #EFEFEF;
}

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

/*subpages*/

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


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

.banner-text-wrapper{
   padding: 2em 2em 2em 0;
   color: #fff;
   box-sizing: border-box;
   width: 50%;
   display: flex;
   justify-content: flex-end;
}

.banner-text-inner{
   width: 665px;
}

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

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

.text-section-borderleft-full-wrapper{
   margin-top: 2em;
   background-color: #efefef;
   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-full-wrapper .icon-small{
   padding: 1em 2em 1em 0;
}

.text-section-borderleft-full-wrapper .icon-small img{
   width: 90px;
}



.text-section-borderleft{
   padding: 2em;
   margin-top: 2em;
   display: flex;
   align-items: center;
   opacity: 0;
   color: #fff;
   border-radius: 10px;
   background: rgba(106, 45, 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);
}


.text-wrapper-borderleft{
   padding: .25em 0 .25em 1em;
   border-left: 3px solid #9B7DB9;
   color: #fff;
}

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

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

.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);
}

:root {
   --mouse-x: 128deg;
}

.column-outline{
   padding: 2em;
   width: calc((100%/3) - 1.3333333em);
   background-color: rgba(26, 18, 63, 1);
   background: linear-gradient(128deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 100%);
   border-radius: 10px;
   color: #fff;
   box-sizing: border-box;
}

.column-outline-white{
   padding: 2em;
   width: calc((100%/3) - 1.3333333em);
   border: 2px solid #FFF;
   color: #fff;
   border-radius: 10px;
   box-sizing: border-box;
}

.column-outline-icon{
   margin-bottom: 1em;
}

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

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

.packaging{
   width: calc((100%/4) - 1.5em);
   position: relative;
   background-color: rgba(26, 18, 63, 1);
   background: linear-gradient(128deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 100%);
   border-radius: 10px;
   overflow: hidden;
}

.packaging-wide{
   width: calc((100%/3) - 1.4em);
}

.packaging-img{
   height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.packaging-img img{
   height: 150px;
}

.packaging-img-medium img{
   height: 180px;
}

.packaging-img-large img{
   height: 220px;
}

.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-color: rgba(26, 18, 63, 1);
   background: linear-gradient(128deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 100%);
   color: #fff;
   line-height: 1.5em;
   transition: opacity .5s;
}

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

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

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

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

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

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

.packaging:hover{
   cursor: pointer;
}

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


.title-wrapper{
   padding: 1em;
   text-align: center;
}

.text-section-icon-left{
   padding: 2em;
   margin-top: 3em;
   display: flex;
   align-items: flex-start;
   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{
   min-width: 120px;
}

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

/*PACKAGING*/

.text-section-list{
   margin-top: 2em;
   padding: 2em 1em;
   opacity: 0;
   color: #fff;
   border-radius: 10px;
   background: rgba(106, 45, 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);

}

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

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

.number-text{
   margin-left: .5em;
   color: #fff;
}

/*About*/

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

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

.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-img:hover img{
   transform: scale(1.1);
   
}

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

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

/*FAQS*/

.faq-wrapper{
   max-width: 1000px;
   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-color: rgba(26, 18, 63, 1);
   background: linear-gradient(128deg,rgba(26, 18, 63, 1) 0%, rgba(108, 46, 144, 1) 100%);
   color: #fff;
   font-family: Montserrat-SemiBold;
   font-size: 22px;
   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: #efefef;

}

.active-faq-text{
   padding: .5em 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-top: 12px;
   list-style: disc;
   list-style-position: inside;
}

/*Contact Section*/

.contact-section{
   width: 1400px;
   margin: 4em auto;
   display: flex;
   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-color: #1a123f;
   color: #fff;
   box-sizing: border-box;
   border-radius: 8px;
   opacity: 0;
}

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

.text-contact{
   margin-top: 6px;
}

.title-white{
   color: #fff;
}

/*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: calc(100% - 10px);
   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: 47%;
}

.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: calc(100% - 10px);
   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;
   display: inline-block;
   width: calc(100% - 10px);
}

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

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

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

.input-half{
   margin-top: 1em;
   padding: 10px 15px;
   width: calc(50% - 28px);
   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: calc(100% - 10px);
   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: 10px;
   right: 10px;
   cursor: pointer;
   font-size: 30px;
   font-weight: 700;
   color: firebrick;
   transition: transform .2s;
}

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

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

#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: 18px;
   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;
   text-box-trim: trim-end;
     text-box-edge: cap alphabetic; 
}


.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-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;
}

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

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

footer{
   padding: 4em 0;
   background-color: rgba(26, 18, 63, 1);
}

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

#footer-top{
   display: flex;
   gap: 4em;
}

.footer-logo{
   padding: 1em;
   width: 200px;
   background-color: #a4e8e6;
   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: .25em;
   display: inline-block;
   text-decoration: none;
   color: #fff;
   font-size: 16px;
}

.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{
   font-size: 18px;
}

/*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; transform: translateX(100px);}
  to {opacity: 1; transform: translateX(0);}
}

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

@keyframes revealImgColumn {
   0% {opacity: 0; transform: translateX(100px);}
   20% {opacity: 0;}
   100% {opacity: 1; transform: translateX(0px);}
}

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

@keyframes revealWhoWeServe {
  0%  {opacity: 0; transform: translateX(200px);}
  30%  {opacity: 0;}
  100% {opacity: 1; transform: translateX(0px);}
}

@media only screen and (min-width: 1920px){
   .banner-inner{
      min-width: 100%;
      max-width: 100%;
   }

}


@media only screen and (max-width: 1450px){
   .contact-section{
      padding: 0 2em;
      box-sizing: border-box;
   }
}

@media only screen and (max-width: 1400px){
   #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;
        background: linear-gradient(128deg,rgba(106, 45, 145, .8) 0%, rgba(155, 125, 185, .8) 100%)
   }

   #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;
   }

   .two-column-background{
      padding: 4em 2em;
      width: 100%;
      border-radius: 0px;
   }

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

   .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{
      margin: 0 auto;
      width: 90%;
      box-sizing: border-box;
   }

   .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{
      padding: 2em;
      margin: 0;
      height: 100%;
      width: 100%;
      position: static;
      background: linear-gradient(128deg,rgba(106, 45, 145, .8) 0%, rgba(155, 125, 185, .8) 100%);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      z-index: 998;
   }

   .banner-text{
      width: 100%;
   }

   .background-divider{
      display: none;
   }

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

   .banner-img{
      width: 100%;
   }

   footer{
      padding: 4em 0;
   }

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

   #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;
   }

   .banner-inner{
      background-color: rgba(0,0,0,.4);
   }

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


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


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


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

   .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: 95%;
   }


   .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%;
   }

}

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

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

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



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

   .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, .two-column-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: 2em 1em;
   }

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

   .banner-home-text-wrapper{
      background-color: rgba(0,0,0,.5);
      padding: 1em;
   }

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

   .banner-inner {
        background-color: rgba(0, 0, 0, .7);
   }


   .contact-img{
      width: 250px;
   }
   

   .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: 2em 1em;
   }

   
}

@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;
    }

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

   .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: 2em 1em;
   }

   .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;
   }

   .packaging{
      width: 100%;
   }

   .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%;
   }

}