@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); 



/* Add this at the very top of your g2.css file */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;

}
*, *::before, *::after {
  box-sizing: inherit;
}


:root {
  /* Colors */
  --blue: #4285F4;
  --red: #DB4437;
  --yellow: #F4B400;
  --green: #0F9D58;
  --purple: #8854C2;

  /* Theme Colors */
  --color-primary-brand: var(--blue); /* Main blue for links, buttons */
  --color-accent: var(--green); /* Green for hover, highlight */
  --color-background-light: #eee; /* like light background */
  --color-background-section-alt: #F1F3F4; /* Slightly darker light gray for sections */
  --color-background-dark: #3C4043; 
  --color-background-darker: #202124; /* Even darker for signature */
  --color-text-dark: #202124; /* Near-black for main text */
  --color-text-light: #FFFFFF; /* White for light text */
  --color-text-muted: #9AA0A6; /* Softer muted text for copyright */
  --color-card-main: #FFFFFF; /* Cards typically white */
  --color-card-back-bg: var(--red); /* Using red for the back of the flip card */
  --color-card-back-text: #FFFFFF;  
}

body {
  font-family: 'Roboto Condensed', sans-serif; /* Roboto for body */
  color: var(--color-text-dark);
  /*line-height: 1.7;*/
  margin: 0;
  background: var(--color-background-light);
  background: white;


}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  /* If you specifically want Century Gothic and are sure it's available or embedded: */
  /* font-family: 'Century Gothic', Century, sans-serif; */
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

h5 {
  font-size: 10pt;
  font-weight: 400;
  margin-bottom: 2rem;
  font-family: 'Roboto';
}





/* Sections */
section {
  padding: 4rem 2rem;
  text-align: center;
  margin-bottom: 0;
  max-width: 80vw;
  margin:  auto; 
  min-height: 50vh;
}
 
/* --- Top Navigation --- */
nav {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  padding: 1rem 3rem;  
  z-index: 1000;
  display: flex;  
  justify-content: space-between; 
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23); 

}

.nav-brand {
  text-decoration: none;
  color: var(--color-primary-brand);
  /*font-family: 'Josefin Sans', sans-serif; /* Use heading font for brand */*/
  font-weight: bold;
  font-size: 1.4rem; /* Larger brand font */
  padding: 0; /* Remove default padding if any */
}

.nav-links {
  display: flex; /* Make nav-links a flex container for its children */
  gap: 5rem; /* Space between the actual links */
  transition: all 0.3s ease-in-out;
}

nav a { /* This rule now applies to links inside .nav-links and .nav-brand */
  text-decoration: none;
  color: var(--color-primary-brand);
  font-weight: bold;
  font-size: 1.05rem;
  transition: color 0.3s ease;

  padding: 1rem;
  margin: -1rem !important;
}

nav a:hover {
  background-color: #dedede50;
}




.sub-nav {
  display: none; /* hidden by default */
  position: absolute;
  top: 100%; 
  left: 0;
  width: 100vw;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #e7e7e7;
  z-index: 999;
  padding: 0.75rem 3rem;
  gap: 2rem;
  flex-wrap: wrap;
  /* removed display:flex here */
}

.examples.active + .sub-nav {
  display: flex; /* or block */
  justify-content: space-evenly;
  background: rgba(255, 255, 255, 0.90);
}

.sub-nav.open {
  display: flex; /* show as flex when open */
}
 

a.subnav-link:hover {
    padding: 12px !important;
    margin: -12px !important;
}



.chevron {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-left: 6px; /* adjust as needed */
}

.chevron.rotate {
  transform: rotate(180deg);
}


 


.intro {
  color: var(--green);
}

.examples {
  color: var(--blue);
}

.tech {
  color: var(--yellow);
}

.footer {
  color: var(--red);
}


/* Hamburger Icon Styles */
.hamburger {
  display: none; /* Hidden by default on larger screens */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  justify-content: space-around;
  width: 50px; /* Width of the hamburger icon */
  height: 45px; /* Height of the hamburger icon */
  z-index: 1001; /* Ensure it's above other elements if needed */
}

