.flip-container {
        margin: 10px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container:hover .logo {
        transform: rotateY(720deg);
    }
    .logo, .front, .back {
        width: 70px;
        height: 70px;
    }
    .logo {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front, .back {
        backface-visibility: hidden;
        position: absolute;
    }
    .front {
        z-index: 1;
        transform: rotateY(0deg);
        background: url("/logos/fb.png") no-repeat;
    }
    .back {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(180deg);
        background: url("/logos/fb2.png") no-repeat;
    }
    .flip-container2 {
        margin: 10px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container2:hover .logo2 {
        transform: rotateY(720deg);
    }
    .logo2, .front2, .back2 {
        width: 70px;
        height: 70px;
    }
    .logo2 {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front2, .back2 {
        backface-visibility: hidden;
        position: absolute;
    }
    .front2 {
        z-index: 1;
        transform: rotateY(0deg);
        background: url("/logos/ig.png") no-repeat;
    }
    .back2 {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(180deg);
        background: url("/logos/ig2.png") no-repeat;
    }
    .flip-container3 {
        margin: 10px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container3:hover .logo3 {
        transform: rotateY(720deg);
    }
    .logo3, .front3, .back3 {
        width: 70px;
        height: 70px;
    }
    .logo3 {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front3, .back3 {
        backface-visibility: hidden;
        position: absolute;
    }
    .front3 {
        z-index: 1;
        transform: rotateY(0deg);
        background: url("/logos/yt.png") no-repeat;
    }
    .back3 {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(180deg);
        background: url("/logos/yt2.png") no-repeat;
    }

 .flip-container4 {
        margin: 10px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container4:hover .logo4 {
        transform: rotateY(720deg);
    }
    .logo4, .front4, .back4 {
        width: 70px;
        height: 70px;
    }
    .logo4 {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front4, .back4 {
        backface-visibility: hidden;
        position: absolute;
    }
    .front4 {
        z-index: 1;
        transform: rotateY(0deg);
        background: url("/logos/x.png") no-repeat;
    }
    .back4 {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(180deg);
        background: url("/logos/x2.png") no-repeat;
    }

    .flip-container5 {
        margin: 10px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container5:hover .logo5 {
        transform: rotateY(720deg);
    }
    .logo5, .front5, .back5 {
        width: 70px;
        height: 70px;
    }
    .logo5 {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front5, .back5 {
        backface-visibility: hidden;
        position: absolute;
    }
    .front5 {
        z-index: 1;
        transform: rotateY(0deg);
        background: url("/logos/tt.png") no-repeat;
    }
    .back5 {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(180deg);
        background: url("/logos/tt2.png") no-repeat;
    }
	
	 .flip-container6 {
        margin: 10px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container6:hover .logo6 {
        transform: rotateY(720deg);
    }
    .logo6, .front6, .back6 {
        width: 70px;
        height: 70px;
    }
    .logo6 {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front6, .back6 {
        backface-visibility: hidden;
        position: absolute;
    }
    .front6 {
        z-index: 1;
        transform: rotateY(0deg);
        background: url("/logos/sc.png") no-repeat;
    }
    .back6 {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(180deg);
        background: url("/logos/sc2.png") no-repeat;
    }

    .flip-container7 {
        margin: 10px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container7:hover .logo7 {
        transform: rotateY(720deg);
    }
    .logo7, .front7, .back7 {
        width: 70px;
        height: 70px;
    }
    .logo7 {
        transition: 0.5s;
        transform-style: preserve-3d;
        position: relative;
    }
    .front7, .back7 {
        backface-visibility: hidden;
        position: absolute;
    }
    .front7 {
        z-index: 1;
        transform: rotateY(0deg);
        background: url("/logos/pr.png") no-repeat;
    }
    .back7 {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(180deg);
        background: url("/logos/pr2.png") no-repeat;
    }