* {
  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;
}

.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-portfolio*/
.about-portfolio{
  background-color: #e0e2e0;
}
.main{
  background-color: #e7e4d1fb;
}
.main ul li button{
  background-color: #3a3939;
  margin: 5px;
}
/* Tabs */
.nav-pills .nav-link.active {
  background-color: rgb(160, 141, 119); /* or any color you want */
  color: inherit !important;                /* keep text color */
  box-shadow: none !important;
  border: none !important;
}
/* Video Container Styling */
.video-container {
  position: relative;
  padding-bottom: 47%; /* reduced height */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 16px; /* rounded corners */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth hover effect */
}

/* Make iframe fill the container */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px; /* match container */
}

@media (max-width: 768px) {
  .video-container {
    padding-bottom: 80%; /* increases height for mobile */
  }
}
/*   */

/* Hover Effect */
.video-container:hover {
  transform: scale(1.03); /* slight zoom */
  box-shadow: 0 12px 25px rgba(0,0,0,0.35); /* stronger shadow on hover */
}
@media (max-width:576px) {
    .tuitoral{
        width: 300px;
        height: 400px;
    }
    
}
/* 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: #000;    /* 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);
  }
}

/* deliverd*/
.carousel-item img{
  border-radius: 10px;
}
.carousel-inner:hover{
  box-shadow: 5px 5px 5px 10px solid black;
}
@media (max-width: 576px) {
  .delivered{
    margin-bottom: 25px;
  }
}
/* FAQ's section*/
.accordion-item button{
  font-size: 17px;
  font-weight: 645;
  background-color: #ebe1e1 ;
}
.accordion-body{
background-color: #cdcccc
}
.accordion-item button:hover{
  border: none;
color: rgb(189, 8, 8);
}
/* Remove blue background and border on active/click */
.accordion-button:not(.collapsed) {
  background-color:  #ebe1e1 !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Remove focus outline (blue border when clicked) */
.accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
}
/* portfolio-enquiry submit*/
.portfolio-enquiry button:hover{
background-color: #f9cf26 !important;
transition: 0.5s;
}
p{
  font-size:17px;
}