/* General body and HTML styling */
body,
html {
margin: 0;
padding: 0;
height: 100%;
/* NEW: Set base font */
font-family: 'Inter', sans-serif;
}
/* * NEW: Language-specific font rules
* This tells the browser which font to use based on the lang attribute
*/
html:lang(sa),
html:lang(hi),
html:lang(mr) {
font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
}
html:lang(kn) {
font-family: 'Noto Sans Kannada', 'Inter', sans-serif;
}
html:lang(en) {
font-family: 'Inter', 'Noto Sans', sans-serif;
}
/* Background video container */
.background-video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#background-video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Link styling */
a:link {
color: rgb(84, 184, 255);
}
/* Image styling */
img {
border-radius: 20px;
border: 5px solid rgba(255, 255, 255, 0.212);
margin-top: 5px;
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.03);
}
/* General card styling */
.card {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(17, 35, 40, 0.75);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
padding: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
/* Flexbox container for about section */
.about-section-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
max-width: 1200px;
margin: 50px auto;
gap: 20px;
}
.figure_card {
flex: 1;
min-width: 300px;
}
.about-me-content {
flex: 2;
min-width: 300px;
text-align: left;
}
/* Grid container for cards */
.cards-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
}
/* ======================================== */
/* ===== GLASSMORPHISM BUTTONS ===== */
/* ======================================== */
/* --- Base Style for All Buttons --- */
.btn_yt, .btn_linkedin, .btn_telegram, .submit, .btn_resume {
display: inline-block;
padding: 12px 24px;
font-family: inherit; /* NEW: Inherit font from :lang rule */
font-size: 1em;
font-weight: bolder;
color: #fff;
text-decoration: none;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
cursor: pointer;
}
/* --- Base Hover Effect --- */
.btn_yt:hover, .btn_linkedin:hover, .btn_telegram:hover, .submit:hover, .btn_resume:hover {
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.3);
}
/* --- Specific Button Colors --- */
.btn_yt {
background-color: rgba(255, 0, 0, 0.3);
}
.btn_linkedin {
background-color: rgba(16, 100, 189, 0.5);
}
.btn_telegram {
background-color: rgba(0, 136, 204, 0.5);
}
.submit {
width: 75%;
height: auto;
color: lightblue;
box-sizing: border-box;
background-color: rgba(173, 216, 230, 0.2);
border: 1px solid rgba(173, 216, 230, 0.5);
}
.submit:hover {
background-color: rgba(173, 216, 230, 0.4);
color: #fff;
border-color: rgba(173, 216, 230, 0.8);
}
hr {
border-color: rgba(240, 248, 255, 0.5);
border-style: solid;
}
h2 {
text-align: center;
}
#cv_btn {
background-color: rgba(208, 255, 0, 0.527);
color: white;
}
/* ======================================== */
/* ===== NAVBAR ===== */
/* ======================================== */
.navbar {
position: sticky;
top: 0;
background-color: rgba(17, 35, 40, 0.75);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
border-radius: 30px;
/* FIXED: Removed flex-wrap: wrap; from desktop */
}
/* FIXED: Added new rules for layout groups */
.nav-left, .nav-right {
display: flex;
align-items: center;
gap: 15px; /* Space between items in each group */
}
.img-name {
display: flex;
align-items: center;
}
.img-name img {
border-radius: 12px;
border: 3px solid rgba(255, 255, 255, 0.125);
margin: 0 10px 0 0;
}
.navbar h1 {
font-size: 2em;
margin: 0;
}
.links ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.links li {
margin-left: 20px;
}
.links a {
/* Use inherit to get the correct font */
font-family: inherit;
color: #fff;
text-decoration: none;
font-size: 1.2em;
transition: color 0.3s ease;
}
.links a:hover,
.links a:focus {
color: rgb(84, 184, 255);
}
/* NEW: Language Switcher Style */
.language-switcher {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 30px;
color: white;
padding: 8px 16px;
font-family: inherit; /* Use the new language font */
font-weight: bold;
font-size: 0.9em;
cursor: pointer;
transition: all 0.3s ease;
/* FIXED: Removed margin-right, gap will handle it */
}
.language-switcher:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.language-switcher option {
background-color: #112328; /* Dark background for options */
color: white;
font-family: inherit;
}
/* ======================================== */
/* ===== CONTENT & RESPONSIVENESS ===== */
/* ======================================== */
.content {
padding-top: 20px;
opacity: 0;
animation: fadeInContent 1s ease 0.3s forwards;
}
@keyframes fadeInContent {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
iframe {
max-width: 100%;
aspect-ratio: 1 / 1.2;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
display: block;
margin: 20px auto;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(17, 35, 40, 0.75);
}
.skills-list {
list-style: none;
padding: 0;
text-align: left; /* Align lists left for readability */
display: inline-block; /* Center the left-aligned block */
}
.skills-list li {
margin-bottom: 5px;
}
footer {
text-align: center;
padding: 20px 0;
color: #fff;
font-size: 0.9em;
}
.copyright {
margin: 0;
}
#logo {
height: 100px;
}
.myname {
font-size: 50px;
margin: 0 15px;
}
.container {
position: relative;
color: aliceblue;
font-family: inherit; /* NEW: Use language font */
background-size: cover;
background-attachment: fixed;
margin: 0;
font-size: 20px;
}
.responsive-form {
max-width: 400px;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(17, 35, 40, 0.75);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
padding: 20px;
margin: 50px auto;
text-align: center;
}
input[type="text"] {
border: 4px solid white;
background: none;
border-radius: 30px;
color: #fff;
width: 70%;
height: 25px;
padding: 10px;
margin: 10px;
font-family: inherit;
}
input::placeholder {
color: rgba(255, 255, 255, 0.5);
font-family: inherit;
}
textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
font-family: inherit;
}
select,
option {
background: none;
color: #fff;
border-radius: 60px;
font-family: inherit;
margin: 10px;
padding: 10px;
border: 4px solid white;
width: 75%;
}
textarea {
background: none;
border: 4px solid white;
border-radius: 30px;
font-family: inherit;
margin: 10px;
padding: 10px;
width: 70%;
height: 150px;
color: #fff;
}
/* ... (omitted .countries rules) ... */
li:hover {
background-color: rgba(173, 216, 230, 0.185);
border-radius: 30px;
padding: 5px;
}
ul.countrynames-ul {
list-style-type: none;
}
a.Mahen {
color: white;
text-decoration: none;
}
.maincontainer {
display: block;
}
/* Hamburger Menu Icon */
.hamburger-menu {
display: none;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 25px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 11;
}
.hamburger-menu .line {
display: block;
width: 100%;
height: 3px;
background-color: #fff;
border-radius: 3px;
transition: all 0.3s ease-in-out;
}
/* Media Query for Mobile */
@media (max-width: 768px) {
.navbar {
justify-content: space-between;
flex-wrap: wrap; /* FIXED: Added flex-wrap back for mobile */
}
#logo {
height: 60px;
}
.myname {
font-size: 28px;
margin: 0 10px;
}
.myname h1 {
font-size: 1.2em;
}
/* FIXED: Mobile rules for new layout groups */
.nav-left {
gap: 10px;
}
.nav-right {
gap: 10px;
}
/* NEW: Adjust language switcher on mobile */
.language-switcher {
/* FIXED: Removed order */
padding: 6px 10px;
font-size: 0.8em;
}
.links {
position: absolute;
top: 90px;
left: 0;
right: 0;
width: 90%;
margin: 0 auto;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(17, 35, 40, 0.9);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
display: none;
}
.links.nav-active {
display: block;
}
.links ul {
flex-direction: column;
width: 100%;
padding: 10px 0;
}
.links li {
margin: 10px 0;
text-align: center;
margin-left: 0;
}
.hamburger-menu {
display: flex;
/* FIXED: Removed order */
}
.hamburger-menu.active .line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-menu.active .line:nth-child(2) {
opacity: 0;
}
.hamburger-menu.active .line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
}
.youtube-video {
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
}
.resume-iframe {
width: 100%;
height: 600px;
max-width: 500px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
}
.social-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
/* ... (omitted form styles) ... */
/* --- UPDATED Resume Button --- */
.btn_resume {
background-color: rgba(0, 255, 128, 0.3);
margin: 20px 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
@media (max-width: 480px) {
.myname {
font-size: 20px;
}
#logo {
height: 50px;
}
.language-switcher {
margin-right: 5px;
}
}
.resume-icon {
width: 1em;
height: 1em;
}
.btn_resume:hover {
background-color: rgba(0, 255, 128, 0.5);
box-shadow: 0 6px 20px rgba(0, 255, 128, 0.4);
border-color: rgba(0, 255, 128, 0.7);
}
/* ======================================== */
/* ===== SCROLL ANIMATION STYLES ===== */
/* ======================================== */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
transition-delay: 0.2s;
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}