.hamburger .bar {
  display: block;
  width: 100%;
  height: 3px; /* Thickness of each bar */
  /*background-color: var(--color-primary-brand); /* Color of the bars */*/
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}
.bar { 
  background: var(--red); 
}

/* Styles for when hamburger is active (for animation) */
.hamburger.active .bar:nth-child(1) {
  transform: translateY(11px) rotate(45deg); /* Adjust based on bar height/spacing */
}
.hamburger.active .bar:nth-child(2) {
  opacity: 0; /* Middle bar fades out */
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg); /* Adjust based on bar height/spacing */
}



/* --- Intro Section --- */
#intro {
  display: flex;
  flex-direction: row;  /* change from column to row */
  align-items: center;
  justify-content: center;
  color: var(--green);
  padding: 6rem 2rem;
  background: white;
  gap:  1rem ;
}

/*
#logo_div {
  width: 150px;
  height: 150px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;  
  margin-right: 2rem;  
  animation: pulse 1s infinite alternate;
  flex-shrink: 0;  
}
*/

#logo_div {
  width: 150px;
  height: 150px;
  background-color: var(--green); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; /* ensures the whole image fits */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  margin-right: 2rem;
  animation: pulse 1s infinite alternate;
  flex-shrink: 0;
  border:  solid;
  background-image: url('../img/pic.png');
}


/* For your logo text, if it's still SHADI */
#logo2 {
  /*font-family: 'Lato', sans-serif;  Using Lato for consistency with headers */
  font-size: 3.8rem;
  color: var(--color-text-light);
  font-weight: bold;
  display: none;
}



#intro h1 { 
    margin: auto;
    padding: 8px;
}

#intro_text {
  max-width: 800px;
  text-align: left;
  border-left: solid;
  padding-left: 3rem;
}

 

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

#description {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 800px;
  color: black;
}


/* --- Showcase Section - Project Display Styles --- */
#examples {
    border-top: solid 8px var(--blue);

  background: white; /* Assuming examples section was white or very light */
  /*background: #0f9d5830;*/
}

#examples h2 , #examples  h3 {
  color: var(--blue);
}

#examples h3 {
    background-color: #4285f438;
    margin: 5rem auto 0;
    padding: 8px;
    font-size: 12pt;
    border-radius: 20px;
}
#examples  h4 {
  color: black;
  font-size: 12pt;
}

#examples  h5 {
    margin-bottom: -1rem;
 }




.project-row {
  display: flex;
  gap: 20px;
  margin: 2rem auto;
  max-width: 65vw;
  flex-wrap: wrap;
  align-items: stretch; /* stretch children to equal height */

}


/* Alternate layout for even rows */ 
/*.project-row:nth-child(even) {*/
.project-row:nth-child(4) {
  flex-direction: row-reverse;
} 

.project-row.reverse {
  flex-direction: row-reverse;
}


.project-img {
  flex: 2;
  border: solid 1px #7c7c7c20;
  border-radius: 35px;
  overflow: hidden;
}

.project-img img {
  width: 100%;        /* Image fills the width of the container */
  height: auto;       /* Height adjusts automatically to keep aspect ratio */
  object-fit: cover;  
  object-position: top;
  display: block;     /* Remove inline gap below images */
}


img.project-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  /*border-radius: 8px;*/
}


.project-info {
  flex: 1;
  padding: 10px;
  background-color: #fafafa; /* your gray background */
  display: flex;
  flex-direction: column; /* optional, if you want vertical layout inside */
  justify-content: center;  /* vertically center content */
  border-radius: 35px;
  border: solid 1px #7c7c7c20;
}

.project-info h4 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.project-info p {
  margin-left: 2rem;
  margin-right: 2rem;
  text-align: left;
  font-size: 11pt;
  color: #333;
}

.project-info a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}
 
/*SVG line*/
.svg-line {
    width: 55vw;
    margin: auto;
}
 
.reverse-line {
  transform: scaleY(-1);
}




/* --- Technologies Used Section --- */
#tech {
  background: #4285f41f;
  background: white; 
    border-top: solid 8px  var(--yellow);

}

#tech h2 , #tech  h3 {
  color: var(--yellow);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  max-width: 910px;
  margin: 0 auto;
}

