/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and background styling */

header, main, footer {
    max-width: 1800px;
    width: 100%;
    padding:2% 5%;
    flex: 1;
}
/**/


main {
    flex: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
}

body {
display: flex;
align-items: center;
flex-direction: column;
    background-color:black;
    font-family: Arial, sans-serif;
    min-height: 100vh;            /* Full viewport height */
}


footer {
    display: flex;
    justify-content: space-between;
}

p {
    color:#fff;
}

h1, h2 {
    color:white;
}

h1 {
color: white;
font-size:2rem;
line-height: 2.2rem;
margin-bottom: 20px;
text-align: left;
}

h2 {
    font-size: 1.5rem;
    line-height: 2rem;
}

h2 a {
    font-size: 1.5rem;
    line-height: 2rem;
}

/* Logo style */

.logo a {
    color: white;
    font-size: 14px;
    text-decoration: none;
}


/* Navbar container */


.hamburger {
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 30px;
    height: 20px;
    cursor: pointer;
    margin: 10px;
    border: none;
    background: none;
  }
  
.bar {
    background-color: white;
    height: 4px;
    width: 100%;
    border-radius: 4px;
  }
  
  /* Media Query for Phones */
  @media (max-width: 768px) {
    /* Show hamburger menu icon on small screens */
    .hamburger {
      display: flex;
    }
  
    .nav {
      display: none; 
      flex-direction: column;
      background-color: #333;
      position: absolute;
      top:0;
      right:0;
      width: 200px;
      height: 100%;
      z-index: 1000;
    }

    .nav.open {
        display: flex;
    }
    .nav ul {
        flex-direction: column;
        padding:20px 0;
        width: 100%;
    }
    .nav ul li {
        text-align: center;
        margin: 10px 0;
    }

  }

.navbar {
    display: flex;
    justify-content: space-between; /* Space between logo and nav links */
    align-items: center;
    padding: 10px 20px;
}


/* Navbar links list */
.nav-links {
    display: flex;
    list-style: none;
}

/* Navbar list items */
.nav-links li {
    margin: 0 15px;
}

/* Navbar link styling */
.nav-links a, a, footer a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

/* Hover effect for links */
.nav-links a:hover, a,  footer a:hover {
    color: #f39c12;
}

.name {
    margin:25px 0 0 0;
}


/* Featured video section */
.featured-video {
   display: flex;
    gap:25px;
    flex-direction: row;
    align-items: center;
    height: 100%;;
    max-width: 1600px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden; 
}

@media (max-width:1010px) {
    .featured-video {   
        width: 100%;   /* Full width on small screens */
    max-width: 100%; /* Ensure no overflow */
    flex-direction: column;
}
.video-container {
    height: auto;
}
.video-container iframe {
    height: auto;
}

}
@media (max-width:480px) {
    .featured-video {   
        width: 100%;   /* Full width on small screens */
    max-width: 100%; /* Ensure no overflow */
}}

/*///////////
Gallery Videos Styling 
 */

.gallery-videos {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:25px;
}

@media (max-width:640px) {
    .ggallery-videos {   
        grid-template-columns: 1fr;
}}


/*///////////
 Video item styling 
 */

 .video-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Make iframe responsive */
.video-item iframe {
    width: 100%;
    height: 100%;
}
.video-item video {
    width: 100%;
    height: auto;
}

/*  Hover effect */
.video-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}



/*//////////
 Gallery container 
 */

 .gallery-container {
    display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 20px;
    width: 100%;
    max-width: 1600px;
    padding: 20px;
    justify-items: center;
    align-items: center;
}
.gallery-container .photo img, .gallery-container .image img {
border-radius: 8px;
}

@media (max-width:1276px) {
    .gallery-container {   
        grid-template-columns: repeat(3, 1fr);
       
}}
@media (max-width:946px) {
    .gallery-container {   
        grid-template-columns:repeat(2, 1fr);
}}
@media (max-width:640px) {
    .gallery-container {   
        grid-template-columns: 1fr;
}}






/* section information styling */
.section-info {
    padding: 20px;
    text-align: center;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: white;
  
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: white;
    text-transform: uppercase;
}

/* footer */
/* Styling for the link */
.link-with-icon {
    display: flex;
    align-items: center; /* Center text and icon vertically */
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: Arial, sans-serif;
    padding: 10px;
    transition: color 0.3s ease;
}

.link-with-icon svg {
    margin-right: 8px; /* Space between icon and text */
}

.link-with-icon:hover {
    color: #007bff; /* Change color on hover */
}

    /* Input fields and textarea */
    input, textarea {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #222;
        color: #fff;
    }

    input[type="submit"] {
        background-color: #222;  
        border: 1px solid #ccc;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        background-color: #f39c12; 
        color:#fff  
    }

    /* Focus state for inputs */
    input:focus, textarea:focus {
        border-color: #66afe9;
        outline: none;
    }

    /* Textarea for message */
    textarea {
        height: 150px;
        resize: vertical;
    }