:root {
  --gradient-color-1: #ffffff;
  --gradient-color-2: #ffffff;  
} 


a {
  text-decoration: none;
}

.standout {
  background-color: #4A4A52; /* A slightly lighter and bluish shade for contrast */
  color: #FFFFFF; /* White text */
  padding: 8px 15px; /* Reduced padding for smaller screens */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-weight: bold; /* Bold text for emphasis */
  text-align: center; /* Center align the text */
  display: inline-block; /* Makes sure the padding doesn't stretch to full width */
  text-decoration: none; /* If it's a link, remove underline */
  transition: all 0.3s ease; /* Smooth transition for any changes */
  position: relative; /* For positioning the pseudo-element */
  font-size: 16px; /* Base font size */
}

.standout::after {
  content: "↗"; /* Unicode character for up-right arrow, indicating external link */
  font-size: 0.9em; /* Smaller size for the arrow */
  position: absolute; /* Positioning the arrow */
  margin-left: 5px; /* Adjust based on your design */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust vertical alignment */
  opacity: 0.7; /* Make the arrow slightly transparent for a subtle look */
}

/* Optional hover effect for interactivity */
.standout:hover {
  background-color: #5A5A62; /* Slightly lighter shade on hover */
  color: #FFFFFF; /* Keep text white on hover */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
}

/* Media query for smaller screens */
@media (max-width: 767px) {
  .standout {
      font-size: 14px; /* Smaller font size for mobile */
      padding: 6px 12px; /* Even less padding for smaller screens */
  }

  /* Adjust hover effect for touch devices where hover might not be applicable */
  .standout:active {
      background-color: #5A5A62; /* Use active instead of hover for touch devices */
      color: #FFFFFF; /* Keep text white on touch */
      transform: translateY(0); /* No lift on touch */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Less shadow since no lift */
  }
}

/* Media query for smaller screens */
@media (max-width: 767px) {
  .standout {
      font-size: 14px; /* Smaller font size for mobile */
      padding: 6px 12px; /* Even less padding for smaller screens */
  }

  /* Adjust hover effect for touch devices where hover might not be applicable */
  .standout:active {
      background-color: #5A5A62; /* Use active instead of hover for touch devices */
      transform: translateY(0); /* No lift on touch */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Less shadow since no lift */
  }
}

.row h1 {
  font-size: clamp(1.5rem, 2vw + 3rem, 4rem);
} 

.navbar {

  transition: background-color 0.3s ease;
  background-color: transparent;
}

.navbar.scrolled {
  background-color: white; /* White background when scrolling */
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}


.navbar .navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar .logo {
  height: 2.5rem; /* Responsive logo size */
  object-fit: contain;
  position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navbar-toggler {
  border: none;
  background-color: white; /* White background for the hamburger icon */
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease;
}

.navbar-toggler:hover {
  background-color: #f0f0f0; /* Light gray hover effect */
}

.navbar-toggler:focus{
  box-shadow:none !important;
}

.navbar-toggler-icon {
  background-color: rgb(252, 252, 252);
  border-radius: 0.125rem;
}

/* Center Menu Items on Mobile View */
@media (max-width: 1400.98px) {
  .navbar-collapse {
      text-align: center;
      
  }

  .navbar-nav {
      margin-top: 5px;
      flex-direction: column;
      align-items: center;
      gap: 1rem; /* Add space between menu items */
      border-top: 1px solid black;
  }
}

/* Hover Animations for Menu Items */
.navbar-nav .nav-link {
  white-space: nowrap; /* Prevents text wrapping */
  font-size: 1rem;
  margin-right: 1rem;
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #000000; /* Change to a primary blue color on hover */
  transform: scale(1.1); /* Slightly enlarge the link */
}

.navbar-nav .nav-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #000000; /* Animated underline */
  transition: width 0.3s ease;
  margin: 0 auto; /* Center the underline */
}

.navbar-nav .nav-link:hover::after {
  width: 100%;
}



/* Active Link Styling (Matches Hover) */
.navbar-nav .nav-link.active-link {
  color: #000000;
  transform: scale(1.1);
}

.navbar-nav .nav-link.active-link::after {
  width: 100%;
}

body{
  scroll-behavior: smooth;
  background: white;
}

/* Define a CSS variable for the font family */
:root {
  --custom-font-family: 'Jost-VariableFont_wght';
}

/* Use @font-face to import the custom font */
@font-face {
  font-family: 'Jost-VariableFont_wght';
  src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype');
}

/* Apply the custom font to elements using the CSS variable */
.custom-font {
  font-family: var(--custom-font-family), sans-serif;
}


