/* GENERAL CSS FORMATTING NOTE: 
    We will be labeling the given sections within their specific page (i.e. Home page, About Us, etc.)
    Since the site header with the navigation bar and the footer will be on every page, they won't 
    be labeled within a page name, but all other sections will be
 */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* all links won't have garish purple link decoration */
a {
    color: #fff;
    text-decoration: none;
}

/************************                                       ----UTILITIES----                                  ************************/

/* 
padding -> keeps it from smacking left side of page even on mobile devices 
*/
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.underline {
    width: 100%;
    border-bottom: 1px solid #c7c7c7;
    padding-top: 10px;
}

.grid-underline {
    width: 88%;
    border-bottom: 1px solid #c7c7c7;
    margin: 0 auto;
}

.section-utility {
    background-color: #ffffff;
    padding: 20px 0 80px;
}

.section-title {
    color: #003d75;
    font-size: 3rem;
    font-weight: 300;
}

.subtitle {
    color: #003d75;
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 10px;
}

.subheader {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 40px;
}

.text-utility {
    font-size: .95rem;
    font-weight: 300;
    margin-top: 15px;
}

.base-button {
    background-color: #003d75;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    margin-top: 30px;
    width: 140px;
}

.base-button p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}

.base-button:hover {
    background-color: #002a52;
}

.photo-header {
    object-fit: cover;
    height: 300px;
    width: 100%;
}

/* 
* padding -> give the container 50px of top and bottom padding so that the contents more towards the middle
* Actually idk that we even needed this tbh we can just pad the individual elements inside the container, it should be good...
*/
.container-vert-pad {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 25px;
}

/* 
23:25 display:grid doesn't automatically turn it into CSS Grid
You need grid-template-columns to specify how wide the columns are
24:34 -> explains what fr is. Basically a relative fraction out of the sum of all frs. Below each gets 50% bc 2fr sum total and each is 1fr 
repeat(2, 1fr) -> 25:06. Repeat 1fr twice, so 1fr 1fr
*/
.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid1-section1 {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: start;
    align-items: start;
    height: 100%;
}

.grid2-utility {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
}

/* 
align-items: center -> aligns content to the center of the column axis (most of the time vertical)
In a grid with 2 columns you can put multiple sets of 2 items. Like you can put 4 and it will just put them into 
2 rows with 2 columns
height: 100% -> this gives it the height of the parent container, so to only make the grid have a certain height, 
you'll have to change the height of its parent container
*/
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid-3 {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 0;
}

/* 
max-width -> we had to specify this so the boxes don't get overriden by the size of the photos. We arrived at 370px
because the container is 1200px - 50px (because it has 25px left right padding) = 1150 -> 1150 - 40 (because our gap is 20px with 2 gaps) = 1110
1110/3 (because there's 3 columns) = 370px
position: relative -> this is set to allow the child element of this grid-box to be position absolute so it can stick to the bottom of
this grid-box class
*/
.grid-box {
    border: 1px solid #d3d3d3;
    max-width: 370px;
    padding: 20px 0;
    position: relative;
    text-align: center;
}

/* 
object-fit -> configures the image to fit within it's parent container
*/
.grid-photo {
    object-fit: cover;
    display: block;
    height: 300px;
    margin: 0 auto;
    width: 88%;
}

.list-utility {
    font-size: .95rem;
    font-weight: 300;
    margin-left: 55px;
    margin-top: 15px;
}

/* 
this is the css to style the fontawesome chevron icon
padding-top -> push the chevron down just a smidge to align it with the Read More link
*/
.fa-chevron-down.fa-solid {
    display: block;
    float: right;
    padding-top: 2px;
}

/* hide chevron-down when the expand section is active */
.fa-chevron-down.fa-solid.leadership-active,
.fa-chevron-down.fa-solid.api-active {
    display: none;
    float: right;
}

.fa-chevron-up.fa-solid {
    display: none;
    float: right;
}

/* show the chevron-up when it's active */
.fa-chevron-up.fa-solid.leadership-active,
.fa-chevron-up.fa-solid.api-active {
    display: block;
    float: right;
    padding-top: 2px;
}

.margin-top-30 {
    margin-top: 30px;
}

.product-list li a{
    /* cursor: pointer; */
    transition: all 0.3s ease;
}

/* .product-list li a {
    text-decoration: none;
} */

.product-list li a:hover {
    color: #3968f3;
    /* text-decoration: underline; */
    text-decoration-color: #3968f3;
}

.product-link-blue {
    color: #003d75;
}

.box-utility {
    display: block;
    /* padding: 0; */
}

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

.margin-top-0 {
    margin-top: 0px;
}

.margin-top-70 {
    margin-top: 70px;
}

.light-blue {
    color: #3968f3;
}

.margin-top-50 {
    margin-top: 50px;
}

/************************                                       ----UTILITIES END----                            ************************/


/************************                  ----SITE HEADER OVERALL----                    ************************/

/* 
position: sticky -> have site header go down with scrolling after you leave it
*/
.site-header {
    /* position: sticky;
    top: 0; */
    width: 100%;
    z-index: 999;
}

/************************                  ----SITE HEADER OVERALL END----                    ************************/


/************************                  ----BANNERS----                    ************************/

/*
having line-height and height be the same value centers the text in the div vertically 
 */
.top-banner{
    /* width: 100%; */
    background: #86a4ff;
    color: #ffffff;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.scroll-banner{
    width: 100%;
    background: #4b74f0;
    color: #ffffff;
    height: 30px;
    line-height: 30px;
}

.scroll-text {
    white-space: nowrap;
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  
    -moz-animation: my-animation 27s linear infinite;
    -webkit-animation: my-animation 27s linear infinite;
    animation: my-animation 27s linear infinite;
}

.scroll-text:hover {
    animation-play-state: paused;
}

@keyframes my-animation {
    from {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
}

/* for Chrome */
@-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-100%); }
}

/* for Firefox */
@-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100%); }
}

.glycine-scroll-link {
    color: #31d4fd;
    text-decoration: underline;
    text-decoration-color: #31d4fd; 
}

#x-button {
    color: #ffffff;
    cursor: pointer;
    float: right;
    line-height: 30px;
    padding-right: 10px;
}

.test-mobile-banner {
    width: 100%;
    height: 120px;
    line-height: 120px;
    /* background-color: green; */
    /* border: 1px orange solid; */
    white-space: nowrap;
}

.test-mobile-navbar {
    /* background-color: green;
    border: 4px yellow solid; */
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

.test-mobile-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
}

.nav-links-test-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links-test-mobile li {
    list-style: none;
}

.nav-links-test-mobile li a {
    text-decoration: none;
}

.nav-item {
    margin-left: 5rem;
}

.nav-link{
    font-size: 1.6rem;
    font-weight: 400;
    color: #475569;
}

.nav-link:hover{
    color: #482ff7;
}

.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

/*
* height and line-height are 95px so that Chattem Chemicals logo can be centered within it in .logo-banner a
*/
.logo-banner {
    /* border: 1px solid red; */
    /* position: absolute; */
    /* display: flex;
    justify-content: space-between; */
    width: 100%;
    /* top: 18px; */
    height: 100px;
    line-height: 100px;
    /* height: 300px; */
    background-color: #d0e8ff;
    white-space: nowrap;
    margin: 0 auto;
}

.container-revamp-banner {
    
    /* display: flex;
    justify-content: flex-start; */
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 25px;
}

.nav-banner {
    border-bottom: 0.5px solid #cfcfcf;
}

.nav-links-revamp {
    display: flex;
    height: 60px;
    line-height: 60px;
    max-width: 1300px;
    margin: 0 auto;
    padding-left: 25px;
}

.nav-links-revamp li {
    list-style: none;
}

.nav-links-revamp li .col a{
    /* border: 1px solid yellow; */
    color: #060707;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    /* height: 300px; */
}

.nav-links-revamp li .col a:hover {
    color: #3968f3;
    text-decoration: underline;
    text-decoration-color: #3968f3;
}


/* Add extra padding to the logo, which is the first child of the list under nav-links-revamp
Still Not sure why it's li:first-child instead of ul:first-child but that's what stackoverflow and codeacademy said
*/
/* .nav-links-revamp>li:first-child {
    padding-right: 60px;
} */



/* .container-logo {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 25px;
} */

/* helper selector I got from Stack Overflow answer on how to vertically center images in a div */
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/* Chattem Chemicals Logo */
/* 
vertical-align: this is to sync the logo up with the helper class below so that it's aligned in the 
vertical middle of the logo-banner
max-height and max-width: using these instead of regular height and width from following the Stack Overflow
answer for how to center images
-> changed max-height and max-width to regular height and width so I could customize the logo size per Jason's request to
make it bigger
*/
.logo-banner .logo {
    height: 70px;
    width: auto;
    margin: auto;
    padding-right: 60px;
    vertical-align: middle;
}

#hamburger-icon {
    cursor: pointer;
    display: none;
    line-height: 120px;
}

.mobile-mega-menu {
    position: fixed;
    left: -100%;
    top: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 30px 20px 0px 20px;
    width: 100%;
    height: 2000px;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    z-index: 10;
    /* 
    color: black;
    flex-direction: column;
    text-align: center;
    border-radius: 10px;
    */
}

.x-icon {
    /* border: 1px red solid; */
    /* display: flex;
    justify-content: flex-end; */
    line-height: 50px;
    height: 50px;
    /* padding-top: 20px;
    padding-right: 10px; */
    margin-top: -20px;
}

#x-icon-mobile {
    cursor: pointer;
}

.mobile-links {
    padding-left: 10px;
}

.mobile-links li {
    height: 30px;
    line-height: 30px;
    list-style: none;
    font-size: 1.5rem;
    color: #482ff7;
}

.mobile-subheader-margintop {
    margin-top: 20px;
}

.mobile-links li a {
    /* border: 1px green solid; */
    color: black;
    font-size: 1.25rem;
    text-decoration: underline;
    /* height: 20px;
    line-height: 20px; */
}

.mobile-links li a:hover{
    color: #482ff7;
}

/* .mobile-link {
    border: 1px green solid;
    color: black;
    line-height: 10px;
    height: 10px;
}

.mobile-link a {
    color: black;
} */

/************************                  ----BANNERS END----                    ************************/


/************************                  ----OVERALL NAVIGATION BAR LAYOUT----                    ************************/

/* nav tag outside of wrapper div */
nav{
    background: #ffffff;
    border-bottom: 1px rgb(214, 214, 214) solid;
    height: 55px; /* increases height of nav bar */
    line-height: 55px; /* centers text in nav bar */
    /* position: fixed; */
    width: 100%;
    /* z-index: 999; */
}

/* the unordered list of nav-links inside wrapper class 
flex-wrap: wrap -> wraps the navigation bar content when on smaller screens
*/
.nav-links{
    display: flex;
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    height: 55px;
    /* align-items: flex-start; */
    line-height: 55px;
    width: 100%;
}

