* {
      margin-top: 20px;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-user-select: none; /* Chrome, Safari, Opera */
        -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Standard Syntax */
    }
        /* Disable dragging of images */
        img {
            -webkit-user-drag: none;
                user-drag: none;
        }

    .card {
        margin-top: 30px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        max-width: 650px;
        max-height: 750px;
        transition: transform 0.3s ease;
        display: flex;
    }

    .card:hover {
      transform: translateY(-20px);
    }

    .card img {
      width: 10%;
      height: auto;
    }

    .card-content {
      padding: 15px;
    }

    .card-title {
      font-size: 1.5rem;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
      text-align: center;
    }

    .card-description {
      font-size: 0.8rem;
      color: #555;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .card-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      text-decoration: none;
      font-size: 0.9rem;
      transition: background-color 0.3s ease;
    }

    .card-button:hover {
      background-color: #0056b3;
    }
    #card2 {
        margin-left: 30px;
        margin-top: 30px;
        max-width: 650px;
        max-height: 750px;
    }
    img.custom-logo{
		animation: sictlogo 5s linear infinite; 
		position: relative;
		animation-direction: alternate;
		/*object-fit: cover;*/
		width: 40px;
		height: 40px;
		}
		@keyframes sictlogo
			{
			100%{
				transform: rotateY(360deg);
				}
			}
	.card:hover {
  						animation-play-state: paused;
  						cursor: pointer;
						}
	
	.modal {
					display: flex;
					width: 60%;
					margin: 50px auto;
					margin-left: -80px;
					position: absolute;
					top: 150px;
					left: 25%;
					border: 2px solid lawngreen;
					@include translateX(-50%);
					background: #fff;
					@include box-shadow;
					@include border-radius;
					overflow: hidden;
				.close-modal {
					position: absolute;
					right: 10px;
					top: 10px;
					color: red;
					cursor: pointer;
					text-decoration: unset;
				}
				h3 {
					background: hotpink;
					color: #ffff;
					padding: 10px;
				}
				ul {
					padding: 10px 20px 20px 20px;
				}
			}
			
	.animated-box {
	   background: linear-gradient(45deg, #ff9a9e, #fad0c4);
	   border-radius: 20px;
	   animation: bounceRotate 3s infinite ease-in-out, changeColor 6s infinite;
        }
    .animated-box:hover {
  		animation-play-state: paused;
  		cursor: pointer;
		}

        @keyframes bounceRotate {
            0%, 10% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(360px) rotate(10deg);
            }
            50% {
                transform: translateY(0) rotate(10deg);
            }
            85% {
                transform: translateY(-30px) rotate(10deg);
            }
        }

        @keyframes changeColor {
            0% {
                background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            }
            25% {
                background: linear-gradient(45deg, #fbc2eb, #a6c1ee);
            }
            50% {
                background: linear-gradient(45deg, #ffecd2, #fcb69f);
            }
            75% {
                background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
            }
            100% {
                background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            }
        }