*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: #182152;
    color:white;
}


.section-subheader{
    font-size:3vw;
    font-family: "Times New Roman", Times, serif; 
}

.skill-row-container{
    display: flex;
    flex-direction: row;
}


.skill-container{
    background-color: #1e2131;
    border-radius:0.5vw;
    border:0.1vw solid rgb(255, 255, 255);
    height:30vh;
    width:30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:1vw;
}

.skill-header{
    justify-content: center;
    font-size:2vw;
}

.skill-btn-container{
    display: flex;
    flex-direction: row;
}
.skill-btn{
    color:white;
    border-radius:0.5vw;
    background-color: #101221;
    height:5vh;
    width:6vw;
    border:0.2vw solid white;
    margin:0.5vw;
    font-size:0.7vw;
}

#sql-server-btn{
    width:6.5vw;
}

#microsoft-visio-btn{
    height:6.3vh;
}





/*Nav Section */
#nav-container{
    margin:0;
    padding:0;
    height:13vh;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color: #182434;
    
    
}

#logo{/*EBEN NDUWIMANA*/
    font-size:2.344vw;
    font-weight:550;
    color:#978d8d;
    text-transform:uppercase;
    margin-left:5.5vh;
    margin-top:0.4vh;
    
    
}


.nav-items{
    color:rgb(220, 215, 210);
    text-decoration-line: none;
    text-transform:uppercase;
    margin-left:2.2vw;
    list-style-type: none;
    font-size:1.823vw;    
    font-weight:500;
    
}

#nav-items-container{
    margin-top:0.6vh;
}


#contact-nav-item{
    margin-right:8vh;
}
/*Nav Section Ends */








/*Section 1 */

#header-section{
    height:100vh;
    width:100%;
    display:flex;
    justify-content: center;
    text-align:center;
}
#profile-photo{
    
    border-radius:50%;
    border:1.5vh solid black;
    height:auto;
    width:33vw;
    margin-top:3vh;
    
    
}


#header-sub-container-1{
    margin-top:5vh;
    margin-bottom:2.8vh;
    
}
#header-sub-container-2{
    margin-left:12vh;
    height:100%;
    width:50vw;
    margin-top:17vh;
}

#header-text{
    white-space: nowrap;
    
    color:rgb(204, 182, 182);
    font-size:13vh; 
    margin-top:2vh;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin-bottom:4vh;
}

#subheader-text{
    color:rgb(170, 163, 163);
    font-size:2.5vh;
    margin-bottom:8vh;
    margin-top:1vh;
    
    justify-content: center;
    text-align:center;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    
}





#cta-container{
    display:flex;
    justify-content: center;
    align-items:center;
    margin-left:2vw;
    margin-bottom:0.4vh;
    white-space: nowrap;
}

.test{
    display: flex;
    width:30vh;
}

#projects{
    
    
    color:rgb(170, 163, 163);
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size:3vh;
}

#contact{
    color:rgb(170, 163, 163);
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;    
    font-size:3vh;
    margin-left:1vh;
}

.icon{
    height:auto;
    width:11%;
    opacity: 0.8;
    margin-left:0.2vw;
    color:rgb(170, 163, 163);
    
    font-weight: bold;
}
#resume-btn{
    margin-top:5vh;
    height: 8vh;
    width:11.5vw;
    opacity: 0.4;
    border-radius:1vw;
    color:black;
    border:0.08vh solid black;
    
}
#resume-btn:hover{
    background-color: aqua;
}

#resume-text{
    font-size:3vh;
    
    text-decoration-line: none;
    color:black;
    opacity: 0.8;
}

/*About Me Section*/

#about-me-container{
    
    margin-bottom:15vh;
    margin-top:4vh;
    display:flex;
    justify-content: center;
    align-items: center;

    flex-direction:column;
}
#about-me-header{
    
    color:  rgb(255, 255, 255);
    text-decoration-line:underline;
    
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    
    text-transform:uppercase;
    
    
}

#about-me-subheader{
    
    font-size:3vh;
    text-align:center;
    margin-bottom:15vh;
    color: rgb(174, 154, 154);
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    
}
/*About Me Section Ends*/


/*Project Section*/

.headings{
    text-transform:uppercase;
    font-weight: bold;
    text-decoration-line:underline;
    font-size:3vw;
    text-align:center;
    color:rgb(255, 255, 255);
    margin-bottom:3vh;
    
}

