body {
    /* Location of the image */
    background-image: url(background_desktop.jpg);
    /* Image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Image doesn't repeat */
    background-repeat: no-repeat;
    /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based on its container's size */
    background-size: cover;
    /* Pick a solid background color that will be displayed while the background image is loading */
    background-color: #464646;
}
/* For mobile devices */
@media only screen and (max-width: 767px) {
    body {
        /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
        background-image: url(background_img.jpg);
    }
	
}
.wrapper5 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
 
}


.box3 {
    margin: 20px;
    background-color: rgba(0,255,0,0.4);
    border-radius: 18px
}
.box4 {
    margin: 20px;
    background-color: rgba(255,255,0,0.4);
    border-radius: 18px
}

img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 5px;
}

.btn-gradient-1 {
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(to right,cyan, red) 1;
}


.box3:hover, .box4:hover {
    background: rgb(255,0,0);
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(9,9,121,0.675974784445028) 50%, rgba(0,212,255,0.37065265559348737) 100%);
    transform: scale(1.05);
}

@media (max-width: 800px) {
    .wrapper5 {
        flex-direction: column;
    }
}

.blog-shadow-dreamy {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07);
}

h1 {
    color: red;
    font-family: Arial, Helvetica, sans-serif, sans-serif;
    font-size: 7vw;
   
}

p {
    color: cyan;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1vw;
  
}


.fade-in-image {
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}