h2, .h2 {font-family: 'Kanit', sans-serif; font-weight:600; color: #013f7e; font-size: 3.1rem; margin-top: -5px; line-height: 1;}
    @media screen and (max-width: 476px) {h2, .h2 {font-size: 2.1rem;} }

    .logo {width: 400px;}
    .logo-footer {width:300px;}
    @media screen and (max-width: 500px) {.logo {width: 300px;} }
    @media screen and (max-width: 400px) {.logo {width: 260px;} }
    @media screen and (max-width: 360px) {.logo {width: 240px;} }
    @media screen and (max-width: 340px) {.logo {width: 220px;} }

    .navbar {padding: 0rem;}
    .nav-item a {color:#013f7e}
    .navbar-nav li:nth-child(6) a {color: #f45905}
    .navbar-nav li:nth-child(6) a: hover; {color: #dc5003}
    .navbar-nav .nav-link.active {color:#012f5e;}
    .nav-link {padding-right: 100px;}
    .nav-item a:hover {color:#012f5e;}
    .navbar-toggler:focus {box-shadow: 0 0 0 0;}

    .display-5 {line-height: 1; font-family: 'Kanit', sans-serif; font-weight:600}
    @media (min-width: 1200px) {.display-5 {font-size: 3.5rem;}}

    .fs-resizing {font-weight:200}
    @media screen and (max-width: 790px) {.fs-resizing {font-size: 12px;} }
    @media screen and (max-width: 421px) {.fs-resizing {font-size: 10px;} }

    .orange {color: #f45905;}
    .sm-orange {color: #f45905; font-size: 20px; font-family: 'Kanit', sans-serif; font-weight: 400;}

    .btn-primary {background: #f45905; border: 0px; border-radius: 0; font-size: 14px; font-weight: 600; font-family: 'Lato', sans-serif; padding: 18px 70px;}
    .btn-lg:hover {background: #dc5003; color: #ffffff; transition: 0.6s ease-in-out;}

    .card {border: none; border-radius: 0px; box-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.14);}
    .card-text {font-family: 'Lato', sans-serif; font-weight:300; font-size: 14px; line-height:1.2;}
    .card-link {color: #f45905; font-size: 14px; font-weight: 500; text-decoration: none;}
    
    /* The hero image */
    .hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(1, 63, 126, 0.7), rgba(1, 63, 126, 0.7)), url("https://prosvcs.net/website_ce0e8541/wp-content/themes/prosvcs/images/hero.jpg");
    /* Set a specific height */
    height: 50%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: #ffffff;
    }
    .hero-image p {font-family: 'Lato', sans-serif; font-weight:300; line-height:1.3;}

    .video-hero-image {
      /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
      background-image: linear-gradient(rgba(1, 63, 126, 0.7), rgba(1, 63, 126, 0.7)), url("https://prosvcs.net/website_ce0e8541/wp-content/themes/prosvcs/images/video-hero.jpg");
      /* Set a specific height */
      height: 50%;
      /* Position and center the image to scale nicely on all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      color: #ffffff;
    }
    .video-hero-image p {font-family: 'Lato', sans-serif; font-weight:300; line-height:1.3;}

    .hero-image-about {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(1, 63, 126, 0.7), rgba(1, 63, 126, 0.7)), url("https://prosvcs.net/website_ce0e8541/wp-content/themes/prosvcs/images/hero-about.jpg");
    /* Set a specific height */
    height: 50%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: #ffffff !important;
    }

    .about p {font-family: 'Lato', sans-serif; font-size: 1.1rem; font-weight:300; line-height:1.4;}
    .hero-image-about a {text-decoration: none; color: #fff;}
    .fs-5 {font-weight: 200;}

    .dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #043464;
}

    .link-arrow span {display: inline-block; transition: 0.2s ease-in;}
    .link-arrow:hover span {transform: translateX(15%);}

    .testimonial-card {overflow: hidden; font-family: 'Lato', sans-serif;}
    .testimonial-content {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
    .testimonial-image {width:78px; height: 78px; object-fit: cover;}

    .quote-icon {font-size: 2rem; color: #6a11cb; opacity: 0.6;}

    .modal-dialog {max-width: 800px; margin: 30px auto;}
    .modal-body {position:relative; padding:0px;}

    .btn-close {position:absolute; right:-30px; top:0;}

    .tre-box {margin-top:-85px;}
    .tre-box-hr {height: 1px; width: 100%; background:#f45905;}

   /* .img-container{
      width:100%;
      height:auto;
      position:relative;
    }

    .img-container img{
      width:100%;
      height:auto;
      display:block;
    }
    .overlay{
      position:absolute;
      opacity:0;
      transition: all 0.6s ease-in-out;
      cursor: pointer;
    }
    .overlay-fade{
      height:100%;
      width:100%;
      top:0;
      left:0;
    }
    .overlay-text{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
    .overlay-text h5{
      font-size:16px !important;
      color:#ffffff;
      text-align: center;
    }
    @media (max-width: 991px) {.overlay-text h5{font-size:13px !important;}}
    .img-container:hover .overlay-fade{
      opacity:1;
      width:100%;
      background: #013F7E;
      background: linear-gradient(0deg,rgba(1, 63, 126, 0.7) 0%, rgba(1, 63, 126, 0.7) 100%);
    } */

    .projects-container {
      position: relative;
      display: inline-block;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
    }
    .projects-container .projects-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #013F7E;
      background: linear-gradient(0deg,rgba(1, 63, 126, 0.7) 0%, rgba(1, 63, 126, 0.7) 100%);
      opacity: 0;
      transition: opacity 500ms ease-in-out;
    }
     @media (max-width: 991px) {.projects-container .projects-overlay {opacity: 1;}}
    .projects-container:hover .projects-overlay {
      opacity: 1;
    }
    .projects-overlay span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
    .projects-overlay h5 {font-size:16px; text-align:center; line-height: 1;}
     @media (max-width: 991px) {.projects-overlay h5 {font-size:13px;}


    .video-btn {padding: 18px 20.5px 18px 26.5px;}

    .fo-we-3 {font-weight:300}
    .fo-we-6 {font-weight:600}

    .foot-font {font-size:16px; font-weight:200;}
    .foot-call {font-size:16px; font-weight:200; line-height:1}
    .foot-num {font-size:22px; font-weight:600;}
    .foot-loc {font-size:16px; font-weight:200; line-height:1.3}
    .foot-marker {width:25px;}

    .sub-foot {color:#fff; font-size:10px; font-weight:200;}