body {
           margin: 0;
           font-family: 'Nunito', sans-serif;


    background: linear-gradient(
        225deg,
        #ffffff 50%,
        #f9f9f9 50%
        
    );
         
       }

       .container {
           display: flex;
           min-height: 100vh;
           align-items: center;
       }

       .left-block {
           flex: 1;
           padding: 120px;
           box-sizing: border-box;
       }

       .right-block {
           flex: 1;
           display: flex;
           justify-content: center;
           align-items: center;
           box-sizing: border-box;
       }

       .img-wrapper {
           position: relative;
           width: 100%;
           max-width: 500px;
           aspect-ratio: 1/1;
       }

       .img-wrapper img {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: opacity 3s ease;
           box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
       }

       #img1 {
           opacity: 1;
       }

       #img2 {
           opacity: 0;
       }

       .icon-bar {
           display: flex;
           gap: 20px;
           align-items: center;
       }

       .icon-bar img:hover {
           filter: drop-shadow(0 0 6px #9fc0e0);
       }

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

           .left-block,
           .right-block {
               width: 100%;
               padding: 0;
           }

           .right-block {
               margin-top: 20px;
           }

           .img-wrapper {
               max-width: 100%;
           }
       }