.portfolio-avatar {
    width: 80px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}

.portfolio-name {
    font-size: 2.5em; /* Make the font size larger */
    margin: 5px; /* Remove default margin */
}

header h1 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
h1, h2, h3 {
    text-transform: uppercase;
    
}
h1 {
    font-size: 3.0em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2 {
    font-size: 2.0em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
p{
    font-size: 1.2em;  
}
a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--purple-night-city-close);
}
header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}


nav {
    display: flex;
    justify-content: center;
    background-color: var(--color-4);
}

nav a {
    color: #fff;
    padding: 14px 20px;
    text-decoration: none;
    text-transform: uppercase;
}
nav a:hover {
    background-color:var(--deep-blue-sky);
}
section {
    padding: 20px;
    min-height: 550px;
    /*margin: 20px;*/
    /*border-radius: 8px;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
     position: relative;
   
}
footer {
    
    color: var(--snow-white);
    text-align: center;
    padding: 10px 0;
    position: inherit;
    bottom: 0;
    width: 100%;
    
}
footer a {
    color:var(--soft-sand);
    transition: color 0.1s;
}
footer a:hover {
    color: var(--signal-red-ligh);
}
footer p{
    font-size: 0.75em;
}
.connector{
    height: 200px;
   
    position: relative;
}

:root {
  
    --ps-cloud-nav: url('../img/bg/nav-bar-cloud.png');
    --ps-tree: url('../img/bg/tree.png');
    --ps-close-mountain: url('../img/bg/close-mountain.png');
    --ps-far-mountain: url('../img/bg/far-mountain.png');
    --ps-close-city: url('../img/bg/close-city.png');
    --ps-far-city: url('../img/bg/far-city.png');
}
:root {
    --mountain-grey: #A9A9A9; /* Mountain Grey */
    --misty-grey: #696969; /* Misty Grey */
    --snow-white: #FFFFFF; /* Snow White */
    --snow-hill: #D3D3D3; /* Snow Hill */
    --frosty-mint: #E0FFFF; /* Frosty Mint */
    --icy-blue: #B0E0E6; /* Icy Blue */
    --clear-blue-sky: #87CEEB; /* Clear Blue Sky */
    --ocean: #006699; /* Ocean */
    --deep-blue-sky: #006488; /* Deep Blue Sky */
    --midnight-blue: #191970; /* Midnight Blue */
    --far-mountain: #8A9A5B; /* Far Mountain */
    --green-field: #7A9A4E; /* Forest Green */
    --green-field-dark: #718E47; /* Forest Green */
    --forest-green: #538449; /* Forest Green */
    --forest-green-dark: #345C2F; /* Forest Green */
    --sunset-pink: #FFCCCB; /* Sunset Pink */
    --dawn-yellow: #FFDD44; /* Dawn Yellow */
    --sunshine-yellow: #FFD700; /* Sunshine Yellow */
    --earth-brown: #8B4513; /* Earth Brown */
    --soft-sand: #ec6d02; /* Soft Sand */
    --twilight-purple: #800080; /* Twilight Purple */
    --signal-red-ligh: #dc3545;
    --purple-car: #6f42c1;
    --purple-night-city-far: #46065C;
    --purple-night-city-close: #220027;
    --dark-night: #000000;
}
:root {
    --unity-color: var(--soft-sand);
    --csharp-color: var(--forest-green);
    --shader-color: var(--forest-green-dark);
    --js-color:var(--dawn-yellow);
    --jquery-color: var(--ocean);
    --html5-color: var(--signal-red-ligh);
    --css3-color: var(--deep-blue-sky);
    --php-color:var(--color-4);
    --github-color: var( --dark-night);
    --creative-cloud-color: var(--signal-red-ligh);
}

#site-header {
    background-color: var( --color-1);
}
.connector0{
    background-image: linear-gradient(180deg, var( --color-1) 0%, var(--color-5) 50%);
}
/*--------------------------------------------------------------
#WELCOME Section
--------------------------------------------------------------*/
#welcome {
    background-color: var(--color-5);
}
#welcome h1 {
    color: var(--signal-red-ligh);
   
}
#welcome h2 {
    color: var(--dark-night);
}
#dynamic-content{
    color: var(--twilight-purple);
}

.connector1{
    background-image: linear-gradient( var(--color-5) 0%, var( --sunset-pink) 100%);
}
/*--------------------------------------------------------------
#ABOUT Section
--------------------------------------------------------------*/
#about {
    background-color: var( --sunset-pink);
}
#about h1{
    color: var(--color-1)
}
#about h2{
    color: var(--midnight-blue)
}
p.one {
    border-left: 4px solid var(--twilight-purple);
    padding: 10px 15px;
    color: var(--misty-grey);
    font-size: 1.2em;
    margin-bottom: 15px;
}
p.one strong {
    font-weight: bold;
    color: var(--twilight-purple);
}

