/* universal selector */
*{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 1em;
}

body {
    background-image: url('https://4kwallpapers.com/images/walls/thumbs_3t/5898.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: url('cursor-96.png'), auto;
}

/* #home { background-color: #3498db; } */
/* #about { background-color: #2ecc71; } */
/* #skills { background-color: #e67e22; } */
/* #myworks { background-color: #9b59b6; } */
/* #experience { background-color: #f1c40f; } */
/* #certify { background-color: #e74c3c; } */
/* #contactForm { background-color: #1abc9c; } */
  

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Apply font to the <p> tag within .welcome-message */
.welcome-message p {
    font-family: 'Courier Prime', Courier, monospace;
}

@keyframes slideIn {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes expandWidth {
    0% {
        width: 100px;
    }
    100% {
        width: 80vw;
    }
}

@keyframes roundBorderWithShadow {
    0%, 100% {
        /* border-radius: 0%; */
        box-shadow: rgba(228, 127, 127, 0.404);
    }
    33% {
        /* border-radius: 50%; */
        box-shadow: 0 0 20px rgb(196, 144, 219);
    }
    66% {
        /* border-radius: 100%; */
        box-shadow: 0 0 20px rgb(196, 144, 219);
    }
}

.container {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    height: 10vh;
    position: relative;
    padding: 10px;
}

.island {
    background-color: #150b25;
    border-radius: 50px;
    width: 110px;
    height: 50px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    animation: slideIn 1s forwards, expandWidth 1s forwards 1s, roundBorderWithShadow 6s infinite;/* Combined animations */
}

.dots-container {
    display: flex;
    margin-right: auto;
    margin-left: 15px;
    align-items: center;
}

.dot {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    animation: pulse 1s infinite;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.25s;
}

.dot:nth-child(3) {
    animation-delay: 0.5s;
}

.dot:nth-child(4) {
    animation-delay: 0.75s;
}

@keyframes pulse {
    0% {
        height: 30px;
    }
    50% {
        height: 30px;
    }
    100% {
        height: 20px;
    }
}

.welcome-message {
    display: none;
    font-size: 1.1em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 4s steps(35, end);
    margin-right: 20px; /* Adjust margin as needed */
     margin-left: 20px; /* Add gap between dots and welcome message */
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* Main Sections */
main {
    background-color: rgb(255 255 255 / 31%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* max-width: 1250px; */
    width: 100%;
    border-radius: 5px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-weight: 500;
    padding: 1rem 1rem 6rem 1rem;
    overflow: auto;
    margin-top: 3rem; /* Add some space below the main section */
    font-family: "Poppins", sans-serif;
}

/* Main Sections */
.section {
    width: 100%;
    padding: 2rem 1rem;
    min-height: 80vh; /* Ensures each section takes up at least 50% of the viewport height */
    margin-top: 2rem; /* Add margin between sections and navigation bar */
    height: auto; /* Allow the section height to adjust based on content */
    color: white;
    margin: 1rem 0;
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 400px; /* Adjust maximum height as needed */
    overflow-y: auto; /* Enable vertical scrollbar when content overflows */
    border-radius: 5px; /* For visualization, you can remove this */
    padding: 10px;
}


/* Logo - VSKS */
.logo span {
    font-size: 50px; 
    font-weight: bold;
    letter-spacing: -5px; 
    text-transform: uppercase;
    font-family: "Big Shoulders Stencil Text", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    /* background-color: black; */
    color: white; /* Ensure text is readable against the black background */
    padding: 0.2rem; /* Adjust padding as needed */
    display: inline-block; /* Ensure background color only covers the text */
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7); /* Add shadow effect */
}

/* Navigation Bars */
.navBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1.5px solid rgb(255 255 255 / 35%);
    padding: 10px;
}

.navBar > h1, .navBar > .navigationMenu {
    margin: 0;
}

.navigationMenu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
}

.navigationMenu > a {
    padding: 5px 10px;
    margin-left: 10px;
    text-decoration: none;
    color: black;
    display: inline-block;
}

.navigationMenu > a:hover {
    transition: ease-in-out 300ms;
    background: wheat;
}

.navBar .icon {
    display: none;
    padding: 10px;
    font-size: 24px;
}

/* Home-Container */
/* Home Background */
#home {
    position: relative;
    overflow: hidden; 
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#background-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home-container {
    position: relative; 
    width: 100%;
    /* height: 100%; Ensure the home-container takes up the full height */
    color: white;
    padding: 0 2rem; 
    box-sizing: border-box; 
    max-width: 1200px; /* Adjust the maximum width as needed */
    text-align: center; /* Center the content horizontally */
    color: white;
}

