.home-container{
    height: 80vh;    
    overflow: auto;
}

.my-row {
    display: flex;
    flex-wrap: wrap;
    /* margin-right: -15px;
    margin-left: -15px; */
}

.home-img{
    height: 70vh;    
}
.pic-sec{
    overflow: hidden;
}
@media only screen and (min-height:1250px){
    .home-img{
        height: 40vh;
    }

    .category{
        margin-left: 5px;
        margin-top:    6vh!important;
        margin-bottom: 3vh!important;
    }


}


@media only screen and (min-width:992px){
    .sec-info{
        overflow: scroll;
        overflow-x: hidden;
        height: 80vh;
        padding: 0;
        margin: 0;
    }   
}
@media only screen and (max-width:992px){
    .home-img{
        height: 50vh;     
        overflow: hidden;   
    }
    .img-container{ 
        position: relative;       
        overflow: hidden;
        height: 50vh;
    }
   .home-container{
    height: auto;
   }
   .pic-sec{
    height: 32vh;    
   }
}



/***************** PLAY PAUSE BUTTON ON THE IMAGE  */

.newD-home-play-container{
    /* z-index: 6; */
    /* position: absolute; */
    /* top: 50%;
    left: 50%; */
    /* transform: translate(-50%, -50%); */
    cursor: pointer;
    font-size: calc(var(--pic-radios) * .1);
    background-color: rgba(0, 0, 0, 0.521);
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    border: 3px solid var(--orange);
    display: flex;  
    justify-content: center;
    align-items: center;
    }
    .newD-home-play-container:hover{
    
        color: var(--orange);
        background-color: black;
    }
    .newD-home-play-container i{
        font-size: 5vh;
    }
    .newD-rotation-wrapper {
        /* position: absolute; */
        /* top: 50%;
        left: 50%; */
        transform: translate(-50%, -50%);
        animation: rotateY 4s linear infinite;
        transform-origin: center center;
    }
    @media only screen and (max-width:992px){
        .newD-home-play-container i{
            font-size: 3vh;
        }
        .newD-home-play-container{
           width: 5vh;
           height: 5vh;
        }

    }
      
    @keyframes rotateY {
        0% {
          transform: rotateY(0deg);
        }
        100% {
          transform: rotateY(360deg); /* Rotates a full circle (360 degrees) */
        }
    }
    
    /***************** END PAUSE BUTTON ON THE IMAGE  */

    .custom-hr{
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%; /* To span the entire width of its container */
        z-index: -1; /* To place it behind the text */
    }


    
.my-buttons{
    background-color:rgba(67, 59, 74, 0.65);
    border-radius: 10px;
    padding: 4px;
    color: white;
    font-size: 1.5vw;
    transition: all 2s;
    box-shadow: 1px 1px #888888;
}
.my-buttons:hover{
    background-color:rgba(136, 120, 150, 0.65);
    border: 2px solid rgba(67, 59, 74, 0.65);
}
.header-button{
    font-size: 2vw;
}

.my-buttons img{
    width: 3.5vw;
}
.my-buttons p{
     font-family: 'sans-serif';
}
.category{
    /* font-family: 'HistoricalToyRegular', sans-serif; */
    font-family: 'Santa-Pocket';
    color: var(--my-red);    
    
}

@media only screen and (max-width:992px){
    .my-buttons{
        font-size: 2.5vw;
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .header-button{
        font-size: 3vw;
    }
    .category{
        margin-left: 5px;
        margin-top:    0vh!important;
        margin-bottom: 0vh!important;
    }

}

/* text-white my-buttons d-flex align-items-center */
.linkein-button{
    display: flex;    
    align-items: center;
    color: white;
}
/* mx-2 bg-info rounded-3 px-2 */
.in-in-linkedin{

}

.rotate-circle{
    /* color: rgba(7, 75, 232, 0.825); */
    /* font-size: 10vw; */
    /* position: relative; */
    /* display: flex; */
    /* align-items: center;
    justify-content: center; */
    animation: rotateZ 8s linear infinite;
}
.anti-rotate{   
    animation: antiRotateZ 8s linear infinite;
}


@keyframes rotateZ {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg); /* Rotates a full circle (360 degrees) */
    }
}

@keyframes antiRotateZ {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(-360deg); /* Apply inverse rotation */
    }
}