* {
    box-sizing: border-box;
   /*  margin: 0;  */
    padding: 0;
    font-family: "Montserrat" , serif; 
    
    
}



/* --------------KERIMISRIBA---------------- */
html {scroll-behavior: smooth;}
  
  a { color: #0a1118;; }
  a:hover { color: #0a1118;; }
  
  /* width */
  ::-webkit-scrollbar {
    width: 14px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #272a2e; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
/* -----------NAVBAR-------------- */
.navbar {
     background: rgba(19, 19, 19, 0.5);  /*#181818; -läbipaistev*/
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    /* height: 80px; */  
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5em;
} 

#navbar__logo {
    background-color: #0a0a0a;
    background-image: linear-gradient(to top, #ffffff 0%, #fcfcfc 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.4rem
    
}

.fa-solid {
    margin-right: 1rem;
}

.navbar__logo-image {
    height: 5vh; /* Adjust the height of the image */
    width: auto;  /* Maintains the aspect ratio */
    margin-right: 1rem; /* Adds spacing between the image and the text */
    vertical-align: middle; /* Aligns the image with the text */
}

.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
}

.navbar__item {
    height: 80px;
}

.navbar__links {
  color: #ffffffc5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
}

.navbar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
}


/*--------------------- NAVBAR MOBILE ---------------------------*/
@media screen and (max-width: 600px) {
    #navbar__logo{
        font-size: 1.2rem 
    }
    
    .navbar__logo-image {
        height: 4vh;
        min-height: 40px;
    }
}
@media screen and (max-width: 660px) {
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 8vh;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0;
    }

    .navbar__menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -500px;
        opacity: 0; 
        transition: all 0.5s ease;
        height: 50vh;
        z-index: -1;
        background: #131313;
    }

    .navbar__menu.active {
        background: rgba(19, 19, 19, 0.7);
        top: 100%;
        opacity: 1;
        transition: all 0.5s ease;
        z-index: 99;
        height: 40vh;
        font-size: 1.6rem;
        
    }

    #navbar__logo {
        padding-left: 25px;
    }
    .navbar__toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: #fff;
    }
    .navbar__item {
    width: 100%;
    }
    .navbar__links {
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
    }

    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);

    }

    .navbar__btn {
        padding-bottom: 2rem;
    }

    /* .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80px;
        margin: 0;
    } */

    .navbar__toggle .bar {
        display: block;
        cursor: pointer;
    }

    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);

        #menu-overlay {
          display: none;          /* hidden by default      */
        }
        
        #menu-overlay.active {     /* shown while menu is open */
          position: fixed;
          inset: 0;               /* top:0; right:0; bottom:0; left:0 */
          z-index: 98;            /* just below .navbar__menu (99)    */
          background: transparent;/* invisible, but catches clicks    */
        }  

    }
   
}


/* --- HERO CONTAINER --- */
#hero {
    
    width: 100%;
    min-height: 100vh;     /* full viewport height */
    overflow: hidden;      /* ensures the background fills the container */
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* --- HERO VIDEO --- */
  .hero-video {
    position: absolute;  /* behind everything else */
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    object-fit: cover;   /* ensures the video covers entire area */
    z-index: 0;          
  }
  
  /* --- HERO OVERLAY --- */
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* adjust opacity */
    z-index: 1;
  }
  
  /* --- HERO CONTENT (Text) --- */
  .hero-content {
    position: relative; /* ensures it sits above video/overlay */
    z-index: 2;
    color: #fff;
    text-align: center;
    margin-top: 15vh;
    margin-bottom: 5%; /* spacing above carousel */
  }
  
  .hero-content h1 {
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 100;
  }
  
  .hero-content h2 {
    font-weight: 100;
    font-size: 1.5rem;
    margin: 0;
    color: white;
    text-decoration: underline;
  }
  
 /* Carousel container: ~20% of hero */
