* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face{
  font-family: 'applefont';
  src: url(../asserts/fonts/SF-Pro-Text-Regular.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, p, span, a, li, button, input, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* Paragraphs or content sections with a serif look */
.serif-text {
  font-family: "Noto Serif", serif;
}

/* For classic serif styles */
.pt-serif {
  font-family: "PT Serif", serif;
}

/* For condensed and bold titles */
.condensed {
  font-family: "Roboto Condensed", sans-serif;
}

#about {
  color: #f9cf26 !important;
}

.bck {
  width: 100%;
  height: 68px;
  background-color: #15161bf1;
  position: relative;
}
@media (min-width: 576px) and (max-width: 991px) {
  
  .bck{
    height: 75px !important;
  }

}
/* Changes done Here*/

.about {
  background-color:#ebdcc6;
}

.about h2 {
  font-size: 28px;
  color: #002B5B;
}
/* Custom class to override the Bootstrap weight */
.my-custom-weight {
  font-weight: 100; /* You can use any numeric value from 100 to 900 */
}

.about p {
  font-size: 17 px;
  line-height: 1.6;
  color: #444;
}
p{
  font-size: 17px;
}
.story-img{
  width: 300px;
  height: auto;
}

.story-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ceo-section {
  overflow-x: hidden; /* Prevent shaking or horizontal scroll */
}

.ceo-section{
background-image: url(../asserts/about/ceo_bg.webp);
background-size: cover;
}
.carpentry-services .container ul li{
 list-style: none;
}
.carpentry-services .container ul{
  padding-left: 0px;
}
.carpentry-services{
  background-color: #cfcaca;
}

/* factory*/
/* FACTORY SECTION */
.factory-section {
  background-color: #fffee3;
}
/* Desktop (default) - 16:9 container with contained video and black background */
.tuitoral {
  position: relative;
  width: 100%;
  padding-top: 56.25%;       /* 16:9 -> 9 / 16 * 100 = 56.25% */
  background-color: #ffffff;    /* black background as you wanted */
  border-radius: 10px;
  overflow: hidden;
  -webkit-backface-visibility: hidden; /* reduce flicker */
  backface-visibility: hidden;
  transform: translateZ(0);  /* promote to GPU to reduce jitter */
}

.tuitoral video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;       /* <-- desktop behaviour you requested */
  object-position: center;
  display: block;
  border-radius: 10px;
}

/* Mobile / Tablet: switch to 3:4 and make the video fill the box */
@media (max-width: 991.98px) {
  .tuitoral {
    padding-top: 133.33%;    /* 3:4 -> 4 / 3 * 100 = 133.33% */
  }
  .tuitoral video {
    object-fit: cover;       /* fills the tall box on mobile */
  }
}

/* Optional: small hover zoom on desktop */
@media (min-width: 992px) {
  .tuitoral video {
    transition: transform 0.45s ease;
  }
  .tuitoral:hover video {
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* Optional: vertically align text + image */
.factory-section .row {
  display: flex;
  align-items: center;
}


@media (max-width: 575px) {
  .story-card.h-100,
  .image-wrap.h-100 {
    min-height: 300px;
  }

/* missions*/
}
.mission{
    background-color:whitesmoke;
}
.mission img {
  width: 40px;
  height: 40px;
}

.mission h3 {
  margin-top: 10px;
}