/* Laptop styles (1281px and up) */
@media (min-width: 1281px) {

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-content: start;
        justify-content: flex-start; /* Align content to the top of the page */
        font-family: 'Montserrat', sans-serif;
        box-sizing: border-box;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Ensure content starts at the top */
        align-content: start;
        width: 100%;
        padding: 0px; /* Add 20px margin around the content */
        box-sizing: border-box;
    }
    
    .carousel-container {
        width: calc(100% - 40px);
        max-width: 1200px;
        margin: auto;
        position: relative;
        overflow: hidden;
    }
    
    .carousel {
        display: flex;
        transition: transform 0.3s ease-in-out;
    }
    
    .carousel-item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-content: start;
        flex-shrink: 0;
        margin-top: 250px;
    }
    
    .projects-image-grid {
        display: grid;
        gap: 10px;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust column size */
        grid-auto-rows: minmax(150px, auto); /* Adjust row size to be more flexible */
    }


    .projects-grid-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    
    .projects-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures images cover the area completely */
    }

    /* Updated projects-image-grid for a responsive 2x2 layout */
.projects-image-grid3 {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr); /* Two equal columns */
    grid-auto-rows: minmax(150px, auto); /* Flexible row heights */
}

.projects-image-grid111 {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    grid-auto-rows: minmax(150px, auto); /* Flexible row heights */
}

/* Media query for narrow screens to stack images in a single column */
@media (max-width: 400px) {
    .projects-image-grid3 {
        grid-template-columns: 1fr; /* Single column on very narrow screens */
    }
}

/* Updated projects-image-grid for a responsive 2x2 layout */
.projects-image-grid4 {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    grid-auto-rows: minmax(150px, auto); /* Flexible row heights */
}

/* Media query for narrow screens to stack images in a single column */
@media (max-width: 400px) {
    .projects-image-grid4 {
        grid-template-columns: 1fr; /* Single column on very narrow screens */
    }
}

/* Updated projects-image-grid for a responsive 2x2 layout */
.projects-image-grid5 {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr); /* Two equal columns */
    grid-auto-rows: minmax(150px, auto); /* Flexible row heights */
}

/* Updated projects-image-grid5 for responsive 3x3 layout */
.projects-image-gridpp {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    grid-auto-rows: minmax(150px, auto); /* Flexible row heights */
}

/* Media query for narrow screens to stack images in a single column */
@media (max-width: 400px) {
    .projects-image-grid5 {
        grid-template-columns: 1fr; /* Single column on very narrow screens */
    }
}
    
    /* Overlay styles */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: none; /* Flexbox for centering */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        flex-direction: column;
        text-align: center; /* Center text inside the overlay */
    }
    
    /* Styling for titles within the overlay */
    .overlay .project-title {
        color: #E0D202; /* Bright color for visibility */
        font-size: 24px; /* Larger font size for titles */
        font-weight: bold; /* Bold font weight for emphasis */
        margin-bottom: 10px; /* Space between title and description */
        text-align: center; /* Center-align the text */
        text-transform: uppercase; /* Uppercase text for stylistic preference */
    }
    
    /* Styling for descriptions within the overlay */
    .overlay .project-description {
        color: #f1f1f1; /* White color for contrast */
        font-size: 18px; /* Smaller font size than title */
        font-weight: 250;
        text-align: justify; /* Justify alignment for better readability */
        margin-bottom: 20px; /* Space between description and link */
        margin: 10px;
        text-align: center;
        font-style: italic;
    }
    
    /* Styling for links within the overlay */
    .overlay .view-project-link {
        display: inline-block; /* Ensures the button behaves like a block element */
        color: #82B1FF; /* Light blue for links */
        font-size: 16px; /* Moderate size for clickable links */
        text-decoration: none; /* No underline to keep it clean */
        padding: 8px 16px; /* Padding for better touch target */
        background-color: #333; /* Dark background for the button */
        border-radius: 5px; /* Rounded corners for the button */
        text-align: center; /* Center-align the text */
        transition: background-color 0.2s, color 0.2s; /* Transition for hover effects */
        overflow: hidden; /* Ensures pseudo-elements don't extend outside the button */
        line-height: 1.5; /* Ensures button text is vertically centered */
        width: fit-content; /* Button size adjusts to fit the content */
        margin-top: 20px; /* Add some space above the button */
    }