/* 
This is the padding specific to nav-links ul which has classes .nav-links and container
Since .menu-links have padding: 12px 15px, they were offset a bit to the right of the logo, so I subtracted 15px from
the second argument in regular container above to get 10px in padding below
I.E. padding: 0 25px -> -15px -> padding: 0 10px
*/
.nav-links.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

/* List elements surrounding menu links 
padding-right: 50px; -> adds space between menu links; padding right so that the first link still stays on the left
*/
.nav-links li{
    list-style: none;
    padding-right: 40px;
}

/* Links in Menu */
.nav-links li a{
    color: #060707;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    /* padding: 9px 15px; */
    /* border-radius: 5px; */
    /* transition: all 0.3s ease; */
}

/* 
padding -> change the top padding to allow underline to be within nav bar
transition -> allows smooth transition when menu links get underlined
 */
/* .menu-link,
.nondrop-link{
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    padding: 12px 15px;
    transition: all 0.1s;
    border-radius: 5px;
} */

.menu-link,
.menu-link a,
.nondrop-link a,
.nondrop-link {
    /* border: 1px solid black; */
    /* display: inline-block; */
    color: #000874;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 15px; /* change the top padding to allow underline to be within nav bar */
    transition: all 0.1s; /* allows smooth transition when menu links get underlined */
    /* line-height: 220px; */
    /* 
     */
    /* height: 120px;
     */
    /* line-height: 20px; */
    /* width: 200px; */
    /* vertical-align: middle; */
    /* word-wrap: break-word;   */
    /* width: min-content; */
    /* white-space: initial; */
}

#standard {
    display: inline-block;
    width: 130px;
    /* line-height: 220px; */
    /* height: 120px;
     */
    line-height: 20px;
    /* width: 200px; */
    vertical-align: middle;
    word-wrap: break-word;  
    /* width: min-content; */
    white-space: initial;
    text-align: center;
}

#sun-api {
    display: inline-block;
    width: 120px;
    line-height: 20px;
    vertical-align: middle;
    word-wrap: break-word;  
    white-space: initial;
    text-align: center;
}

/* .menu-link a,
.nondrop-link a {
    border: 1px yellow solid;
} */

/* underline gray on hover */
.menu-link:hover,
.menu-link a:hover,
.nondrop-link a:hover,
.nondrop-link:hover{
    color: #3968f3;
    transition: all 0.3s ease;
}

/* turn underline green when clicked */
/* .menu-link.active{
    border-bottom: 4px solid #000874;
} */

/************************                  ----OVERALL NAVIGATION BAR LAYOUT END----                    ************************/


/************************                  ---- MEGA BOX LAYOUT AND OVERALL CONTENT STYLING ----                    ************************/

/* when you click on mega menu link display it */
.mega-box.active{
    opacity: 1;
    visibility: visible;    
    transition: all 0.3s ease;
}

/* 
top -> top of megabox starts 55px down from absolute position
left -> make this negative of left: in .wrapper .nav-links so mega menu displays full screen
visibility -> hides the mega menu
border-top -> creates the thin line at top of mega menu
z-index -> 100 is arbitrary, but it's just to make sure that on the Leadership page when it drops down that it's above anything on the webpage
*/
.mega-box{
    position: absolute;
    background-color: #F9F9F9;
    width: 100%;
    left: 0; 
    opacity: 0;
    top: 160.5px;
    visibility: hidden; 
    z-index: 100;
}

/* since there's a clickoffable no lost time banner on the homepage, we need the below class to have the mega-box be positioned lower so 
it's still under the nav bar. In the JS that clicks off of no lost time, we can set this class to toggle off of mega-box so it disappears
and it defaults back to the regular mega-box class above
150px because the banner is 30px and the regular top is 120px
*/
.mega-box-home {
    top: 190.5px; 
}

.mega-box-home-scroll {
    top: 220.5px; 
}

/* 
-- this is a specific class for megabox content that I'm combining utility classes container flex for --
max-width -> from container utility
padding ->  modify top padding to move content up/down in megamenu, modify left padding to move horizontally 
justify-content ->  space-between is good bc I specified the max-width so the first one starts at the left end beneath about us
*/
.mega-box .content.container-flex {
    display: flex;
    height: 100%;
    justify-content: space-between; 
    margin: 0 auto;
    max-width: 1200px;
    padding: 40px 25px;
}

/* flex specific class for megaboxes w/ fewer than 4 cols */
.mega-box .content.container-flex-start {
    /* border: 1px blue solid; */
    display: flex;
    gap: 300px;
    height: 100%;
    justify-content: flex-start; 
    margin: 0 auto;
    max-width: 1300px;
    padding: 40px 0 40px 40px;
}

.mega-box .content.flex-mb2 {
    /* border: 1px red solid; */
    display: flex;
    gap: 200px;
    height: 100%;
    justify-content: flex-start; 
    margin: 0 auto;
    max-width: 1300px;
    padding: 40px 0 40px 40px;
}

/* 
width -> sets the width for each column and the space between
*/
.content .col{
    line-height: 30px;

    /* width: calc(25% - 40px);  */
}

/************************                  ---- MEGA BOX LAYOUT AND OVERALL CONTENT STYLING END----                    ************************/



/************************                  ----MEGALINKS----                    ************************/

/* We'll leave this category here for now since some of these aggregate multiple different megaboxes */

/* when hovering over any link just make it green and highlight it */
.col a:hover {
    color: #3968f3;
    text-decoration: underline;
    text-decoration-color: #3968f3;
}

/************************                  ----MEGALINKS END----                    ************************/



/************************                      ----SPECIFIC MEGABOX CONTENT STYLING----                            ************************/

/* When hovering over a header of a mega box underline it and green it */
.content .col header a:hover{
    text-decoration: underline;
    text-decoration-color: #014421;
}

/* Header in any megabox */
/* .content .col .mb-header{
    color: #014421;
    font-size: 17px;
    font-weight: 800;
} */

/************************                  ----MEGABOX2----                    ************************/

/***** MB2 COL4 *****/

.content .col .sustain-img{
    width: 290px;
    height: 175px;
    object-fit: cover;
}

/***** MB2 COL4 END *****/

/************************                  ----MEGABOX2 END----                    ************************/


/************************                       ----MEGABOX4----                                  ************************/

/***** MB4 COL4 *****/

.content .col .investor-img{
    width: 236px;
    height: 175px;
    object-fit: cover;
}

/***** MB4 COL4 END *****/

/************************                  ----MEGABOX4 END----                    ************************/


/************************                      ----SPECIFIC MEGABOX CONTENT STYLING END----                            ************************/

/************************                                      ----HOME PAGE----                                         ************************/

/************************                      ----ADHD SECTION----                            ************************/

.section-adhd-carousel {
    /* border-bottom: 0.5px solid rgb(206, 204, 204); */
    height: 700px;
}

/* Make the images invisible by default */
.adhd-slideshow {
    /* display: none; */
    opacity: 0;
    overflow: hidden;
    position: absolute;
    -webkit-transition: all 800ms;
    transition: all 800ms;
    width: 100%;
    z-index: 1;
}

.adhd-carousel-img {
    height: 700px;
    object-fit: cover;
    object-position: 25% 25%;
    width: 100%;
}

.adhd-carousel-falls {
    object-fit: fill;
}
  
  /* forward & Back buttons */
.Back, .forward {
    cursor: pointer;
    position: absolute;
    top: 48%;
    width: auto;
    margin-top: -23px;
    padding: 17px;
    color: grey;
    font-weight: bold;
    font-size: 19px;
    transition: 0.4s ease;
    border-radius: 0 5px 5px 0;
    user-select: none;
}

/* Place the "forward button" to the right */
.forward {
    right: 0;
    border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity */
.Back:hover, .forward:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Caption Info */
.slide-info {
    /* bottom: 350px; */
    color: #e3e3e3;
    font-size: 3.5rem;
    font-weight: 400;
    /* left: 190px; */
    line-height: 60px;
    /* padding: 10px 14px; */
    position: absolute;
    text-align: center;
    width: 75%;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Worknumbering (1/3 etc) */
.MessageInfo {
    color: #f2f2f3;
    font-size: 14px;
    padding: 10px 14px;
    position: absolute;
    top: 0;
}

/* The circles or bullets and indicators */
.dots {
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin: 0 3px;
    background-color: #acc;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.5s ease;
}

.enable, .dots:hover {
    background-color: #717161;
}

/* Faint animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 2s;
    animation-name: fade;
    animation-duration: 2s;
}

@-webkit-keyframes fade {
    from {opacity: .5}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .5}
    to {opacity: 1}
}

.section-adhd {
    background-color: rgba(67, 156, 239, 0.1);
    /* border-bottom: 0.5px solid rgb(206, 204, 204); */
    height: 700px;
}

.section-adhd-header {
    font-size: 3.5rem;
    font-weight: 500;
    padding-top: 40px;
    text-align: center;
}

.grid3-adhd {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    padding: 30px 0;
}

/* 
max-width -> we had to specify this so the boxes don't get overriden by the size of the photos. We arrived at 370px
because the container is 1200px - 50px (because it has 25px left right padding) = 1150 -> 1150 - 40 (because our gap is 20px with 2 gaps) = 1110
1110/3 (because there's 3 columns) = 370px
position: relative -> this is set to allow the child element of this leadership-box to be position absolute so it can stick to the bottom of
this leadership-box class
*/
.adhd-box {
    border: 1px solid #003d75;
    max-width: 370px;
    padding: 20px 0;
    position: relative;
}

.adhd-pdct {
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
}

/* 
object-fit -> configures the image to fit within it's parent container
*/
/* .adhd-photo {
    object-fit: cover;
    display: block;
    height: 200px;
    margin: 10px auto 0;
    width: 88%;
}

.adhd-body {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 20px;
}


.section-adhd-boldtext {
    font-size: 2rem;
    font-weight: 400;
    margin-top: 10px;
}

.section-adhd-body {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 20px;
    width: 900px;
} */


/************************                      ----ADHD SECTION END----                            ************************/


/************************                      ----SECTION 1----                            ************************/

/* 
background-position: 25% 25% -> starts the image 25% from the top and 25% from the left 
*/
.section-1 {
    background-image: url("images/index/walnut_bridge.JPG");
    background-position: 25% 25%;
    background-size: cover;
    height: 500px;
    position: relative;
}

 .section-1::before {
    content: "";
    position: absolute;
    height: 500px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.30);
} 

/* There's no selector for section-1-box here as there's no need for it. We may add one we'll see */


/* 
* padding-top to move the header down into the section 1 element more because for some reason margin-top just caused it
* to go haywire
*/
.section-1-box-header {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 500;
    padding-top: 70px;
    position: relative;
}

