/* ===========================
Index Of css

01. Starter CSS
02. Header CSS
03. Hero CSS
04. News CSS
05. Service Slider CSS
06. News Feature CSS
07. Cookie Alert CSS
08. Testimonial CSS
09. Team CSS
10. Subscribe CSS
11. Blog CSS
12. Contact CSS
13. Footer CSS

========================== */

:root {
    /*========== Colors ==========*/

    /*
    --first-color: #001871;
    --first-color-alt: #0077cb;
*/
    --bs-primary: #004e98;
    --bs-primary-rgb: 0, 53, 102;
    
    --first-color: #004e98;
    --first-color: #004e98;
    --first-color-alt: #3a6ea5;


    --second-color: #8F1E31;
    --second-color-alt: #D32F4A;

    --third-color: #1e6091;
    --third-color-alt: #1a759f;

    --hero-color: #1982c4;

    --heading-color: #004e98;

    --footer-color: #0f4c5c;

    --title-color: #9d0208;

    --light-color: #f7fbff;
    --light-color-alt: #F9F9F9;

    --footer-text-color: #dee2e6;

    --body-color: #262626;

    --service-slider-bg: #4D83C9;
    
    --line-color: #ced4da;

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', "Noto Sans Thai", sans-serif;
    --hilight-font: 'Poppins', 'Pattaya', sans-serif;
    --printout-font: 'Poppins', 'Sarabun', sans-serif;

    --h1-font-size: 34px;
    --h2-font-size: 30px;
    --h3-font-size: 26px;
    --h4-font-size: 22px;
    --h5-font-size: 20px;

    --heading-font-size: 20px;
    --blog-heading-size: 16px;
    --normal-font-size: 16px;
    --small-font-size: 14px;


    /*========== Font weight ==========*/
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    /*========== Margenes ==========*/
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*===========================
    01. Starter CSS
===========================*/
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    font-weight: var(--fw-normal);
    font-size: var(--normal-font-size);
    color: var(--body-color);
    overflow-x: hidden;
    position: relative;

}

section,
aside {
    padding: 10px 0;
}

a,
a:link,
a:visited {
    text-decoration: none;
}

h1,
h2,
h3 {
    color: var(--heading-color);
    font-weight: var(--fw-semi-bold);
    /*    font-family: var(--hilight-font);*/
}

h1 {
    font-size: var(--h1-font-size);
}

h2 {
    font-size: var(--h2-font-size);
}

h3 {
    font-size: var(--h3-font-size);
}

h4 {
    font-size: var(--h4-font-size);
    font-weight: var(--fw-semi-bold);
}

h5 {
    font-size: var(--h5-font-size);
    font-weight: var(--fw-semi-bold);
}

.bg-first {
    background: var(--first-color);
    background-color: var(--first-color) !important;
    
}

.bg-second {
    background: var(--second-color)
}

.bg-third {
    background: var(--third-color)
}

.bg-light {
    background: var(--light-color)
}


.text-first {
    color: var(--first-color)
}

.text-second {
    color: var(--second-color)
}

.text-third {
    color: var(--third-color)
}

@media (max-width:576px) {
    .visible-sm {
        visibility: visible !important
    }

    .invisible-sm {
        display: none;
        visibility: hidden !important
    }
}

@media (min-width:576px) {
    .visible-sm {
        display: none;
        visibility: hidden !important
    }

    .invisible-sm {
        visibility: visible !important
    }
}

.heading-topic {
    margin: 5px 0;
}

.heading-text {
    font-size: var(--heading-font-size);
    color: #ffffff;
    margin-bottom: 0;
}

.heading-topic span {
    padding: 5px 10px;
}

.topic-line-bt-first {
    border-bottom: 2px solid var(--first-color);
    /*    border-bottom: 3px solid #0077cb;*/
    margin-bottom: 0.5rem;
}

.topic-line-bt-second {
    border-bottom: 2px solid var(--second-color);
    /*    border-bottom: 3px solid #0077cb;*/
    margin-bottom: 0.5rem;
}

.topic-line-bt-third {
    border-bottom: 2px solid var(--third-color);
    /*    border-bottom: 3px solid #0077cb;*/
    margin-bottom: 0.5rem;
}

/*===========================
    02. Header CSS
===========================*/

.navbar-area {
    /*
    position: fixed;
    top: 0;
    left: 0;
*/
    width: 100%;
    z-index: 99;
    transition: all 0.3s ease-out 0s;
    padding: 0;
}

.navbar {
    padding: 10px 0;
    position: relative;
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
    transition: all 0.3s ease-out 0s;
}

.navbar-brand {
    padding: 0;
}