.card {
  background-color: #f8f9fa; /* Set a lighter background color */
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1); /* Add a box shadow with a horizontal offset */
  border-radius: 15px;
}

.shadow{
  background-color: #f8f9fa; /* Set a lighter background color */
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1); /* Add a box shadow with a horizontal offset */
}


.s-card-title{
  font-size: 9vw;

}

.s-card-text{
  font-size:1vw;
}

.slider-container{
  background-color: transparent;
}


/* Custom button styles */
.btn-rounded {
  border-radius: 50px; /* Adjust border radius for rounded buttons */
}
.btn-black {
  background-color: #000; /* Set button background color to black */
  color: #fff; /* Set button text color to white */
}
.btn-fixed-size {
  min-width: 7vw; /* Set fixed width for buttons */
  
}

@media (max-width: 768px) {
  .card-title,
  .card-text {
    font-size: 14px; /* Decrease the font size for smaller screens */
  }
  .s-card-text{
    font-size:2vw;
  }
}

.testimonial{ margin: 0 10px; }
.testimonial .testimonial-content{
    margin: 20px 0 50px 0;
    position: relative;
}
.testimonial .testimonial-content:after{
    content: "";
    width: 20px;
    height: 20px;
    border-top: 20px solid #64646a;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    margin: 0 auto;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
}
.testimonial .description{
    padding: 25px 35px;
    margin: 0;
    background: #64646a;
    border-radius: 15px;
    font-size: 20px;
    color: #fff;
    position: relative;
}
.testimonial .description:before,
.testimonial .description:after{
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 8px;
    text-align: center;
    background: #64646a;
    position: absolute;
}
.testimonial .description:before{
    content: "\f10d";
    top: -18px;
    left: 25px;
}
.testimonial .description:after{
    content: "\f10e";
    bottom: -18px;
    right: 25px;
}
.testimonial .testimonial-profile{
    display: table;
    padding: 15px;
    border: 1px solid #64646a;
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
    min-height: 122px;
}
.testimonial .pic{
  margin-top: 1em;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    border: 1px solid #64646a;
    float: left;
    overflow: hidden; /* Hides anything outside the circle */
    position: relative; /* For absolute positioning of the image */
}

.pic img {
    width: 100%; /* Ensure the image fills the container width */
    height: 100%; /* Ensure the image fills the container height */
    object-fit: cover; /* This property makes the image cover the area without distortion */
    border-radius: 50%; /* Makes the image follow the circle shape */
    position: absolute; /* Position the image within its container */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust the image to be perfectly centered */
    display: block; /* Removes any extra space below the image */
}
.testimonial .title{
    display: inline-block;
    margin: 0 0 0 30px;
    font-size: 19px;
    font-weight: bold;
    color: #64646a;
    position: relative;
    top: 22px;
}
.testimonial .title:before{
    content: "";
    width: 1px;
    height: 70px;
    background: #64646a;
    position: absolute;
    top: -8px;
    left: -15px;
}
.testimonial .post{
    display: block;
    font-size: 14px;
    font-weight: normal;
    color: #888;
    margin-top: 10px;
}
.owl-theme .owl-controls{
    margin-top: 30px;
}
.owl-theme .owl-controls .owl-page span{
    background: transparent;
    border: 1px solid #64646a;
    opacity: 1;
}
.owl-theme .owl-controls .owl-page.active span{
    background: #64646a;
    border: 1px solid #64646a;
}
@media only screen and (max-width: 479px){
    .testimonial .description{
        padding: 20px;
        font-size: 16px;
    }
    .testimonial .testimonial-profile{ padding: 10px; }
    .testimonial .title{ font-size: 16px; }
    .testimonial .post{ font-size: 13px; }
}



.hero {
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 1s infinite  alternate;
}
.hero {
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
@keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

.btn-icon {
  display: flex;
  align-items: center;
}

.btn-icon svg {
  margin-left: 0.5rem;
}


.our-story-section {
  padding: 80px 0;
}

.our-story-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.our-story-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #ccc;
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #000000;
}

.video-preview-container {
  position: relative;
  width: 25vw;
  max-width: 100%;
  aspect-ratio: 9/16;
  border-radius: 1.5vw;
  overflow: hidden;
  box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.12);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-preview-img,
.video-preview-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play-btn svg {
  width: 3em;
  height: 3em;
  display: block;
}

.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .video-preview-container {
    width: 80vw;
    border-radius: 4vw;
    max-width: 100vw;
  }
  .video-play-btn svg {
    width: 2.5em;
    height: 2.5em;
  }
}