@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Kanit:ital,wght@0,600;0,900;1,700&family=Lobster&family=Secular+One&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,500;0,600;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,900;1,300;1,400;1,500;1,600;1,800&display=swap');
/* Font: Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
:root {
    
  --ms-orange: #F16B2C;
  --ms-golden: #edf906;
  --ms-white: #fbf9f6;
  --ms-black: #121212;
  --ms-darkBlue: #162a45;
  --ms-lightBlue: #b1ffda;
  --ms-grey: #DCDCDC;
  --animate-delay-1: 2.5s;
}

.text-ms-blue {
  color: #10294B;
}

.text-ms-golden {
  color: var(--ms-golden);
}
.text-ms-green{
color:#83B051;
}
.text-ms-orange {
  color: var(--ms-orange);
}

.text-ms-black {
  color: var(--ms-black);
}

.text-ms-light-blue {
  color: var(--ms-lightBlue);
}

.text-ms-white {
  color: var(--ms-white);
}

.bg-ms-blue {
 background-color: #10294B;
}
.bg-offwhite{
  background-color: #F2F5F7;
}
.bg-ms-cl1 {
  background-color: #f6fff9;
}

.bg-ms-cl2 {
  background-color: #f9f9f9;
}

.bg-ms-grey {
  background-color: var(--ms-grey);
}
.bg-ms-green{
    background-color:#83B051;
}
.bg-ms-orange {
  background-color: var(--ms-orange);
}

.bg-ms-white {
  background-color: var(--ms-white);
}

.bg-ms-darkBlue {
  background-color: var(--ms-darkBlue);
}

.Kanit-font {
  font-family: 'Kanit', sans-serif !important;
}

.Secular-font {
  font-family: 'Secular One', sans-serif;
}

.Poppins-font {
  font-family: 'Poppins', sans-serif;
}
.Montserrat-font{
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}
.text-justify {
  text-align: justify;
}

.hov-zoom {
  transition: all 0.4s;
}

.hov-zoom:hover {
  scale: 1.2;
  transition: all 0.4s;
}

.hov-drop-shadow {
  transition: all 0.4s;
}

.hov-drop-shadow:hover {
  -webkit-filter: drop-shadow(5px 10px 5px var(--mmc-deep-gold));
  filter: drop-shadow(5px 5px 5px #666666);
  transition: all 0.4s;
}

/* navbar color change when scrolling */
.bg-blur {
  background-color: white;
  transition: all 0.3s ease-in-out;
  /*border-bottom: 0.5px solid white;*/
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

#menu .nav-item .nav-link:hover {
  color: #83B051 !important;
}

.dropdown:hover .dropdown-menu {
  display: block;
}


/* social-icons */
.sm-icons {
  flex-direction: row;
}

.sm-icons .nav-link {
  /*padding-right: 1em;*/
  font-size: 1.5rem;
}

.sm-icons .nav-link:hover {
  color: #83B051;
}

/* video slider & image responsive */

@media (min-width: 768px) {
  .video-container {
      height: 650px; /* Adjust the fixed height as needed for larger screens */
  }
}

@media (max-width: 767px) {
  .video-container {
      margin-top:80px;
      height: 200px; 
  }
    .image-margin{
       margin-top:70px;
  }
}



/* .swiper-wrapper {
  padding: 10px 10px;
} */

/* image slider */


/* footer */
.footer_s a {
  text-decoration: none;
}

.footer_end:hover {
  color: #10294B;
}

/* nav bar list */
.list-group-item {
  border: none;
}

/* mega menu */



/* contact us */
.world-map {
  background-image: url("../img/map.svg");
  background-position: inherit;
  background-repeat: repeat;
}

.form-size {
  height: 150px;
}

.s_top {
  z-index: 800 !important;
}

/* career section css */

.career {
  color: #ffffff;
  background-image: url("../img//career/MSM-Career.webp");
  width: 100%;
  background-position: center;
  object-position: 50% 0;
  object-fit: cover;
  background-size: cover;
  background-attachment: fixed;
}

.display-4 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
}

/* nav responsive */
@media (max-width: 991.98px) {
  .nav_responsive {
    max-height: 530px;
    overflow-y: auto;
  }
  .navbar {
        background-color: #fff;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .navbar {
    font-size: 15px;
  }
}

/* Preloader CSS  */
/* Spinner Loader Start */
.preloader {
  background-color: #93b4d6;
  position: fixed;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  z-index: 999999;
  transition: 0.6s;
  margin: 0 auto;
}

.preloader .preloader-img {
  position: absolute;
  top: 50%;
  z-index: 200;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-top: 6px;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}
.preloader-text {
  margin-bottom: 30px; /* Adjust the value as needed */
}
.preloader .preloader-img img {
 max-width: 150px; 
}

