@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;200;300;400;500&display=swap');


p, a, h1, h2, h3, h4, h5, span{
    font-family: 'Prompt', sans-serif !important;
}
#mainMenu nav>ul>li>a {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    padding: 0 15px;
}
#mainMenu nav>ul>li.active>a, #mainMenu nav>ul>li.current>a, #mainMenu nav>ul>li.current>span, #mainMenu nav>ul>li.hover-active>a, #mainMenu nav>ul>li.hover-active>span, #mainMenu nav>ul>li:focus>a, #mainMenu nav>ul>li:focus>span, #mainMenu nav>ul>li:hover>a, #mainMenu nav>ul>li:hover>span {
    color: #fff;
    background: #193b64 !important;
}

.slide-caption .htitle {
    font-size: 3rem !important;
    margin-bottom: 15px;
    font-weight: 700;
    font-family: kanit;
    font-weight: 500;
}

.slide-caption p {
    font-size: 1.5rem !important;
    font-family: 'kanit';
    text-shadow: 0px 1px 10px #fff;
}

.btn {
    padding: 0px 20px;
    line-height: 38px;
    text-shadow: none !important;
    color: #ffffff;
    background-color: #89c343;
    border: none;
    position: relative;
    border-radius: 50px;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn-border:hover {
    background-color: #122762;
    border-color: #0c1b43;
    transition: 0.3s;
    transform: scale(1.2);
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn-border:hover {
    background-color: #122762;
    border-color: #0c1b43;
}
section.block-slider .owl-carousel .owl-nav [class*=owl-] {
    color: #fff;
    background-color: #e4e4e4;
    border: 2px solid #e4e4e4;
    opacity: 1;
}

section.block-slider .owl-carousel .owl-nav [class*="owl-"]:hover, 
div#suop--ele___headBanner .owl-carousel .owl-nav [class*="owl-"]:hover  {
    background-color: var(--main-bg-color);
    border-color: #4caf50 !important;
}
.owl-carousel .owl-nav [class*="owl-"]:hover {
    background-color: #0fa255 !important;
    border-color: #0fa255 !important;
}
section.block-slider .owl-carousel .owl-nav .owl-prev {
    left: -50px;
}
section.block-slider .owl-carousel:hover .owl-prev {
    right: auto;
    left: -50px;
    opacity: 1;
}
section.block-slider .icon-box.icon-box-right .icon, section.block-slider .owl-carousel .owl-nav .owl-next {
    right: -50px;
}
section.block-slider .owl-carousel:hover .owl-next {
    left: auto;
    right: -50px;
    opacity: 1;
}
.btn.btn-plain {
    color: #fff;
    background-color: #193b64;
    border: none;
    font-size: 1.125rem;
    line-height: 44px;
}

/* About */
/*section#suop--ele___block-slider-4 {background-image: url(../_images/bg-about.png);}*/
h5.text-sm.suop--slider--subtitle {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}
h3.text-md.suop--slider--title {
    font-weight: 500;
    letter-spacing: 0px;
}
section.block-slider:before {
    content: "";
    width: 500px;
    height: 5px;
    background: #224876;
    position: absolute;
    z-index: 999;
    bottom: 50px;
    margin: auto;
    right: 0;
    left: 0;
    border-radius: 50px;
}

/* Gallery  */
section#suop--ele___block-gallery-5 {
    background-image: url(../_images/bg-gall.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.block-gallery .row.main_content:before {
    content: "ตัวอย่างบรรจุภัณฑ์";
    display: block;
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Prompt';
    font-weight: 500;
    color: #15377a;
    margin-bottom: 80px;
}
.boxImage {text-align: center;}
.boxImage:before {
    content: "";
    width: 100%;
    height: 100px;
    position: absolute;
    background: radial-gradient(50% 50% at 50% 50%, #071e3f80 0%, rgb(255 255 255 / 0%) 100%);
    z-index: -1;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -20px;
}
.block-gallery img {
    width: 90%;
}
.incap-banner .boxDetail .htitle {
    background-color: unset !important;
}
.incap-banner .boxDetail span {
    color: #1a3961 !important;
    font-weight: 400 !important;
    display: block;
    font-size: 1.5rem;
    background-color: #fff;
    text-align: center;
    padding: 10px 20px;
    box-shadow: 2px 4px 5px #20202020;
    border-radius: 50px;
    width: fit-content;
    margin: auto;
}
.inner:hover .boxDetail {
    transition: 0.3s;
    transform: translateY(-60px) scale(1.2);
}

.inner:hover .boxImage {
    transition: 0.3s;
    transform: scale(0.9);
    filter: brightness(0.8);
}

.boxImage{transition: 0.4s;}
.boxDetail{transition: 0.3s;}


/* Service  */
.block-service .col-left {
    padding: 10px 0px !important;
}
.block-service .blog-item {
    width: 45% !important;
    float: left;
    display: inline-block;
    text-align: right;
    padding: 40px;
    box-shadow: 0px -3px 5px rgb(51 51 51 / 4%);
/*        background: linear-gradient(
360deg
, #255289 0%, #1f998da6 100%) !important;*/
    background: linear-gradient( 181deg , #255289c7 0%, #0d2a51 100%) !important;
    text-align: center !important;
    border-radius: 5px;
    margin: 10px;
    box-shadow: 2px 3px 10px #20202050;
    transition: 0.5s;
}
li.blog-item.suop--list_item:nth-child(1), li.blog-item.suop--list_item:nth-child(4) {
    /* background: #fff !important; */
    background: linear-gradient( 
360deg
 , #255289 0%, #1f998da6 100%) !important;
}
/*li.blog-item.suop--list_item:nth-child(1):hover, li.blog-item.suop--list_item:nth-child(4):hover {
    background: linear-gradient( 81deg , #255289c7 0%, #0d2a51 100%) !important;
}*/
/*.block-service .blog-item {
    width: 50%;
    float: left;
    display: inline-block;
    text-align: right;
    padding: 40px;
    box-shadow: 0px -3px 5px rgb(51 51 51 / 4%);
    background-color: #224896 !important;
    text-align: center !important;
}
*/.block-service .htitle {
    letter-spacing: 0;
    color: #fff;
    font-weight: 400;
    background-color: #89c343;
    text-align: center;
    border-radius: 50px;
    padding: 5px 18px;
    width: fit-content;
    margin: auto;
    text-shadow: 1px 2px 3px #20202050;
}
.block-service .blog-item:hover {
    transition: 0.5s;
    transform: scale(1.03);
    /*background: linear-gradient( 41deg , #255289 0%, #1f998da6 100%) !important;*/
}
p.suop--list--description {
    color: #fff;
}
.block-service .blog-item img {
    margin-bottom: 15px;
    width: 160px;
    background: radial-gradient(50% 50% at 50% 50%, #255186 0%, rgb(255 255 255 / 0%) 100%);
}
.block-service:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    background-image: url(../_images/text-bg-ser.png);
    background-size: 100%;
    right: 0;
    z-index: 999;
    margin-right: 60px;
    margin-top: 0px;
}


/* Footer */
.widget-address li p {
    line-height: 0px;
}
h3.htitle.suop--title_1 span {
    line-height: 1px;
}
.col-xs-12.col-sm-12.col-md-3.col-left {
    background-color: #fcfcfc;
    padding-top: 90px;
    margin-top: -110px;
    padding-bottom: 14px;
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0px 3px 20px #04152d;
}
.col-xs-12.col-sm-12.col-md-5.col-left {
    padding-left: 65px;
}
img.logo-footer {
    filter: brightness(1) !important;
    width: 90%;
    margin: auto;
    display: block;
}
#goToTop:after, #goToTop:before {
    background-color: #1ABC98 !important;
}

@media (max-width: 767px){
    h3.htitle.suop--title_1 span {
        font-size: 20px !important;
    }
}

@media (max-width: 480px){
.block-gallery .row.main_content:before {
    content: "ตัวอย่างบรรจุภัณฑ์";
    display: block;
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Prompt';
    font-weight: 500;
    color: #15377a;
    margin-bottom: 30px;
}
.block-service .blog-item {
    width: 44% !important;
}
.block-service .blog-item img {
    margin-bottom: 15px;
    width: 100%;
}
.block-service .htitle {
    letter-spacing: 0;
    color: #fff;
    font-weight: 400;
    background-color: #89c343;
    text-align: center;
    border-radius: 50px;
    padding: 5px 11px;
    font-size: 12px;
    width: fit-content;
    margin: auto;
    text-shadow: 1px 2px 3px #20202050;
}
.block-service .col-left {
    padding: 0;
    margin-top: 235px;
    margin-bottom: 20px;
}
.block-service:before {
    content: "";
    position: absolute;
    width: 150%;
    height: 100%;
    background-image: url(../_images/text-bg-ser.png);
    background-repeat: no-repeat;
    background-size: 100%;
    right: 0;
    z-index: 999;
    margin-right: -74px;
    margin-top: -165px;
}
.col-xs-12.col-sm-12.col-md-5.col-left {
    padding-left: 20px;
}

}