.logo-text {
    font-weight: 600;
}

.navbar-color .logo-text h2,
.navbar-color .logo-text span,
.site-navigation .logo-text h2,
.site-navigation .logo-text span {
    color: #ffffff !important;
}

.logo-text h2 {
    font-size: var(--h1-font-size);
    font-weight: var(--fw-bold);
    line-height: 0.3;
    color: var(--first-color);
}

.english.logo-text h2 {
        font-size: var(--h3-font-size);
        font-weight: var(--fw-bold);
        line-height: 0.3;

    }

.logo-text span {
    font-size: var(--normal-font-size);
    font-weight: var(--fw-semi-bold);
    color: var(--first-color);
}

.navbar-nav .nav-item {
    position: relative;
    z-index: 1;
}


.navbar .navbar-nav .nav-item .nav-link.text-white { 
    color: #ffffff !important;
}

@media (max-width:576px) {


    .logo-text h2 {
        font-size: var(--h3-font-size);
        font-weight: var(--fw-bold);
        line-height: 0.3;

    }
    
    .english.logo-text h2 {
        font-size: var(--h4-font-size);
        font-weight: var(--fw-bold);
        line-height: 0.3;

    }


    .logo-text span {
        font-size: var(--small-font-size);
        font-weight: var(--fw-semi-bold);
        color: var(--heading-color);
    }

}

.navbar-nav .nav-item {
    padding: 0 10px;
}

.navbar-nav .nav-item .nav-link {
    color: #fff !important;
    text-rendering: optimizeLegibility;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    margin: 0;
    /*    padding-left: 15px !important;*/
    transition: 350ms;
}



ul.navbar-nav > li > a {
    padding: 15px 0 !important;
    color: #fff;
}

.site-navigation ul.navbar-nav > li > a {
    padding: 10px 20px !important;
    color: #fff;
}

.navbar-nav .nav-item .dropdown-menu {
    border-radius: 2px;
    padding: 0;
}

.navbar-nav .nav-item .dropdown-item {
    font-size: var(--normal-font-size);
    font-weight: var(--fw-semi-bold);
    color: var(--first-color);
    transition: all 0.3s ease-out 0s;
    position: relative;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
/*    text-transform: uppercase;*/
}


.header-primary .navbar-nav .nav-item .show .dropdown-item {
     color: #ffffff;
}

.navbar-nav .nav-item .dropdown-item:hover {
    background: var(--light-color-alt);
    border-bottom: 1px solid var(--first-color-alt);

}

.navbar-nav .nav-item .dropdown-item:active {
    background: var(--light-color);
}

.navbar-nav .nav-item a {
    color: var(--first-color-alt);
}

.header-primary .navbar .navbar-toggler {
    border: 2px solid  #ffffff;;
    color:  #ffffff;;
}


.navbar.nav-static.navbar-boxed {
    position: static;
}

.header-one .logo-area {
    padding: 10px 0;
}

/*
.header-one,
.header-one .site-navigation {
    background: var(--first-color);
}
*/

.header-one .navbar-collapse {
    padding-left: 0;
}

.navbar-toggler {
    margin-top: -60px;
    margin-right: -10px;
    padding: 6px;
    background: var(--first-color);
    border: var(--bs-border-width) solid #ffffff;
}

@media (max-width:576px) {

    .navbar-area .navbar-brand,
    .site-navigation .navbar-brand {
        width: 100%
    }
}


/*===========================
    03. Hero CSS
===========================*/

/** Slider **/
.hero {
    min-height: 600px;
}

.banner-carousel .banner-carousel-item {

    height: 600px;
    color: #fff;
    background-position: 50% 50%;
    background-size: cover;
}


.hero-full-slider .banner-carousel .banner-carousel-item {
    height: 650px;
}