/* 
* line-height -> this is to make the line height smaller than default which was spaced out too much for what I wanted
*/
.section1-boldtext {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 10px;
    position: relative;
}

.section1-body {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 400;
    margin-top: 20px;
    width: 900px;
    position: relative;
}

/* Learn More */
.base-button-section1 {
    background-color: #000874;
    border-radius: 5px;
    height: 55px;
    line-height: 40px;
    margin-top: 80px;
    width: 160px;
    position: relative;
}

/* 
* line-height: same px amount as height for base-button-section1 so I can center this within that
* text-align: center and vertical-align: middle also center text within base-button-section1
*/
.base-button-section1 p {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 55px;
    text-align: center;
    vertical-align: middle;
}

.base-button-section1:hover {
    background-color: #000435;
}


/************************                      ----SECTION 1 END----                            ************************/

/************************                      ----WHITE FILLER----                            ************************/

.white-filler {
    background: #ffffff;
    border-bottom: 0.5px solid rgb(206, 204, 204);
    height: 35px;
    width: 100%;
}

/************************                      ----WHITE FILLER END----                            ************************/

/************************                      ----SECTION 2----                            ************************/

.grid2-section2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* .container-section2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 25px;
} */

.section-2 {
    background-color: #F9F9F9;
    /* border-bottom: 0.5px solid rgb(206, 204, 204); */
    height: 600px;
}

/* There's no selector for section2-box here because I guess we didn't need it. It just automatically has a column width of
1 fr from being a child of a div with class grid-2 I guess */

.section2-box {
    /* border: 1px red solid; */
    height: 440px;
}

/* Our Purpose 
* bottom: 20px -> move the header up a smidge so it's in line with the video
* position relative is what allows bottom property to work
*/
.section2-box-header {
    color: #003d75;
    font-size: 2.5rem;
    font-weight: 400;
    /* margin-bottom: 15px; */
}

.section2-box-body {
    /* color: #003d75; */
    font-size: .95rem;
    font-weight: 300;
    margin-top: 15px;
}

.base-button-section2 {
    background-color: #003d75;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    margin-top: 30px;
    width: 140px;
}

.base-button-section2 p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}

.base-button-section2:hover {
    background-color: #002a52;
}

.section2-pic {
    object-fit: cover;
    height: auto;
    width: 100%;
}

.section2-pictext {
    font-size: 10px;
}
/************************                      ----SECTION 2 END----                            ************************/

/************************                      ----SECTION VIDEO----                            ************************/

.section-video {
    background-color: #ffffff;
    height: 700px;
}

.video-section-alignment {
    text-align: center;
    padding-top: 50px;
}

.video-section-title {
    color: #003d75;
    font-size: 3rem;
    font-weight: 400;
}

.chattem-video {
    height: 400px;
    width: 600px;
}

.base-button-video {
    background-color: #003d75;
    border-radius: 5px;
    height: 55px;
    line-height: 55px;
    margin-top: 50px;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 180px;
}

.base-button-video p {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 55px;
    text-align: center;
    vertical-align: middle;
}

.base-button-video:hover {
    background-color: #002a52;
}

/************************                      ----SECTION VIDEO END----                            ************************/

/************************                      ----SECTION 3----                            ************************/

.section-3 {
    background-color: rgba(67, 156, 239, 0.1);
    /* border-bottom: 0.5px solid rgb(206, 204, 204); */
    height: 700px;
}

/* 
* height: 100% -> give the grid 100% height of parent container, section-3, so that the picture and content actually center
* within section-3
*/
.grid2-section3 {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 40px;
    height: 100%;
}

/* height: auto makes height automatically adjust to the width to maintain the aspect ratio of the picture */
.section3-pic {
    height: auto;
    width: 500px;
}

/* 
height -> give the section 3 box a similar height as the image so that the text naturally aligns with the top of the
image since text starts at the top of a div and this just overall makes aligning the text easier
*/
.section3-box {
    /* border: 1px solid red; */
    height: 500px;
}

.section3-box-header {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
}

.section3-box-body {
    /* color: #003d75; */
    font-size: 1rem;
    font-weight: 300;
    margin-top: 15px;
}

.base-button-section3 {
    background-color: #003d75;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    margin-top: 320px;
    width: 140px;
}

.base-button-section3 p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}

.base-button-section3:hover {
    background-color: #002a52;
}

/* this will be the style for the thin white gray outlined boxes in Section 3 (Explore More) */
.info-box {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(206, 204, 204);
    height: 300px;
    width: 550px;
}

.info-box-2 {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(206, 204, 204);
    height: 260px;
    width: 550px;
}

/************************                      ----SECTION 3 END----                            ************************/

/************************                      ----SECTION 4----                            ************************/

.section-4 {
    background-color: #ffffff;
    height: 1700px;
}

.section4-title {
    color: #003d75;
    font-size: 2.5rem;
    font-weight: 400;
    margin-top: 50px;
}

.section4-box-big {
    background-color: #F9F9F9;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(206, 204, 204);
    height: 500px;
    margin-top: 30px;
    width: 100%;
}

.grid2-section4-box-big {
    display: grid;
    grid-template-columns: auto auto;
    justify-items: center;
    /* gap: 40px; */
}

/* width: make the width of this entire div smaller than the container (1200px) 
so that the text doesn't go across the entire container */
.section4-title-text {
    /* margin-top: 20px; */
    width: 600px;
}

/* Our Products */
.section4-box-big-header {
    color: #003d75;
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: 25px;
}

.section4-title-body {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 10px;
}

.section4-list {
    margin-left: 50px;
    margin-top: 10px;
}

.section4-list li {
    font-weight: 300;
}

/* 
align-self: center -> so this selector is within grid2-section4, so align-self overrides the default align-items value in grid2-section4 (since
it's not set), to align this lapic in the center, because we actually want to manually layout the text and not have that centered
 */
.section4-labpic {
    align-self: center;
    height: auto;
    width: 300px;
}

.grid2-section4-smaller {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* justify-items: center; */
    row-gap: 40px;
    margin-top: 40px;
}

.section4-box-darksmall {
    background-color: #002a52;
    /* display: grid; */
    /* gap: 0px;
    grid-template-columns: 1fr; */
    height: 300px;
    /* justify-items: center; */
    /* align-items: center; */
    padding: 25px;
    width: 555px;
}

/* this is just an extension selector to add to section4-box-darksmall above so that we can justify this to the right
for the boxes on the right. Justify-self works because it's within grid2-section4-smaller which has a grid display 
*/
.darksmall-end {
    justify-self: end;
}

.section4-smallbox-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}

.section4-smallbox-body {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 400;
    margin-top: 40px;
    padding: 0 45px;
    text-align: center;
}

/* 
just an extension selector to override margin-top on the body paragraph in section 4 for the other sections so I can tailor to 
each specific section
*/
.smbdy4-2 {
    margin-top: 20px;
}

.smbdy4-3 {
    margin-top: 30px;
}

.smbdy4-4 {
    margin-top: 20px;
}

/* Learn More */
/* transiiton -> makes it to where when you hover over the learn more button, it doesn't immediately turn gray but smoothly goes into it */
.base-button-section4 {
    background-color: #ffffff;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    margin: auto;
    margin-top: 55px;
    transition: background-color .5s ease;
    width: 140px;
}

/* 
just an extension selector to override margin-top on the base button in section 4 for the other sections so I can tailor to 
each specific section
*/
.btnsec4-2 {
    margin-top: 30px;
}

.btnsec4-3 {
    margin-top: 42.5px;
}

.btnsec4-4 {
    margin-top: 30px;
}

.base-button-section4 p {
    color: #003d75;
    font-size: 1rem;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}

.base-button-section4:hover {
    /* background-color: #ffffffe8; */
    background-color: #ffffffd0;
}


/************************                      ----SECTION 4 END----                            ************************/


/************************                      ----SECTION 5----                            ************************/

.section-5 {
    background-color: #F9F9F9;
    height: 750px;
}

.grid1-section5 {
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    /* gap: 40px; */
    height: 100%;
}

.section5-box {
    height: 70%;
    padding-top: 50px;
    /* border: 1px red solid; */
}

.section5-header {
    color: #003d75;
    font-size: 2.25rem;
    font-weight: 400;
}

.flex-section5 {
    /* border: 1px blue solid; */
    display: flex;
    /* align-items: stretch;   */
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 25px;
    /* height: 100%; */
}

.card {
    background-color: #fff;
    /* color: #333; */
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 35px;
    margin: 20px;
    transition: transform 0.2s ease-in;
}

.card:hover {
    transform: translateY(-15px);
}

.logo {
    height: auto;
    width: 130px;
}

.logo-down15 {
    margin-top: 15px;
}

.logo-down18 {
    margin-top: 18px;
}

.logo-down25 {
    margin-top: 25px;
}

.logo-down35 {
    margin-top: 35px;
}

.logo-down55 {
    margin-top: 55px;
}

/************************                      ----SECTION 5 END----                            ************************/

/************************                                      ----HOME PAGE END----                                         ************************/


/************************                                      ----LEADERSHIP PAGE----                                         ************************/

.section-leadership {
    background-color: #ffffff;
    padding: 20px 0px 50px;
}

.leadership-title {
    color: #003d75;
    font-size: 3rem;
    font-weight: 300;
}

.leadership-title-cust {
    margin-top: 30px;
}

.grid3-leadership {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    padding: 30px 0;
}

/* 
max-width -> we had to specify this so the boxes don't get overriden by the size of the photos. We arrived at 370px
because the container is 1200px - 50px (because it has 25px left right padding) = 1150 -> 1150 - 40 (because our gap is 20px with 2 gaps) = 1110
1110/3 (because there's 3 columns) = 370px
position: relative -> this is set to allow the child element of this leadership-box to be position absolute so it can stick to the bottom of
this leadership-box class
*/
.leadership-box {
    border: 1px solid #d3d3d3;
    max-width: 370px;
    padding: 20px 0;
    position: relative;
}

/* 
object-fit -> configures the image to fit within it's parent container
*/
.leadership-photo {
    object-fit: cover;
    display: block;
    height: 400px;
    margin: 0 auto;
    width: 88%;
}

.leadership-name {
    font-size: 1.4rem;
    font-weight: 300;
    margin-left: 30px;
    margin-top: 15px;
}

.leadership-job {
    color: #003d75;
    font-size: 1.1rem;
    font-weight: 400;
    margin-left: 30px;
    margin-top: 8px;
}

.leadership-text {
    font-size: .95rem;
    font-weight: 300;
    margin-left: 30px;
    margin-top: 8px;
    margin-right: 20px;
    margin-bottom: 50px;
}

.margin-bottom-shorter {
    margin-bottom: 10px;
}

/* hide the short blurb leadership text when leadership-expand class gets clicked */
.leadership-text.leadership-active {
    display: none;
}

