/* Global-Styles */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    /* --za-primary: #5a002d;
    --za-secondary: #7c0069;
    --za-tertiary: #00a3c0; */
    /* --za-primary: #325a00;
    --za-secondary: #707c00;
    --za-tertiary: #c05d00; */
    /* --za-primary: #5a5600;
    --za-secondary: #707c00;
    --za-tertiary: #c07600; */
    /* --za-primary: #005a02;
    --za-secondary: #007c30;
    --za-tertiary: #7ac000; */
    /* --za-primary: #00575a;
    --za-secondary: #00697c;
    --za-tertiary: #00c080; */
    /* --za-primary: #5a004d;
    --za-secondary: #72007c;
    --za-tertiary: #a300c0; */
    /* --za-primary: #11005a;
    --za-secondary: #001b7c;
    --za-tertiary: #0086c0; */
    --za-primary: #0e0241;
    --za-secondary: #061b65;
    --za-tertiary: #065172;
    /* --za-primary: #5A0014;
    --za-secondary: #7c0042;
    --za-tertiary: #c0007a; */
    /* --za-primary: #727272;
    --za-secondary: #bababa;
    --za-tertiary: #f6f6f6; */
    /* --za-primary: #000000;
    --za-secondary: #000000;
    --za-tertiary: #343434; */
    --za-white: #fff;
    --za-black: #000000;
    --za-grey: #4e4d4d;
}
body{
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}
h2{
    position: relative;
    width: max-content;
    margin: auto;
}
h2::before{
    content: '';
    bottom: -7px;
    position: absolute;
    background: linear-gradient(to right, var(--za-tertiary), var(--za-white));
    height: 3px;
    width: 50%;
    transition: width 0.5s ease-in;
}
h2:hover::before{
    width: 100%;
}
.neonButton {
    /* Base button styles */
    background-color: transparent;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer; 
    /* Neon glow effect */
    box-shadow: 0 0 0 2px var(--za-white), 0 0 4px 4px rgba(244, 244, 248, 0.5);
    transition: all 0.3s ease-in-out;
}
  /* Hover state for the glowing effect */
  .neonButton:hover {
    box-shadow: 0 0 0 4px var(--za-white), 0 0 8px 8px rgba(255, 255, 255, 0.589);
}  
/* Navbar-Container */
.zaHeaderSection {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.zaHeaderSection .navbar {
    background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary));
    backdrop-filter: blur(10px);
}
.zaHeaderSection ul li a {
    color: var(--za-white);
    position: relative;
    padding-bottom: 3px;
    width: max-content;
    transition: color 0.3s ease;
}
.zaHeaderSection ul li a:hover, .zaHeaderSection ul li a.active {
    color: var(--za-white);
}
.zaHeaderSection ul li a:hover::after, .zaHeaderSection ul li a.active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--za-white);
    transition: width 0.3s ease;
    width: 80%;
}
.zaHeaderSection ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--za-white);
    width: 0;
    transition: width 0.3s ease;
}
/* Hero-Container */
.zaHeroSection{
    max-width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary));
}
/* .zaHeroSection .bgImage{
    width: 100%;
    height: 100%;
    background-image: url('images/thunder-cloud.png');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
    z-index: 1;
} */
/* .zaHeroSection .bgOverlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary));
    opacity: 0.8;
    overflow: hidden;
} */
.zaHeroSection .introduction{
    width: 100%;
    height: auto;
}
.zaHeroSection .socialIcons .socialIcon {
    border: var(--za-white) solid 2px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--za-white);
    transition: all 0.3s ease;
    position: relative;
}
.zaHeroSection .socialIcons .socialIcon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--za-white);
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.zaHeroSection .socialIcons .socialIcon:hover::before {
    width: 120%;
    height: 120%;
    opacity: 0.4;
    box-shadow: 0 0 15px var(--za-white), 0 0 30px var(--za-white), 0 0 45px var(--za-white), 0 0 60px var(--za-white);
}
.zaHeroSection .socialIcons .socialIcon:hover {
    border: var(--za-secondary) solid 3px;
    background-color: var(--za-white);
    color: var(--za-primary);
}  
/* About-Container */
.zaAboutSection{
    color: var(--za-white);
    /* background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary)); */
    background-color: var(--za-primary);
    opacity: 0.9;
}
.zaAboutSection .card{
    background: linear-gradient(to bottom, var(--za-secondary), var(--za-tertiary));
}
.zaAboutSection h3{
    background: linear-gradient(to bottom, var(--za-primary), var(--za-secondary));
}
/* Services-Container */
.zaServicesSection{
    background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary));
}
.zaServicesSection .languages{
    max-width: 130px;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.zaServicesSection .languages:hover{
    transform: scale(1.05) translateY(-5px) rotate(-5deg);
    opacity: 1;
}
/* Gallery-Container */
.zaGallerySection{
    background: var(--za-primary);
    color: var(--za-white);
}
.card-img-overlay {
    opacity: 0;
    transform: translateY(-10%);
    transition: opacity 0.9s ease, transform 0.9s ease;
    background: linear-gradient(to bottom, var(--za-secondary), var(--za-tertiary), var(--za-black));
    width: 100%;
    height: 100%;
} 
.card:hover .card-img-overlay {
    opacity: 0.7;
    transform: translateY(0);
}
.card-img {
    transition: opacity 0.9s ease;
}
.card:hover .card-img {
    opacity: 0.5;
}
/* Resume-Container */
.zaResumeSection{
    background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary));
    color: var(--za-white);
}

/* Contact-Container */
.zaContactSection{
    background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary));
    color: var(--za-white);
}
.zaContactSection input,
.zaContactSection textarea{
    background: linear-gradient(to bottom, var(--za-secondary), var(--za-tertiary), var(--za-secondary));
}
/* Footer-Container */
.zaFooterSection{
    background: linear-gradient(to right, var(--za-primary), var(--za-secondary), var(--za-tertiary));
    color: var(--za-white);
}