/* Add scrolling effect */
section {

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Text size instead of h1 */
    font-size: 100px;
    color: #0000;
    font-weight: 700;
}

/* Header text color */
h1{
    color: rgba(0, 0, 0, 0.3);
    /*text-shadow: 1px 1px 4px #000;*/
    font-size: 0.3em;
    /*margin-bottom: 20px; Add a space between h1 and p */
    text-align: left; /* Align the text to the left */
}

/* Section id - evety other slide - same color
section:nth-child(odd){
    background: #323946;

}*/

#work p{
    font-size: 0.5em; /*font-size: 32px;*/
    /*width: 40%; /* Set the width to cover half of the page */
    margin-bottom: 20px; /* Add a space between h2 and h3 */
}

#home{
    width: 50%;
    margin-left: 0.5em; /*Add a space from the left to the text */
}

#about{
    width: 50%;
    margin-left: 0.5em;
    /*
    padding: 32px 15%;
    flex-direction: column;
    top: 0;*/
    /*background-color: rgba(236, 247, 253, 0.5)*/ /* Light blue with 50% opacity */
    color: #000; /* Ensure text color is fully opaque */
    /*color:    #001F54*/


}
#about h1{

    /*font-size: 40px;*/
    margin-bottom: 20px; /* Add a space between h1 and p */
    text-align: left; /* Align the text to the left */
}
#about h2{
    font-size: 0.3em; /*font-size: 32px;*/
    width: 40%; /* Set the width to cover half of the page */
    margin-bottom: 20px; /* Add a space between h2 and h3 */
}

#about h3{
    font-size: 0.2em;
    margin-bottom: 20px; /* Add a space between h2 and h3 */
    text-align: left; /* Align the text to the left */
}

#about p{
    font-size: 0.2em;
    font-weight: 425; /* Thinner text (you can adjust this value as needed) */
    margin-bottom: 20px; /* Add a space between p and h2/h3 */
}


#work{
    background-color: rgba(0, 124, 210, 0.5); /* #007cd2 with 50% opacity */
    color: #000; /* Ensure text color is fully opaque */
}

#community{
    width: 50%; /* Set the width to cover half of the page */
    margin-left: 0.5em; /* Remove any default margins */
    color: #000; /* Ensure text color is fully opaque */
}
#community h2{
    font-size: 0.3em; /*font-size: 32px;*/
    width: 40%; /* Set the width to cover half of the page */
    margin-bottom: 20px; /* Add a space between h2 and h3 */

}
#community ul{
    font-size: 0.2em;
    font-weight: 400; /* Thinner text (you can adjust this value as needed) */
    margin-bottom: 20px; /* Add a space between p and h2/h3 */
}

#mentoring {
    width: 50%; /* Set the width to cover half of the page */
    margin-left: 0.5em; /* Remove any default margins */
}

#mentoring h1{
    margin-bottom: 20px;
}
#mentoring h2{
    font-size: 0.3em; /*font-size: 32px;*/
    width: 40%; /* Set the width to cover half of the page */
    margin-bottom: 20px; /* Add a space between h2 and h3 */

    /*padding: 32px 0; /* Vertical padding for h2 */
    /*width: 100%; /* Make sure the h2 takes the full width of the section */
    /*font-size: 24px;
    /*background-color: rgba(0, 124, 210, 0.5);*/ /* #007cd2 with 50% opacity */
    color: #000; /* Ensure text color is fully opaque */
}

#mentoring h3{
    font-size: 0.2em;
    margin-bottom: 20px; /* Add a space between h2 and h3 */
    text-align: left; /* Align the text to the left */

    /*padding: 32px 0; /* Vertical padding for h2 */
    /*width: 100%; /* Make sure the h2 takes the full width of the section */
    /*font-size: 18px;*/
     
    /*background-color: rgba(0, 124, 210, 0.5);*/ /* #007cd2 with 50% opacity */
    color: #000; /* Ensure text color is fully opaque */
}

