/* General Styles */
.container {
    text-align: center; /* Center text horizontally */
}

.owl-carousel .item {
    display: flex; /* Use Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 200px; /* Set a fixed height for the item */
}

.ccimg {
    max-width: 100%; /* Responsive image sizing */
    max-height: 100%; /* Ensure images fit within the item */
}

/* Footer Area Styles */
.footer-area {
    background-image: url('plane.png');
    background-size: cover;
    padding: 50px 0; /* Padding for top and bottom */
}

.single-footer-widget {
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
    color: white; /* White text for contrast */
    padding: 20px; /* Padding inside the widget */
    border-radius: 8px; /* Matches outer div's border radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Adds shadow for depth */
    margin-bottom: 30px; /* Space between widgets */
}

.widget-info li {
    list-style-type: none; /* Remove default list styling */
    margin-bottom: 10px; /* Space between list items */
}

.widget-info i {
    margin-right: 10px; /* Space between icon and text */
}

.widget-info a {
    color: #ffcc00; /* Bright color for links for better visibility */
    text-decoration: none; /* Removes underline from links */
}

.widget-info a:hover {
    text-decoration: underline; /* Underline on hover for interactivity */
}

/* Copyright Area Styles */
.copyright-area {
    background-color: #343a40; /* Dark background for copyright area */
    color: white; /* White text color */
    padding: 15px 0; /* Padding for copyright area */
}

/* Floating Button Styles */
.float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366; /* WhatsApp green color */
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

.my-float {
    font-size: 24px; /* Size of WhatsApp icon */
}

/* Video Container Styles */
.container-vid {
    position: relative;
    overflow: hidden;
}

.responsive-video {
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
}

/* Text Overlay Styles */
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; 
    padding: 20px; 
    max-width: 90%; 
}

/* Headline and Course Info Styles */
.headline {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: calc(4vh + 1rem); /* Responsive font size based on viewport height and rem units for scaling */
}

.course-info {
    color: #bb9950;
    font-weight: bold;
    font-size: calc(3vh + .5rem); /* Responsive font size based on viewport height and rem units for scaling */
}

/* Button Container Styles */
.button-container {
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}

.btn {
   width: calc(100% - (20px)); 
   padding:.75rem; 
   border:none;
}

/* Button Styles */
.read-more {
   background-color:#bb9950; 
   color:white; 
}

.contact {
   background-color:#bb9950; 
   color:white; 
}
.read-more:hover , .contact:hover{
    background-color: #ffd883;
    color: white;
}
.read-more:active, .contact:active{
    background-color: #bb9950;
    color:white;
}
/* Media Queries for additional responsiveness */
@media (max-width:768px) {
   .headline {
       font-size: calc(3vh + .5rem); /* Further reduce size on smaller screens */ 
   }

   .course-info {
       font-size: calc(2.5vh + .5rem); /* Further reduce course info size */ 
   }

   .btn { 
       font-size:.9rem; 
       padding:.5rem; 
   }


   /* Hide overlay text on mobile devices */
   .headline {
       display:none; /* Hide text overlay on mobile devices */ 
   }
}