@font-face { font-family: "Open Sans"; font-weight: 400; src: url(../web-fonts/OpenSans-Regular.ttf); }
@font-face { font-family: "Open Sans"; font-weight: 500; src: url(../web-fonts/OpenSans-Semibold.ttf); }
@font-face { font-family: "Open Sans"; font-weight: 600; src: url(../web-fonts/OpenSans-Bold.ttf); }
@font-face { font-family: "fontawesome"; src: url(../web-fonts/fa-brands-400.ttf); }
@font-face { font-family: "fontawesome"; src: url(../web-fonts/fa-regular-400.ttf); }
@font-face { font-family: "fontawesome"; src: url(../web-fonts/fa-solid-900.ttf); }
@font-face { font-family: "slick"; src: url(../web-fonts/slick.ttf); }

h1, h2, h3, h4, h5, h6 { font-family: "Open Sans"; font-weight: 500; }
a, button, p { font-family: "Open Sans"; font-weight: 400; outline: none; text-decoration: none; }
ol li, ul li { list-style-type: none; }
.color-1 { color: #003f5f; }
.color-2 { color: #111111; }
.color-3 { color: #020e27; }

/* header(Header.PHP) **********/
/* sanmos menu */
.sanmos-top-menu { background: #000000; padding: 20px 5rem; }
.sanmos-menu ul { margin: 0; padding: 15px 0; text-align: right; }
.sanmos-menu ul li { display: inline-block; margin: 0 1rem; }
.sanmos-menu ul li a { color: #ffffff; font-size: 20px; font-weight: 600; padding: 0; text-transform: uppercase; }
.sanmos-logo {padding: 5px 0;}

/* index(Index.PHP) **********/
/* sanmos about us */
.about-us { background-image: linear-gradient(to top, #ffffff, #ffffffe0), url(../images/Sanmos-Image.png); background-position: 100% 70%; background-repeat: no-repeat; background-size: cover; padding: 8rem 0; }
.sanmos-welcome h3 { color: #003f5f; font-size: 3.5em; font-weight: 600; text-align: center; }
.sanmos-about-us h5 { color: #003f5f; font-size: 2em; font-weight: 600; }
.sanmos-about-us h5 span img { padding: 10px; width: 24%; }
.sanmos-about-us p { font-size: 18px; font-weight: 500; }

/* quality & modern */
.quality-img { padding: 0; }
.quality-desc { position: relative; }
.quality-desc-text { padding: 0 20px; position: absolute; top: 15%; }
.quality-desc h1 { color: #003f5f; font-weight: 600; }
.quality-desc h1 span { background: -webkit-linear-gradient(#ff8435, #ff431b); font-size: 72px; font-weight: normal; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.quality-desc p { color: #003f5f; font-weight: 600; }
.quality-desc ul { margin: 0; position: relative; }
.quality-desc ul li { padding-left: 20px; }
.quality-desc ul li::before { color: #ffc84d; content: "\f043"; font-family: "fontawesome"; left: -5px; position: absolute; }

/* our product */
.sanmos-map {padding: 1rem 0;}
.sanmos-location p { color: #ffffff; font-size: 18px; font-weight: 500; margin-bottom: 0; }
.our-product { background: #19576b; padding: 2rem 0; text-align: center; }
.our-product h2 { color: #ffffff; font-weight: 600; margin-bottom: 2rem; }
.hover-img { background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 300px; position: relative; }
.product-img ul { text-align: left; }
.product-img > div > div > .product-bg-img { background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; min-height: 180px; width: 240px; }
.product-img ul li { background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; min-height: 170px; width: 250px; }
.product-desc h4 { background: -webkit-linear-gradient(#ff8435, #ff431b); font-size: 30px; font-weight: 600; text-align: left; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.product-desc p { color: #ffffff; font-size: 24px; font-weight: 600; margin-bottom: 10px; text-align: left; }
.product-desc ul { text-align: left; }
.product-desc ul li { min-height: auto; position: relative; }
.product-desc ul li:before { color: #ffc84d; content: "\f043"; font-family: "fontawesome"; left: -5px; position: absolute; }
.product-desc ul li p { border: none; color: #ffffff; font-size: 16px; font-weight: 500; margin-bottom: 0; padding-left: 20px; }
.product { background: #000000a3; display: none; margin: 10px 20px; position: absolute; left: 0; right: 0; top: 11%; transition: 0.2s; }
.hover-img:hover .product { display: block; }
.product a p { color: #ffffff; font-size: 20px; font-weight: 600; padding: 90px 0; text-transform: uppercase; }
.sanmos-map-img {padding: 1rem 0;}

/* why choose us & partner with us */
.why-partner { padding: 5rem; }
.why-partner ul.tabs { border: none; }
.why-partner-content { border: none; }
li.why-partner-title { background: #f2f4f6; border-radius: 50px; margin: 0 20px; }
li.why-partner-title a { color: #000000; font-size: 20px; font-weight: 600; }
li.why-partner-title > a[aria-selected="true"] { background: none; color: #19576b; border: 2px solid #19576b; border-radius: 50px; }
.why-partner-title > a:hover { background: none; color: #19576b; }
.why-partner-panel { padding: 3rem 2rem; }
.why-choose-us-title, .why-partner-us-title { margin-bottom: 2rem; }
.why-choose-us-title h2, .why-partner-us-title h2 { color: #003f5f; font-weight: 600; margin: 0; }
.why-choose-us-title span { color: #003f5f; }
.why-choose-us img, .why-partner-us img { width: 75%; }
.why-choose-us ul, .why-partner-us ul { margin: 0; position: relative; }
.why-choose-us ul li, .why-partner-us ul li { padding-left: 20px; }
.why-choose-us ul li::before, .why-partner-us ul li::before { color: #ffc84d; content: "\f043"; font-family: "fontawesome"; left: -5px; position: absolute; }
.why-choose-us ul li p,
.why-partner-us ul li p { color: #000000; font-weight: 600; margin-bottom: 5px; }

/* product(Product.PHP) **********/
.product-title { text-align: center; }
.product-title h2 { color: #020e27; font-size: 40px; font-weight: 600; margin: 2rem 0; text-transform: uppercase; }
.sanmos-all-product { padding: 0 5rem 5rem; }
.sanmons-content { border: none; }
.sanmos-title > a:focus, .sanmos-title > a[aria-selected='true'] { background: #ff8435; color: #ffffff; }
.sanmos-title > a:hover { background: #ff8435; color: #ffffff }
.sanmos-title > a { color: #000000; font-size: 18px; font-weight: 500; padding: 15px 10px; text-align: center; text-transform: uppercase; }
.sanmos-panel { float: left; }
.sanmos-panel > div > div { margin-bottom: 2rem; }
.product-item { background: #333333; }
.product-name { padding: 5px 10px; }
.product-name h5 { color: #ffffff; font-weight: 600; }
.product-name p { color: #ffffff; font-weight: 500; margin-bottom: 5px; }
.product-name p span { border-bottom: 1px solid #ff8435; padding-bottom: 3px; }
.product-read-more { display: none; padding: 10px; text-align: center; }
.product-read-more button { background: #ED691E; border-radius: 30px; color: #ffffff; cursor: pointer; font-weight: 600; padding: 10px 20px; }

/* contact(Contact.PHP) **********/
/* contact us */ 
.contact-us { clear: both; height: 100%; padding: 2rem; }
.contact { padding: 1rem 2rem 0; }
.contact h2 { text-transform: uppercase; }
.contact p { margin-bottom: 0; }
.contact-us h2, .contact { color: #003f5f; font-weight: 600; text-align: center; }
.contact-us-submit { text-align: center; }
input.submit { background: #020e27; color: #ffffff; font-weight: 600; padding: 10px 30px; }

/* footer(Footer.PHP) **********/
/* footer */
footer { background: #020e27; padding: 10px 0; text-align: center; }
footer p { color: #ffffff; font-weight: 600; margin-bottom: 0; }

/*--------------------------------*/
@media screen and (min-width: 640px) {
  .title-bar { display: none; }
}

@media screen and (max-width: 1360px) {
  .quality-desc-text { top: 5%; }
  .quality-desc h1 span { font-size: 48px; }
  .quality-desc h1 { font-size: 38px; }
  .quality-desc p { font-size: 14px; }
  .why-partner-us p {font-size: 14px;}
}

@media screen and (max-width: 1200px) {
  .sanmos-title > a { font-size: 16px; }
  .product-name p { font-size: 14px; }
}

@media screen and (max-width: 1023px) {
  .sanmos-logo img { width: 70%; }
  .sanmos-menu ul { padding: 15px 0; }
  .sanmos-menu ul li a { font-size: 16px; }
  .sanmos-top-menu { padding: 10px 1rem; }
  .sanmos-slider { height: 450px !important; }
  .about-us { padding: 3rem 0; }
  .quality-assurance, .modern-laboratory { margin-bottom: 2rem; }
  .quality-box { position: relative; }
  .quality-desc-text { background: #ffffffd1; bottom: 0; left: 0; padding: 0 20px; right: 0; top: auto; }
  .quality-desc { position: absolute; }
  .why-partner { padding: 5rem 1rem; }
  li.why-partner-title, li.why-partner-title > a[aria-selected="true"] { border-radius: 0; }
  .our-product { padding: 2rem 0; }
  .product-img > div > div > .product-bg-img { min-height: 390px; width: 440px; }
}

@media screen and (max-width: 991px) {
  .product-img > div > div > .product-bg-img { float: left; min-height: 250px; width: 360px; }
}

@media screen and (max-width: 800px) {
  .sanmos-all-product { padding: 0 0rem 5rem; }
}

@media screen and (max-width: 639px) {
  .sanmos-slider { height: 300px !important; }
  .title-bar { position: relative; }
  .mobile-menu { position: absolute; width: 100%; z-index: 2; }
  .mobile-logo { margin: auto; text-align: center; width: 70%; }
  .mobile-logo img { width: 50%; }
  .sanmos-logo { display: none; }
  .sanmos-menu ul { text-align: center; }
  .sanmos-about-us p { font-size: 14px; font-weight: 400; }
  .quality-img { padding: 0; text-align: center; }
  .quality-img img { margin-bottom: 1rem; max-height: 400px; }
  .quality-desc { position: relative; }
  .quality-desc-text { background: #ffffffd1; bottom: unset; left: unset; padding: 0 20px; position: relative; right: unset; top: unset; }
  .quality-desc h1 span { font-size: 38px; }
  .quality-desc h1 { font-size: 28px; }
  .quality-desc p { font-weight: 400; }
  .our-product { padding: 2rem 0; }
  .our-product h2 { font-size: 28px; margin-bottom: 1rem; }
  .why-partner-panel { padding: 2rem 1rem; }
  .why-choose-us-title, .why-partner-us-title { margin-bottom: 1rem; }
  .why-choose-us-title h2, .why-partner-us-title h2 { font-size: 30px; }
  .why-choose-us-img, .why-partner-us-img { padding: 20px 0; text-align: center; }
  .why-choose-us-img img, .why-partner-us-img img { width: 50%; }
  .sanmos-about-us h5 span img { width: 40%; }
  .contact-us { height: 100%; }
  .contact h2 { font-size: 32px; }
  .contact p { font-size: 14px; }
  .product-img > div > div { margin-bottom: 2rem; text-align: left; }
  .product-img > div > div > .product-bg-img { height: 350px; width: 100%; }
  .product-desc ul li p { font-size: 18px; }
  .product-desc ul li:before { top: 3px; }
  .product-desc p { border-bottom: 2px solid #ffffff; font-size: 30px; width: fit-content; }
  .sanmos-panel { float: none; margin: auto; width: 75%; }
  .product-name h5 { font-size: 24px; }
  .product-name p { font-size: 16px; }
  .sanmos-location p {font-size: 14px;}
}

@media screen and (max-width: 500px) {
  .product-desc h4 { font-size: 28px; }
  .product-desc p { font-size: 26px; }
  .sanmos-panel { width: 100%; }
}

@media screen and (max-width: 400px) {
  .our-product { padding: 2rem 0; }
  .quality-desc-text { padding: 0; }
  .why-partner { padding: 3rem 0; }
  .why-partner-panel { padding: 2rem 10px; }
  .product-desc h4 { font-size: 22px; }
}

@media screen and (max-width: 365px) {
  .sanmos-slider { height: 200px !important; }
}

/* updated */
.contact {padding: 1rem 2rem 0;}
.contact h2, .company-address h2 {text-transform: capitalize;}
.company-address {background-color: #efefef; color: #003f5f; padding: 2rem; text-align: center;}
.company-address h2 {font-size: 30px;}
.company-address p {font-size: 16px;}
.why-partner-us.why-partner-us-img img {border-radius: 50%;}
.sanmos-map-img img {width: 50%;}
.our-product h2 {margin-bottom: 20px;}
.sanmos-map-img {padding: 2rem 0; position: relative;}
.sanmos-map-img:after {border-bottom: 1px solid #ffffff; bottom: 10px; content: ''; left: 0; margin: auto; position: absolute; right: 0; width: 60%;}
.product-img {padding: 1rem 0;}
.sanmos-location p {margin: 0 auto; width: 80%;}

@media screen and (max-width: 1024px) {
  .sanmos-location p {font-size: 16px;}
  .sanmos-map-img img {width: 55%;}
}

@media screen and (max-width: 639px) {
  .sanmos-map-img img {width: 80%;}
  .sanmos-location p {font-size: 14px; width: 100%;}
}

@media screen and (max-width: 500px) {
  .sanmos-map-img img {width: 90%;}
}

/* updated - 26022020 */
@media screen and (max-width: 639px) {
  .mobile-logo img {width: 60%;}
  .sanmos-welcome h3 {font-size: 40px;}
  .sanmos-about-us h5 span img {width: 60%;}
}