html, body {
background: white;
    
 }

/* html, body {
        background:
            linear-gradient(red, transparent),
            linear-gradient(to top left, lime, transparent),
            linear-gradient(to top right, blue, transparent);
        background-blend-mode: screen;
    } */

/* new slider  */

/* Mobile size */
/* .carousel-item img {
    width: 100%;
    height: auto;
} */

/* Tablet size */
/* @media (min-width: 768px) {
    .carousel-item img {
        width: 75%;
        height: auto;
    }
} */

/* Desktop size */
/* @media (min-width: 992px) {
    .carousel-item img {
        height:auto;
        width: 50%;
    }
} */

/* leap jumbotrons  */





/* features fusionx hiding line  */
li.list-group-item.bg-transparent.text-info {
border-style: hidden;
text-decoration: none;
}

/* custom cards spacing  */
div.card.card-cover.h-100.overflow-hidden.text-bg-dark.rounded-4.shadow-lg {
background-size: cover;
background-repeat: no-repeat;
} 

.mcard1 {
background-image: url('https: //images.unsplash.com/photo-1454789415558-bdda08f4eabb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80');
background-size: cover;
    background-repeat: no-repeat;
}

/* about silder css   */

#carouselExampleCaptions,
#carouselExampleSlidesOnly {
    width: 100%;
    margin: 0px auto;
    margin-top: 1px;
    max-width: 900px;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.4);
}


/* testing icons  */

/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
    background: #ddd;
} 

h1 {
    text-align: center;
    margin-top: 3rem;
}
/* icon hub, footer cubes color  */
.material-symbols-outlined {
    color: black;
}

span {
    color: #002adf;
}

.iconsContainer {
    display: flex;
    justify-content:  center;
    align-items: center;
    height: 10vh;
}

.iconsContainer .icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 4rem 3rem;
}

.iconsContainer .icons .bi {
    cursor: pointer;
    font-size: 40px;
    padding: 1.5rem 2rem;
    border-radius: 50%;
    background-color: transparent;
    background-size: 200%;
    transition: background 0.3s ease-in-out;
}



/* ig  */
.bi.bi-instagram  {
    display: inline-block;
    cursor: pointer;
    font-size: 40px;
    padding: 1.5rem 2rem;
    border-radius: 50%;
    background-color: red;
    background-size: 1%;
    transition: background 0.3s ease-in-out;

color:black ;
}
.bi.bi-instagram:hover {
    color: white;
    background-size: 1%;
        transition: background .3s ease-in-out;
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
animation: jiggle 0.3s ease-in-out forwards;
}

/* x icon  */

.bi.bi-twitter-x {
    display: inline-block;
    cursor: pointer;
    font-size: 40px;
    padding: 1.5rem 2rem;
    border-radius: 50%;
    background-color: red;
    background-size: 1%;
    transition: background 0.3s ease-in-out;
    color: black;
    
}

.bi.bi-twitter-x:hover {
    color: white;
    background-color: black;
    animation: jiggle 0.3s ease-in-out forwards;

}

/* discord icon  */

.bi.bi-discord {
    display: inline-block;
    cursor: pointer;
    font-size: 40px;
    padding: 1.5rem 2rem;
    border-radius: 50%;
    background-color: red;
    background-size: 1%;
    transition: background 0.3s ease-in-out;
    
}

.bi.bi-discord:hover {
    color:white ;
    background-color: #7289da;
    animation: jiggle 0.3s ease-in-out forwards;
}
/* Define the social icon jiggle animation */
@keyframes jiggle {
    0% {
        transform: rotate(-5deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

  .hero.p-5.text-center {

    background-image: url("javier-miranda-xB2XP29gn10-unsplash.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto ;
    background-position: center;
  }




 
/* testing  */
 

div.testing {

    padding-top: 0px;
        padding-bottom: 0px;
        background-image: url('images/car/car.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background: contain;
        width: 100%;
        /* make sure to define width to fill container */
        height: 100px;
        /* define the height in pixels or make sure   */
        /* you have something in your div with height */
        /* so you can see your image */
        max-width: 1400px;
        /* define the max width */

}