* {box-sizing: border-box;}

html, body {

    --vibrant-purple: #734d8e;
    --purple: #412a56;
    --light-purple: #86718e;
    --white: #f2f2f2;
    --black: #262626;

    




    margin:0px;
    padding:0px;
    background: var(--black);
    color: var(--white);
    font-size: 30px;
    font-family: sans-serif;
}

section {
    width: 100%;
    min-height: 100vh;
}

/* Navigation */
.site-header {
   position: sticky;
    top: 0;
    z-index: 1000;
    background:var( --light-purple);
    padding: 22px 0;
    
   
    

   
}

.main-nav{
    
    background-color: var( --light-purple);
    font-size: 15px;
    padding-left: 15px;
    padding-right: 15px;
 
   
  

}

.navbar{
    display: flex; 
    align-items: center;
    justify-content: space-between;
    height: 90px;
    

   
}

li {list-style: none;}

li a{
    color: var( --white); 
    font-weight: 300;
}
.main-nav  .logo img{
    width: 180px;
    margin-left: 8px;
}

.main-nav ul{
    background: var(--black);
    padding: 18px 22px;
    display: flex;
    margin-right: 15px;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-right: 25px;
}


.main-nav ul li a {
 text-decoration: none;
color: var(--white);
letter-spacing: 2px;
font-weight: 500;
  
}

/* hero scroll */

.hero-scroll {
position: relative;
height: 300vh;
margin-top: 0px;
padding-top: 0;

}

.sticky-wrap {
position: sticky;
top: 135px;
height: calc(100vh - 135px);
overflow: hidden;
display: flex;
align-items: center;

}

.scroll-track {
display: flex;
flex-direction: row;
gap: 8px;
height: 100%;
width: max-content;
padding:  25px;
}

.panel {
flex: 0 0 30vw;
height: 75vh;

}

.panel img {
    width:100%;
    height: 100%;
    object-fit: cover;
}

/* news ticker */

.news-ticker {
  position: sticky;
  top: calc(100vh - 140px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--black);

  height: 40px;
  width: 430px;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  contain: content;
}
 

.news-ticker ul {
  display: flex;
  align-items: center;
  gap: 16px;      

  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.news-ticker .medium {
  font-size: 13px;  
  letter-spacing: 0.07em;
  font-weight: 500;
  line-height: 1;
  display: block;
}

.news-ticker li {
  list-style: none;
}

.news-ticker ul li:first-child {
  margin-left: 0;
}

.news-ticker .ticker-track {
  display: flex;
  align-items: center;
  gap: 18px;

  width: max-content;
  flex-shrink: 0;

  animation: ticker-scroll 16s linear infinite;
  will-change: transform;
}

.news-ticker .ticker-track li:nth-child(odd) .medium {
  color: var( --light-purple);
}

.news-ticker .ticker-track li:nth-child(even) .medium {
  color: var( --white);
}

/* eye-icon */

.eye-icon {
    position:fixed;
    right: 50px;
    bottom: 90px;

    z-index: 2000;

    pointer-events: auto;

}

.eye-icon img {
  width: 100px;    
  height: auto;
  display: block;
}
.eye {
  width: 100px;
  height: 60px;
  background: var(--white);

  position: relative;
  overflow: hidden;

 
  clip-path: polygon(        /*eye shape*/
      0% 50%,
    8% 32%,
    18% 20%,
    32% 10%,
    50% 6%,      /*eye corner L */
    68% 10%,
    82% 20%,
    92% 32%,
    100% 50%,
    92% 68%,
    82% 80%,
    68% 90%,
    50% 94%,
    32% 90%,
    18% 80%,
    8% 68%
);
 
  
}

.pupil {
  width: 40px;
  height: 40px;
  background: var(--black);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.04s linear;
}


/* ===== GALLERY ===== */

.gallery {
  padding: 80px 20px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 6px; 
  grid-auto-flow: row dense;

  row-gap: 20px;        /* ===== padding fo grid ===== */
  column-gap: 20px;

  width: 100%;
  max-width: none;
  margin: 0;
}

.card {
  background: purple;
  padding: 20px;            /* ===== Gallery Frame Boarder size ===== */
  overflow: hidden;
  border-radius: 0px;
  

  align-self: start;
  break-inside: avoid;
}

.card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

 /* ===== Image Colors ===== */

.card:nth-child(5n+1) {
  background: var(--light-purple);}

.card:nth-child(5n+2) {
  background: var(--purple);}

.card:nth-child(5n+3) {
  background: var( --white);
}

.card:nth-child(5n+4) {
  background: var(--purple);}

.card:nth-child(5n+5) {
  background: var( --white);
}

  /* ===== Gallery bottom fade ===== */

.gallery::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 200px; 

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.85) 70%,
    rgba(0,0,0,1) 100%
  );

  pointer-events: none;
  z-index: 5;
}



  /* ===== About===== */

