/***** 
	Student Name: Nada Hashem
	File Name: CSS Style Sheet for Transiotions & Animation
	Date: 09/qq/2025
*******/

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


body{
    background-color: #010E1D;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;         
}

  /********************** header styling starts here ***********************/

header{
    display: flex;
    flex-direction: column;
}

#top-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    position: relative;
  }
  
  #logo {
    left: -5px;
    position: absolute;
  }

  #logo img{
    width: 100px;   
    height: auto;
}

 header h1{
    color: #D3C59F;
    font-size: 26px; 
    font-family:Georgia, 'Times New Roman', Times, serif;
 }

 nav{
    background-color: #1b2633;  
 }

 nav ul {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    padding: 1em;                
    margin: 0;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: #F1EBE0;
    font-size: 11px;
    padding: 0.5em;
    transition: all .5s ease;
}

nav ul li a:hover {
    background-color:  #F1EBE0;
    color: #1b2633;
    font-size: 12px;
    padding-top: 1em;
    padding-bottom: 1em; 
    /*padding: .8em;*/
}



  /********************** header styling ends here ***********************/




    /********************** carousel styling starts here ***********************/

  #carousel {
    position: relative; 
    width: 100%;
    aspect-ratio: 16 / 9; 
    max-height: 600px;
    overflow: hidden;    
    /*overflow: hidden;*/
}

 #carousel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
}

.slide {
    position: absolute;
    inset: 0;  
    opacity: 0;
    z-index: 1;
    animation: fade-in-out 20s infinite;
}


.slide:nth-child(1) { animation-delay: 0s}
.slide:nth-child(2) { animation-delay: 4s;}
.slide:nth-child(3) { animation-delay: 8s;}
.slide:nth-child(4) { animation-delay: 12s;}
.slide:nth-child(5) { animation-delay: 16s;}


@keyframes fade-in-out{
    0%   { opacity: 0; }  
    20%  { opacity: 1; }    
    25%  { opacity: 0; } 
    100% { opacity: 0; }   
}

.slide:nth-child(1) {
    opacity: 1;
    animation: first-image 20s infinite; 
  }
  
  @keyframes first-image {
    0%   { opacity: 1; }   
    20%  { opacity: 1; }
    25%  { opacity: 0; }  
    100% { opacity: 0; }
  }


/*@keyframes fade-in-out{
    0%, 20% { opacity: 1; z-index: 2;}
    20%, 21% { opacity: .50; z-index: 1;}
    21%, 100% {opacity: 0; z-index: 1;}
 }*/

/*@keyframes fade-in-out{
    0%, 20% { opacity: 1; z-index: 2;}
    20%, 30% {opacity: 0.25; z-index: 2;}
    30%, 40% {opacity: 0.25; z-index: 1;}
    30%, 100% {opacity: 0; z-index: 1}
 }*/


/* opacity: 0; fully transparent 

opacity: 0.25;  25% opaque, 75% transparent

opacity: 0.5;  50% opaque, 50% transparent

opacity: 0.75; 75% opaque, 25% transparent

opacity: 1;  fully opaque  */


.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


#carousel .button-prev,
#carousel .button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background:#1b2633;
    color:  #F1EBE0;
    border: none;
    padding: 0.5em 1em;
    font-size: 1em;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.5s ease;
    min-width: 44px;
    min-height: 44px;
}

#carousel .button-prev:hover,
#carousel .button-next:hover{
background: #F1EBE0;
color: #1b2633;
}

.button-prev { 
    left: 1em;
 }
.button-next { 
    right: 1em;
 }


  /********************** carousel styling ends here ***********************/


/******************************* Hero Statement Styling starts here **************************/

.hero-statement {
    padding: 3em;
    margin-bottom: 2em;
}

.hero-statement h2 {
    color: #D3C59F;
    font-size: 22px;
    margin-bottom: 1em;
}

.hero-statement p {
    font-size: 18px;
    color: #F1EBE0;
}
/******************************* Hero Statement Styling ends here **************************/



/********************** Wider screens styling starts here ***********************/



@media only screen and (min-width : 700px) {

#top-header {
        min-height: 230px;
      }        

#logo img{
        width: 200px;   
    }

header h1{
    font-size: 50px; 
 }

 nav ul li a {
    font-size: 16px;
    padding: 1em; 
 }

 nav ul li a:hover{
    font-size: 18px;
    padding: 1em; 
}


#carousel .button-prev,
#carousel .button-next {
    padding: 0.5em 1em;
    font-size: 2em;
}

.hero-statement h2{
    font-size: 28px;
}
 
.hero-statement p{
    font-size: 22px;
}
}