/* Full-screen carousel */
        .carousel-item {
          height: 100vh;
          background-size: cover;
          background-position: center;
          position: relative;
      }

      /* Responsive adjustments for carousel */
      @media (max-width: 1200px) {
          .carousel-item { height: 80vh; }
      }

      @media (max-width: 992px) {
          .carousel-item { height: 70vh; }
      }

      @media (max-width: 768px) {
          .carousel-item { height: 60vh; }
      }

      @media (max-width: 480px) {
          .carousel-item { height: 50vh; }
      }

      /* Background images */
      .item00 { background-image: url('/static/images/homebg1.png'); }
      .item01 { background-image: url('/static/images/homebg2.png'); }
      .item02 { background-image: url('/static/images/homebg3.jpg'); }
      .item03 { background-image: url('/static/images/homebg4.png'); }
      .item04 { background-image: url('/static/images/fac.jpg'); }
      .item05 { background-image: url('/static/images/fac2.jpg'); }

      .carousel-caption1 {
        position: absolute;
        top: 10%;
        left: 39%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        width: 100%;
    height: auto;
    border-radius: 20px; /* Adjust for smooth corners */
    
    -webkit-mask-image: linear-gradient( 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,1) 15%, 
        rgba(0,0,0,1) 85%, 
        rgba(0,0,0,0) 100%
    );
    
    mask-image: linear-gradient( 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,1) 15%, 
        rgba(0,0,0,1) 85%, 
        rgba(0,0,0,0) 100%
    );
        z-index: 10; /* Ensures text appears on top */
    }
      /* Overlay Text Styling */
      .carousel-caption {
        position: absolute;
        top: 50%; /* Move text slightly upwards */
        left: 50%;
        transform: translate(-50%, -50%) rotate(354deg); /* Rotate text */
        text-align: center;
        color: white;
        z-index: 10; /* Ensures text appears on top */
        white-space: nowrap; /* Keeps text in a single line */
    }
    
    .carousel-caption h1 {
        font-size: 4.2rem;
        font-weight: bold;
        text-shadow:  2px 2px 5px rgba(0, 0, 0, 0.5);
        -webkit-text-stroke: 1.5px black; /* Black outline */
        transform: rotate(3deg); /* Slant text */
        white-space: nowrap; /* Ensures text stays in one line */
    }
    
    .btn-custom {
        background-color: #ffff;
        color: rgb(0, 0, 0);
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 1rem;
        margin-top: -10px; /* Move button upwards */
        margin-left: 20px; /* Move button slightly to the right */
        text-decoration: none;
        display: inline-block;
        transform: rotate(3deg); /* Ensure proper button alignment */
    }
    
    .btn-custom:hover {
        background-color: #218838;
    }
    
    /* Responsive Adjustments */
    @media (max-width: 1200px) {
        .carousel-caption {
            top: 43%;
        }
        .carousel-caption h1 {
            font-size: 3.5rem;
        }
    }
    
    @media (max-width: 992px) {
        .carousel-caption {
            top: 42%;
        }
        .carousel-caption h1 {
            font-size: 3rem;
        }
    }
    
    @media (max-width: 768px) {
        .carousel-caption {
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(0deg); /* Reduce rotation for better alignment */
            white-space: normal; /* Allow text to wrap */
        }
        .carousel-caption h1 {
            font-size: 2.5rem;
            transform: rotate(0deg); /* Align properly */
        }
        .btn-custom {
            margin-left: 0; /* Align button properly */
        }
    }
    
    @media (max-width: 480px) {
        .carousel-caption {
            top: 40%;
            left: 45%;
            transform: translate(-50%, -50%) rotate(-3deg); /* Remove rotation on smaller screens */
            white-space: normal; /* Allow text wrapping */
        }
        .carousel-caption h1 {
            font-size: 1.8rem;
            transform: rotate(0deg); /* Keep text aligned */
        }
        .btn-custom {
            margin-left: 0px; /* Prevent shifting */
            transform: rotate(0deg); /* Avoid misalignment */
        }
    }