.main-container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     gap: 70px;
     flex-wrap: wrap;
 }

 .logos {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     height: 80%;
     width: 150px;
     animation: fadeIn 1.2s ease-in-out forwards;
 }

 .logos img {
     width: 150px;
     height: 100px;
     margin: 20px 0;
     border: 5px solid #c6d5e9;
     object-fit: cover;
     transition: transform 0.4s ease, margin 0.4s ease;
 }

 .logos img:hover {
     transform: scale(1.2);
 }

 /* LEFT SIDE zigzag alignment (L-R-L) */
 /* .left-logos img:nth-child(odd) {
            align-self: flex-start;
            margin-left: 0;
        } */

 .left-logos img:nth-child() {
     align-self: flex-start;
     margin-right: 10px;
 }

 /* RIGHT SIDE zigzag alignment (R-L-R) */
 /* .right-logos img:nth-child(odd) {
            align-self: flex-end;
            margin-right: 0;
        } */

 .right-logos img:nth-child() {
     align-self: flex-start;
     margin-left: 10px;
 }

 .mobile-screen-wrapper {
     position: relative;
     width: 220px;
     height: 500px;
     border-radius: 25px;
     background-color: #fff;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     margin: 20px !important;
     margin-left: 20px !important;
     transition: transform 1s ease;
 }

 .mobile-screen {
     width: 100%;
     height: 100%;
     background-image: url('/images/mobile.jpg');
     background-size: cover;
     background-position: center;
     border-radius: 25px;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (max-width: 767px) {
     .main-container {
         flex-direction: column;
         gap: 30px;
         height: auto;
         padding: 40px 0;
     }

     .logos {
         flex-direction: row;
         justify-content: center;
         width: 100%;
         height: auto;
     }

     .logos img {
         margin: 10px;
         align-self: center !important;
     }

     .mobile-screen-wrapper {
         width: 250px;
         height: 500px;
     }
 }