/* 
position: absolute - absolutely position leadership bottom within relatively positioned leadership-box and bottom: 0, means to set it to the bottom
*/
.leadership-bottom {
    /* border: 1px blue solid; */
    bottom: 15px;
    position: absolute;
    width: 100%;
}


/* 
left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -> this centers the underline. Still not exactly sure how but yeah
*/
.leadership-underline {
    width: 88%;
    border-bottom: 1px solid #c7c7c7;
    margin: 0 auto;
}

/* 
cursor: pointer -> this makes it to where when you hover over the this element it looks like you can click it
position: absolute and bottom: 0 -> make the expand stick to the bottom of the leadership-box dynamically
*/
.leadership-expand {
    color: #003d75;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 25px;
    margin-top: 12px;
    padding-right: 30px;
    /* position: absolute;
    bottom: 0; */
    text-decoration: underline;
}

.leadership-expand-content {
    display: none;
    overflow: hidden;
}

.leadership-text-full {
    font-size: .95rem;
    font-weight: 300;
    margin-left: 30px;
    margin-top: 8px;
    padding-right: 20px;
}

/************************                                      ----LEADERSHIP PAGE END----                                         ************************/

/************************                                      ----ASSOCIATED COMPANIES PAGE----                                         ************************/

.associated-companies {
    background-color: #F9F9F9;
    height: 750px;
}

.associated-companies-box {
    height: 70%;
    padding-top: 70px;
    /* border: 1px red solid; */
}

/************************                                      ----ASSOCIATED COMPANIES PAGE END----                                         ************************/

/************************                                      ----ALL PRODUCTS PAGE----                                         ************************/

.section-all-products {
    background-color: #ffffff;
    padding: 20px 0 30px;
}

.container-api-products {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 25px;
}

.products-row {
    padding-top: 10px;
    display: grid;
    grid-template-columns: 28% 25% 14% 14% 19%;
    justify-content: space-between;
}

.pdct-row-title {
    justify-content: space-between;
    /* padding-top: 40px; */
    padding-top: 20px;
}

.api-bold-info {
    font-size: 1.2rem;
    font-weight: 600;
}

.flex-left {
    display: flex;
    justify-content: end;
}

.api-product-info {
    font-size: 1.05rem;
}

.padding-left-2 {
    padding-left: 2px;
}

/* 
this selects and applies style on the id tag (#) that's currently in the url
For us it allows, for whatever api product is clicked on, for its row to be highlighted on the api products page
*/
.product-div:target {
    background-color: rgba(218, 223, 225, 0.5);
}

.dmf-red {
    color: red;
}

.dmf-green {
    color: green;
}

.dmf-blue {
    color: blue;
}

.api-footnote {
    margin-top: 20px;
}

/************************                                      ----ALL PRODUCTS PAGE END----                                         ************************/

/************************                                      ----STANDARDS PAGE and SUN APIs PAGE ----                                         ************************/

.section-sunapis {
    background-color: #ffffff;
    height: 500px;
    padding: 20px 0 30px;
}

.section-title-sunapis {
    font-size: 2.5rem;
}

.products-row-sunapis {
    padding-top: 10px;
    display: grid;
    grid-template-columns: 32% 28% 22% 18%;
    justify-content: space-between;
}

.sunapis-link {
    margin-top: 30px;
    text-align: center;
    
}

.sunapis-link a {
    color: #003d75;
    font-size: 2.5rem;
    text-decoration: underline;
}

/* 
margin: auto; and margin-top: 80px; -> I'll have to look into how this is working but apparently it's allowing the button to be 
centered horizontally and also have the margin-top of 80px, but the important thing here is that it has to be this specific order.
margin: has to come before margin-top: because otherwise the margin-top: won't have an effect
*/
.button-sunapis {
    background-color: #000874;
    border-radius: 15px;
    height: 100px;
    line-height: 100px;
    margin: auto;
    margin-top: 60px;
    width: 630px;
    /* position: relative; */
}

.button-sunapis p {
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
}

.button-sunapis:hover {
    background-color: #000435;
}

.standards-link {
    margin-top: 60px;
    text-align: center;
    
}

.standards-link a {
    color: #003d75;
    font-size: 2.5rem;
    text-decoration: underline;
}

.standards-text {
    color: #003d75;
    font-size: 1.3rem;
    font-weight: 300;
    margin-top: 15px;
}


/************************                                      ----STANDARDS PAGE and SUN APIs PAGE END----                                         ************************/

/************************                                      ----PADD GLYCINE PAGE ----                                         ************************/

.products-row-coating {
    padding-top: 10px;
    display: grid;
    grid-template-columns: 60% 40%;
    justify-content: space-between;
}

.products-row-ink {
    padding-top: 10px;
    display: grid;
    grid-template-columns: 35% 35% 30%;
    justify-content: space-between;
}

.pdct-row-title {
    justify-content: space-between;
    padding-top: 20px;
}

.glycine-product-box {
    background-color: #d0e8ff;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(206, 204, 204);
    height: auto;
    padding: 35px;
    text-align: center;
    width: 600px;
    max-width: 100%;
    margin: 30px auto 0;
}

.glycine-product-text {
    color: #003d75;
    font-size: 1.3rem;
}

.margin-top-10 {
    margin-top: 10px;
}

/************************                                      ----PADD GLYCINE PAGE END----                                         ************************/

/************************                                      ----APIs PAGE----                                         ************************/

.section-apis {
    background-color: #ffffff;
    padding: 20px 0 30px;
}

.apis-subtitle {
    color: #003d75;
    font-size: 1.25rem;
    font-weight: 300;
    margin-top: 10px;
}

.grid3-apis {
    margin-top: 10px;
}

.api-name {
    color: #003d75;
    display: block;
    font-size: 1.2rem;
    font-weight: 300;
    /* margin: 15px auto 0; */
    /* margin-left: 100px; */
    margin-top: 15px;
    margin-bottom: 12px;
}

/* .api-name.api-active {
    margin-bottom: 10px;
} */

.api-underline {
    width: 88%;
    border-bottom: 1px solid #c7c7c7;
    margin: 0 auto;
}

.api-bottom {
    bottom: 15px;
    position: absolute;
    width: 100%;
}

/* 
cursor: pointer -> this makes it to where when you hover over the this element it looks like you can click it
position: absolute and bottom: 0 -> make the expand stick to the bottom of the leadership-box dynamically
text-align: left -> set the text-align for this back to the left since the grid-box text align is text-align center
*/
.api-expand {
    color: #003d75;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 25px;
    margin-top: 12px;
    padding-right: 30px;
    text-decoration: underline;
    text-align: left;
}

.api-expand-content {
    display: block;
}

.api-product {
    display: block;
    font-size: .95rem;
    font-weight: 300;
    margin-top: 8px;
    
}

.api-product-link {
    color: black;
}

.margin-bottom-end {
    margin-bottom: 40px;
}

/************************                                      ----APIs PAGE END----                                         ************************/

/************************                                      ----SURFACTANTS PAGE----                                         ************************/

.section-surfactants {
    background-color: #ffffff;
    padding-bottom: 30px;
}

.surfactants-photo-header {
    object-fit: cover;
    height: 300px;
    width: 100%;
}

.surfactants-photo {
    margin-top: 40px;
    object-fit: cover;
}

.surfactants-title-margintop {
    margin-top: 30px;
}

.surfactants-text {
    /* color: #003d75; */
    font-size: .95rem;
    font-weight: 300;
    margin-top: 15px;
}

.surfactants-text b {
    font-size: 1rem;
}

.surfactants-text-larger {
    font-size: 1.1rem;
}

.margin-top-surfactants-more {
    margin-top: 20px;
}

.margin-top-surfactants-less {
    margin-top: 2px;
}

.margin-top-surfactants-slight-more {
    margin-top: 20px;
}

.surfactants-list-vers {
    font-size: .95rem;
    font-weight: 300;
    margin-left: 55px;
    margin-top: 15px;
}

.surfactants-subheader {
    color: #003d75;
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: 30px;
}

.surfactants-list-comm {
    margin-top: 5px;
}

/* to just change the position of the surfactant-link div, you have to just modify this directly. putting this in surfactant-link a doesn't
do anything because a isn't a block level element */
.surfactants-link {
    margin-top: 50px;
}

/* to style the link, since it's within the surfactants-link div, you have to specify surfactants-link a */
.surfactants-link a {
    color: #003d75;
    font-size: 1rem;
    text-decoration: underline;
}

/************************                                      ----SURFACTANTS PAGE END----                                         ************************/

/************************                                      ----CUSTOM MANUFACTURING PAGE----                                         ************************/

.section-custom-mfg {
    background-color: #ffffff;
    padding: 20px 0 80px;
}

.grid2-custom-mfg {
    background-color: #F9F9F9;
    border: 1px solid #d3d3d3;
    grid-template-columns: 50% 50%;
    gap: normal;
    justify-content: end;
    /* align-items: center; */
    height: 600px;
    margin-top: 40px;
    padding: 20px 50px 20px;
}

.custommfg-box {
    /* border: 1px blue solid; */
    /* margin-bottom: 20px; */
    width: 90%;
}

/* 
align-self: center -> this is a child of grid2-custom-mfg above, which can take align-items, but we didn't want to align custommfg-box and
this in the center, we just wanted this centered, hence align-self: center
*/
.custommfg-photo {
    align-self: center;
    /* object-fit: cover; */
    height: 350px;
    /* margin-top: 40px; */
    width: 100%;
}

.grid3-cdmo {
    display: grid;
    gap: 20px;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
    margin-top: 40px;
    row-gap: 50px;
}

.base-button-cdmo {
    background-color: #000874;
    border-radius: 8px;
    height: 120px;
    line-height: 110px;
    /* margin-top: 80px; */
    width: 270px;
    position: relative;
}

