@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

/* Blog Section */
.blog-section {
    padding: 90px 0;
    background-color: #f9f9f9;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Blog Title */
.blog-title {
    font-family: "Audiowide", system-ui;
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: bold;
    color: #001F62;
}

/* Blog Description */
.blog-description {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #000000;
    font-family: 'Outfit', sans-serif;
}

/* Arrow pointing to skeleton GIF */
.arrow-pointing-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 30px;
}

/* Text with border, no glowing shadow, reduced font weight */
.arrow-text {
    font-size: 1.5em; /* Reduced font size */
    font-family: 'Outfit', sans-serif;
    font-weight: 550; /* Reduced font weight */
    color: #001F62; /* Changed to dark blue */
    margin-right: 15px;
    margin-left: 80px; /* Shifted towards the right */
    padding: 5px 15px; /* Reduced padding */
    border: 2px solid #1c3694; /* Reduced border size, also dark blue */
    border-radius: 10px; /* Rounded corners */
    background-color: #f9f9f9; /* Background for better readability */
    font-family: 'Outfit', sans-serif;
    font-family: "Audiowide", system-ui;
}

/* Hover effect for arrow-text */
.arrow-text:hover {
    background-color: #001F62; /* Change background color on hover */
    color: #ffffff; /* Change text color on hover */
    border-color: #ffffff; /* Change border color on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
    transition: all 0.3s ease-in-out; /* Smooth transition effect */
    box-shadow: 0px 4px 10px rgba(0, 31, 98, 0.5); /* Add subtle shadow effect */
}


/* Pointing image for desktop */
.pointing-image-desktop {
    width: 70px; /* Adjust the size as needed */
    height: auto;
    filter: invert(10%) sepia(25%) saturate(3500%) hue-rotate(190deg) brightness(90%) contrast(85%); /* Updated to match #001F62 */
    animation: bounceImage 1s infinite;
}

/* Pointing image for mobile */
.pointing-image-mobile {
    width: 45px;
    height: auto;
    filter: invert(10%) sepia(25%) saturate(3500%) hue-rotate(190deg) brightness(90%) contrast(85%); /* Updated to match #001F62 */
    animation: bounceImageMobile 1s infinite;
    display: none; /* Hidden by default */
}
  


