/* Global Styles */
body {
 font-family: 'Arial', sans-serif;
 background-color: #f4f4f4;
 color: #333;
 padding: 0;
 margin: 0;
}

/* Dark mode styles */
body.dark-mode {
 background-color: #121212;
 color: #ffffff;
}

.navbar-darkmode {
 background-color: #007bff;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 font-size: 1.8em;
 cursor: pointer;
 padding: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Navbar */
.navbar {
 background-color: #ffffff;
 padding: 20px;
 border-bottom: 1px solid #ddd;
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Keep the navbar text black in dark mode */
.navbar.dark-mode {
 background-color: #333;
}

.navbar-nav {
 flex-direction: row;
 justify-content: center;
 width: 100%;
 text-align: center;
}

.nav-item {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-grow: 1;
}

.nav-link {
 font-size: 1.5em;
 font-weight: bold;
 padding: 10px;
 color: #333; /* Keep text black */
 text-decoration: none;
 transition: color 0.3s ease;
}

/* Navbar Hover Effect */
.nav-link:hover {
 color: #007bff;
}

/* Dark Mode Navbar keeps links black */
body.dark-mode .nav-link {
 color: #000;
}

body.dark-mode .nav-link:hover {
 color: #333;
}

/* Main Section */
.shadcn-main {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 40px;
 max-width: 1200px;
 margin: 0 auto;
}

/* Standard Box Style */
.content-box {
 background-color: #ffffff;
 padding: 20px;
 border-radius: 5px;
 border: 1px solid #ddd;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 margin-bottom: 40px;
 max-width: 800px;
 width: 100%;
 box-sizing: border-box;
 word-wrap: break-word;
 text-align: center;
}

/* Dark Mode Content Box */
body.dark-mode .content-box {
 background-color: #333;
 color: #fff;
}

/* Certification Container Styles */
.certification-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
 grid-gap: 20px;
 justify-items: center;
 padding: 20px;
}

/* Certification Item */
.certification {
 text-align: center;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certification:hover {
 transform: scale(1.05); /* Slight zoom effect */
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add slight shadow on hover */
}

/* Certification Badge Styles */
.certification-badge {
 width: 100px;
 transition: box-shadow 0.3s ease;
}

.certification-badge:hover {
 box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Shine effect on hover */
}

/* Certification Title */
.certification-title {
 margin-top: 10px;
 font-size: 1.1em;
}

/* Profile Picture Styles */
.profile-container {
 margin: 20px 0;
 display: flex;
 justify-content: center;
}

.profile-pic {
 border-radius: 50%;
 width: 150px;
 transition: transform 0.3s;
}

.profile-pic:hover {
 transform: scale(1.1);
}

/* Buttons */
.shadcn-button {
 background-color: #28a745;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 1.1em;
 margin-bottom: 20px;
 transition: background-color 0.3s ease;
}

.shadcn-button:hover {
 background-color: #218838;
}

/* Dark Mode Button */
body.dark-mode .shadcn-button {
 background-color: #1b5e20;
}

body.dark-mode .shadcn-button:hover {
 background-color: #156017;
}

/* Centering the buttons */
.centered-section {
 display: flex;
 justify-content: center;
}

/* View Counter Section */
.view-section {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 40px;
}

.shadcn-counter {
 font-size: 1.2em;
 color: #333;
 margin-top: 10px;
}

/* Dark Mode View Counter */
body.dark-mode .shadcn-counter {
 color: #fff;
}

/* Contact Form */
.shadcn-form {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 max-width: 500px;
 margin: 0 auto;
}

.shadcn-input, .shadcn-textarea {
 width: 100%;
 padding: 10px;
 margin: 10px 0;
 border: 1px solid #ddd;
 border-radius: 5px;
 box-sizing: border-box;
 text-align: center;
}

/* Dark Mode Input and Textarea */
body.dark-mode .shadcn-input, body.dark-mode .shadcn-textarea {
 background-color: #333;
 color: #fff;
 border: 1px solid #555;
}

.shadcn-textarea {
 height: 100px;
 resize: vertical;
 text-align: center;
}

/* Footer */
.shadcn-footer {
 background-color: #f8f9fa;
 padding: 20px;
 text-align: center;
}

.shadcn-footer p {
 margin: 0;
 color: #6c757d;
}

/* Dark Mode Footer */
body.dark-mode .shadcn-footer {
 background-color: #222;
 color: #fff;
}

/* Responsive Styles */
@media (max-width: 768px) {
 .navbar-nav {
     flex-direction: column;
 }

 .nav-link {
     padding: 10px 0;
     text-align: center;
     font-size: 1.3em;
 }

 .navbar-darkmode {
     margin: 10px auto;
 }
}