.watch_now {
    cursor:pointer;
    border-radius:5px;
    position:absolute;
    transform:translateX(-50%);
    z-index:9999;
    width:auto;
    top:89%;
    font-size:20px; /* Font size for desktop */
    text-transform: uppercase;
    padding:10px 20px; /* Padding for desktop */
    display:inline-flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    min-width:200px; /* Minimum width for larger screens */
    height:auto;
    line-height:normal;
}
















.watch_now button {
    background: linear-gradient(45deg, red, green, blue); /* Gradient background */
    border: none; /* Remove default button border */
    color: white; /* Text color */
    font-size: inherit; /* Inherit font size from the parent */
    font-weight: inherit; /* Inherit font weight from the parent */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    text-transform: inherit; /* Inherit text-transform from the parent */
    display: inline-flex; /* Use inline-flex to center the text */
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    width: 100%; /* Ensure the button fills the parent container */
    border-radius: inherit; /* Inherit border-radius from parent */
    font-family: inherit; /* Ensure the font is inherited */
    height: 100%; /* Allow height to adjust based on content */
    animation: flicker 1s infinite alternate; /* Apply the flicker animation */
    color: #fff;
    font-weight: bold;
    padding: 4px 25px;width:100%; height:100%; cursor: pointer;pointer-events: auto;
}
/* Flicker animation */
@keyframes flicker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5; /* 50% opacity to simulate fading */
    }
    100% {
        opacity: 1;
    }
}
.gem_ser {
    position: absolute;
    z-index: 1111;
    left: 50%;
    transform: translateX(-50%);
    top: 23%;
    width: 16%;
}
.kg-circle {
    position: absolute;
    animation: spin 15s linear infinite;
    z-index:1;
    left: 38%;
    transform: translateX(-50%);
}
/* Mobile Devices (Portrait) */
@media (max-width: 768px) {
    section {
        padding: 20px !important;
    }
    .carousel-caption {
        left: 69%;
        top: 75%;
    }
    .watch_now {
        font-size: 12px;
        padding: 5px 15px;
        left: 50%; /* Keep centered on mobile */
        transform: translateX(-50%);
    }
    .gem_ser {
        width: 12%;
        left: 51.5%;
        top: 25%;
    }
    .kg-circle {
        width: 27vw;
        height: 27vw;
        top: 6%;
    }
}
/* Small Tablets and Portrait Mode (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .watch_now {
        font-size: 16px;
        left: 49%;
        transform: translateX(-50%);
        padding: 8px 20px;
        top: 81%;
        text-transform: uppercase;
    }
    .watch_now button {
        min-width: 430px;
    }
    .gem_ser {
        width: 10%;
        top: 29.7%;
        left: 49.7%;
    }
    .kg-circle {
        width: 23vw;
        height: 23vw;
        top: 13%;
    }
}
/* Tablets and Small Desktops (1024px to 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .watch_now {
        font-size: 16px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 30px;
    }
    .gem_ser {
        width: 14%;
        top: 25%;
        left: 49%;
    }
    .kg-circle {
        width: 28vw;
        height: 28vw;
        top: 7%;
        left: 35%;
    }
}
/* Large Desktops (1366px and above) */
@media (min-width: 1366px) {
    .watch_now {
        font-size: 18px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 31px;
    }
    .gem_ser {
        width: 14%;
        top: 23%;
    }
    .kg-circle {
        width: 30vw;
        height: 30vw;
        top: 5%;
    }
}
/* Full-screen Layout for Ultra-wide Displays (2560px and above) */
@media (min-width: 2560px) {
    .gem_ser {
        width: 8%;
        top: 20%;
    }
    .kg-circle {
        width: 8vw;
        height: 8vw;
        top: 20%;
    }
}
/* For 1920x1080 screens or larger desktops */
@media screen and (min-width: 1920px) and (min-height: 1080px) {
    /* Resize an image */
    .carousel-image {
        width: 80%;
        height: auto;
        margin: 0 auto;
    }
    /* Adjust carousel caption styles */
    .carousel-caption {
        font-size: 24px;
        padding: 30px;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    }
    /* Adjust layout of sections */
    .section-content {
        padding: 40px;
        font-size: 18px;
    }
    /* Adjust button sizes */
    .btn-large {
        padding: 15px 25px;
        font-size: 18px;
    }
}
/* For screens with 1920px width and 1080px height or larger in landscape mode */
@media screen and (min-width: 1920px) and (min-height: 1080px) and (orientation: landscape) {
    /* Your landscape-specific styles */
    /* Example: adjust font size, layout, etc. */
    .carousel-image {
        width: 70%;
        height: auto;
        margin: 0 auto;
    }
    .carousel-caption {
        font-size: 26px;
        padding: 30px;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
        text-align: center;
    }
    .full-screen-element {
        width: 100vw; /* 100% of the viewport width */
        height: 100vh; /* 100% of the viewport height */
        background-color: #222;
    }
    .section-content {
        padding: 50px;
        font-size: 20px;
    }
    .btn-large {
        padding: 18px 28px;
        font-size: 20px;
    }
}
/* iPad Pro - Portrait Mode (768px x 1024px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .carousel-caption {
        left: 50%;
        top: 70%; /* Adjust for better vertical positioning */
        transform: translateX(-50%);
    }
    .watch_now {
        font-size: 14px;
        padding: 8px 20px;
        left: 50%; /* Center the button */
        transform: translateX(-50%);
    }
    .gem_ser {
        width: 11%; /* Adjust width for iPad portrait */
        left: 53.1%;
        top: 27.2%; /* Adjust vertical position */
        transform: translateX(-50%);
    }
    .kg-circle {
        width: 24vw;
        height: 24vw;
        top: 10%;
        left: 41%;
        transform: translateX(-50%);
    }
}
/* iPad Pro - Landscape Mode (1024px x 768px) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .carousel-caption {
        left: 50%;
        top: 75%; /* Adjust for better positioning */
        transform: translateX(-50%);
    }
    .watch_now {
        font-size: 16px;
        padding: 10px 25px;
        left: 50%; /* Keep button centered */
        transform: translateX(-50%);top: 85%;
    }
    .gem_ser {
        width: 12%;
        left: 51.5%;
        top: 25%; /* Position for landscape */
        transform: translateX(-50%);
    }
    .kg-circle {
        width: 27vw;
        height: 27vw;
        top: 6%;
        left: 38%;
        transform: translateX(-50%);
    }
}
/* Small Desktops (1366px to 1600px) */
@media (min-width: 1366px) and (max-width: 1600px) {
    .carousel-caption {
        left: 50%;
        top: 80%; /* Adjust vertical alignment */
        transform: translateX(-50%);
    }
    .watch_now {
        font-size: 18px;
        padding: 12px 30px;
        left: 50%;top:86%;
        transform: translateX(-50%);
    }
    .gem_ser {
        width: 15%;
        left: 50.74%;
        top: 26.5%; /* Adjust position for smaller desktop */
        transform: translateX(-50%);
    }
    .kg-circle {
        width: 31vw;
        height: 31vw;
        top: 5%;
        left: 35%;
        transform: translateX(-50%);
    }
}
/* Medium to Large Desktops (1600px to 1920px) */
@media (min-width: 1600px) and (max-width: 1920px) {
    .carousel-caption {
        left: 50%;
        top: 80%;
        transform: translateX(-50%);
    }
    .watch_now {
        font-size: 20px;
        padding: 14px 35px;
        left: 50%;
        transform: translateX(-50%);
    }
    .gem_ser {
        width: 17%;
        left: 50.12%;
        top: 23.4%; /* Adjust position for medium to large desktops */
        transform: translateX(-50%);
    }
    .kg-circle {
        width: 32vw;
        height: 32vw;
        top: 4%;
        left: 34%;
        transform: translateX(-50%);
    }
}
/* Ultra-Wide Desktops (1920px and above) */
@media (min-width: 1920px) {
    .carousel-caption {
        left: 50%;
        top: 85%;
        transform: translateX(-50%);
    }
    .watch_now {
        font-size: 22px;
        padding: 16px 40px;
        left: 50%;
        transform: translateX(-50%);
    }
    .gem_ser {
        width: 15%;
        left: 49.68%;
        top: 24.65%; /* Adjust for very large desktop */
        transform: translateX(-50%);
    }
    .kg-circle {
        width: 31vw;
        height: 31vw;
        top: 3%;
        left: 34%;
        transform: translateX(-50%);
    }
}
/* Full-Screen Layout for Ultra-Wide Displays (2560px and above) */
@media (min-width: 2560px) {
    .gem_ser {
        width: 8%;
        top: 20%; /* Fine-tune for ultra-wide monitors */
        left: 50%;
        transform: translateX(-50%);
    }
    .kg-circle {
        width: 10vw;
        height: 10vw;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* Media query for mobile devices */
@media screen and (max-width: 768px) {
    .watch_now {
        font-size: 12px; /* Smaller font size for mobile */
        padding: 8px 16px; /* Smaller padding for mobile */
        min-width: 360px; /* Smaller minimum width for mobile */
        top: 82%; /* Adjust position to avoid overflow on mobile */
    }
}
/* Media query for very small screens (e.g., portrait mode phones) */
@media screen and (max-width: 480px) {
    .watch_now {
        font-size: 8px; /* Even smaller font size for very small screens */
        padding: 5px 10px; /* Adjust padding further for small screens */
        min-width:217px; /* Further reduce minimum width */
        top: 75%; /* Adjust button position further */
    }
}



/* For iPad Air - Both Portrait & Landscape */
@media only screen and (min-width: 820px) and (max-width: 1180px) and (orientation: portrait),
       only screen and (min-width: 1180px) and (max-width: 820px) and (orientation: landscape) {
    /* Your styles here */

		   .header-container .nav > li > a{font-size:13px;}


}