@media (max-width: 991px) {
    .hero {
        min-height: 400px;
    }

    .banner-carousel .banner-carousel-item {
        height: 400px;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item {
        height: 100%;
    }
    
    .hero-bg-img .display-5 {
      font-size: 1.375rem;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-1 {
      font-size: 1.375rem !important;
    }
    
    .hero-bg-img .display-6 {
      font-size: 1.275rem;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-3 {
      font-size: 1rem !important;
    }
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-4 {
      font-size: 0.85rem !important;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-6 {
      font-size: 0.85rem !important;
    }
}

@media (max-width: 575px) {
    .hero {
        min-height: 220px;
    }

    .banner-carousel .banner-carousel-item {
        height: 220px;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item {
        height: 100%;
    }
    
    .hero-bg-img .display-5 {
      font-size: 1.375rem;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-1 {
      font-size: 1.375rem !important;
    }
    
    .hero-bg-img .display-6 {
      font-size: 0.95rem;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-3 {
      font-size: 0.80rem !important;
    }
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-4 {
      font-size: 0.80rem !important;
    }
    
    .hero-bg-img .banner-carousel .banner-carousel-item .fs-6 {
      font-size: 0.7rem !important;
    }
}

.banner-carousel .slider-img {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/** Slider Mix **/

.hero-slider-mix {
    min-height: 480px;
}

.hero-slider-mix .banner-carousel .banner-carousel-item {
    width: 100%;
    height: 479px;
    color: #fff;
    background-position: 50% 50%;
    background-size: cover;
}

.hero-slider-mix .bg-slider-img {
    width: 100%;
    height: 235px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-slider-mix .news {
    width: 100%;
    height: 100%;
}

.hero-slider-mix .news-caption {
    z-index: 3;
    width: 100%;
    padding: 15px;
    bottom: 100px;
    background: rgba(27, 38, 59, 0.7);
}

.news-caption .news-text {
    color: #ffffff;
    font-weight: var(--fw-normal);
}

@media (max-width: 575px) {
    .hero-slider-mix {
        min-height: 230px;
    }

    .hero-slider-mix .banner-carousel .banner-carousel-item {
        height: 230px;
    }

    .hero-slider-mix .bg-slider-img {
        height: 200px;

    }
}


/*===========================
    04. News CSS
===========================*/

/** News Style Blog **/


.hero-news1,
.hero-news2 {
    padding: 10px 0;
    min-height: 450px;
}




.hero-news1 .bg-main-img,
.hero-news2 .bg-second-img,
.hero-news2 .bg-main-img,
.hero-news1 .bg-col-img,
.hero-news2 .bg-col-img {
    width: 100%;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-news1 .bg-main-img {
    height: 448px;

}

.hero-news2 .bg-main-img {
    height: 478px;

}

.hero-news2 .bg-second-img {
    height: 235px;

}

.hero-news1 .bg-col-img {
    height: 220px;
}

.hero-news2 .bg-col-img {
    height: 235px;
}

.hero-news1 .news,
.hero-news2 .news {
    width: 100%;
    height: 100%;
}

.hero-news1 .news-caption,
.hero-news2 .news-caption {
    z-index: 3;
    width: 100%;
    padding: 15px;
    bottom: 100px;
    background: rgba(27, 38, 59, 0.7);
}

.news-caption .news-text {
    color: #ffffff;
    font-weight: var(--fw-normal);
}

.bg-main-img .news-caption .news-text {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: var(--fw-medium);
}

@media (max-width: 575px) {

    .hero-news1 {
        padding: 20px 0;
    }

    .hero-news1 .bg-main-img,
    .hero-news1 .bg-col-img,
    .hero-news2 .bg-main-img,
    .hero-news2 .bg-col-img {
        height: 200px;

    }

    .bg-main-img .news-caption .news-text {
        font-size: var(--normal-font-size);
        font-weight: var(--fw-normal);
    }
}


/*===========================
    05. Service Slider CSS
===========================*/


.service-slider {
    padding: 20px 0;
    background: var(--service-slider-bg);

}

#carousel-slider .item {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #759ED5;

}

#carousel-slider .item img {

    width: 80px;
    border-radius: 10px;
    ;

}

#carousel-slider .item .item-title {
    display: block;
    padding-top: 10px;
    /*    color: var(--first-color);*/
    color: #ffffff;
    font-weight: var(--fw-medium);
}

.division-slider {
    padding: 20px 0;
}

.main-slider {
    height: 100%;
    color: #ffffff !important;
}

.slider {
   
}

.slider h1, .slider h2, .slider h3, .slider h4 {
    color: #ffffff !important;
}



/*===========================
    06. News Feature CSS
===========================*/
/*
.feature-news {
    padding: 20px 0;
}
*/


.feature-news.theme-first .nav-tabs {
    border-bottom: 2px solid var(--first-color);
}

.feature-news.theme-second .nav-tabs {
    border-bottom: 2px solid var(--second-color);
}

.feature-news.theme-third .nav-tabs {
    border-bottom: 2px solid var(--third-color);
}


.feature-news.theme-first .nav-tabs .nav-link,
.feature-news.theme-second .nav-tabs .nav-link,
.feature-news.theme-third .nav-tabs .nav-link {
    border: none;
    padding: 10px 20pk;
    border-radius: 0;
    font-size: var(--heading-font-size);
    font-weight: var(--fw-semi-bold);
}

.feature-news.theme-first .nav-tabs .nav-link.active,
.feature-news.theme-second .nav-tabs .nav-link.active,
.feature-news.theme-third .nav-tabs .nav-link.active {
    color: #ffffff;
}

.feature-news.theme-first .nav-tabs .nav-link {
    color: var(--first-color);
}

.feature-news.theme-second .nav-tabs .nav-link {
    color: var(--second-color);
}

.feature-news.theme-third .nav-tabs .nav-link {
    color: var(--third-color);
}

.feature-news.theme-first .nav-tabs .nav-link.active {
    background: var(--first-color);
}

.feature-news.theme-second .nav-tabs .nav-link.active {
    background: var(--second-color);
}

.feature-news.theme-third .nav-tabs .nav-link.active {
    background: var(--third-color);
}

.feature-news.theme-first .card,
.feature-news.theme-second .card,
.feature-news.theme-third .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.feature-news.theme-first .card {
    border: 2px solid var(--first-color);
    border-top: 0;
}

.feature-news.theme-second .card {
    border: 2px solid var(--second-color);
    border-top: 0;
}

.feature-news.theme-third .card {
    border: 2px solid var(--third-color);
    border-top: 0;
}

.feature-news.theme-first .accordion {
/*    border: 2px solid var(--first-color);*/
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-color: var(--first-color);
/*    border-top: 0;*/
}
.feature-news.theme-second .accordion {
/*    border: 2px solid var(--second-color);*/
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-color: var(--second-color);
/*    border-top: 0;*/
}
.feature-news.theme-third .accordion {
/*    border: 2px solid var(--third-color);*/
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-color: var(--third-color);
   
/*    border-top: 0;*/
}

.feature-news .accordion-item {
    margin-bottom: 5px;
}

.feature-news .accordion-item .accordion-button {
    font-size: var(--heading-font-size);
    font-weight: var(--fw-semi-bold);
}


.feature-news.theme-first  .accordion-item .accordion-button {
    color: #FFFFFF;
    background-color: var(--first-color);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.feature-news.theme-second  .accordion-item .accordion-button {
    color: #FFFFFF;
    background-color: var(--second-color);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.feature-news.theme-third  .accordion-item .accordion-button {
    color: #FFFFFF;
    background-color: var(--third-color);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}




.news-content {
    padding: 8px 5px;
    display: flex;
    justify-content: space-between;
}

.news-content.news-bottom-line {
    border-bottom: 1px solid var(--line-color);
}

.news-content .news-title,
.news-content .news-meta {
    display: block;
    padding: 5px;
}

.news-content .news-title {
    width: 85%;
    font-weight: var(--fw-medium);
}


.news-content .news-meta span {
    font-size: var(--small-font-size);
    font-weight: var(--fw-medium);
}

.theme-first .news-content .news-link,
.theme-first .news-content .news-meta span {
    color: var(--first-color);
}

.theme-second .news-content .news-link,
.theme-second .news-content .news-meta span {
    color: var(--second-color);
}

.theme-third .news-content .news-link,
.theme-third .news-content .news-meta span {
    color: var(--third-color);
}

/*
.news-link:hover {
   font-weight: var(--fw-semi-bold);
}
*/

.theme-first .news-content:hover,
.theme-second .news-content:hover,
.theme-third .news-content:hover {
    background: var(--light-color);
}

.theme-first .news-content:hover {
    border-left: 2px solid var(--first-color);
}

.theme-second .news-content:hover {
    border-left: 2px solid var(--second-color);
}

.theme-third .news-content:hover {
    border-left: 2px solid var(--third-color);
}


/*===========================
    07. Cookie Alert CSS
===========================*/
.cookiealert {
    position: fixed;
    background-color: var(--bs-warning);
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    padding: 1rem 1.5rem;
}

@media only screen and (min-width:576px) {
    .cookiealert {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.cookiealert p {
    font-size: 14px;
    color: #ffffff;
    margin-right: 1.5rem;
}

@media only screen and (min-width:576px) {
    .cookiealert p {
        margin-right: 1.5rem;
        margin-bottom: 0;
    }
}

.cookiealert p a {
    color: var(--third-color);
    font-weight: 700;
}

@media only screen and (min-width:576px) {
    .cookiealert .btn {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 140px;
        flex: 0 0 140px;
        width: 140px;
        max-width: 140px;
    }
}

.cookiealert.show {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
}

/*** Latest News End ***/


/*===========================
    13. Footer CSS
===========================*/

footer {
    margin-top: 20px;
}

footer a , footer a:hover  {
    color: #ffffff;
}

.logo-footer {
    font-size: var(--h2-font-size);
} 

.copyright, .footer-policy {
    font-size: var(--small-font-size);
}