.carousel-container {
    
    position: relative;
    z-index: 20; /* above the video */
    height: 15vh; /* 20% of hero’s total height */
    max-width: 100%;
    overflow: visible; /* hide the overflowing track */
   
    
  }

  /* The scrolling track of images */
  .carousel-track {
    display: flex;
    width: 7200px;
    /* Enough width to hold 24 images side by side */
    /* The animation speed depends on the total width, so we’ll handle it in keyframes. */
    animation: marquee 25s linear infinite;
  }
  
  /* Pause animation on hover */
  .carousel-track:hover {
    animation-play-state: paused;
  }
  
  /* Each image in the track */
  .carousel-track img {
     /* occupy the full 20vh in height */
    width: 300px;    /* keep aspect ratio */
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Keyframes for horizontal marquee
   - We shift by 50% of the total track width, 
     so it cycles from the first set of images to the second. */
@keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      /* Shift exactly half the total set of images 
         so that the second batch is in place of the first. */
      transform: translateX(-3600px);
    }
  }
  

  
  /* --- SCROLL BUTTON --- */
  .hero__scroll-btn {
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    z-index: 3; 
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
  }
  
  .hero__scroll-btn:hover {
    color: #979797;
    opacity: 0.8;
  }
  
  .hero__scroll-btn .bi {
    animation: bounce 1s infinite alternate;
  }
  
  @keyframes bounce {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-10px);
    }
  }
  
  /* ----------- RESPONSIVE MEDIA QUERIES ----------- */

  /* @media (max-height: 1120px) {
    .hero-content {
      margin-top: 5%;
    }
    .carousel-container {
      height: 10vh; 
    }
  } */

  @media (max-width: 660px) {
    .hero-content {
      margin-top: 15vh; 
    }
  } 

  @media (max-width: 480px) {
   
    .hero-content h1 {
      font-size: 1.5rem;
    }
    .hero-content h2 {
      font-size: 1.2rem;
    }
    
  }
  
  @media (min-width: 768px) {
   

    .hero-content h1 {
      font-size: 2rem;
    }
    .hero-content h2 {
      font-size: 1.75rem;
    }
  }
  
  @media (min-width: 992px) {
    .hero-content h1 {
      font-size: 2.5rem;
    }
    .hero-content h2 {
      font-size: 2rem;
    }
  }
  
  @media (min-width: 1200px) {
    .hero-content h1 {
      font-size: 3rem;
    }
    .hero-content h2 {
      font-size: 2.5rem;
    }
  }


/* ----------GALERII OSA CSS----------- */
.gallery {
    background: #000000;
    display:flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding-bottom: 5rem;
    position:relative;
}

.gallery h1 {
    
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(134,134,134,1) 49%, rgba(255,255,255,1) 100%);
    background-size: 100%;
    margin-bottom: 5rem;
    font-size: 2.5rem;
    font-weight: 100;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color:transparent;
}



.gallery__container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
}

.gallery__card {
    
    margin: 5vw;
    width: 40vw;
    max-width: 420px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,
     rgba(17,17,17,0.9) 100%), url("images/Videos.jpg");
     
    background-size: cover;
    background-position: center;
    position: relative;
    color: #cacaca;
    
}

.gallery__card:nth-child(2){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, 
    rgba(17,17,17,0.6) 100%), url("images/photos.jpg");
}

.gallery__card h2 {
position: relative;
top: 84%;
left: 4%;
font-weight: 200;
}



/* .gallery__card button {
    color: #fff;
    padding: 10px 20px;
    border: none;
    outline: none;
    border-radius: 4px;
    background: #f77062;
    position: absolute;
    top: 440px;
    left: 30px;
    font-size: 1rem;
    cursor: pointer;
} */

.gallery__card:hover {
    transform: scale(1.075);
    transition: 0.2s ease-in;
    cursor:pointer;
}

/* ---------VIDEO CARDS CSS------------ */

.video__card {
    margin: 3vw;
    width: 80vw;
    max-width: 420px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,
     rgba(17,17,17,0.6) 100%), url("images/documentaries.jpg");
     
    background-size: cover;
    background-position: center;
    position: relative;
    color: #cacaca;
}

.video__card:nth-child(2){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, 
    rgba(17,17,17,0.6) 100%), url("images/fiction.png");
}

.video__card:nth-child(3){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, 
    rgba(17,17,17,0.6) 100%), url("images/musicvideos.png");
}
.video__card:nth-child(4){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, 
    rgba(17,17,17,0.6) 100%), url("images/drone.png");
}

.video__card h2 {
    position: relative;
    top: 84%;
    left: 4%;
    font-weight: 200;
    }



.video__card:hover {
    transform: scale(1.075);
    transition: 0.2s ease-in;
    cursor:pointer;
}

#back-to-portfolio {
    outline:none;
    border:none;
    background: transparent;
    cursor: pointer;
    color: #979797;
    font-size: xx-large;
    position:absolute;
    top: 7rem;    
}

#backButton {
    outline:none;
    border:none;
    background: transparent;
    cursor: pointer;
    color: #979797;
    font-size: xx-large;
    position:absolute;
    top: 7rem;    
}

.fa-arrow-left:hover {
    color: white;
    opacity: 0.8;
  }