.base-button-cdmo-center {
    margin-top: 70px;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* 
* line-height: same px amount as height for base-button-section1 so I can center this within that
* text-align: center and vertical-align: middle also center text within base-button-section1
*/
.base-button-cdmo p {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 120px;
    text-align: center;
    vertical-align: middle;
}

.base-button-cdmo:hover {
    background-color: #000435;
}

.custommfg-list {
    font-size: .95rem;
    font-weight: 300;
    margin-left: 45px;
    margin-top: 5px;
}

.custommfg-subheader {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 10px;
}

.custommfg-text {
    /* color: #003d75; */
    font-size: .95rem;
    font-weight: 300;
    margin-top: 10px;
}

.custommfg-text-lg {
    /* color: #003d75; */
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 10px;
}

.custommfg-subheader-sm {
    font-size: 1.15rem;
    margin-top: 20px;
}

.custommfg-subheader-lg {
    font-size: 2.2rem;
    margin-top: 50px;
}

.custommfg-subheader-lg-mt {
    font-size: 2.2rem;
    margin-top: 30px;
}

.grid2-custom-mfg-photos {
    gap: normal;
    justify-content: space-between;
    /* align-items: center; */
    /* height: 550px; */
    margin-top: 70px;
}

.custommfg-bottom-photo {
    width: 563px;
}

.custommfg-text-note {
    font-size: .95rem;
    font-style: italic;
    font-weight: 300;
    margin-top: 15px;
    width: 115%;
}

/************************                                      ----CUSTOM MANUFACTURING PAGE END----                                         ************************/

/************************                                      ----CDMO PAGE----                                         ************************/

.section-cdmo {
    background-color: #04994c;
}

.cdmo-box {
    background-color: #04994c;
    display: grid;
    grid-template-columns: 100%;
    align-items: center;
    height: 800px;
    text-align: center;
}

.vertical-middle {
    vertical-align: middle;
}

/************************                                      ----CDMO PAGE END----                                         ************************/

/************************                                      ----RHEOLOGY PAGE----                                ************************/

.section-rheology {
    background-color: #ffffff;
    padding: 20px 0 30px;
}

.rheology-subtitle {
    color: #003d75;
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 10px;
}

.rheology-subheader {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 40px;
}

.rheology-list {
    color: #003d75;
    font-size: 1.1rem;
    margin-top: 5px;
}

.grid3-rheology {
    padding: 30px 0;
}

.gridbox-rheology {
    background-color: #d0e8ff;
    height: 370px;
    padding: 20px;
}

.rheology-name {
    color: #003d75;
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    /* margin-bottom: 70px; */
    margin-top: 40px;
}

.rheology-application {
    color: #003d75;
    font-size: 1.1rem;
    font-weight: 400;
    /* margin-left: 20px; */
    margin-top: 20px;
    margin-bottom: 10px;
    /* text-align: left; */
}

.rheology-data {
    font-size: .95rem;
    font-weight: 300;
}


.rheology-basebutton {
    margin: 50px auto 0;
    text-align: center;
}

.rheology-basebutton-ecgel {
    margin: 80px auto 0;
    text-align: center;
}

/************************                                      ----RHEOLOGY PAGE END----                                ************************/

/************************                                      ----CATALYST PAGE----                                ************************/

.section-catalyst {
    background-color: #ffffff;
    padding: 20px 0 30px;
}

.grid2-aluminum-add {
    gap: 0px;
    grid-template-columns: 2fr 1fr;
}

.border-color1 {
    border: 1px blue solid;
}

.border-color2 {
    border: 1px red solid;
}

.aluminum-text-box {
    padding-right: 50px;
}

.aluminum-celeb-box {
    border: 1px solid black;
    margin-top: 30px;
    padding: 0px 20px 15px;
    width: 60%;
}

.aluminum-blue-box {
    background-color: #688eff;
}

.aluminum-blue-box-long {
    height: 500px;
    padding-left: 30px;
    margin-top: 15px;
    padding-top: 20px;
    padding-right: 30px;
}

.aluminum-blue-box-long a {
    color: black;
    transition: all 0.3s ease;
}

.aluminum-blue-box-long a:hover {
    color: #3968f3;
    text-decoration-color: #3968f3;
}

.aluminum-mission-box {
    background-color: #F9F9F9;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(206, 204, 204);
    height: 250px;
    margin-top: 50px;
    padding: 35px 160px;
    text-align: center;
}

.aluminum-mission-subtitle {
    max-width: 100%;
}

.catalyst-subtitle {
    color: #003d75;
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 20px;
}

.catalyst-text {
    color: #003d75;
}

.catalyst-text-nomt {
    color: #003d75;
    margin-top: 0px;
}

.aluminum-text {
    color: #003d75;
    font-size: 1.15rem;
}

.aluminum-celeb-text {
    color: #003d75;
    font-size: 1.05rem;
    font-weight: 400;
}

.aluminum-blue-box-text {
    font-size: 1.3rem;
    font-weight: 400;
}

.aluminum-blue-box-text-smaller {
    font-size: 1.1rem;
    font-weight: 400;
}

.aluminum-text-nomt {
    font-size: 1.3rem;
    font-weight: 400;
    margin-top: 0px;
}

.catalyst-subheader {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 40px;
}

.catalyst-subheader-nomt {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 0px;
}

.catalyst-data {
    font-size: .95rem;
    font-weight: 300;
    margin-bottom: 10px;
}

.catalyst-list {
    color: #003d75;
}

/************************                                      ----CATALYST PAGE END----                                ************************/

/************************                                      ----GLYCINE PAGE----                                ************************/

.section-glycine {
    background-color: #ffffff;
    padding: 20px 0 30px;
}

.glycine-bluebox-long {
    height: 600px
}

.glycine-name {
    color: #003d75;
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 15px;
}

.glycine-name-parenteral {
    color: #003d75;
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 5px;
}

.glycine-data-end {
    font-size: .95rem;
    font-weight: 300;
    margin-top: 20px;
}

.glycine-basebutton {
    margin: 30px auto 0;
    text-align: center;
}

.glycine-basebutton-lower {
    margin: 60px auto 0;
    text-align: center;
}

.glycine-basebutton-parenteral {
    margin: 35px auto 0;
    text-align: center;
}

.glycine-list {
    color: #003d75;
    font-size: 1.1rem;
    margin-top: 10px;
}


/************************                                      ----GLYCINE PAGE END----                                ************************/


/************************                                   ----RESEARCH AND DEVELOPMENT PAGE----                                ************************/

.section-rd {
    background-color: #ffffff;
    padding-bottom: 100px;
}

/* 
margin-left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) -> this is the secret sauce for centering elements where
margin: 0 auto doesn't work because the parent element doesn't have a set width
Actually I ended up scrapping the above, because when the text got big and spread out, it scrunched it. So I just measured the remaining
px in the container after the text, which was 190px, then divided it in 2 to get 95px. We may adjust it more from there just to eyeball it
*/
.rd-quote {
    color: #003d75;
    font-size: 2.2rem;
    font-weight: 500;
    margin-left: 95px;
    margin-top: 40px;
}

/* 
margin-left: 350px; -> I measured the remaining distance in the container after this text, got 800px, then divided by 2 to get 400px. Then
I eyeballed it to 350px from there
*/
.rd-nilesh {
    font-size: 1.5rem;
    font-weight: 300;
    margin-top: 10px;
    margin-left: 350px;
}

.grid2-rd {
    justify-content: space-between;
    height: 100%;
}

.rd-text-box {
    /* border: 1px blue solid; */
    width: 600px;
}

.rd-photo-box {
    width: 500px;
}

.rd-subheader {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
    margin-left: -3px;
    margin-top: 70px;
}

.rd-text {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 15px;
}

.rdtext-margintop-lg {
    margin-top: 30px;
}

.rd-photo {
    object-fit: cover;
    height: auto;
    width: 500px;
}

.rd-list {
    font-size: .95rem;
    font-weight: 300;
    margin-left: 55px;
    margin-top: 5px;
}

/* .grid2-rd-bottom {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-evenly;
    height: 100%;
    margin-top: 30px;
} */

.rd-photo-margintop {
    margin-top: 20px;
}

.rd-subtitle-bottom {
    color: #003d75;
    font-size: 2.2rem;
    font-weight: 400;
    margin-top: 100px;
    margin-left: 315px;
}

.basebutton-rd {
    background-color: #003d75;
    border-radius: 5px;
    height: 60px;
    line-height: 60px;
    margin-left: 445px;
    margin-top: 30px;
    width: 160px;
}

.basebutton-rd p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
}

.basebutton-rd:hover {
    background-color: #002a52;
}

/************************                                      ----RESEARCH AND DEVELOPMENT PAGE END----                                ************************/

/************************                                      ----PROCESS ENGINEERING PAGE----                                ************************/

.process-subheader {
    color: #003d75;
    font-size: 2rem;
    font-weight: 400;
    /* margin-left: -3px; */
    margin-top: 20px;
}

.process-text {
    font-size: 1.4rem;
    font-weight: 300;
    margin-top: 10px;
}

.grid2-process {
    gap: normal;
    /* justify-content: space-between; */
    /* align-items: center; */
    /* height: 550px; */
    margin-top: 70px;
}

.process-photo {
    object-fit: cover;
    height: 350px;
    width: 540px;
}

/************************                                      ----PROCESS ENGINEERING PAGE END----                                ************************/

/************************                                      ----MANUFACTURING PAGE----                                ************************/

.mfg-text {
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 15px;
}

/************************                                      ----MANUFACTURING PAGE END----                                ************************/

/************************                                      ----EHS PAGE----                                ************************/

.grid2-ehs {
    gap: 10px;
    /* justify-content: space-between; */
    /* align-items: center; */
    /* height: 550px; */
    margin-top: 20px;
}

.ehs-photo {
    object-fit: cover;
    height: 450px;
    width: 480px;
}

.ehs-text {
    font-size: 1.7rem;
    font-weight: 300;
    margin-top: 10px;
    width: 550px;
}

/************************                                      ----EHS PAGE END----                                ************************/

/************************                                      ----QUALITY PAGE----                                ************************/

.section-quality {
    background-color: #ffffff;
    padding: 40px 0 60px;
}

.grid2-quality {
    /* border: 1px blue solid; */
    gap: 40px;
    /* justify-content: space-between; */
    /* height: 100%; */
    margin-top: 30px;
}

/* text-align: left here is just a dummy property so that we can have something in this class. Text-align is left by default I think */
.quality-text-box {
    /* border: 1px blue solid; */
    display: block;
    /* text-align: center; */
    /* width: 800px; */
    /* padding: 0 70px; */
}

.quality-subheader {
    /* border: 1px blue solid; */
    color: #003d75;
    font-size: 1.8rem;
    font-weight: 500;
    /* margin-top: 20px; */
    /* margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); */
    /* width: 400px; */
    /* text-align: center; */
}

.quality-list {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 15px;
    list-style-type: none;
    /* text-align: center; */
}

.quality-list li {
    margin-top: 20px;
}

.quality-list-center {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 15px;
    list-style-type: none;
    text-align: center;
}

.quality-list-center li {
    margin-top: 20px;
}

.basebutton-quality {
    background-color: #003d75;
    border-radius: 5px;
    height: 60px;
    line-height: 60px;
    width: 250px;
    margin: 40px auto 0;
}

.basebutton-quality p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
}

.basebutton-quality:hover {
    background-color: #002a52;
}

.quality-photo {
    object-fit: cover;
    height: auto;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 500px;
}

/************************                                      ----QUALITY PAGE END----                                ************************/

/************************                                      ----COMPLIANCE PAGE----                              ************************/

.section-compliance {
    background-color: #ffffff;
    padding: 20px 0 60px;
}