#mentoring p{
    font-size: 0.2em;
    font-weight: 400; /* Thinner text (you can adjust this value as needed) */
    margin-bottom: 20px; /* Add a space between p and h2/h3 */

    /*font-size: 18px;
    /*font-weight: 400; /* Thinner text (you can adjust this value as needed) */
    /*background-color: rgba(0, 124, 210, 0.5); *//* #007cd2 with 50% opacity */
    color: #000; /* Ensure text color is fully opaque */

}

#speaking {
    width: 50%; /* Set the width to cover half of the page */
    margin-left: 0.5em; /* Remove any default margins */
    color: #000; /* Ensure text color is fully opaque */
    text-align: left; /* Align the text to the left */
}

#speaking h2{
    font-size: 0.3em; /*font-size: 32px;*/
    width: 40%; /* Set the width to cover half of the page */
    margin-bottom: 20px; /* Add a space between h2 and h3 */
}

#speaking h3{
    font-size: 0.2em;
    margin-bottom: 20px; /* Add a space between h2 and h3 */

}

#speaking p{
    font-size: 0.2em;
    font-weight: 400; /* Thinner text (you can adjust this value as needed) */
    margin-bottom: 20px; /* Add a space between p and h2/h3 */

    /*font-size: 18px;
    /*font-weight: 400; /* Thinner text (you can adjust this value as needed) */
    /*background-color: rgba(0, 124, 210, 0.5); *//* #007cd2 with 50% opacity */
    color: #000; /* Ensure text color is fully opaque */

}
#speaking ul{
    font-size: 0.2em;
    font-weight: 400; /* Thinner text (you can adjust this value as needed) */
    margin-bottom: 20px; /* Add a space between p and h2/h3 */

    /*font-size: 18px;
    /*font-weight: 400; /* Thinner text (you can adjust this value as needed) */
    /*background-color: rgba(0, 124, 210, 0.5); *//* #007cd2 with 50% opacity */
    color: #000; /* Ensure text color is fully opaque */
}

#contact{
    font-size: 2em;
    flex-direction: column;
    color: #000; /* Ensure text color is fully opaque */
    /*box-shadow: 0px 10px 10px rgb(211,1,138);*/
    width: 40%; /* Set the width to cover half of the page */
    margin-bottom: 20px; /* Add a space between h2 and h3 */
}


#contact a{
    display: inline-block;
    padding: 5px 15px; /* Adjust the values as needed */
}

/* Background color for section one */
.section_two{
    background-color: rgb(211,1,138);
}


.socialIcons {
    position: left;
}
/* Social Icons size and transparency % */
.socialIcons a i{
    font-size: 2.8em;
    opacity: 2.9;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    list-style: none;
    text-decoration: none;
}

:root {
    --bg-color: #1f1f21;
    --background-color-pink: #9333ea;
    --bg-color-blue: #A6D5FE;
    --text-color: #fff;
    --main-color: #0e46d588;
    --secondary-color: #0000007b;

    --big-font: 7rem;
    --p-font: 1.1rem;
}

body {
    /* Location of the image */
    background-image: url(../assets/background.jpg);
    /* Image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Image doesn't repeat */
    background-repeat: no-repeat;
    /* Makes the image fixed in the viewport so that it doesn't move when 
       the content height is greater than the image height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based on its container's size */
    background-size: cover;
    /* Pick a solid background color that will be displayed while the background image is loading */
    background-color: #464646;

}



header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 15%;
    background: transparent;
    transition: all ease .45s;
}

/* Anastasiia Gubska text design */
.logo {
    /*color: var(--text-color);*/
    color: var(--text-color);
    font-size: 41px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(64, 104, 207, 0.21); /*rgba color is equivalent to #4068cf36;
    /*rgba(24, 16, 119, 0.5);  /*Adds a darker shadow effect */
    /*text-shadow: 
    -1px -1px 0 #0000007b,  /* top-left shadow */
    /*1px -1px 0 #0000007b,   /* top-right shadow */
    /*-1px 1px 0 #0000007b,   /* bottom-left shadow */
    /*1px 1px 0 #0000007b;    /* bottom-right shadow */
}