p.two {
    border-left: 4px solid var(--green-field);
    padding: 10px 15px;
    color: var(--misty-grey);
    font-size: 1.2em;
    margin-bottom: 15px;
}
p.two strong {
    font-weight: bold;
    color: var(--green-field);
}

p.three {
    border-left: 4px solid var(--deep-blue-sky);
    padding: 10px 15px;
    color: var(--misty-grey);
    font-size: 1.2em;
    margin-bottom: 15px;
}
p.three strong {
    font-weight: bold;
    color: var(--deep-blue-sky);
}

p.four {
    border-left: 4px solid var(--earth-brown);
    padding: 10px 15px;
    color: var(--misty-grey);
    font-size: 1.2em;
    margin-bottom: 15px;
}
p.four strong {
    font-weight: bold;
    color: var(--earth-brown);
}

p.five {
    border-left: 4px solid var(--signal-red-ligh);
    padding: 10px 15px;
    color: var(--misty-grey);
    font-size: 1.2em;
    margin-bottom: 15px;
}
p.five strong {
    font-weight: bold;
    color: var(--signal-red-ligh);
}

p.six {
    border-left: 4px solid var(--purple-car);
    padding: 10px 15px;
    color: var(--misty-grey);
    font-size: 1.2em;
    margin-bottom: 15px;
}
p.six strong {
    font-weight: bold;
    color: var(--purple-car);
}


.connector2 {
    height: 50px;
    background-color: var(--sunset-pink);
    background-image: var(--ps-far-mountain);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 50px;
}

/*--------------------------------------------------------------
#SKILLS_TOOLS Section
--------------------------------------------------------------*/

#skills_tools {
    background-color: var(--icy-blue);  
}
#skills_tools h2{
   color: var(--soft-sand);
}
#skills_tools h3{
    color: var( --twilight-purple);
}
#skills_tools h1{
    color: var( --color-4);
    margin-top: 25px;
}
#skills_tools p{
    font-size: 1.2em; /* Slightly larger text */
}
.skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.skill-item i {
    font-size: 2em;
    margin-right: 10px;
}

.skill-item span {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.unity {
    color: var(--unity-color);
}

.csharp {
    color: var(--csharp-color);
}

.shader {
    color: var(--shader-color);
}

.js {
    color: var(--js-color);
}

.jquery {
    color: var(--jquery-color);
}

.html5 {
    color: var(--html5-color);
}

.css3 {
    color: var(--css3-color);
}

.php {
    color: var(--php-color);
}

.github {
    color: var(--github-color);
}

.creative-cloud {
    color: var(--creative-cloud-color);
}

.connector3{
    height: 50px;
    background-color: var(--icy-blue);
    background-image: var(--ps-close-mountain);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 100% 50px;
    position: relative;
   
}
.overlay-image{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    height: auto;
    z-index: 1;
   
}
.animated-up-down{
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
.overlay-image-left {
    left: 5%;
}
.overlay-image-right {
    right: 5%;
}
@keyframes up-down {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(-45%);
    }
}

:root {
    --background-color: var(--snow-white); /* Background color for the entire website, including individual sections */
    --default-color: var(--dark-night); /* Default color used for the majority of the text content across the entire website */
    --heading-color: var(--mountain-grey); /* Color for headings, subheadings and title throughout the website */
    --accent-color: var(--signal-red-ligh); /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: var(--snow-white);; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: var(--snow-white);; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/*:root {*/
/*    --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
/*    --heading-font: "Amatic SC",  sans-serif;*/
/*    --nav-font: "Inter",  sans-serif;*/
/*}*/



/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/

#gallery {
   background-color: var(--snow-white);
}
#gallery h1{
 color: var(--signal-red-ligh);
}
#gallery h2{
    color: var(--midnight-blue);
}
#gallery h3{
    color: var(--twilight-purple)
    
  
}
.icon-container {
    font-size: 1rem;
    display: inline-block;
    margin-right: 10px;
}

#gallery .btn-flat {
    background-color: var(--clear-blue-sky);
    color: white;
    padding: 10px 20px;
    font-size: 1.2rem;
    border: none;
    display: inline-flex;
    align-items: center;

}

#gallery .btn-flat:hover {
    background-color: var(--color-4);
}
.btn-flat i {
    margin-right: 10px;
}