.compliance-year {
    color: #003d75;
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: 20px;
}

.compliance-photo {
    object-fit: cover;
    height: 550px;
    /* margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); */
    width: 500px;
}

.compliance-text {
    font-size: 1.2rem;
    font-weight: 300;
    margin-top: 10px;
}

.compliance-subheader {
    margin-top: 0px;
    font-weight: 500;
}

/************************                                      ----COMPLIANCE PAGE END----                              ************************/


/************************                                      ----HISTORY PAGE----                              ************************/

.section-history {
    background-color: #ffffff;
    padding-bottom: 100px;
}

.container-history {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 25px;
}

.history-section-title {
    color: #003d75;
    font-size: 3rem;
    font-weight: 300;
}

/* 
object-position: 60% 60% -> this allows you to manipulate where the image starts within the height and width that you give it. With
just the default object-position, only the top sliver of the building was in the photo, but when I put object-position it allowed
the height and width to cover the full part of the building with the company title  */
.history-photo-header {
    object-fit: cover;
    object-position: 60% 60%;
    height: 300px;
    width: 100%;
}

.grid2-history {
    margin-top: 30px;
}

.history-text-box {
    /* border: 1px blue solid; */
    width: 600px;
}

.history-subheader {
    color: #003d75;
    font-size: 1.2rem;
    font-weight: 500;
    /* margin-top: 20px; */
}

.history-margintop {
    margin-top: 20px;
}

.history-photo-box {
    width: 500px;
}

.history-photo {
    object-fit: cover;
    height: auto;
    width: 600px;
}

.history-margintop-photo {
    margin-top: 160px;
}

.history-margintop-underline {
    margin-top: 80px;
}

.history-margintop-timeline {
    margin-top: 80px;
}

/************************                                      ----HISTORY PAGE END----                              ************************/

/************************                                ----NEWS AND EVENTS PAGE----                              ************************/

.section-news {
    background-color: #ffffff;
    padding: 20px 0 60px;
}

.underline-news {
    width: 94%;
}


.container-news {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 25px;
}

.news-slice {
    /* border: 1px solid blue; */
    display: inline-block;
    width: 60%;
}

.grid2-news {
    background-color: #F9F9F9;
    border: 1px solid #d3d3d3;
    grid-template-columns: 3fr 2fr;
    justify-content: end;
    /* align-items: center; */
    height: 400px;
    margin-top: 40px;
    padding: 0 30px;
}

.news-container {
    background-color: #F9F9F9;
    border: 1px solid #d3d3d3;
    height: 400px;
    margin-top: 40px;
    padding: 0 30px;
    text-align: center;
}

.news-subheader {
    color: #003d75;
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 30px;
}

.news-pic-box {
    align-self: center;
}

/* 
width: 100%; -> this gives it 100% of the 2fr it gets within news-pic-box. news-pic-box is within grid2-news, in which i desginated 2 columns
3fr and 2fr. 2fr is the length of news-pic-box, and since news-photo is within news-pic-box, width: 100% on news-photo gives it 100% of the
width of news-pic-box, which is 2fr
*/
.news-photo {
    object-fit: cover;
    height: auto;
    /* margin-top: 40px; */
    width: 100%;
}

.news-photo-adjust {
    height: 350px;
    width: auto;
}

/* width: 100% -> pretty much same as explanation for news-photo above */
.news-youtube {
    height: auto;
    width: 100%;
}

.news-smalltxt {
    font-size: .7rem;
    font-weight: 300;
}

.news-link {
    color: #003d75;
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* 
vertical-align: top -> this is to make this div start at the top, because before it was just starting at the bottom
*/
.events-slice {
    /* border: 1px solid blue; */
    display: inline-block;
    margin-left: 9%;
    vertical-align: top;
    width: 30%;
}

.events-header {
    color: #003d75;
    font-size: 2rem;
    font-weight: 500;
    margin-top: 20px;
}

.events-subheader {
    color: #003d75;
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 30px;
}

.events-date {
    font-size: 1rem;
    font-weight: 300;
    /* margin-top: 20px; */
}

.dcat-banner-photo {
    height: 220px;
    margin-top: 30px;
    object-fit: cover;
    object-position: top;
    width: 80%;
}

.dcat-banner-photo-2025 {
    margin-top: 20px;
}

/************************                                ----NEWS AND EVENTS PAGE END----                              ************************/

/************************                                ----CAREERS PAGE----                              ************************/

.section-careers {
    background-color: #ffffff;
    padding: 20px 0 120px;
}

.careers-subheader-expand,
.careers-subheader {
    color: #003d75;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 30px;
}

.careers-expand-content {
    display: none;
    overflow: hidden;
}

.careers-expand-content.c-active {
    display: block;
    overflow: visible;
}

.careers-boldtext {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 15px;
}

.careers-list {
    font-size: 1rem;
    font-weight: 300;
    margin-left: 55px;
    margin-top: 10px;
}

.careers-list li {
    margin: 5px 0;
}

.careers-margintop {
    margin-top: 50px;
}

.careers-flex {
    /* border: 1px blue solid; */
    display: flex;
    /* align-items: center;   */
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 25px;
    /* height: 100%; */
}

/* 
padding: 0 10px -> this adds a gap between the photos. In the careers-flex class above justify-content: center puts them together with no space
*/
.careers-photo  {
    object-fit: cover;
    padding: 0 10px;
    height: 300px;
    width: 300px;
}

.careers-job {
    color: #003d75;
    /* display: inline-block; */
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 50px;
    text-align: center;
}

.careers-description {
    display: inline-block;
    font-size: 1rem;
    font-weight: 300;
    margin-left: 90px;
    margin-top: 15px;
}

.job-list {
    font-size: .95rem;
    font-weight: 300;
    margin-left: 345px;
    margin-top: 15px;
}

.job-list li {
    margin: 10px 0;
}

/* 
text-align: center works here to center this text because for some reason, the width for this class is the width of container (it's 
parent class) by default. So it centers the text within the width of the container basically. */
.careers-location {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 20px;
    text-align: center;
}

.careers-apply {
    font-size: 1rem;
    font-weight: 300;
    margin-left: 260px;
    margin-top: 20px;
}

.basebutton-careers {
    background-color: #003d75;
    border-radius: 5px;
    height: 60px;
    line-height: 60px;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 35px;
    width: 150px;
}

.basebutton-careers p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
}

.basebutton-careers:hover {
    background-color: #002a52;
}

.joblist-marginleft {
    margin-left: 390px;
}

.careers-secondheader {
    font-size: 1rem;
    font-weight: 300;
    margin-left: 350px;
    margin-top: 60px;
}

.careers-description-marginleftless {
    margin-left: 70px;
}

.careers-description-marginleftmore {
    margin-left: 140px;
}

/************************                                ----CAREERS PAGE END----                              ************************/


/************************                                ----CONTACT US PAGE----                              ************************/

.section-contact {
    background-color: #ffffff;
    padding: 20px 0 120px;
}

.container-contact {
    /* border: 1px blue solid; */
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 25px;
}

.contact-slice {
    /* border: 1px solid orange; */
    display: inline-block;
    margin-left: 60px;
    width: 61%;
}

.contact-header {
    margin-top: 60px;
}

.contact-header-mtless {
    margin-top: 25px;
}

.contact-name {
    display: inline-block;
    width: 48%;
}

.contact-name-mgl {
    margin-left: 3%;
}

.contact-namebox {
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid black;
    border-radius: 3px;
    height: 45px;
    margin-top: 5px;
    padding: 12px 15px;
    width: 100%;
}

.contact-small {
    font-size: .75rem;
    font-weight: 300;
}

.mgl-35 {
    margin-left: 44%;
}

.contact-box {
    background-color: #ffffff;
    border: 1px solid black;
    border-radius: 3px;
    box-sizing: border-box;
    height: 45px;
    margin-top: 5px;
    padding: 12px 15px;
    resize: vertical;
    width: 100%;
}

.contact-box-lg {
    height: 200px;
}

input.contact-submit[type=submit] {
    background-color: #ffffff;
    border: 2px solid #003d75;
    border-radius: 5px;
    color: #003d75;
    cursor: pointer;
    display: block;
    font-size: 1rem;
    font-weight: 500;
    height: 50px;
    margin-top: 30px;
    width: 140px;
}

input.contact-submit[type=submit]:hover {
    color: #ffffff;
    background-color: #003d75;
    transform: scale(0.98);
}

.address-slice {
    display: inline-block;
    margin-left: 40px;
    vertical-align: top;
    width: 28%;
}

.contact-subheader {
    color: #003d75;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 30px;
}

.contact-address {
    color: black;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 20px;
}

.contact-address-less-margin {
    margin-top: 10px;
}

.contact-google {
    border: 0;
    margin-top: 35px;
    width: 100%;
    height: 400px;
}

.section-join {
    background-color: #3968f3;
    padding: 40px 0 120px;
    text-align: center;
}

.join-bold {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 0;
}

.join-bigtxt {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;
    padding: 10px 0;
}

.join-regular {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 300;
    padding: 10px 0;
}

.join-regular-long {
    margin: 0 auto;
    width: 750px;
}

.basebutton-join {
    background-color: #3968f3;
    border: 2px solid #ffffff;
    border-radius: 5px;
    height: 60px;
    line-height: 60px;
    /* margin-left: 260px; */
    margin: 35px auto 0;
    width: 150px;
}

.basebutton-join p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 60px;
    text-align: center;
    /* vertical-align: middle; */
}

.basebutton-join:hover {
    background-color: #ffffff;
    color: #3968f3;
}


/************************                                ----CONTACT US PAGE END----                              ************************/

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

.footer {
    background-color: #545454;
    height: 280px;
}

.container-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
    /* border: 1px orange solid; */
}

/* 
apparently margin and width aren't doing here as you can see they're commented out and the content is still centered how i like
*/
.grid2-footer {
    /* border: 1px blue solid; */
    display: grid;
    grid-template-columns: auto auto;
    /* justify-content: space-around; */
    /* margin: 0 auto; */
    padding-top: 45px;
    /* align-items: center; */
    /* height: 100%; */
    /* width: 100%; */
}

.footer-geninfo {
    /* border: 1px green solid; */
    justify-self: end;
    /* width: fit-content; */
}

/* Chattem Chemicals Inc. */
.footer-header {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 4px;
    /* width: fit-content; */
}

.footer-address {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 300;
    text-align: right;
}

/* Add margin to the top part of the address to separate the address and following parts from the Chattem Chemicals header in the footer */
.footer-address-pt1 {
    margin-top: 10px;
}

.footer-phone {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    text-align: right;
    text-decoration: underline 1.5px;
    text-underline-offset: 5px;
}

.footer-copyright {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 300;
    margin-top: 30px;
    text-align: right;
}

.footer-social {
    /* border: 1px yellow solid; */
    justify-self: start;
}

