html, body {height:100%; margin:0; font-family:Arial, sans-serif; display:flex; flex-direction:column;}
body {padding-top:120px;}
.navbar {background-color:#244; padding:0.5rem 1rem; color:#fff; display:flex; justify-content:space-between; align-items:center; position:fixed; top:0; width:100%; z-index:999;}
.logo-img {height:80px; transition: height 0.3s;}
@media(max-width:768px){.logo-img{height:60px;}}
.menu-toggle {font-size:30px; cursor:pointer; color:#fff;}
.navbar-social {display:flex; gap:5px; align-items:center;}
.navbar-social a {color:#fff; font-size:22px; transition:0.3s;}
.navbar-social a:hover {color:#ffc107; transform:scale(1.2);}
.sidebar {height:100%; width:0; position:fixed; z-index:10000; top:0; right:0; background-color:#244; overflow-x:hidden; transition:0.3s; padding-top:10px; color:#fff;}
.sidebar a {display:block; padding:10px 20px; text-decoration:none; color:orange;}
.sidebar a:hover {background-color:#333;}
.sidebar ul {list-style:none; padding-left:20px; display:none;}
.sidebar h4 {cursor:pointer; padding:5px 10px; margin:0; font-size:15px; font-family:Arial, sans-serif; }
.sidebar .social-icons {display:flex; justify-content:space-around; gap:8px; margin-bottom:20px;}
#close-btn {position:absolute; top:15px; right:20px; font-size:30px; cursor:pointer; color:red;}
.card-row{width:100%; display:flex; justify-content:center; margin-bottom:30px;}
.card-container{width:85%; max-width:900px; background:#fff; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.1); overflow:hidden; transition:transform 0.3s, box-shadow 0.3s;}
.card-container:hover{transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.2);}
.card-header h2{margin:15px 0 5px; font-size:1.5em;}
.card-header p{margin:0 0 10px; color:#555;}
.card-body{padding:0 15px 15px; text-align:left;}
footer {background:#244; color:#fff; padding:20px 0; text-align:center; width:100%; margin-top:auto;}
footer .social-icons {display:flex; justify-content:center; gap:15px; flex-wrap:wrap;}
footer .social-icons a {font-size:22px; color:#fff; transition:0.3s;}
footer .social-icons a:hover {color:#ffc107; transform:scale(1.2);}
main.container {max-width:1200px; margin:0 auto; padding:20px;}
.wave-text {font-size:32px; margin-bottom:30px;}
.filter-controls {margin-bottom:20px; display:flex; gap:10px; justify-content:center;}
.filter-controls select, .filter-controls input {padding:5px 10px; font-size:16px;}
.card-container {background:#fff; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.15); width:100%; max-width:600px; padding:15px; margin-bottom:20px;}
.card-header .card-title {font-size:24px; margin-bottom:5px;}
.card-header .p1 {font-weight:bold;}
.card-header .p2 {color:#555;}
.card-body {margin-top:10px;}
.solution-button {background:#222; color:#fff; border:none; padding:8px 12px; border-radius:5px; cursor:pointer; transition:0.3s;}
.solution-button:hover {background:#ffcc00; color:#000;}
.solution-content {display:none; margin-top:10px; background:#f1f1f1; padding:10px; border-radius:5px; overflow:auto; max-height:500px;}
.highlight {background-color:yellow;}



/* Only footer social icons black */
#footer-icons a i {
    color: #000000; /* black color */
    transition: color 0.3s; /* smooth hover */
}

/* Hover effect */
#footer-icons a:hover i {
    color: #555555; /* lighter black/gray on hover */
}




/* Style for the wave text */
.wave-text {
  font-size: 2.5em;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
}

.wave-text span {
  display: inline-block;
  animation: wave 1s infinite;
  opacity: 0;
}

/* Keyframes for wave animation */
@keyframes wave {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { transform: translateY(-20px) scale(1.5); opacity: 1; }
  50% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Colors cycle for letters */
.wave-text span:nth-child(4n+1) { color: blue; }
.wave-text span:nth-child(4n+2) { color: dodgerblue; }
.wave-text span:nth-child(4n+3) { color: purple; }
.wave-text span:nth-child(4n+4) { color: grey; }