/* Pseudo-element for underline effect */
.overlay .view-project-link::after {
    content: '';
    position: absolute;
    bottom: 0; /* Position it directly at the bottom of the button */
    left: 50%; /* Start from the center */
    width: 0; /* Start with no width */
    height: 2px; /* Line thickness */
    background-color: #E0D202; /* Bright yellow for visibility */
    transition: all 0.3s ease; /* Transition for animation */
    transform: translateX(-50%) scaleX(0); /* Center the element and scale it down to 0 */
}

/* Hover effect for link */
.overlay .view-project-link:hover::after {
    transform: translateX(-50%) scaleX(1); /* Expand the line from the center outward */
}

/* Hover effect to change background color and text color */
.overlay .view-project-link:hover {
    background-color: #0b0b0b; /* Darken the background on hover */
    color: #E0D202; /* Change text color on hover */
}

    
    /* Display overlay on hover or when it's active */
    .projects-grid-item:hover .overlay,
    .projects-grid-item .overlay.active {
        display: flex;
    }
    
    /* Centering the carousel buttons */
    .carousel-buttons {
        display: flex;
        justify-content: center; /* Center buttons horizontally */
        align-items: start; /* Center buttons vertically */
        margin: 20px auto; /* Apply margin to top/bottom, auto on the sides to center */
        width: 100%; /* Ensure the buttons container takes up the full width */
        max-width: 1000px; /* Set a maximum width to align with the carousel */
        text-align: center; /* Center the text */
        margin-bottom: 50px; /* Adjust bottom margin as necessary */
    }
    
    /* Carousel button styles */
    .carousel-buttons button {
        position: relative;
        padding: 5px 10px;
        margin: 0 5px;
        cursor: pointer;
        background-color: #1D1E1E;
        color: #f1f1f1;
        font-family: 'Montserrat', sans-serif;
        font-size: 22px;
        border: none;
        border-radius: 2px;
        transition: background-color 0.3s, color 0.3s;
        overflow: hidden;
        text-align: center;
        margin-top: 0px; /* Add margin above the buttons */
        margin-bottom: 100px; /* Add consistent space below the buttons */
    }
    
    /* Hover and selected state effects for buttons */
    .carousel-buttons button:hover,
    .carousel-buttons button.selected {
        background-color: #0b0b0b;
        color: #E0D202;
        font-weight: 400;
    }
    
    /* Hover effect underline for the buttons */
    .carousel-buttons button::before,
    .carousel-buttons button::after {
        content: '';
        position: absolute;
        bottom: 0;
        height: 2px;
        background-color: #E0D202;
        width: 0; /* Start with no width */
        transition: width 0.6s ease, left 0.6s ease;
    }
    
    .carousel-buttons button::before {
        left: 50%; /* Start from the center */
        transform: translateX(-50%);
    }
    
    .carousel-buttons button::after {
        right: 50%; /* Start from the center */
        transform: translateX(50%);
    }
    
    /* On hover or selected state, the lines expand from the center outward */
    .carousel-buttons button:hover::before,
    .carousel-buttons button.selected::before {
        left: 0;
        width: 100%; /* Expand to the left edge */
    }
    
    .carousel-buttons button:hover::after,
    .carousel-buttons button.selected::after {
        right: 0;
        width: 100%; /* Expand to the right edge */
    }
    
    /* Retraction on hover out */
    .carousel-buttons button::before,
    .carousel-buttons button::after {
        transition: width 0.6s ease, right 0.6s ease, left 0.6s ease;
    }
    
    .carousel-buttons button.selected {
        background-color: #0b0b0b;  /* Darker background for selected button */
        color: #E0D202;  /* Highlight color for text in selected state */
        font-weight: 800;  /* Bold font weight for selected state */
    }
    
    .projects-grid-item-111000 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .projects-grid-item-1110 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* Specific styles for custom spans */
    .projects-grid-item-111 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .projects-grid-item-1111 {
        /* grid-column: span 2;
        grid-row: span 1; */
        display: none;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-112 {
        /* grid-column: span 1;
        grid-row: span 1; */
        display: none;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-113 {
        /* grid-column: span 1;
        grid-row: span 1; */
        display: none;
    }
    
    .projects-grid-item-1122 {
        grid-column: span 1;
        grid-row: span 1;
        /* display: none; */
    }
    
    .projects-grid-item-1133 {
        grid-column: span 1;
        grid-row: span 1;
        /* display: none; */
    }

    .projects-grid-item-114 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .projects-grid-item-115 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* AI-AGENTS */
    /* Specific styles for custom spans */
    .projects-grid-item-221 {
        grid-column: span 2;
        grid-row: span 1;
    }
    

    .projects-grid-item-2211 {
        grid-column: span 2;
        grid-row: span 1;
    }


    /* Larger spans for specific items */
    .projects-grid-item-222 {
        grid-column: span 1;
        grid-row: span 1;
        /* display: none; */
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-223 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    .projects-grid-item-224 {
        grid-column: span 1; /* Wider */
        grid-row: span 1; /* Taller */
    }
    
    .projects-grid-item-225 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* INTERACTIVE CONTROLS */
    /* Specific styles for custom spans */
    .projects-grid-item-331 {
        grid-column: span 1;
        grid-row: span 1;
        display: none;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-332 {
        grid-column: span 1;
        grid-row: span 1;
        display: none;
    }

    .projects-grid-item-3311 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
  
    .projects-grid-item-3322 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-333 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    .projects-grid-item-334 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .projects-grid-item-335 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .projects-grid-item-336 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* DEVELOPMENT */
    /* Specific styles for custom spans */
    .projects-grid-item-441 {
        grid-column: span 1; /* Default span for all items */
        grid-row: span 1;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-442 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-443 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    .projects-grid-item-444 {
        grid-column: span 1; /* Wider */
        grid-row: span 1; /* Taller */
    }
    
    /* ENVIRONMENTS */
    /* Specific styles for custom spans */
    .projects-grid-item-551 {
        grid-column: span 1; /* Default span for all items */
        grid-row: span 1;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-552 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-553 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    .projects-grid-item-554 {
        grid-column: span 3; /* Wider */
        grid-row: span 1; /* Taller */
    }

    /* PROJECTS---PROJECTS---PROJECTS---PROJECTS */
    .projects-grid-item-pp1 {
        grid-column: span 1; /* Default span for all items */
        grid-row: span 1;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-pp2 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    /* Larger spans for specific items */
    .projects-grid-item-pp3 {
        grid-column: span 1; /* Wider */
        grid-row: span 1;
    }
    
    .projects-grid-item-pp4 {
        grid-column: span 3; /* Wider */
        grid-row: span 1; /* Taller */
    }
    
    .scrolling-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 850px;
        margin: 0 auto;
        overflow: hidden;
        background: #1d1e1e40;
        backdrop-filter: blur(5px);
        max-height: 800px; /* Set a maximum height if needed */
    }
    
    .scroll-column {
        width: 33.33%;
        overflow: hidden;
        position: relative;
    }
    
    .image-list {
        list-style: none;
        padding: 5px;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    
    .image-list img {
        width: 100%;
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    
    .left-column .image-list,
    .right-column .image-list {
        animation: scrollUp 40s linear infinite;
    }
    
    .center-column .image-list {
        animation: scrollDown 60s linear infinite;
    }
    
    /* Scroll up for outer columns */
    @keyframes scrollUp {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-50%); /* Moves up by 50% of the list's total height */
        }
    }
    
    /* Scroll down for the center column */
    @keyframes scrollDown {
        0% {
            transform: translateY(-50%); /* Start from the bottom of the duplicated list */
        }
        100% {
            transform: translateY(0); /* Move back to the starting position */
        }
    }
    
    /* Overlay styling */
    .welcome-overlay {
        position: absolute;
        top: 40%; /* Center the overlay vertically */
        left: 50%; /* Center the overlay horizontally */
        transform: translate(-50%, -50%); /* Use transform to ensure the overlay is centered */
        width: 50%; /* Adjust to take up 80% of the column width */
        height: 30%; /* Takes up 40% of the height of the column */
        background: rgba(0, 0, 0, 0.45); /* Semi-transparent black background */
        border-radius: 2px; /* Rounded corners for the overlay */
        backdrop-filter: blur(5px); /* Background blur effect */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); /* Subtle shadow for depth */
        z-index: 10; /* Ensure it stays on top of other elements */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    /* Text inside the overlay */
    .welcome-overlay .overlay-content h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 36px;
        font-weight: 700;
        color: #f1f1f1;
        margin: 0;
        padding: 0;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for text */
    }
    
    .overlay-content p {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: #f1f1f1;
        margin: 20px;
    }
    
    /* Ensure the overlay is relative to the center column */
    .scroll-column.center-column {
        position: relative;
    }
    
    /* Read More button inside the overlay */
    .read-more-btn {
        margin-top: 20px; /* Space between the button and the text */
        font-size: 18px; /* Font size for the button text */
        padding: 8px 20px; /* Padding for a clickable area */
        color: #f1f1f1; /* Text color */
        background-color: #333; /* Button background color */
        border-radius: 5px; /* Rounded corners */
        text-decoration: none; /* Remove underline */
        position: relative; /* Ensure pseudo-elements work */
        transition: background-color 0.3s, color 0.3s ease-in-out; /* Transition for hover effects */
        display: inline-block; /* Makes the button behave like a block element */
    }
    
    /* Read More button hover effect */
    .read-more-btn:hover {
        background-color: #0b0b0b; /* Darken the background on hover */
        color: #E0D202; /* Change text color on hover */
    }
    
    /* Hover effect underline for the Read More button */
    .read-more-btn::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #E0D202; /* Bright yellow underline */
        transform: scaleX(0); /* Initially scale the line to 0 */
        transform-origin: center; /* Start scaling from the left */
        transition: transform 0.3s ease; /* Animate the scaling */
    }
    
    /* Expanding underline on hover */
    .read-more-btn:hover::after {
        transform: scaleX(1); /* Expand the line fully */
        transform-origin: center; /* Ensure it expands from the left */
    }
    
    /* Carousel Item Column Layout */
    .carousel-item-column {
        display: flex;
        flex-direction: column; /* Stack images and text vertically */
        align-items: center; /* Center content horizontally */
        margin-bottom: 0px; /* Add space below the section */
    }
    
    /* Ensure projects image grid takes full width */
    .projects-image-grid {
        display: grid;
        gap: 10px;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid */
        grid-auto-rows: minmax(150px, auto);
    }
    
    /* Transparent section below the carousel */
    .transparent-section {
        width: calc(100% - 20px); /* Maintain consistent spacing */
        max-width: 1200px;
        margin: 0; /* Center it horizontally */
        margin-top: 10px;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.35); /* Semi-transparent background */
        backdrop-filter: blur(5px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        text-align: center;
    }
    
    /* Text inside the transparent section */
    .section-content h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 28px;
        font-weight: 400;
        color: #E0D202; /* Theme color */
        margin-bottom: 10px;
    }
    
    .section-content p {
        font-family: 'Montserrat', sans-serif;
        font-size: 22px;
        font-weight: 300;
        color: #f1f1f1;
        line-height: 1.5;
    }

    /* Responsive positioning for small screens */
@media (max-width: 744px) {
    .carousel-item-column {
        margin-bottom: 0; /* Adjust spacing as needed */
    }
    
    .transparent-section {
        margin-top: 15px; /* Slightly reduce top margin for smaller screens */
        padding: 8px;
    }
    
    .section-content h2 {
        font-size: 24px; /* Scale down font size on smaller screens */
    }

    .section-content p {
        font-size: 14px; /* Adjust font size for readability on small screens */
    }
}

   /* Container for Carousel Items */
.carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styling for the "Read More" link inside the paragraph */
.read-more-link {
    color: #E0D202; /* Adjust the color as needed */
    text-decoration: none; /* Remove underline by default */
    font-weight: italic;
    margin-left: 5px; /* Small space between the text and link */
    position: relative; /* Needed for absolute positioning of pseudo-elements */
    transition: color 0.3s ease; /* Smooth transition on hover */
}

/* Styling for the line animation on hover */
.read-more-link::before,
.read-more-link::after {
    content: "";
    position: absolute;
    height: 2px; /* Thickness of the lines */
    background-color: #E0D202; /* Line color */
    width: 0; /* Start with zero width */
    bottom: -2px; /* Position the lines slightly below the text */
    transition: width 0.6s ease; /* Transition for expanding the lines */
    left: 50%; /* Position both pseudo-elements at the center */
    transform: translateX(-50%); /* Center align without shifting */
}

/* On hover, expand the lines outward from the center */
.read-more-link:hover::before {
    width: 50%; /* Extend to half the text width on the left */
    transform: translateX(-100%); /* Shift to the left edge of the word */
}

.read-more-link:hover::after {
    width: 50%; /* Extend to half the text width on the right */
    transform: translateX(0); /* Align to the right edge of the word */
}

/* Styling for Scrolling Content */
.scrolling-box {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Space below scrolling content */
}

/* Carousel Welcome Section Styling */
.carousel-welcome-section {
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto; /* Center it horizontally */
    margin-top: 0px; /* Space between the scrolling box and this section */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.20); /* Semi-transparent background */
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    text-align: center;
}

/* Title in the Carousel Welcome Section */
.carousel-welcome-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #E0D202; /* Theme color */
    margin-bottom: 12px;
}

/* Paragraph in the Carousel Welcome Section */
.carousel-welcome-section p {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #f1f1f1;
    line-height: 1.5;
    margin-left: 60px;
    margin-right: 60px;
}

/* Unique Button Styling */
.carousel-welcome-btn {
    font-size: 18px;
    padding: 5px 20px;
    color: #f1f1f1;
    background-color: #333;
    border-radius: 2px;
    text-decoration: none;
    position: relative; /* Necessary for pseudo-elements */
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover Effect for Background and Text Color */
.carousel-welcome-btn:hover {
    background-color: #0b0b0b;
    color: #E0D202; /* Highlight color on hover */
}

/* Center-Out Underline Effect */
.carousel-welcome-btn::before,
.carousel-welcome-btn::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Position lines directly below the text */
    height: 2px; /* Thickness of the underline */
    width: 0; /* Initially, width is 0 */
    background-color: #E0D202;
    transition: width 0.4s ease; /* Smooth transition for underline expansion */
}

.carousel-welcome-btn::before {
    left: 50%; /* Start from the center */
    transform: translateX(-75%); /* Center it horizontally */
}

.carousel-welcome-btn::after {
    right: 50%; /* Start from the center */
    transform: translateX(75%); /* Center it horizontally */
}

/* Expand Underline on Hover */
.carousel-welcome-btn:hover::before,
.carousel-welcome-btn:hover::after {
    width: 50%; /* Expand each line to cover half the button's text width */
}
 
/* Styling for the labels paragraph */
.carousel-welcome-section p.labels {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important; /* Adjusted to a readable size */
    font-weight: 400 !important;
    color: #f1f1f1 !important; /* Theme color */
    font-style: italic !important;
    margin: 0 60px !important; /* Consistent margin */
}

/* Styling for the "Read More" link inside the labels */
.carousel-welcome-section p.labels .read-more-link {
    font-size: 18px !important; /* Adjusted to a readable size */
    color: #E0D202 !important;
    text-decoration: none !important;
    font-style: italic !important;
    transition: color 0.3s !important;
}


}