/***************************************************************   Generic Rules  ************************************************************/
*{
    margin: 0;
    padding: 0;
    overflow-x: hidden;

}
a{
    color: #ffffff;}

:root {
    --serif: 'EB Garamond', Georgia, serif;
    --mono:  'JetBrains Mono', 'Cousine', ui-monospace, monospace;
  }

#top{
    width: 100%;
    height: 642px;
    margin: 0;
    padding: 0;

}

h2{

    font-family: var(--serif);
    color: rgb(8, 8, 39);

}

.centre-text{
    text-align: center;
}
/* For code, pre, kbd, samp, inline code, etc. (Cousine vibe) */
code, pre, kbd, samp, .mono, tt {
  font-family: Consolas, "Lucida Console", "Courier New", "Courier", monospace;
}

#reviews{
     
}
.slider-wrapper {
      max-width: 700px;
      width: 90%;
      background: white;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
      padding: 3rem 2.5rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }


    .testimonial {
      display: none;
    }

    .testimonial.active {
      display: block;
    }
    .slider-wrapper:hover {
      background: rgba(0,0,0,0.08);
    }

    .quote  { line-height:1.7; color:#334155; margin-bottom:2rem; font-family: var(--mono); font-size: 0.8em; }
    .author { font-weight:bold; color:#0f172a; font-size:1.15rem; }
    .role   { color:#64748b; font-size:1rem; }


/*** Main Secttions ***/
.section-header{
    padding-bottom: 2rem;
}


#client-list-row1, 
#client-list-row2{
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.3rem;
}

.clients, #project8{
    margin: 0.2rem;
}



/*=================================================Desktop and up=============================================== */
@media (min-width: 1024px) {


/************************************************* Start Header *************************************************/
#name{
    color: #ffffff;
    font-family: var(--serif);
    margin: 10px;
    font-size: large;
    margin-left: 50px;
    padding: 30px;
    position: absolute;
    cursor: pointer;
}

#name > h1> a {
    text-decoration: none;
    font-family: var(--serif);
}

#name > h1 > a, a:visited, a:hover, a:active {
  color: white;
  text-decoration: none;
}

#name:hover{
    background-color: rgba(6, 10, 61, 0.3);

}

nav{
    position: absolute;
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 0.8rem;
    margin-left: 49rem;
    
    
}
nav > ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 1rem;
    flex: 1;
    
                
}


nav > ul > li{
    
    text-decoration: none;
    margin: 32px;
    background-color: rgba(6, 10, 61, 0.3);
    color: white;
    display: inline-block;
    list-style: none;
    transition: 0.3s

}

nav > ul > li >a{
    text-decoration: none;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
    display: inline-block;
    list-style: none;
    transition: 0.3s;
    font-family: var(--mono);
    font-weight: thin;

}

ul > li:hover {
      color: #414147;
      background: rgba(8, 22, 70, 0.08);
      border-radius: 5.9px;
      font-weight: bolder;
      cursor: pointer;
}


/**Header Video **/
/* Style the video element */
header{
    overflow: hidden;
}
header > *{
    overflow: hidden;
}
#myVideo {
  position: relative;
  right: 0;
  bottom: 0;
  min-width: 100%;
  max-width: 100%;
  width: auto;
  height: 642px;
  z-index: -1; /* Puts the video behind other content */
  object-fit: cover; /* Ensures the video covers the entire container without stretching */
}

/* Style the content div to ensure it sits on top */
.content {
font-size: x-large;
  position: absolute; 
  z-index: 1;
  color: white;
  text-align: center;
  padding: 10px;
  /* more styling for visibility (e.g., text-shadow, background overlay) */
  background: rgba(0, 0, 0, 0.5); /* Adds a semi-transparent overlay to make text more readable */
  width: 28%;
  margin-top: -350px;
  margin-left: 65%;
}

#intro{
    font-family: var(--mono);
    font-size: 0.8rem;
    padding: 1.3rem;
    padding-bottom: 0.5rem;
    text-align: justify;
}
#video-small{
    font-family: var(--mono);
    padding: 12px;
    width: 10rem;
    margin-left: auto;
    margin-right: auto;
    border: 1px blue;
    background-color: rgb(9, 9, 44,0.5);
    color: white; 
    font-size: 0.8rem;  
    cursor: pointer;
}

#video-small:hover{
    
    background-color: rgba(21, 21, 56, 0.5);
    color: white;  
    font-weight: bold;
    border-radius: 5.9px;
}


/*** Main  Projects Section ***/
main{
    padding: 4rem;
}
main > section{
    text-align: center;
    padding: 2rem;
    margin: 1rem;
    border: 0.01rem dotted black;
   
}

#past-projects1, #past-projects2{
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
}

#past-projects1 > div, #past-projects2 > div {
    margin: 1rem;
    padding: 3rem;
    border: 0.01rem dotted black;
    width: 40%;
    height: 10rem;

}
#project1{
    background: url("./img/msc.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#project2{
    background: url("./img/gbe.PNG");
    background-repeat: no-repeat;
    background-size: cover;
     background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#project3{
    background: url("./img/EWC\ USE.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#project4{
    background: url("./img/pwf.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#project5{
    background: url("./img/microsoft.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
    
}
h4{
    color: #ffffff;
}
#project6{
    background: url("./img/tech\ nations.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#project7{
    background: url("./img/bsc.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#project9{
    background: url("./img/computing.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#project8{
    background: url("./img/cient.PNG");
    background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}

#achievements-row1 , #achievements-row2 {
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
}

#achievements-row1 > div, #achievements-row2 > div{
    margin: 1rem;
    padding: 1rem;
    border: 0.01rem dotted black;
    width: 20%;
    height: 10rem;
}

#client-list{
    display: flex;
    flex-direction: row;
    gap: 0.2rem;

}


}

/** PAST Projects **/
#fort{
    background: url("./img/fort.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;
}
#mainstream{
    background: url("./img/mainstream.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;
}
#gfo{
    background: url("./img/gfo.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;
}
#dealpod{
    background: url("./img/dealpod.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;
}
#fincomp{
    background: url("./img/fincomp.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}
#full{
    background: url("./img/folio.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;
}
#persona{
    background: url("./img/figma.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.95);
    background-blend-mode: darken;
}
#mobile{
    background: url("./img/figma2.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.95);
    background-blend-mode: darken;

}

#octalon{
    background: url("./img/octalon.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;
}
#travloxxe{
    background: url("./img/travloxxe.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;

}
#emmawallet{
    background: url("./img/Emma.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.94);
    background-blend-mode: darken;
}

#full-folio{
    align-self: center;
}

/** Footer **/
footer{
    overflow: hidden;
    padding: 2.5rem;
    height: 9rem;
    width: 100%;
    background-color: rgb(9, 9, 44);
    overflow: hidden;
}

.footer-grid{
    color: white;
    font-family: var(--mono);
    font-size: 0.8rem;
    display: flex;
    gap: 8rem;
    flex-direction: row;
    text-align: justify;
}

.footer-grid > div > ul > li{
    list-style: none;
}

#base{
    margin-left: auto;
    margin-right: auto;
    color: navy;
}

.footer-grid > div{
    width: 30%;
}

.footer-grid > div > h6 {
    padding-bottom: 1rem;
    font-weight: bold;
    font-size: 1rem;
    font-family: var(--serif);


}

}  

/*************************************************End  Header***************************************************/




/*===============================================Large desktop / 4K-ish =======================================*/
@media (min-width: 1400px) {
  
}


/*================================================ Tablet and up =============================================*/
@media (max-width: 1023px) {
body{
    display: none;
}
  
 
}