.text-preview {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Show only 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        position: relative;
    }

    .extra-text {
        display: none; /* Hidden initially */
    }
    .text-preview {
    display: inline-block;
    width: 100%;
    }
    .see-more {
        color: #007bff;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        border: none;
        background: none;
    }
    .carousel-img {
    width: 100%; /* Ensures full width responsiveness */
    height: 400px; /* Fixed height for consistency */
    object-fit: cover; /* Maintains aspect ratio and prevents distortion */
    border-radius: 10px; /* Optional: adds rounded corners */
    }
    #VisionBodyCarousel .carousel-img {
    width: 800px;
    height: 680px;
    object-fit: cover;
}

/* Sticky WhatsApp Button */
.whatsapp-btn {
    position: fixed;  /* Make it stay fixed on the screen */
    bottom: 20px;     /* Position it 20px from the bottom of the screen */
    right: 20px;      /* Position it 20px from the right of the screen */
    z-index: 9999;    /* Ensure it stays on top of other elements */
    border-radius: 50%; /* Make the icon round */
    background-color: #25D366; /* WhatsApp's green color */
    padding: 10px;
}

.whatsapp-btn img {
    width: 50px;  /* Adjust size of the icon */
    height: 10px; /* Adjust size of the icon */
}

/* Optional: Hover effect */
.whatsapp-btn:hover {
    background-color: #128C7E; /* Darker green when hovered */
}

.bg-dark {
    background-color: #222 !important; /* Elegant dark background */
}

.text-light {
    opacity: 0.85; /* Softer text for better contrast */
}

.shadow-lg {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* Premium shadow effect */
}

.rounded-3 {
    border-radius: 12px; /* Smooth, rounded edges */
}

.gap-2 {
    gap: 0.5rem; /* Adds slight spacing between texts */
}

    /* Fullscreen Video Background */
    .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        border: none;
        z-index: -1; /* Ensure the video stays in the background */
    }

    /* Ensuring carousel content stays above the video */
    .carousel-caption {
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center; /* Ensure text is centered horizontally */
    }

/* Ensure video carousel takes full viewport height */
#videoCarousel .carousel-inner {
    height: 100vh;
}

@media (max-width: 768px) {
    #videoCarousel .carousel-inner {
        height: 100vh;           /*Full viewport height */
        position: relative;
        overflow: hidden; 
        margin: 0;               /* Remove any margin */
        padding: 0;              /* Remove any padding */
    }

    .video-background {
        position: absolute;     /* Position the video absolutely*/
        object-fit: cover;      /* Cover the area without distortion */
    }

    .carousel-caption {
        position: absolute;
        top: 50%;                /* Center the content vertically */
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        z-index: 1;              /* Ensure caption is above the video */
    }
}
@media (max-width: 1024px) {
    /* Optional: If the iPad Air is still showing white space, you can adjust for this range */
    #videoCarousel .carousel-inner {
        width: 100vw;  
        height: 80vh;
        margin: 0;
        padding: 0;
    }
    .video-background {
        object-fit: cover;       
    }
}
#about .row {
    display: flex;
    align-items: center; /* Ensures the video and text are aligned */
}

#about .col-lg-6 {
    padding: 0 !important;
    margin: 0 !important;
}

#about-video {
    width: 90%; /* Adjust the video size */
    max-height: 730px; /* Keeps it from being too tall */
    object-fit: cover; /* Ensures proper scaling */
}
@media (max-width: 768px) {
    #about-video {
        display: block;  /* Makes it behave like a block element */
        margin: 0 auto;  /* Centers the video horizontally */
        width: 88%;  /* Makes it responsive */
        max-width: 390px; /* Prevents it from being too large */
        padding-bottom: 20px;;
    }

    #about .row {
        flex-direction: column; /* Stacks elements vertically */
        text-align: center; /* Centers the text */
    }
    .since-text{
        padding: 10px 30px 0px ;
    }
}
.feature i {
    position: absolute;
    top: -15px;
    right: 0;
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    background: #e31c25;
}

.instagram-section .btn {
    background-color: #1da1f2; /* Instagram blue */
    border: none;
    font-size: 1.2rem;
    padding: 15px 25px;
    transition: background-color 0.3s ease-in-out;
}

.instagram-section .btn:hover {
    background-color: #0d95e8; /* Darker blue on hover */
}

.instagram-section .col-md-6 {
    padding: 0;
}

.instagram-section h4.text-primary {
    color: #007bff;
}

.instagram-section h4.display-4 {
    font-weight: bold;
    font-size: 2.5rem;
}

.instagram-section p {
    font-size: 1rem;
}

.instagram-section .btn i {
    margin-right: 10px; /* Add space between the icon and text */
}

/* Ensure the button is vertically centered in the left column */
.instagram-section .col-md-6.bg-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px; /* Adjust this value to fit your design needs */
}

/* For mobile screens (max-width 767px) */
@media (max-width: 767.98px) {
    .instagram-section {
        background: #f1f1f1; /* Change this to the background color you prefer for smaller screens */
    }
}

/* For larger screens (min-width 768px) */
@media (min-width: 768px) {
    .instagram-section::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 50%; /* Adjust the width of the background image */
        height: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/insta.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    /* Optional: Ensure the content area does not overlap with the background */
    .instagram-section .container {
        position: relative;
        z-index: 1;
    }
}
/* Mobile Navigation Enhancement */
@media only screen and (max-width: 991px) {
    /* Target the navigation links */
    .navbar-nav .nav-item.nav-link {
      font-size: 1.5rem !important; /* Increased font size */
      text-align: center !important; /* Center text */
      padding: 0.8rem 0 !important; /* Add more vertical padding */
    }
    
    /* Ensure the navbar menu is centered with proper spacing */
    .navbar-nav {
      align-items: center !important;
      width: 100% !important;
      padding: 1.5rem !important;
    }
    
    /* Make the background take up full width */
    .bg-secondary.navbar-nav {
      margin: 0 !important;
      border-radius: 0 !important;
    }
    
    /* Optional: Adjust the collapsed navbar overall width */
    .navbar-collapse {
      padding: 0 !important;
    }
  }

  /* Increase text size in the gym-class section while maintaining proportions */
@media only screen and (max-width: 767px) {
    /* Heading size increase */
    .gym-class .gym-class-box h2.display-4 {
        font-weight: 700 !important;
      }
      
      .gym-class .gym-class-box p {
        font-weight: 500 !important;
      }
    
    /* Button size increase */
    .gym-class .gym-class-box .btn-lg {
      font-size: 1.1rem !important;
      padding: 0.75rem 1.5rem !important;
    }
    
    /* Add more padding to container for better spacing */
    .gym-class .gym-class-box {
        width: 100% !important;
        padding: 2.5rem !important;
        margin: 0 auto !important; /* Optional: center if needed */
        box-sizing: border-box; /* Ensures padding doesn't overflow */
      }
  }
  
  /* For medium-sized screens (tablets) */
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .gym-class .gym-class-box h2.display-4 {
      font-size: 2.5rem !important;
    }
    
    .gym-class .gym-class-box p {
      font-size: 1.1rem !important;
    }
  }