body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; background-color: #f8f9fa;
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px;
        }
        header { margin-bottom: 20px;
        }
        .logo { 
        max-width: 250px; 
        height: auto;
	margin: 0 15%;
        }
        .image-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
        }
        .image-box { position: relative; width: 45%; max-width: 550px; border-radius: 10px; overflow: hidden;
        }
        .image-box img { width: 100%; height: auto; display: block; border-radius: 10px;
        }
        .grayscale img {
	filter: brightness(168%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);
        }
        .overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; padding: 10px 20px; font-size: 40px;
        }
        .btn { 
        position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%);  color: white; padding: 10px 15px; text-decoration: none;  
        
        background-color: #3FBCEB;
    font-family: "Roboto", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    border-radius: 90px 90px 90px 90px;
    width: 240px;
    max-with: 240px;
        }
        .btn:hover { background-color: #0056b3;
        }
        
        .btn.black
        {
    	    color: black;
        }
        
        .disabled-btn {
    background-color: gray;
    pointer-events: none;
}
.disabled-btn:hover {
    background-color: gray;
}
        
        
        
        
        @media (max-width: 768px) { .image-container { flex-direction: column; align-items: center;
            }
            .image-box { width: 90%;
            }
            .overlay
            {
        	font-size: 28px;
            }
            .btn
            {
        	font-size: 16px;
            }
            
        }