#projects-header{
    
    
}

#projects-sub-header{
    font-size:3.5vh;
    text-align:center;
    margin-bottom:8vh;
    color: rgb(174, 154, 154);
    font-optical-sizing: auto;
    font-weight: 600;
    font-family:"Times New Roman", Times, sans-serif;
    
}

.project-item-header{
    font-size:5vh;
    text-align:center;
    margin-top:2vh;

}

.project-item-subheader{
    font-size:3vh;
      text-align:center;
      font-weight:bold;
    
}




.project-text{
    font-size:1vh;
    color:rgb(255, 255, 255);
    text-align:center;
    width:37vw;
    font-weight:500;
    height:60vh;
    margin-left:2vw;
    
    color:black;
    margin-right:2vw;
    
    
    
}

#hq-text{
    font-size:1.1vw;
    
    margin-top:1.8vh;
    font-weight: bold;
    font-style: normal;
    word-wrap:break-word;
    line-height:1.6;
    
}

#vibehq-img{
    height:66%;
    width:94%;
    margin:1vh 2vw 2vh 2vw;
    border:0.4vw solid black;
    
}

#remanned-text{
    font-size:1.1vw;
    
    margin-top:1.8vh;
    font-weight: bold;
    font-style: normal;
    word-wrap:break-word;
    line-height:1.6;
}

#remanned-img{
    height:66%;
    width:90%;
    margin:2vh 2vw 2.7vh 2vw;
    border:0.3vw solid rgb(255, 255, 255);
}

#remanned-project-card-container{
    height:60vh;
}

#supermarket-text{
    font-size:1.1vw;
    
    margin-top:1.8vh;
    font-weight: bold;
    font-style: normal;
    word-wrap:break-word;
    line-height:1.6;
}

#supermarket-img{
    height:64%;
    width:88%;
    margin:2vh 2vw 2.7vh 2vw;
    border:0.3vw solid rgb(0, 0, 0);
}

#supermarket-project-card-container{
    height:60vh;
}




#main-section-text{
    font-size:3vh;
    color:rgb(174, 154, 154);
    margin-bottom:8rem;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align:center;
}




#profile-picture{
    border-radius:.2vw;
    width:5.208vw;
    height:5rem;
}
#homepage-text{
    font-size:6vh;
}





/*Project Section */



.project-container{
    display: flex;
    flex-direction: column;
    width: 80%;
    height:78vh; 
    background-color: rgb(184, 108, 151);
       border:2vh solid black;
    margin:auto;
    margin-bottom:3vh;
    color:black;
}
.project-container-2{
    display: flex;
    flex-direction:row;
    
}









#meditation-now-img{
    height:65%;
    width:93%;
    
    border:0.5vw solid black;
    margin:0.4vh 2vw 3vh 2vw;/*top and bottom*/
}


#meditation-now-text{
    font-size:1.2vw;
    font-weight: bold;
    line-height:1.5;
    margin-top:2vh;
    
}


.project-card-container{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    border:0.5vw solid black;
    
    width:35vw;
    height:56vh;
    float:right;
    
    margin-top:1.2vh;
}

.project-card{
    
    
    
    
}




.project-link-btn{
    border:0.16vw solid black;

    height:7vh;
    width:12vw;
    font-size:1.04vw;
    font-weight:bold;
    border-radius:0.8vw;
    background-color: rgb(43, 48, 48);
    color:rgb(213, 194, 147);
    text-transform:uppercase;
    cursor: pointer;
    margin:2vh 0 2.2vh  0;/*Top , Bottom */ /*4 numbers-top right bottom left (clockwise)*/
}

.project-link-btn:hover{
    background-color: rgb(58, 58, 108);
}







/*Contact Box Section*/
#contacts-section{
    margin-top:18vh;
    
}
#contact-form-container{
    display:flex;
    justify-content: center;
    align-items: center;
    
    
    
    box-sizing: border-box;
    height:auto;
    margin:auto;
    margin-bottom:7vh;
    margin-top:5vh;
    
    
}
#contact-container{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgb(51, 48, 48);;
    border:1vh solid black;
    border-radius:1vw;
    width:75vw;
    height:80vh;
    
    
    
}
#contact-header{
    
}

#contact-subheader{
    text-align:center;
    font-size:1.9vw;
    margin-bottom:2vh;
    color: rgb(174, 154, 154);
    font-family: "Times New Roman", Times, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}