/* 
Connect with us on
display: inline-block -> needs to be this here so that after the Connect with us on, the linkedin-circle element stays on the same
line as this. Also below the linkedin-circle element needs display: inline-block as well as you see on line 988 to show on the same line here
*/
.footer-connect {
    color: #ffffff;
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 300;
}

.linkedinlink {
    margin-left: 10px;
}

.linkedin-circle {
    background-color: #ffffff;
    border-radius: 100%;
    display: inline-block;
    height: 40px;
    margin-left: 5px;
    text-align: center;
    transition: background-color .5s ease;
    width: 40px;
}

.linkedin-circle:hover {
    /* background-color: #ffffffe8; */
    background-color: #ffffffd0;
}

/* 
This selector grabs the linkedin icon itself hence the i
line-height -> this value needs to be the same as the height for linkedin-circle, so that the icon centers inside the circle
As an aside, somehow this also fixed the problem I thought I was going to have to tackle of lining up footer-connect with the linkedin-circle
but somehow putting a line-height specifically on the icon element made it all workout so idk interesting stuff
*/
.linkedin-circle i {
    line-height: 40px;
}

/* this is to style the font awesome linkedin icon */
.fa-linkedin-in {
    color: #545454;
}

.footer-signup {
    color: #ffffff;
    font-size: .9rem;
    font-weight: 300;
    margin-top: 10px;
}

/* Email Address input with the class footer-email */
input.footer-email[type="email"] {
    background-color: #ffffff;
    border: 0;
    border-radius: 3px;
    height: 45px;
    margin-top: 30px;
    padding: 12px 15px;
}

/* placeholder pseudo selector is so that we can style the placeholder text within the email address input element */
.footer-email::placeholder {
    color: #818181;
    font-weight: 200;
}

.footer-signup-btn {
    background-color: #545454;
    border: 2px solid #ffffff;
    /* border: 0; */
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-weight: 500;
    height: 35px;
    margin-top: 15px;
    width: 100px;
}

/* 
When hovering over Sign Up, make it slightly smaller and invert the colors to where the text is gray and the background is white
*/
.footer-signup-btn:hover {
    color: #545454;
    background-color: #ffffff;
    transform: scale(0.98);
}

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

/************************                      ----MOBILE RESPONSIVENESS----                            ************************/

@media(max-width: 1700px) {

    /** BANNERS **/
    /* flex specific class for megaboxes w/ fewer than 4 cols */
    /* .mega-box .content.container-flex-start {
        margin-left: 350px;
    } */

    /* .mega-box .content.flex-mb2 {
        margin-left: 350px;
    } */
    /** BANNERS END **/

}

@media(max-width: 1650px) {

    /** BANNERS **/
    /* flex specific class for megaboxes w/ fewer than 4 cols */
    /* .mega-box .content.container-flex-start {
        margin-left: 320px;
    }

    .mega-box .content.flex-mb2 {
        margin-left: 320px;
    } */
    /** BANNERS END **/

}

@media(max-width: 1400px) {

    /** BANNERS **/


    /* flex specific class for megaboxes w/ fewer than 4 cols */
    /* .mega-box .content.container-flex-start {
        margin-left: 270px;
    }

    .mega-box .content.flex-mb2 {
        margin-left: 270px;
    } */
    /** BANNERS END **/

}

@media(max-width: 1300px) {

    /*************     BANNERS M1300       *************/

    .logo-banner {
        /* 
        
        width: 100%;
        height: 120px;
        line-height: 120px;
        background-color: #d0e8ff;
        white-space: nowrap; */
        display: flex;
        justify-content: space-between;
        padding-right: 30px;
        height: 100px;
        line-height: 100px;
    }

    .logo-banner .logo {
        /* height: 88px;
        width: auto;
        margin: auto;
        padding-right: 60px;
        vertical-align: middle; */
        padding-right: 0;
        height: 70px;
    }

    .container-revamp-banner {
        margin: 0;
    }

    .nav-links-revamp {
        display: none;
    }

    #hamburger-icon {
        display: block;
        line-height: 100px;
    }

    .mobile-mega-menu.active {
        left: 0;
    }

    /*************     BANNERS M1300       *************/
}