.row-item {
    margin-bottom: 100px;
}
.gallery .row-item img {
    transition: all ease-in-out 0.2s;
}
.gallery .row-item :hover img {
    transform: scale(1.05);
}
.connector4{
    background-image: linear-gradient(182.5deg, var(--snow-white) 49.5%, var( --green-field) 50%);
}

:root {
    --color-1: #40d09b;
    --color-2: #f4e3dc;
    --color-3: #eaada2;
    --color-4: #6f7dcf;
    --color-5: #97e5c7;
    --color-6: #fdf0d4;
    --color-7: #ddace0;
}
#testimonials {
    background-color: var( --green-field);
}
#testimonials h1{
    color: var( --twilight-purple);
}
#testimonials h2{
    color: var(--dawn-yellow);
}
#testimonials h3{
    color: var(--forest-green-dark);
}
#testimonials p{
    font-size: 1.2em;
    color: var(--snow-white);
}
.expandable-div {
    display: none;
    font-size: 1.1em;
    color: var(--misty-grey);
    text-space: 5px;
    transition: all 0.4s ease-in-out;
}

.expand-btn {
    cursor: pointer;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    background-color: var(--forest-green );
    color: var(--snow-white);
    border: none;
    padding: 10px;
    font-size: 18px;
    border-radius: 8px;
    margin-top: 10px;
}
.expand-btn::after {
    content: '\25BC';
    float: right;
}
.connector5{
    background-image: linear-gradient(178.5deg, var(--green-field) 49.5%, var(--green-field-dark) 50%);
}
#contact {
    background-color: var( --green-field-dark);
}

#contact h1{

    color: var( --twilight-purple);
}
#contact h2{
    color: var(--dawn-yellow);
}
#contact h3{
    color: var(--snow-white);
}
.list-group-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}
.education-icon, .training-icon {
    color: #ffffff;
    padding: 10px;
    border-radius: 50%;
}
.education-icon {
    background-color: var(--misty-grey);
}
.training-icon {
    background-color: var(--misty-grey);
}

#contact h1{
    color: var(--soft-sand);
}
#contact h2{
    color: var(  --earth-brown);
}
#contact h3{
    color: var(--dawn-yellow);
}
#contact li {
    font-size: 1.1em;
    color: var(--misty-grey);
    text-space: 5px;
    transition: all 0.4s ease-in-out;
}
.connector6{
    background-image: linear-gradient(182.5deg, var(--green-field-dark) 49.5%, var(--forest-green) 50%);
}
#scenery {
    background-color: var(--forest-green);
}
 
#scenery h1{
    color: var(--clear-blue-sky);
}
#scenery h2{
    color: var(--soft-sand);
}

.btn-flat {
     background-color: var(--clear-blue-sky);
     color: white;
     padding: 15px 30px;
     font-size: 1.25rem;
     border: none;
     display: inline-flex;
     align-items: center;
     margin-bottom: 20px;
 }




.connector7{
    height: 50px;
    background-color: var(--forest-green);
    background-image: var(--ps-far-city);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 100% 50px;

}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
#connect{
    background-color: var(--purple-night-city-far);
}
.contact .info-item {
    background-color: var(--surface-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
}

.contact .info-item .icon {
    color: #ffffff;
    background-color: var(--misty-grey);
    width: 56px;
    height: 56px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    border-radius: 50%;
    margin-right: 15px;
}

.contact .info-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
   
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.contact .info-item .social-links a {
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    margin: 4px 6px 0 0;
    transition: 0.3s;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact .info-item .social-links a:hover {
    color: var(--accent-color);
}

.contact .php-email-form {
    background-color: var(--surface-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-top: 30px;
}

@media (max-width: 575px) {
    .contact .php-email-form {
        padding: 20px;
    }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
    color: var(--default-color);
    background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
    background-color: var(--clear-blue-sky);
    color: white;
    padding: 10px 20px;
    font-size: 1.2rem;
    border: none;
    display: inline-flex;
    align-items: center;
}

.contact .php-email-form button[type=submit]:hover {
    background-color: var(--color-4);
}



.contact h1{
    color: var(--soft-sand);
}
.contact h2{
    color: var(--clear-blue-sky);
}
.contact h3{
    color: var(--dawn-yellow);
}
.contact p{
    font-size: 1.2em;
    color: var(--snow-white);
}
.contact a{
    font-size: 1.5em;
    color: var(--deep-blue-sky);
}
.connector8{
    height: 50px;
    background-color: var(--purple-night-city-far);
    background-image: var(--ps-close-city);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 100% 50px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
   
    background-color: var(--accent-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}