@media screen and (max-width: 960px) {
    .gallery {
        height: auto;   
    }
    
    .gallery h1 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    .gallery__card {
        width: 80vw; 
        margin: 1.5vw;
    }
}

@media screen and (max-width: 768px) { 
    .gallery__card {
        width: 80vw; 
        margin: 1.5vw;
    }
    .gallery h2 {
      
     
  }
}

@media screen and (max-width: 480px) {
    .gallery__card {
        width: 80vw;
        margin: 1vw; 
        margin-top: 4vw;
    }
    .gallery h2 {
      font-size: 5vw;
      
  }
}


/* ---------------PHOTOS STYLES------------ */


/* ---------FOOTER ------------*/

.footer {
    background-color: #181818;
    /* This gives you a dark background */
    color: #ffffff;
    /* This sets the text color to white */
    padding: 16px 0;
    /* This adds padding of 16px (equivalent to py-4 in Bootstrap) on the top and bottom */
    
}

.footer-container {
    
    max-width: 1300px;
     margin: 0 auto;
    
    
}

.row {
    display: flex; 
    align-items: center; /* This vertically aligns the items in the center */
    flex-wrap:wrap;
}

.column1 {
    width: 100%;
    
    text-align: center;
    box-sizing: border-box;

}

@media (min-width: 700px) {
    .column1 {
        width: 33.33%
    }
}

.footer-logo {
    width: 60vw;
   max-width: 200px;
    
    height: auto;

}

.column2-3 {
    width: 100%; /* Full width for smaller screens (col-12 equivalent) */
    margin-bottom: 1.5rem; /* mb-4 equivalent */
    text-align: center; /* text-center equivalent */
    display: flex; /* d-flex equivalent */
    flex-direction: column; /* flex-column equivalent */
    justify-content: center; /* justify-content-center equivalent */
    box-sizing: border-box; /* Ensures padding/border don't affect width */
    line-height: 2;
    font-weight: 200;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Add responsiveness for larger screens (col-sm-4 equivalent) */
@media screen and (min-width: 700px) {
    .column2-3 {
        width: 33.33%; /* Takes up 4/12 columns (one-third of the row) */
    }
}

/* footer branding */

.branding {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 5rem;
    margin: 0 auto;
    max-width: 1300px;
    border-top: 1px solid #233D54;
    box-sizing: border-box;
    padding-top: 1rem;
}

.column-brand {
    width: 100%; /* Default: Full-width for smaller screens */
    display: flex; /* d-flex equivalent */
    align-items: center; /* align-items-center equivalent */
    box-sizing: border-box; /* Ensures padding/border doesn't affect size */
}
@media screen and (min-width: 768px) {
    .column-brand {
        width: 33.33%; /* Takes up 4/12 columns (one-third of the row) */
    }
}

.copyright {
    margin-right: 0.5rem;
    color: #6c757d;
    text-decoration: none;  
}

.copyright:hover {
    color: #5a6268;
}

.copyright span {
    font-size: 1rem;
}

.social-media-links {
    display: flex; /* d-flex equivalent */
    justify-content: flex-end; /* justify-content-end equivalent */
    list-style: none; /* list-unstyled equivalent */
    margin: 0; /* Reset default margins */
    padding: 0; /* Reset default padding */
    width: 100%; /* Full width by default */
    color: white; /* text-white equivalent */
    box-sizing: border-box; /* Ensure padding doesn’t affect width */
}

/* Responsive width for col-md-4 equivalent */
@media screen and (min-width: 768px) {
    .social-media-links {
        width: 33.33%; /* col-md-4 equivalent */
    }
}

/* Styling for the list items */
.social-media-links li {
    margin-left: 1rem; /* Space between list items */
}

/* Styling for the links */
.social-media-links a {
    text-decoration: none; /* Remove underlines */
    color: #6c757d
}

.social-media-links a:hover {
    color: #5a6268; /* Optional: Change color on hover */
}

/* ----------ABOUT PAGE---------- */
.about {
    background: #000000;
    display:flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding-bottom: 10rem;
    position:relative;
}



.about__container {
    margin-top: 5rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1300px;

}

.about h1 {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(134,134,134,1) 49%, rgba(255,255,255,1) 100%);
    background-size: 100%;
    margin-bottom: 5rem;
    font-size: 2.5rem;
    font-weight: 100;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color:transparent;
}

.about-pic {
    width: 70vw;
    max-width: 300px; 
    margin-left: auto;
    margin-right: auto;
    
}

.about-row {
    display:flex;
    align-items: center;
    gap: 2rem
    
}
    