/* Tablets and under */
@media(max-width: 1200px) {

    /** UTILITIES M1200 **/

    .section-title {
        text-align: center;
    }

    .subtitle {
        text-align: center;
    }

    .subheader {
        text-align: center;
    }

    .grid2-utility {
        grid-template-columns: 100%;
        justify-items: center;
    }

    .grid-3 {
        grid-template-columns: 100%;
        justify-items: center;
    }

    .grid-box {
        max-width: 100%;
        width: 500px;
    }

    .grid-photo {
        height: auto;
    }

    .base-button {
        margin: 30px auto 0;
    }

    .box-utility {
        text-align: center;
    }

    .margin-top-mobile {
        margin-top: 30px;
    }

    /** UTILITIES M1200 END **/

    /*************     BANNERS M1200       *************/

    .nav-links-test-mobile {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        height: 2000px;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        z-index: 10;
    }

    .nav-links-test-mobile.active {
        left: 0;
    }

    .nav-item {
        margin: 2.5rem 0;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .container-logo {
        padding: 0 50px;
    }

    /* flex specific class for megaboxes w/ fewer than 4 cols */
    /* .mega-box .content.container-flex-start {
        margin-left: 270px;
    }

    .mega-box .content.flex-mb2 {
        margin-left: 270px;
    } */


    /*************     BANNERS M1200 END      *************/

    /* OVERALL NAVIGATION BAR LAYOUT M1200 */
    .nav-links.container {
        padding: 0 50px;
    }
    /* OVERALL NAVIGATION BAR LAYOUT END */

    /** HOME PAGE **/
    /** SECTION 1 M1200 **/
    .section-1-box-header {
        text-align: center;
    }

    .section1-boldtext {
        text-align: center;
    }
    
    .section1-body {
        text-align: center;
        width: auto;
    }

    .base-button-section1 {
        margin: 80px auto 0;
    }
    
    .section-1::before {
        opacity: 0;
    }

    /** SECTION 1 END **/

    /* SECTION 2 M1200 */
    .section-2 {
        height: 800px;
        padding: 50px 0px 0px 0px;
    }

    .grid2-section2 {
        grid-template-columns: 80%;
        row-gap: 0;
        justify-content: center;
        align-items: normal;
    }

    .section2-box {
        /* border: 1px red solid; */
        height: auto;
    }

    .section2-pic {
        object-fit: cover;
        height: auto;
        margin-left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 80%;
    }

    .section2-pictext {
        text-align: center;
    }

    .section2-box-header {
        text-align: center;
    }
    
    .section2-box-body {
        text-align: center;
    }
    
    .base-button-section2 {
        margin: 30px auto 0;
    }
    /* SECTION 2 END */

    /** SECTION 3 M1200 **/

    .section-3 {
        background-color: rgba(67, 156, 239, 0.1);
        height: 800px;
    }
    
    .grid2-section3 {
        grid-template-columns: 80%;
        justify-content: center;
        gap: 0px;
    }
    
    .section3-pic {
        height: auto;
        width: 500px;
        margin-left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    
    .section3-box {
        width: 80%;
        height: auto;
        margin: 0 auto;
    }

    .section3-box-header {
        text-align: center;
    }
    
    .section3-box-body {
        text-align: center;
    }

    .base-button-section3 {
        margin: 10px auto 0px;
    }

    /** SECTION 3 END **/

    /** SECTION 4 M1200 **/

    .section-4 {
        background-color: #ffffff;
        height: 2700px;
    }
    
    .section4-title {
        text-align: center;
    }

    .section4-title {
        color: #003d75;
        font-size: 2.5rem;
        font-weight: 400;
        margin-top: 50px;
    }
    
    .section4-box-big {
        height: auto;
    }
    
    .grid2-section4-box-big {
        display: grid;
        grid-template-columns: 3fr 2fr;
        justify-items: center;
        /* gap: 40px; */
    }
    
    /* width: make the width of this entire div smaller than the container (1200px) 
    so that the text doesn't go across the entire container */
    .section4-title-text {
        /* border: 1px red solid; */
        width: 90%;
    }
    
    /* 
    align-self: center -> so this selector is within grid2-section4, so align-self overrides the default align-items value in grid2-section4 (since
    it's not set), to align this lapic in the center, because we actually want to manually layout the text and not have that centered
     */
    .section4-labpic {
        align-self: center;
        height: auto;
        width: 80%;
    }
    
    .grid2-section4-smaller {
        display: grid;
        grid-template-columns: 100%;
        justify-items: center;
        margin-top: 40px;
    }
    
    .darksmall-end {
        justify-self: center;
    }

    /** SECTION 4 END **/

    /** SECTION 5 M1200 **/

    .section-5 {
        height: auto;
        padding-bottom: 20px;
    }
    
    .section5-header {
        text-align: center;
    }

    /** SECTION 5 M1200 END **/

    /** FOOTER M1200 **/

    .footer {
        background-color: #545454;
        height: auto;
        padding-bottom: 20px;
    }
    
    .container-footer {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 25px;
    }

    .grid2-footer {
        grid-template-columns: 100%;
    }
    
    .footer-geninfo {
        justify-self: stretch;
        margin-top: 50px;
    }
    
    .footer-address {
        text-align: left;
    }
    
    .footer-phone {
        text-align: left;
    }
    
    .footer-copyright {
        text-align: left;
    }

    /** FOOTER M1200 **/

    /** HOME PAGE END **/

    /********          LEADERSHIP PAGE M1200             ********/

    .section-leadership {
        padding: 20px 0px 50px;
    }
    
    .leadership-title {
        text-align: center;
    }
    
    .leadership-title-cust {
        text-align: center;
    }
    
    .grid3-leadership {
        grid-template-columns: 100%;
        justify-items: center;
    }
    
    /* so this functions beautifully just like I intended. Each box starts off at 800px, and then dynamically gets smaller as I lower
    the screen size. But I have no idea why lol. If the width of the leadership-box is set at 800px... why is it getting dynamically
    smaller without me having to do anything lol. It has to have something to do with max-width I'm willing to bet 
    Yeah that's what it was. When I change max-width to none, the default value, then the pictures looked like shite. So yeah 
    max-width: 100% here is the mvp */
    .leadership-box {
        max-width: 100%;
        width: 800px;
        padding: 0;
    }
    
    /* 
    object-fit -> configures the image to fit within it's parent container
    */
    .leadership-photo {
        object-fit: cover;
        height: auto;
        margin: 0;
        width: 100%;
    }
    
    .leadership-text {
        margin-bottom: 75px;
    }
    
    .leadership-underline {
        width: 96%;
    }

    /********          LEADERSHIP PAGE M1200 END             ********/

    /********          ASSOCIATED COMPANIES PAGE M1200            ********/

    .associated-companies {
        height: auto;
        padding-bottom: 20px;
    }

    /********          ASSOCIATED COMPANIES PAGE M1200  END         ********/

    /********          HISTORY PAGE M1200        ********/

    .history-section-title {
        text-align: center;
    }
    
    /* .grid2-history {
        grid-template-columns: 100%;
        justify-items: center;
    } */
    
    .history-text-box {
        max-width: 100%;
        width: 800px;
    }
    
    .history-subheader {
        color: #003d75;
        font-size: 1.2rem;
        font-weight: 500;
    }
    
    .history-margintop {
        margin-top: 20px;
    }

    .history-photo-box {
        width: 100%;
    }
    
    .history-photo {
        margin-left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        max-width: 100%;
        width: 600px;
    }

    /********          HISTORY PAGE M1200  END         ********/

    /********          APIs PAGE M1200         ********/
    
    .apis-subtitle {
        text-align: center;
    }

    /********         APIs PAGE M1200  END         ********/

    /********          CATALYST PAGE M1200         ********/

    .section-catalyst {
        background-color: #ffffff;
        padding: 20px 0 30px;
    }
    
    .catalyst-subtitle {
        text-align: center;
    }
    
    .catalyst-subheader {
        text-align: center;
    }

    .aluminum-text-box {
        padding: 0px 20px;
    }

    .aluminum-celeb-box {
        margin: 30px auto 0px;
    }

    .aluminum-mission-box {
        /* background-color: #F9F9F9;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(206, 204, 204);
        height: 250px;
        margin-top: 50px;
        padding: 35px 160px;
        text-align: center; */
        padding: 35px 100px;
    }

    /********          CATALYST PAGE M1200  END       ********/

    /********          ALL PRODUCTS PAGE M1200         ********/
    
    .api-bold-info {
        font-size: 1.1rem;
        font-weight: 600;
    } 

    .api-product-info {
        font-size: 1rem;
    }

    /********          ALL PRODUCTS PAGE M1200  END       ********/

    /********          RESEARCH AND DEVELOPMENT PAGE M1200       ********/
    
    .rd-quote {
        margin-left: 0px;
        text-align: center;
    }

    
    .rd-nilesh {
        margin-left: 0px;
        text-align: center;
    }

    .rd-subheader {
        font-size: 2.3rem;
    }

    .rd-text-box {
        max-width: 100%;
        width: 800px;
    }

    .rd-text {
        text-align: center;
    }

    .rd-list {
        list-style-type: none;
        margin-left: 0px;
        text-align: center;
    }

    .rd-photo-box {
        width: 100%;
    }

    .rd-photo {
        margin-left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        max-width: 100%;
        width: 500px;
    }

    .rd-subtitle-bottom {
        margin-left: 0px;
    }

    .basebutton-rd {
        margin: 30px auto 0;
    }

    /********          RESEARCH AND DEVELOPMENT PAGE M1200  END       ********/
    
    /********          PROCESS ENGINEERING PAGE M1200       ********/

    .process-photo {
        max-width: 100%;
        height: auto;
    }

    .grid2-process {
        gap: 40px
    }

    .process-text {
        text-align: center;
    }

    /********          PROCESS ENGINEERING PAGE M1200  END       ********/

    /********          EHS PAGE M1200         ********/

    .ehs-text {
        text-align: center;
        max-width: 100%;
    }

    /********          EHS PAGE M1200  END       ********/

    /********          QUALITY PAGE M1200       ********/

    .quality-photo {
        max-width: 100%;
        width: auto;
        height: 500px;
        margin-left: 0px;
        -webkit-transform: none;
        transform: none;
    }

    .quality-list, 
    .quality-list-center {
        list-style-type: none;
        margin-left: 0px;
        text-align: center;
    }

    .basebutton-quality {
        margin: 40px auto 0;
    }

    /********          QUALITY PAGE M1200  END       ********/

    /********          COMPLIANCE PAGE M1200       ********/

    .compliance-year {
        text-align: center;
    }
    
    .compliance-text {
        text-align: center;
    }

    /********          COMPLIANCE PAGE M1200  END       ********/

    /********          CUSTOM MANUFACTURING PAGE M1200       ********/

    .grid2-custom-mfg {
        height: auto;
    }
    
    .grid3-cdmo {
        grid-template-columns: 100%;
        justify-items: center;
    }

    .custommfg-text {
        text-align: center;
    }

    .custommfg-subheader {
        text-align: center;
    }

    .custommfg-list {
        list-style-type: none;
        margin-left: 0px;
        text-align: center;
    }

    .custommfg-text-note {
        text-align: center;
        width: auto;
    }

    .custommfg-photo {
        margin-top: 40px;
        height: auto;
        max-width: 100%;
        width: 800px;
    }

    .grid2-custom-mfg-photos {
        gap: 40px
    }

    .custommfg-bottom-photo {
        max-width: 100%;
    }

    /********          CUSTOM MANUFACTURING PAGE M1200   END    ********/

    /********        NEWS AND EVENTS PAGE M1200      ********/

    .underline-news {
        width: 100%;
    }

    .news-slice {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        width: 800px;
    }

    .grid2-news {
        height: auto;
        padding-bottom: 20px;
    }

    .events-slice {
        display: block;
        margin-left: 0;
        width: auto;
    }
    
    .dcat-banner-photo {
        margin-left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 300px;
    }

    .events-header, 
    .events-subheader,
    .events-date {
        text-align: center;
    }

    /********        NEWS AND EVENTS PAGE M1200   END    ********/

    /********        CAREERS PAGE M1200         ********/

    .careers-photo  {
        padding: 10px;
    }

    /********        CAREERS PAGE M1200   END    ********/

    /********        CONTACT US PAGE M1200      ********/

    .contact-slice {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        width: 900px;
    }

    .address-slice {
        display: block;
        margin: 50px auto 0;
        max-width: 100%;
        width: 600px;
    }

    .contact-subheader {
        font-size: 1.5rem;
    }

    .contact-address {
        font-size: 1.1rem;
        text-align: center;
    }

    /********        CONTACT US PAGE M1200   END    ********/
    
}

/* Navigation Bar Switch to Being Smaller */
@media(max-width: 780px) {

    /* UTILITIES  M780 */
    .list-utility {
        margin-left: 0px;
        list-style-type: none;
        text-align: center;
    }
    /* UTILITIES M780 END */

    /* OVERALL NAVIGATION BAR LAYOUT M780 */
    nav {
        height: 60px;
        line-height: 60px;
    }

    .nav-links {
        height: 30px;
        line-height: 30px;
    }

    /* .nav-links-revamp {
        flex-direction: column;
        overflow: auto;
    } */

    /* when you click on a mega-box class element, and the javascript adds the active tag to it, instead of displaying the mega-menu
    like with the full screen mode, just don't show anything... hopefully this is enough, there may be some weird behavior but for now
    this will do and we can come back to this to tweak it later if necessary  */
    .mega-box.active {
        opacity: 0;
        visibility: hidden;
    }

    /* similar to the above, when hovering or clicking on the menu-links, just have them not do anything on mobile view */
    .menu-link:hover,
    .nondrop-link:hover {
        opacity: 1;
    }

    /* turn underline green when clicked */
    .menu-link.active {
        opacity: 1;
    }
    /* OVERALL NAVIGATION BAR LAYOUT END */

    /* ADHD SECTION M780 */

    .slide-info {
        font-size: 2rem;
        line-height: 30px;
    }

    .section-adhd-carousel {
        height: 500px;
    }

    .adhd-carousel-img {
        height: 500px;
    }

    /* ADHD SECTION END */

    /* SECTION 1 M780 */
    .base-button-section1 {
        margin: 40px auto 0;
    }

    /* SECTION 1 END */

    /* SECTION 2 M780 */

    .section-2 {
        height: 700px;
    }

    .grid2-section2 {
        grid-template-columns: 500px;
        row-gap: 0;
        justify-content: center;
        align-items: normal;
    }

    .section2-box {
        /* border: 1px red solid; */
        padding: 0 15px;
    }

    /* SECTION 2 END */
    
     /* SECTION VIDEO M780 */

    .chattem-video {
        height: auto;
        width: 100%;
        margin-top: 30px;
    }

    /* SECTION VIDEO M780 END */

    /* SECTION 3 M780 */

    .section3-box {
        width: 100%;
    }

    .section3-pic {
        width: 420px;
    }

    /* SECTION 3 END */

    /* SECTION 4  M780 */

    .section-4 {
        background-color: #ffffff;
        height: auto;
        padding-bottom: 50px;
    }
    
    .grid2-section4-box-big {
        /* display: grid; */
        grid-template-columns: 100%;
        /* justify-items: center; */
        gap: 20px;
    }

    .section4-labpic {
        width: 50%;
    }

    /* Our Products */
    .section4-box-big-header {
        text-align: center;
    }
    
    .section4-title-body {
        text-align: center;
    }

    .section4-box-darksmall {
        height: auto;
        width: 100%;
    }

    /* SECTION 4 END */

    /********         SURFACTANTS PAGE M780         ********/

    .surfactants-text {
        text-align: center;
    }

    .surfactants-list-vers {
        margin-left: 0px;
        list-style-type: none;
        text-align: center;
    }
    
    .surfactants-subheader {
        text-align: center;
    }

    /********         SURFACTANTS PAGE M780  END       ********/

    /********          ALL PRODUCTS PAGE M780       ********/

    .api-bold-info {
        font-size: .7rem;
        font-weight: 600;
    } 

    .api-product-info {
        font-size: 0.6rem;
    }

    .api-footnote {
        font-size: 0.6rem;
    }

    .api-footnote-shrink {
        font-size: 0.6rem;
    }

    /********          ALL PRODUCTS PAGE M780  END       ********/

    /********          CONTACT US PAGE M780      ********/

    .join-regular-long {
        width: auto;
    }

    /********          CONTACT US PAGE M780  END       ********/

    /********          CATALYST PAGE M780      ********/

    .aluminum-mission-box {
        /* background-color: #F9F9F9;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(206, 204, 204);
        height: 250px;
        margin-top: 50px;
        padding: 35px 160px;
        text-align: center; */
        height: auto;
    }

    /********          CATALYST PAGE M780 END     ********/
    
    /********          STANDARDS PAGE and SUN APIs PAGE M780      ********/
    
    .button-sunapis {
        height: auto;
        width: 100%;
    }
    
    /********          STANDARDS PAGE and SUN APIs PAGE M780 END      ********/

}


/************************                      ----MOBILE RESPONSIVENESS END----                            ************************/


/************************                      ----LEGACY CODE FROM TUTORIAL OR OLD COMMENTED OUT CODE----                            ************************/

/************************                      ----LEGACY CODE FROM TUTORIAL OR OLD COMMENTED OUT CODE END----                            ************************/