.content {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.text-section {
    flex: 1; 
    text-align: left; 
    font-size: 2em;
}

.image-section {
    flex: 1; 
    text-align: right;
}

.image-section img {
    max-width: 150%; /* Ensure the image does not exceed its container width */
    border-radius: 25px;
}

.text-section h2 {
    font-size: 1.8rem;
    font-family: "Lucida Console", "Courier New", monospace;
    background: linear-gradient(to bottom, #1fa2ff, #12d8fa, #a6ffcb);
    -webkit-background-clip: text; /* Clip the background to the text */
    background-clip: text; /* Clip the background to the text */
    color: transparent; /* Make the text transparent */
}

.textname {
    background: linear-gradient(90deg, #00dbde, #ffd700); /*Gold/Yellow*/
    font-family: Poppins;
    font-size: 40px;
    -webkit-background-clip: text;
    background-clip: text; /* Standard property */
    color: transparent; /* Make the text transparent */
    margin-left: 20px; /* Adjust the margin as needed for the desired gap */
}

.text-4 {
    font-size: 0.6em;
    color: #ffffff;
}

/* About Us - Section */
/* Main Container */
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-img{  
    position: relative;
    z-index: 2;
}

.about-img img {
    margin-left: 30%;
    width: 75%;
    border: 10px solid #6b44e0;
    user-select: none; /* Disable text selection */
    pointer-events: none; /* Disable pointer events */
}

.about-img::before{
    position: absolute;
    content: '';
    left: 15%;
    top: 50px;
    border: 10px solid rgba(0, 0, 0, 0.637);
    height: 95%;
    width: 70%;
    z-index: -2;
}
  
.about .text {
    margin-top: 1rem;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.title {
    position: relative;
    display: inline-block;
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #150b25;
}

.title:before {
    content: attr(data-title);
    display: block;
    margin-bottom: 10px;
    color: #be50f4;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
}

.title:after {
    content: "";
    position: absolute;
    width: 90px;
    height: 5px;
    border-radius: 3px;
    background-color: #be50f4;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Section Body */
.section-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.column-1,
.column-2 {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
}

.column-1 {
    margin-right: 1.5rem;
    font-size: 1rem; /* Adjust the font size as needed */
    margin-bottom: 20px;
}

.about .column-1 {
    position: relative;
    text-align: justify;
}

.title-sm {
    color: #f6f7fb;
    font-weight: 600;
    font-size: 2.3rem;
}

.text {
    margin-top: 30px;
}

.text .btn {
    /* Add space above the button */
    margin-top: 20px;
    margin-bottom: 20px;
}

.about .text p {
    margin-bottom: 0; /* Add margin bottom to paragraphs */
}

.about .text a {
    margin-bottom: 20px; /* Add margin bottom to anchor links */
}

/* Style buttons */
.btn {
    background-color: rgba(65, 105, 225, 0.829);
    border: none;
    color: white;
    padding: 10px 28px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 30px;
    text-decoration: none; /* Remove default underline from anchor links */
    display: inline-block; /* Make sure anchor links behave like buttons */
}

/* Darker background on mouse-over */
.btn:hover {
    background-color: rgb(30, 143, 255);
}

/* Skills - Section */
.skills{
    display: flex;
    /* flex-wrap: wrap; Allow items to wrap onto multiple lines */
    justify-content: center;
    align-items: center;
    min-width: 250px;
    margin: 1rem;
    min-height: 250px;
    flex-wrap: wrap;
    align-content: center;
    background-color: rgb(255 255 255 / 31%);
    border: 1px solid rgb(255 255 255 / 31%);
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.cardHeading{
    width: 100%; /* Full width */
    display: block;
    margin: 0;
    margin-bottom: 1rem;
}
  
.skills > img{
    width:60px;
    height: 60px;
    margin-bottom: 15px;
    margin-right: 15px;
    border-radius: 50%;
    flex-shrink: 0; /* Prevent image from shrinking */
}
  
.skills > img:hover{
    transition: ease-in 300ms;
    transform: scale(0.85);
    cursor: pointer;
}

/* Hide/shown-Files */
.certify-container {
    position: relative;
    background-color: #3333333b;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    margin: 10px auto;
}

.certify-title {
    margin-bottom: 10px;
    margin-right: 100px;
}

.button {
    position: absolute;
    top: 60px;
    right: 15px;
    background-color: #0044ff;
    border: none;
    color: #ffffff;
    padding: 15px 25px;
    font-size: 30px;
    cursor: pointer;
    border-radius: 50%;
}

.certificate {
    display: inline-block;
    margin: 20px;
    width: 250px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    vertical-align: top;
    position: relative;
    cursor: pointer;
}

.certificate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.certificate-name {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 1;
}

.certify-content {
    flex-wrap: wrap;
    justify-content: center;
    display: none;
    padding: 20px;
    z-index: 0;
} 

/* Contact Form Section */
.contactForm{
    margin: 2rem;
    width: calc(100% - 4rem);
    background-color: rgb(255 255 255 / 31%);
    border: 1px solid rgb(255 255 255 / 31%);
    border-radius: 5px;
    padding: 1rem;
}
  
.contactForm > .formGroup{
    margin-bottom: 1rem;
}
  
.formGroup > input, .formGroup > textarea{
    width: 100%;
    padding: 5px 10px;
    margin-top: 5px;
    font-weight: 600;
}
  
.submitButton{
    padding: 10px 20px;
    font-weight: 600;
    font-size: 15px;
}

input[type=text], input[type='email'], textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 5px;
    resize: vertical;
}

input[type=button]{
    background-color: #00e98081;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=button]:hover{
background-color: #45a049;
}
/* Contact Form Ends */

/* Projects - Myworks */
/* Styles for project cards */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    width: calc(50% - 20px); /* Two cards per row */
    margin-bottom: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    background-color: #7194f5b0;
    position: relative; /* Necessary for inner shadow */
}

.card::before {
    /* content: ''; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); /* No shadow initially */
    transition: box-shadow 0.3s ease; /* Smooth transition for the shadow */
}

.card:hover::before {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Inner shadow on hover */
}

.card .left {
    flex: 1;
    text-align: center;
    padding: 20px;
    background-color: #f1f1f160;
}

.card .right {
    flex: 2;
    padding: 20px;
}

.card img {
    width: 100%; /* Adjust the width as needed */
    height: 100%; /* Adjust the height as needed */
    margin-bottom: 10px; /* Adjust the margin as needed */
    margin-right: 10px; /* Adjust the margin as needed */
    border-radius: 10%;
}


.card h4 {
    margin-top: 0;
}

.card p {
    margin: 10px 0;
}

.card a {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
}

.card a:hover {
    background-color: #0056b3;
}

/* Social Icons */
/* Icons Ends */

/* Footer */
footer {
    background-color: #f8f8f883;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    bottom: 0;
    left: 0;
    border-radius: 4px;
}
  
.containerfoo {
    width: 100%;
    margin: 0 auto;
}
  
.social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-icons li {
    display: inline-block;
    margin-right: 10px;
}
  
.social-icons li:last-child {
    margin-right: 0;
}
  
.social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background-color: #333;
    border-radius: 50%;
    transition: background-color 0.3s ease-in-out;
}
  
.social-icons a:hover {
    background-color: #6666667a;
}
  
.fa {
    font-size: 18px;
}  
/* Footer Ends */

/* Custom Scrollbar */
::-webkit-scrollbar{
    width: 5px;
}
  
::webkit-scrollbar-track {
    background: #f1f1f1;
}
  
::-webkit-scrollbar-thumb{
    background: #888;
}
  
::-webkit-scrollbar-thumb:hover{
    background: #555;
}
  
main::-webkit-scrollbar{
    display: none;
}

/* Media Query Sections */
/* Media Query for Mobile Devices */
@media only screen and (max-width: 480px) {
    .welcome-message {
        font-size: 0.8em;
    }
    .dot {
        width: 15px;
        height: 15px;
    }

    /* Navigation Bars */
    .navBar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1.5px solid rgb(255 255 255 / 35%);
        padding: 10px;
    }

    .navBar > h1, .navBar > .navigationMenu {
        margin: 0;
    }

    .navBar .logo {
        margin-left: 10px; /* Adjust margin as needed */
    }

    .navBar .icon {
        display: block;
        cursor: pointer;
        padding: 10px; /* Adjust padding as needed */
        font-size: 24px; /* Adjust font size as needed */
        margin-right: 10px; /* Adjust margin as needed */
    }

    .navigationMenu {
        display: none; /* Hide menu initially */
        position: absolute;
        top: 15%; /* Position below the navbar */
        left: 10px;
        width: 95%;
        text-align: center;
        scroll-behavior: smooth;
        overflow-y: scroll; /* Add scrollbar for vertical overflow */
        z-index: 1; /* Set a high z-index value */
        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
        backdrop-filter: blur(10px); /* Apply blur effect */
    }

    .navigationMenu a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: black;
    }

    .navigationMenu a:hover {
        background: wheat;
    }

    .navBar .navigationMenu.show {
        display: block; /* Show menu when toggled */
    }

    /* Home - containers */
    #home{
        background-color: rgba(255, 255, 255, 0); /* Semi-transparent white background */
        backdrop-filter: blur(10px); /* Apply blur effect */
    }
    .text-section h2 {
        font-size: 1.5rem;
    }

    .textname {
        font-size: 30px;
    }

    .text-4 {
        font-size: 0.5em;
    }

    .content {
        flex-direction: column; /* Stack the content vertically on smaller screens */
        text-align: center;
    }

    .image-section {
        text-align: center;
        margin-top: 20px; /* Add space between text and image sections */
    }

    .image-section img {
        max-height: 220px; /* Adjust image height for smaller screens */
        max-width: 400px;
        border-radius: 5px;
        position: relative;
        left: 0px; /* Move the image 20px to the right */
    }

    #background-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Adjust height for screens up to 768px */
    }

    /* About My section */
    .section-body {
        display: flex;
        flex-direction: column; /* Stack columns vertically on small screens */
        gap: 0px; /* Space between stacked columns */
        width: 100%; /* Ensure the container takes the full width */
    }

    .column-1 {
        width: 100%; /* Full width for column-1 */
        max-width: 100%; /* Ensure it doesn’t exceed the container width */
        box-sizing: border-box; /* Include padding and border in the element's total width */
    }

    .column-2 {
        width: 100%; /* Full width for column-2 if needed */
        max-width: 100%; /* Ensure it doesn’t exceed the container width */
    }
    
    .about-img img {
        width: 100%; /* Full width image */
        margin-left: -10px; /* Move the image 10px to the left */
        border-top-left-radius: 100px; /* Adjust the radius as needed */
        border-bottom-right-radius: 100px; /* Adjust the radius as needed */
    }

    .about-img::before {
        display: none; /* Hide the pseudo-element */
    }

    .btn{
        width: 100%; /* Full width */
        padding: 10px; /* Adjust padding as needed */
        text-align: center; /* Center text and icon */
        background-color: #007bff; /* Button background color */
        color: #fff; /* Text color */
        border: none; /* Remove any border */
    }

    .title-sm {
        font-size: 22px; /* Adjust the size as needed */
    }
    
    /* Projects */
    .card-container {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center align cards */
    }

    .card {
        width: 100%; /* Full width for each card */
        margin: 0 0 20px 0; /* Adjust margins */
    }

    .card img {
        border-radius: 0; /* Remove rounded corners if needed */
    }

    /* Hide the .left section of the card */
    #project-cards .card .left {
        display: none; /* Hide the .left section */
    }


    /* Contact Forms */
    .contactForm {
        margin: 0; /* Remove margin */
        width: 100%; /* Ensure full width */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        margin-bottom: 10%;
        /* padding: 1rem; Maintain padding */
        /* margin-bottom: 2rem; Add space below the contact form */
    }    
    
    .submitButton {
        width: 100%; /* Full width */
        padding: 12px 0; /* Adjust padding if needed */
    }
}