.about{
position: relative;
overflow: visible;

min-height: 100vh;

}

.about-image{
position: absolute;
right: 75px;
top: -150px;


width: min(75vw, 900px);

display: flex;
align-items: center;
justify-content: flex-end;

z-index: 3;

}

.about-image img{
width: 100%;
height: auto;
display: block;

transform: translateX(150px);
}

/* About text*/

.about h1,
.about h2,
.about p{
margin: 0;
}

.about-name{
font-family: "Unbounded", sans-serif;
font-weight: 900;
font-size: 180px;
font-style:normal;
padding: 0 40px;
}


.about-text h2{
    font-family: "Unbounded", sans-serif;
    font-weight: 900;
    font-size: 100px;
    font-style:normal;
 
}

.about-text p{

    font-size: 13px;
    line-height: 1.7;

}

.about-text{
background: white;
color: black;

padding: 40px;
max-width: 850px;

position: relative;
z-index: 2;

overflow: visible;

padding: 40px 80px;

margin-left: 40px;

text-transform: uppercase;

}


.about-text::after{
content: "";

position: absolute;
top: 0;
left: 0;

width: 94vw;   /* extends far past screen */
height: 100%;

background: white;

z-index: -1;


}



/* About small images */
.about-images_small{
display: flex;
gap: 20px;
margin-top: 20px;
}

.about-images_small figure{
flex: 1;
margin: 0;
}

.about-images_small img{
width: 170px;
height: 200px;
display: block;
}

/* Contact */

#contact{
height: 100vh;
display: flex;
flex-direction: column;
z-index: 5;
}

.contact-container{
display: grid;
grid-template-columns: 1fr 1fr;
flex:1;
z-index: 3;
overflow: hidden;
align-items:center;
}

.contact-header{
position: absolute;
top: 60px;
left: 60px;
z-index: 2;
margin-top: 40px;
}

.contact-left{
background: var(--black);
padding: 30px;
max-width: 650px;
max-height: 750px;
width: 100%;
z-index: 3;
position: relative;
margin-top: 40px;
}

.contact-right img{
width: 100%;
height: 240%;
display: block;
}

.contact-me{
position: relative;
overflow: hidden;
background: var(--vibrant-purple); /* purple section background */

display: flex;
flex-direction: column;
justify-content: center;

padding-left: 60px;
}

.contact-me h3,
.contact-me h5{
position: relative;
z-index: 5;
}

.contact-me h3{
    font-family: "Unbounded", sans-serif;
    font-weight: 900;
    font-size: 70px;
    font-style:normal;
    text-transform: uppercase;
    margin-left: 0;
    z-index: 3;
    margin-bottom: 5px;
}

.contact-me h5{
    font-family: "Unbounded", sans-serif;
    font-weight: 200;
    font-size: 20px;
    font-style:normal;
    text-transform: uppercase;
    margin-left: 0;
    z-index: 3;
    margin-top: 0;
}


.contact-wave{
position:absolute;
top:0;
left:0;
width:100%;
line-height:0;
z-index: 3;
}

.wave{
display:block;
width:100%;
height:120px;
}

.wave-1 path{
fill: var(--black);
z-index: 3;
}


.contact-form{
display: flex;
flex-direction: column;
gap: 20px;
max-width: 500px;
}

.contact-form textarea{
min-height: 100px;
resize: vertical;
padding: 15px 15px;
width: 118%;
text-align: left;

}

.contact-form button{
padding: 14px;
background: var(--vibrant-purple);
color: var(--white);
border: none;
cursor: pointer;
font-weight: 600;
min-width: 150px;
margin: 0 auto;

}

.contact-form input{
height: 50px;
width: 118%;
padding: 0 15px;
font-size: 14px;
border: none;
}

/* news ticker Animation */
 @keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}