@media (hover: hover) and (pointer: fine) {
    body {
        cursor: url('/Home/images/cursor/cursor.png'), auto;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    input[type="text"],
    textarea {
        cursor: url('/Home/images/cursor/text-cursor.png'), text;
    }

    a:hover,
    button:hover {
        cursor: url('/Home/images/cursor/cursor.png'), pointer;
    }
}

body {

    background-color: #050505;
    /* Deep dark background */

    font-family: 'Segoe UI', sans-serif;

    margin: 0;

    padding: 0;

    color: #fff;

}



.container {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 50px 20px;

    gap: 50px;
    /* Space between cards */

}



/* --- HEADINGS --- */

.sec1head {

    text-align: center;

    font-size: 3rem;

    text-transform: uppercase;

    letter-spacing: 4px;

    margin-top: 20px;

    margin-bottom: 10px;

    background: linear-gradient(to right, #fff, #aaa);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.separator1 {

    width: 100px;

    height: 4px;

    background: #ff6b00;

    margin: 0 auto 50px auto;

    border-radius: 2px;

}



/* --- PREMIUM CARD CSS --- */

.premium-card {

    position: relative;

    width: 100%;

    max-width: 900px;
    /* Max width for large screens */

    height: 350px;
    /* Fixed height for consistency */

    display: flex;

    background: rgba(20, 20, 20, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(15px);

    border-radius: 8px;

    overflow: hidden;

    transition: all 0.5s ease;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    text-decoration: none;
    /* Remove underline from links */

}



/* CARD ANIMATIONS */

.premium-card:hover {

    transform: translateY(-5px);

    border-color: rgba(255, 107, 0, 0.4);

    box-shadow: 0 20px 50px rgba(255, 107, 0, 0.15),

        0 0 0 1px rgba(255, 107, 0, 0.1) inset;

}



/* LAYOUT INSIDE CARD */

.content-box {

    flex: 1.2;

    padding: 40px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.image-box {

    flex: 0.8;

    position: relative;

    overflow: hidden;

    /* Angled cut for the image */

    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);

}



/* --- IMAGE STYLES UPDATED --- */

.image-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.7s cubic-bezier(0.2, 1, 0.2, 1), filter 0.5s;

    /* Grayscale filter removed so images are normal at first */

}



/* Hover Glow Effect */

.premium-card:hover .image-box img {

    /* Increases brightness and saturation for a "glow" */

    filter: brightness(1.2) saturate(1.2);

    transform: scale(1.05);

}



/* TYPOGRAPHY */

.content-box h2 {

    color: #fff;
    /* Default White */

    font-size: 2rem;

    margin: 0 0 10px 0;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 800;

    display: flex;

    align-items: center;

    width: 100%;

    transition: color 0.3s ease;
    /* Smooth transition for color */

}



/* CHANGE TITLE COLOR ON CARD HOVER (Tab Hover) */

.premium-card:hover .content-box h2 {

    color: #ff6b00;
    /* Turns Orange */

}



/* UPDATED LOGO CSS */

.comp_logo {

    height: 45px;

    width: auto;

    background: rgba(255, 255, 255, 0.1);

    padding: 5px;

    border-radius: 4px;

    margin-left: auto;

    flex-shrink: 0;

}



/* Note: Span colors usually stay orange, but when H2 turns orange, they merge nicely */

.content-box h2 span {
    color: #ff6b00;
}



.content-box p {

    color: #aaa;

    line-height: 1.6;

    font-size: 0.95rem;

    margin-bottom: 20px;

    font-weight: 300;

}



/* READ MORE BUTTON UPDATES */

.read-more-btn {

    display: inline-block;

    color: #ff6b00;
    /* Default Orange */

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.9rem;

    letter-spacing: 1px;

    transition: color 0.3s, text-shadow 0.3s;

}



/* CHANGE READ MORE COLOR ONLY ON TEXT HOVER */

.read-more-btn:hover {

    color: #fff;
    /* Turns White */

    text-shadow: 0 0 10px rgba(255, 107, 0, 0.8);

}



/* SHINE EFFECT */

.premium-card::after {

    content: '';

    position: absolute;

    top: 0;
    left: -100%;

    width: 50%;
    height: 100%;

    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.05), transparent);

    transform: skewX(-25deg);

    pointer-events: none;

    transition: 0s;

}

.premium-card:hover::after {

    left: 200%;

    transition: 0.8s ease-in-out;

}



/* CORNER BORDERS */

.corner {

    position: absolute;

    width: 15px;
    height: 15px;

    border: 2px solid transparent;

    transition: all 0.4s ease;

    opacity: 0.5;

    pointer-events: none;

}

.top-left {
    top: 0;
    left: 0;
    border-top-color: #555;
    border-left-color: #555;
}

.top-right {
    top: 0;
    right: 0;
    border-top-color: #555;
    border-right-color: #555;
}

.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom-color: #555;
    border-left-color: #555;
}

.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom-color: #555;
    border-right-color: #555;
}



.premium-card:hover .corner {

    width: 30px;
    height: 30px;

    opacity: 1;

    border-color: rgba(255, 107, 0, 0.8);

    box-shadow: inset 0 0 20px rgba(255, 107, 0, 0.05);

}



/* RESPONSIVE DESIGN */

@media (max-width: 768px) {

    .premium-card {

        flex-direction: column;

        height: auto;

    }

    .image-box {

        height: 200px;

        flex: none;

        clip-path: none;
        /* Remove slant on mobile */

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }

    .content-box {

        padding: 30px;

    }

    .sec1head {

        font-size: 2.2rem;

    }

}