/* Media Query for Tablets iPads portrait mode */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .welcome-message {
        font-size: 1.3em;
    }
    .dot {
        width: 15px;
        height: 15px;
    }

    /* Navigation Menu */
    /* Tablet Navigation Styles */
    /* Navigation Bars */
    /* Navigation Bars */
    .navBar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1.5px solid rgb(255 255 255 / 35%);
        padding: 10px;
    }

    .navBar > h1, .navBar > .navigationMenu {
        margin: 0;
    }

    .navBar .logo {
        margin-left: 10px; /* Adjust margin as needed */
    }

    .navBar .icon {
        display: block;
        cursor: pointer;
        padding: 10px; /* Adjust padding as needed */
        font-size: 24px; /* Adjust font size as needed */
        margin-right: 10px; /* Adjust margin as needed */
    }

    .navigationMenu {
        display: none; /* Hide menu initially */
        position: absolute;
        top: 15%; /* Position below the navbar */
        left: 16px;
        width: 95%;
        text-align: center;
        scroll-behavior: smooth;
        overflow-y: scroll; /* Add scrollbar for vertical overflow */
        z-index: 1; /* Set a high z-index value */
        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
        backdrop-filter: blur(10px); /* Apply blur effect */
    }

    .navigationMenu a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: black;
    }

    .navigationMenu a:hover {
        background: wheat;
    }

    .navBar .navigationMenu.show {
        display: block; /* Show menu when toggled */
    }



    /* Adjust margin for smaller screens */
    .section {
        margin-top: 1rem;
    }

    .textname{
        font-size: 30px;
    }

    #background-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Adjust height for screens up to 768px */
    }

    /* My Works */
    .card {
        width: calc(100% - 20px); /* One card per row */
    }
}

/* Media Query for Laptops and Desktops */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    
}

/* Media Query for Large screens */
@media only screen and (min-width: 1025px) {
    
}