/* SRE/DevOps text design */
.logo .role {
    font-size: 28px; 
    font-weight: 500; /*400*/
    /*color: #000000; /*#4068cf; /* text color for the role */
    margin-top: 5px;
    color: #000000e1; /* rgba(0, 0, 0, 0.3);*/
    /*text-shadow: 1px 1px 1px #000;*/
    
}

.logo span {
    color: var(--main-color);
    /*color: var(--secondary-color);*/
    
}

.navbar {
    display: flex;
}

.navbar a {
    font-size: var(--bg-color);
    font-weight: 500;
    color: var(--text-color);
    margin: 0 25px;
    transition: all ease .50s;
}

.navbar a:hover {
    /*color: var(--main-color);*/
    color: var(--secondary-color);
}

.navbar a.active {
    color: var(--main-color);
}

/* Dark color when an arrow points on navigation bar */
.home-link {
    background-color: #4068cf36; /* Background color */
    padding: 10px 15px; /* Padding inside the box */
    display: inline-block; /* Makes the box fit the text size */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Contact button design */

.contact-link {
    background-color: rgba(0, 0, 0, 0.3); /* Background color */
    padding: 10px 15px; /* Padding inside the box */
    display: inline-block; /* Makes the box fit the text size */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Text on the Welcome page */
.home.transparent {

    width: 40%;  /* Halve the width from 80% to 40% for the gray box */
    margin: 0 auto;
    margin-left: 10%;
    margin-top: 15%;
    margin-right: 30%;

    align-items: center;
    justify-content: space-between;
    gap: 30px;

    font-size: 24px; /* Text size */
    line-height: 2; /* Space between lines of text */

}

.home-img img {
    width: 100%;
    height: 100%;
}

.home-text h1 {
    font-size: var(--big-font);
    margin: 23px 0;
    background-color: #111;
    padding: 15px;
}

.home-text p {
    font-size: var(--p-font);
    font-weight: 400;
    color: #c3c3c3;
    line-height: 30;
    background-color: #111;

}

.transparent {
    background: rgba(0, 0, 0, 0.6) !important;
    /*background: #0e46d588;*/
    padding: 15px;
    color: #fff;
    border-radius: 5px; /* Adds rounded corners */
}

/* Specific styling for LinkedIn icon */
.social-icons a.linkedin i{
    font-size: 36px;
    color: var(--main-color);
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
    header {
        padding: 16px 10%; /* Reduces padding for smaller screens */
    }
    
    .logo {
        font-size: 28px; /* Decreases font size for the logo */
    }
    
    .navbar a {
        margin: 0 15px; /* Adjusts margins for navigation links */
        font-size: 1rem; /* Decreases font size for navigation links */
    }

    .home {
        width: 80%; /* Increases width to fit better on smaller screens */
        margin-top: 10%; /* Adjusts top margin */
        margin-right: 10%; /* Adjusts right margin */
    }

    .home-text h1 {
        font-size: 3rem; /* Decreases font size for heading */
    }

    .home-text p {
        font-size: 1rem; /* Decreases font size for paragraph */
        line-height: 24px; /* Adjusts line height */
    }
    
    .social-icons a.linkedin i {
        font-size: 28px; /* Decreases font size for LinkedIn icon */
    }
}

@media (max-width: 480px) {
    header {
        flex-direction: column; /* Stacks header items vertically */
        padding: 8px 5%; /* Further reduces padding */
    }

    .navbar {
        flex-direction: column; /* Stacks navbar links vertically */
        align-items: center; /* Centers navbar links */
    }

    .navbar a {
        margin: 5px 0; /* Adjusts margins for navbar links */
    }

    .home {
        width: 90%; /* Increases width to fit better on smaller screens */
        margin-top: 20%; /* Further adjusts top margin */
        margin-right: 5%; /* Further adjusts right margin */
    }

    .home-text h1 {
        font-size: 2.5rem; /* Further decreases font size for heading */
    }

    .home-text p {
        font-size: 0.9rem; /* Further decreases font size for paragraph */
        line-height: 20px; /* Further adjusts line height */
    }
    
    .social-icons a.linkedin i {
        font-size: 24px; /* Further decreases font size for LinkedIn icon */
    }
}