.about-column {
    width: 100%; /* Full width for smaller screens (col-12 equivalent) */
    margin-bottom: 1.5rem; /* mb-4 equivalent */
    text-align: center; /* text-center equivalent */
    display: flex; /* d-flex equivalent */
    flex-direction: column; /* flex-column equivalent */
    justify-content: center; /* justify-content-center equivalent */
    box-sizing: border-box; /* Ensures padding/border don't affect width */
    line-height: 2;
    font-weight: 200;
    color: white;
}

@media (max-width: 768px){
  .about-row{
    flex-direction:column;     /* stack image above text  */
    text-align:center;         /* center the copy         */
  }
}



/*----------------VIDEO GALLERY -----------------*/

.video-gallery {
  width: 100%;
  display:grid;
  grid-template-columns: 1fr;
  row-gap: 4rem; 
  max-width: 1200px;  /* limit total width, optional SIIIT HAKKAB MUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUTUS */
  margin: 2rem auto;  /* center and add spacing */
  padding: 0 1rem;    /* some horizontal padding */
}

.video {
  text-align: center; /* center thumbnails + titles */
}

.video-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.2s ease; /* a little hover effect */
}

.video-gallery img:hover {
  transform: scale(1.03);
}

.videoTitle {
    
  font-weight: 300;
  font-size: 1.2rem;
  
  color: #cccccc;               /* text color */
}

.fancybox__container {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

.fancybox__iframe {
  border: none !important;
  background: none !important;
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.fancybox__content {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/*----------------PHOTO GALLERY -----------------*/


.photo-gallery-container {
  background-color: #000000;
  padding-bottom: 3rem;
}
.photo-gallery {
  /* Center the gallery and limit its total width if you like: */
  
  max-width: 1200px;
  margin: 0 auto;
  
  /* Create 5 equal-width columns with some spacing: */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* space between items */
}

/* Ensure images don’t blow out their containers: */
.photo-gallery img {
  width: 100%;    /* fill the grid cell’s width */
  height: auto;   /* keep aspect ratio */
  object-fit: cover; /* optional if you want to clip instead of shrink */
  border-radius: 5px;
}

@media (max-width: 900px) {
  .photo-gallery {
    grid-template-columns: repeat(3, 1fr); /* 3 per row on medium screens */
  }
}

@media (max-width: 600px) {
  .photo-gallery {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on small screens */
  }
}

/*---------CONTACT FORM----------*/

#open-popup {
  color: #ffffff;
  font-weight: 100;
  font-size: 2rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  display: inline-block;
  
}

#open-popup::after,
#open-popup::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff0000, #00ffff);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

#open-popup::before {
  top: -5px;
  transform-origin: left;
}

#open-popup:hover:after,
#open-popup:hover::before {
  transform: scaleX(1);
}

/* 
  Popup Overlay 
  - Covers the entire viewport 
  - Initially hidden with `display: none;`
  - Semi-transparent background
*/
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999; /* ensure it’s above other elements */
}




/*
  When we want to show the popup, 
  we'll add a class like "active" via JavaScript
*/
.popup-overlay.active {
  display: flex;
}

/* 
  Popup Content 
  - The modal "box" inside the overlay
*/
.popup-content {
  background-color: #000000;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative; /* for the close button positioning */
  
}

/* Close Button inside the popup */
.close-btn {
  background: none;
  border: none;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
}

/* Contact Form Headings */
.popup-content h2 {
  margin-bottom: 0.5rem;
  text-align: center;
  color: white;
}

.popup-content p {
  text-align: center;
  margin-bottom: 1rem;
  color: white;
}

/* Form Group Styling */
.form-group {
  margin-bottom: 1rem;
  color: white;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  color: white;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 3px solid #696969;
  border-radius: 4px;
  
}

/* Submit Button */
.submit-btn {
  width: 100%;
  background-color: #222222;
  color: #ffffff;
  padding: 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #233D54;
}

/* Sparkle */

.sparkle-text {
  position: relative;
  display: inline-block;
}

/* The sparkle itself */
.sparkle-text::after {
  content: '✦'; /* or use "✨" or just a glowing dot with border-radius */
  position: absolute;
  color: #ffffff;
  font-size: 0.8rem;
  top: 0;
  right: 0;
  opacity: 0;
  transform: scale(0.5);
  animation: sparkle 3s infinite;
  pointer-events: none;
}

/* Sparkle animation */
@keyframes sparkle {
  0%, 96%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  97% {
    opacity: 1;
    transform: scale(1) rotate(10deg);
  }
  98% {
    opacity: 1;
    transform: scale(1.2) rotate(-10deg);
  }
  99% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
}