/* Animation for image */
@keyframes bounceImage {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

@keyframes bounceImageMobile {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

@keyframes fadeIn {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.container {
    max-width: 1500px !important; /* Set a wider max-width for larger screens */
}

/* Blog GIF */
.blog-gif {
    width: 80%; /* Set a larger width for the GIF */
}

@media (min-width: 1920px){
/* Blog GIF */
.blog-gif {
    width: 800px; /* Set a larger width for the GIF */
    margin-top: 40px; /* Add more space above the GIF */
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1600px !important; /* Wider container for 1920px screens */
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
}
.blog-video {
    width: 80%; /* Ensure video takes full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Prevent black bars by covering the entire container */
    border: none; /* Ensure no borders are added around the video */
    margin-right: 45px;
    margin-bottom: 10px;
}
.container {
    max-width: 2000px !important; /* Set a wider max-width for larger screens */
}
}


/* Responsive adjustments */
@media (max-width: 1024px) {
    .blog-title {
        font-size: 2em;
    }

    .blog-description {
        font-size: 1.1em;
    }

    .arrow-text {
        font-size: 1.4em;
    }

    .arrow-text:hover {
        background-color: #001F62; /* Change background color on hover */
        color: #ffffff; /* Change text color on hover */
        border-color: #ffffff; /* Change border color on hover */
        transform: scale(1.05); /* Slightly increase size on hover */
        transition: all 0.3s ease-in-out; /* Smooth transition effect */
        box-shadow: 0px 4px 10px rgba(0, 31, 98, 0.5); /* Add subtle shadow effect */
    }

    .pointing-image-desktop {
        width: 40px; /* Reduce image size for tablet */
    }

    .blog-gif {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .blog-title {
        font-size: 1.8em;
    }

    .blog-description {
        font-size: 1em;
    }

    .arrow-pointing-right {
        flex-direction: column; /* Stack the arrow and text vertically */
        align-items: center; /* Center align in mobile view */
    }

    .arrow-text {
        margin-right: 0;
        margin-left: 0; /* Remove left margin */
        margin-bottom: 10px;
        font-size: 1.4em;
    }

    .arrow-text:hover {
        background-color: #001F62; /* Change background color on hover */
        color: #ffffff; /* Change text color on hover */
        border-color: #ffffff; /* Change border color on hover */
        transform: scale(1.05); /* Slightly increase size on hover */
        transition: all 0.3s ease-in-out; /* Smooth transition effect */
        box-shadow: 0px 4px 10px rgba(0, 31, 98, 0.5); /* Add subtle shadow effect */
    }

    .pointing-image-desktop {
        display: none; /* Hide the desktop image */
    }

    .pointing-image-mobile {
        display: block; /* Show the mobile image */
    }

    .blog-gif {
        max-width: 80%;
    }
}

@media (max-width: 576px) {
    .blog-title {
        font-size: 1.8em;
    }

    .blog-description {
        font-size: 0.9em;
    }

    .arrow-text {
        font-size: 1.2em;
    }

    .arrow-text:hover {
        background-color: #001F62; /* Change background color on hover */
        color: #ffffff; /* Change text color on hover */
        border-color: #ffffff; /* Change border color on hover */
        transform: scale(1.05); /* Slightly increase size on hover */
        transition: all 0.3s ease-in-out; /* Smooth transition effect */
        box-shadow: 0px 4px 10px rgba(0, 31, 98, 0.5); /* Add subtle shadow effect */
    }

    .pointing-image-mobile {
        width: 40px; /* Smaller image for mobile */
    }

    .blog-gif {
        max-width: 85%;
    }
}

@media (max-width: 480px) {
    .blog-title {
        font-size: 1.9em;
    }

    .blog-description {
        font-size: 0.8em;
    }

    .arrow-text {
        font-size: 1.1em;
    }

    .arrow-text:hover {
        background-color: #001F62; /* Change background color on hover */
        color: #ffffff; /* Change text color on hover */
        border-color: #ffffff; /* Change border color on hover */
        transform: scale(1.05); /* Slightly increase size on hover */
        transition: all 0.3s ease-in-out; /* Smooth transition effect */
        box-shadow: 0px 4px 10px rgba(0, 31, 98, 0.5); /* Add subtle shadow effect */
    }

    .pointing-image-mobile {
        width: 35px;
    }

    .blog-gif {
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .blog-title {
        font-size: 1.2em;
    }

    .blog-description {
        font-size: 0.75em;
    }

    .arrow-text {
        font-size: 1em;
    }

    .arrow-text:hover {
        background-color: #001F62; /* Change background color on hover */
        color: #ffffff; /* Change text color on hover */
        border-color: #ffffff; /* Change border color on hover */
        transform: scale(1.05); /* Slightly increase size on hover */
        transition: all 0.3s ease-in-out; /* Smooth transition effect */
        box-shadow: 0px 4px 10px rgba(0, 31, 98, 0.5); /* Add subtle shadow effect */
    }

    .pointing-image-mobile {
        width: 30px;
    }

    .blog-gif {
        max-width: 95%;
    }
}

@media (min-width: 2560px) {
    /* Container Adjustments for Large Screens */
    .container {
        max-width: 2000px !important; /* Set a wider max-width for larger screens */
    }

    /* Blog Section Adjustments */
    .blog-section {
        max-height: 100vh;
    }

    .blog-title {
        font-size: 4em; /* Increase blog title font size */
        margin-bottom: 50px; /* Increase space below the title */
    }

    .blog-description {
        font-size: 1.8em; /* Increase blog description font size */
        margin-bottom: 50px; /* Increase margin below description */
    }

    /* Arrow and Pointing Image Adjustments */
    .arrow-text {
        font-size: 2em; /* Increase font size */
        padding: 10px 20px; /* Increase padding */
        margin-left: 100px; /* Increase left margin */
        border: 3px solid #1c3694; /* Increase border size */
    }

    .arrow-text:hover {
        background-color: #001F62; /* Change background color on hover */
        color: #ffffff; /* Change text color on hover */
        border-color: #ffffff; /* Change border color on hover */
        transform: scale(1.05); /* Slightly increase size on hover */
        transition: all 0.3s ease-in-out; /* Smooth transition effect */
        box-shadow: 0px 4px 10px rgba(0, 31, 98, 0.5); /* Add subtle shadow effect */
    }

    .pointing-image-desktop {
        width: 120px; /* Increase size of pointing image */
    }

    /* Blog GIF Adjustments */
    .blog-gif {
        width: 100% !important; /* Set a larger width for the GIF */
        height: auto; /* Maintain aspect ratio */
        margin-top: 40px; /* Increase margin above GIF */
    }
}