.tech-item {
  /*background: #d6cdb44d;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  border-radius: 0px;
}

.tech-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px var(--color-shadow-strong);
}

.tech-item img {
  width: 60px;
  height: 60px;
 }



/* --- Contact Section --- */
#footer {
  /*background: var(--color-background-dark);*/
  border-top: solid 8px var(--red);
  background: white;
  color : black;
}

#footer h2 , #footer  h3 {
  color: var(--red);
}

.social {
  display: flex;
  justify-content: flex-end;   
  ma/*x-width: 650px;
  margin: auto;
  gap:  1re*/m;

}

.social div {
  text-align: center; 
  min-width: 110px;  
  flex-shrink: 0;  
  box-sizing: border-box;  
  padding:  10px; 
  width: 1em;
  height: 7em;
}


.social h4 {
  margin: 0;
  font-size: 9pt;
  font-weight: normal; 
  font-family: 'Roboto Condensed';
  display: none;
}

.social a {
  text-decoration: none;
  color: var(--color-text-light);
  display: flex; /* Make the anchor a flex container */
  flex-direction: column; /* Stack image and text vertically */
  align-items: center; /* Center image and text within the anchor */
}

/*.social */
img.footerpng {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem; /* Space between image and text */
  transition: transform 0.2s ease-out;
  opacity: 0.8;
  border-radius: 10px;
  padding: 8px;
  border: solid 1px #eeeeee;
  background: #fafafa;
}

.social img.footerpng:hover {
  transform: translateY(-4px);
  /*filter: grayscale(0%);*/
  opacity: 1;
  background: #0f9d582b; 
}


/* --- Footer Signature --- */
#signature {
  background: var(--color-background-darker);
  background: #eee;
  color: var(--color-text-muted);
  padding: 1rem 2rem;
  font-size: 0.85rem;
  min-height: 25vh;
  min-width: 100vw;
}

h6 {
  font-weight: 200;
  font-size: 7pt;
  color : #111;
}

#goUp {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto 1rem;
  transition: transform 0.3s ease;
  stroke: gray ;
}

#goUp:hover {
  transform: translateY(-5px);
}

/* --- Responsive adjustments --- */
@media (max-width: 700px) {
  nav {
    flex-direction: row; /* Keep row for brand and hamburger */
    /*padding: 1.2rem 1.5rem;  Adjusted padding for mobile */
    /*background: rgba(230, 230, 230, 0.90);  */
  }

  .nav-links {
    display: none; /* Hide navigation links by default on small screens */
    flex-direction: column; /* Stack links vertically */
    width: 100%;
    position: absolute; /* Position relative to nav */
    top: 100%; /* Below the nav bar */
    left: 0;
    background: rgba(255, 255, 255, 0.90);  
    /*box-shadow: 0 5px 10px var(--color-shadow-light);*/
    padding: 4rem 0;
    z-index: 999; /* Below hamburger, above content */
  }

  .nav-links.active {
    display: flex; /* Show navigation links when active */
  }

  .nav-links a {
    padding: 1rem 6rem;  
    text-align: left; /* Align text left in dropdown */
    width: 100%; /* Make links take full width of dropdown */
  }

  .hamburger {
    display: flex; /* Show hamburger icon on small screens */
  }


 .project-row {
    flex-direction: column !important;
    margin: 2rem auto;
  }

  .project-img,
  .project-info { 
    border-radius: 15px; 
  }

  .tech-grid {
    grid-template-columns: repeat(3, 1fr); /* 2 columns per row for smaller screens */
    gap: 1.5rem; /* Even smaller gap */
  }  
 
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.8rem;
  }

  section {
    padding: 3rem 1rem;
  }
  .tech-grid {
    gap: 1rem;
  }

  #intro {
    flex-direction: column; 
    align-items: center;
  }

  #logo_div {
     margin: 0 auto 2rem auto;  
  }

  #intro_text {
    border:  none; 
    padding: 0;
    text-align: center;
  }

   .tech-grid {
    grid-template-columns: repeat(2, 1fr);  
    gap: 1.5rem; /* Even smaller gap */
  }  

  .social { 
    justify-content: center;    
  }
  a.subnav-link {
    padding: 1rem 3rem !important;
  }

}