.preloader .preloader-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: #10294B;
  transform-origin: bottom left;
  transform: scaleX(0); 
  animation: preloader-line-animation 2s ease-out forwards;
  animation-fill-mode: forwards;

}

@keyframes preloader-line-animation {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
   
  }
}

/* button */
.custom-btn {
  background-color: #10294B;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  /*border: 1px solid #F16B2C;*/
}

.custom-btn:hover {
  background-color: #83B051;
  border: 1px solid #83B051;
}

/* title animation */
.section-title::before {
  position: absolute;
  content: "";
  width: 150px;
  height: 5px;
  left: 0;
  bottom: 0;
  background: #10294B;
  border-radius: 2px;
}

.section-title.text-center::before {
  left: 50%;
  margin-left: -75px;
}

.section-title.section-title-sm::before {
  width: 90px;
  height: 3px;
}

.section-title::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 5px;
  bottom: 0px;
  background: #83B051;
  -webkit-animation: section-title-run 5s infinite linear;
  animation: section-title-run 5s infinite linear;
}

.section-title.section-title-sm::after {
  width: 4px;
  height: 3px;
}

.section-title.text-center::after {
  -webkit-animation: section-title-run-center 5s infinite linear;
  animation: section-title-run-center 5s infinite linear;
}

.section-title.section-title-sm::after {
  -webkit-animation: section-title-run-sm 5s infinite linear;
  animation: section-title-run-sm 5s infinite linear;
}

@-webkit-keyframes section-title-run {
  0% {
      left: 0;
  }

  50% {
      left: 145px;
  }

  100% {
      left: 0;
  }
}

@-webkit-keyframes section-title-run-center {
  0% {
      left: 50%;
      margin-left: -75px;
  }

  50% {
      left: 50%;
      margin-left: 45px;
  }

  100% {
      left: 50%;
      margin-left: -75px;
  }
}

@-webkit-keyframes section-title-run-sm {
  0% {
      left: 0;
  }

  50% {
      left: 85px;
  }

  100% {
      left: 0;
  }
}


/* vision */


.vision-msg{
  transition: all 0.5s;
}
.vision-msg:hover{
  transition: all 0.5s ease-out;
  background-color: #f14704;
  color: white;
}

/* mission */

.mission {
  color: #ffffff;
  background-image: url("../img/mission/mission.webp");
  width: 100%;
  height: 500px;
  background-position: center;
  object-position: 50% 0;
  object-fit: cover;
  background-size: cover;
  background-attachment: fixed;
}


/* border hover */

/* home product type*/

.product-type {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid #E8E8E8;
}

.product-type:hover {
  transform: scale(1.05);
}

/*** Service ***/
.service-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-item:hover {
  transform: scale(1.05);
}

.custom-line-height {
  line-height: 1.5;
}
.text {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

/* all page image res*/
@media (max-width: 767px) {
  .image-all {
      margin-top:80px;
  }
}
/* Get In toch button*/

   .get-in-touch-btn {
        display: inline-block;
        padding: 20px 50px;
        font-size: 16px;
        text-align: center;
        color: black;
        text-decoration: none;
        background-color: #ffff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .get-in-touch-btn:hover {
        background: #443f3f;
        color: #ffff;
    }
    /* icon width height*/
    .custom-width-16 {
      width: 15px;
      height: 15px;
}

/* footer logo img height*/
@media (max-width: 767px) {
    .logo-img{
        width:150px;
        height: 100px; 
    }
}

/* read more */

   .readMoreBtn {
            margin-top: 10px;
        }

        .modal-container {
            position: absolute;
            background: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            display: none;
        }

        .arrow {
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -10px;
            border-width: 10px;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
     }

    .modal-width{
      width: 300px; 
      height: auto;
    }

    .cursor-pointer{
      cursor: pointer;
    }
    
/* faq*/

/* Content styles */
    /* .content {
      grid-column: 5 / span 8;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 20px;
      padding-top: 5px;
      margin: 10px;
    } */


    /* Question styles */
    .question {
      cursor: pointer;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .question i {
      margin-left: 5px;
      transition: transform 1s;
    }

    .answer {
      margin-top: 10px;
      display: none;
    }

    .answer.active {
      display: block;
      margin-top: 10px;
    }
@media (min-width: 768px) {
  .faq-font{
      font-size:20px;
  }
  .blog-font{
        font-size:60px;
        line-height: 1.5;
  }
}

@media (max-width: 767px) {
 .faq-font{
      font-size:16px;
  }
    .blog-font{
        font-size:25px;
        line-height: 1.5;
  }
}

.my-auto:hover {
    color: green;
}

.blogPost{
     text-decoration: none;
}

    .blogPost:hover {
      text-decoration: underline;
      color:black;
    }
         .wishlist-icon {
            color: #d6d4d4;
        }

        .wishlist-icon:hover {
            color: #d6d4d4;
        }

        .wishlist-icon.added {
            color: red;
        }