#contact-form{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
}

.form-input::placeholder{
   
    margin-top:2vh;
    
}

#name-email-container{
    display: flex;
    gap:20vh;
    flex-direction:row;
    margin-top:2vh;
}



#name-container{
    
    margin-bottom:3.5vh;
}

#email-container{
    margin-bottom:4vh;
}

#message-container{
    margin-bottom:5vh;
}

.form-input{
    height:auto;
    width:13vw;
    height:10vh;
    display:flex;
    justify-content: center;
   
    text-align:center;
    margin:auto;
    border:0.05vw solid black;
    border-radius:0.2vw;
    background-color: rgba(255,255,255,0.5);
}


.form-input-labels{
  
    
    color:rgb(255, 248, 248);
    font-weight:600;
    font-size:1.3vw;
    margin-bottom:0.5vh;
    margin:auto;
    margin-top:0.5vh;
    justify-content: center;
    text-align: center;
    display:flex;
    
}


#input-container{
    margin-top:2vh;
    height:auto;
    
    
    
    
    
}
#name-label{
    margin-top:0.3vh;
    margin-bottom:0.8vh;
    font-size:1.5vw;
    
}
#email-label{
        margin-top:0.3vh;
  font-size:1.4vw;
     margin-bottom:0.8vh;
    
}
#subject-label{
     margin-bottom:1vh;
    
}
#message-label{
    margin-bottom:1vh;
    text-align:left;
        font-size:1.3vw;
    
}

#name{ width:30vw;
    height:6vh;
}
#email{
    width:30vw;
    height:6vh;
}

#subject{
    width:70vw;
    height:6vh;
    margin-bottom:2vh;
}
#message{
    height:30vh;
    width:70vw;
    
    margin-bottom:4vh;
    
}
.form-input::placeholder{

   padding-top:2vh;
}


#name::placeholder{
    font-size: 1.2vw;
 
}

#email::placeholder{
    font-size: 1.2vw;
    padding-top:3vh;
    
}
#subject::placeholder{
    font-size: 1.2vw;
    padding-top:1.2vh;
}

#message::placeholder{
    padding-top:1.2vh;
    font-size:1.3vw;
    font-family:Arial;
    
}





#contact-submit-btn{
    
    border-radius:0.5vw;
    font-size:2.2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-stretch:expanded;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:black;
    width:15vw;
    height:6.4vh;
    font-weight: 500;
    background-color: #4a7fa8;
    border:.1vw solid rgb(0, 0, 0);
    
    margin-top:1vh;
    padding-bottom:0.4vh;
    cursor:pointer;
    
}

#contact-submit-btn:hover{
    background-color:rgb(58, 58, 108);
}

/* Homepage (Footer Section) */
#footer{
    
    width: 100%;
    height:11vh;
    background-color: #182434;
    display:flex;
    justify-content: center;
    text-align:center;
    flex-direction: row;
    border-top:.3vh solid black;
    
    
}

#footer-container{
    display:flex;
    justify-content: center;
    flex-direction:row;
    align-items: center;
    
    
}
#footer-text{
    font-size:1.1vw;
    margin-right:5vh;
    align-items:center;
}



#social-media-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right:2vh;
    margin-bottom: 3vh;
}

#linkedin-icon{
    height:5vh;
    width:2.4vw;
    background-color: #182434;
    
    border-radius:10%;
    font-size:1.8vw;
    color:white;
    text-decoration-line:  none;
    margin-right:3vh;
    margin-top:3.5vh;
    margin-left:1vh;
    
    
}

#github-icon{
    
    height:5vh;
    width:2.4vw;
    background-color: #182434;
    border-radius:10%;
    font-size:2vw;
    color:white;
    text-decoration-line:  none;
    margin-right:3vh;
    margin-top:3vh;
    
}

#twitter-icon{  
    height:5vh;
    width:2.6vw;
    margin-top:3.2vh;
    background-color: #182434;
    color:white;
    border-radius:10%;
    font-size:2vw;
    text-decoration-line:  none;
    
    
}








/* Media Queries */
@media (max-width: 768px) {
    #header-container {
        margin: 2rem 0;
    }
    .project-container-2 {
        flex-direction: column;
    }
    #cta-container {
        flex-direction: column;
        gap: 1rem;
    }
}