/* Reset styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        
        /* Header styles */
        .header {
            width: 100%;
            position: relative;
            height: 100vh;
        }
        
        /* Navigation styles */
        .nav {
            background-color:#17171896;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .75rem 4%;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .nav-menu{
            width: 70%;
            display: flex;
            justify-content: space-between;

        }
        
        /* Add background on scroll */
        .nav.scrolled {
            background-color: rgba(0, 0, 0, 0.8);
            padding: 1rem 5%;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
       
        .nav-menu {
            font-family:'manufacturing consent', sans-serif;
            text-transform: lowercase;
            font-size: 2.5rem;
            color: rgb(209, 204, 182);
            display: flex;
            list-style: none;
        }
        
        .nav-item {
            margin-left: 2rem;
        }
        
        .nav-link {
            text-decoration: none;
            color: #ffffff;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .nav-link:hover {
            color: #fae312;
        }
        
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: space-around;
            cursor: pointer;
            background: none;
            border: none;
            width: 35px;
            height: 30px;
            position: fixed;
            top: 20px;
            right: 5%;
            z-index: 1001;
            padding: 0;
        }
        
        .hamburger span {
            display: block;
            width: 100%;
            height: 4px;
            background-color: #ffffff;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /*General*/

         .text-title {
            font-family: 'Manufacturing Consent', sans-serif;
            text-transform: lowercase;
            font-weight: 100;
            
        }
        
        /* Hero section styles */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 5%;
            background: linear-gradient(rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.466)), url("./images/hero-background.jpg") center/cover no-repeat;
            /*image by Patrick Tomasso https://unsplash.com/photos/gray-concrete-road-between-brown-and-green-leaf-trees-at-daytime-5hvn-2WW6rY */
        }
        
       

        .svg-logo{
            margin: 0;
            width:clamp(700px, 55vw, 1100px);
            padding-top:8%;
        }

     

        .logo-top{
        stroke:none;
        animation: fill 3s ease-in-out forwards;
        }

        .logo-letters{
        stroke: #C7A501;
        animation: fill 1s ease-in-out forwards;
        animation-delay: 1s;
        }
        


        .text {
        opacity: 0;
        fill: var(--color);
        /* animation: fadeIn 2s ease-in-out forwards; */
        /* animation-delay: 2.5s; */
        }

        @keyframes fill{
        0% {
            fill: transparent;
        }
        100% {
            fill: #c7a501;
            stroke-width: 0px;
        }
        }

        @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
        }
    

        @keyframes intro {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
        }

        .bar{
            overflow: hidden;
            position:relative;
            width:100%;
            height: 100px;
            background:linear-gradient(45deg, #000000, #282727, #000000);
            color:#f0ede1;
            display: flex;
            align-items: center;
            
            }

            .bar_content{
            position: absolute;
            white-space: nowrap;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: clamp(1.2rem, 2vw, 1.2rem);
            animation: scroll var(--speed) linear infinite;
            }

            .bar:hover .bar_content{
            animation-play-state: paused;
            }

            .title{
            font-size: clamp(1.5rem, 2.3vw, 2rem);
            }

            .speed-1{ 
                --speed: 25s; 
                top:10px; 
                opacity: 1;
                text-shadow: 
                0 0 5px #FFD700,
                0 0 10px #FFD700,
                0 0 15px #FFD700,
                0 0 20px #FFD700;
            }
            .speed-2{ 
                --speed: 22s; 
                top:50px; 
                font-weight: bold;
                color:#fae312;
            }
                

            @keyframes scroll{
            from{transform:translateX(100vw);}
            to{transform:translateX(-100%);}
            }


            .about{
               display: flex;
               flex-direction: row;
                width: 100%;
                min-height: 80vh;
            }

            .about-text{
                background: radial-gradient(rgba(36, 36, 36, 0.921),rgba(36, 36, 32, 0.872)), url('./images/ep.png');
                background-size: cover;
                flex:.80;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center; 
                
            }

            .about-copy{
                font-family: 'Outfit', Arial, Helvetica, sans-serif;
                font-size: clamp(1rem, 1.25vw, 1.75rem);
                color: rgb(219, 210, 198);
                line-height: 1.6;
                position: relative;
                padding: 0 40px;
                text-align: justify;
            }

            .about-copy::first-letter{
                top: -20px;
                font-family: 'Times New Roman', Times, serif;
               font-size: clamp(2rem, 6vw, 4rem);
                float: left;
                margin-right: 0.1em;
                line-height: 1;
                font-weight: 900;
                color:#C7A501;
            }

            .about-frame{
                display: flex;
                flex-direction: row;
                background-image: url(./images/bw-band-music.webp);
                flex: 1;
                width: 100%;
                object-fit: contain;
                position: relative;
                max-height: 80vh;
                overflow: hidden;
            }

            .about-frame img{
                width: 100%;
                height: auto;
                object-fit: contain;
            }
        

            .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        /* Zigzag section styles */
        .section-title {
            text-align: center;
            font-size: 4rem;
            margin-bottom: 3rem;
            color:#c7b601;
            
            
        }

        .zigzag-section {
            background-image:url(./images/band-back.png);
            background-size: cover;
            background-position: center;
            padding: 4rem 0;
        }
        
        .zigzag-row {
            display: flex;
            align-items: center;
            margin-bottom: 6rem;
        }
        
        .zigzag-row:last-child {
            margin-bottom: 0;
        }
        
        .zigzag-row.reverse {
            flex-direction: row-reverse;
        }
        
        .zigzag-image-container {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;;
            position: relative;
            padding: 2rem;
        }
        
        .zigzag-image-accent {
            position: absolute;
            width: 20vw;
            height: 90%;
            background-color: #C7A501;
            transform: rotate(-5deg);
            z-index: 1;
            border-radius: 5px;
        }
        
        .zigzag-row.reverse .zigzag-image-accent {
            background-color: #0e3705;
            transform: rotate(5deg);
        }
        
        .zigzag-image {
            position: relative;
            width: 20vw;
            height: auto;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 2;
        }
        
        .zigzag-content {
            font-family: 'Allura', cursive;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            flex: 1;
            padding: 2rem;
        }
        
        .zigzag-title {
            font-family: 'manufacturing consent', sans-serif;
            font-size: 2.5rem;
            font-weight: 300;
            margin-bottom: .5rem;
            color: #C7A501;
        }
        
        .zigzag-text {
            font-size: clamp(1.5rem, 2vw, 1.75rem);
            text-align: center;
            color: rgb(219, 210, 198);
        }
        
        .zigzag-btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .zigzag-row.reverse .zigzag-btn {
            background-color: #e74c3c;
        }
        
        .zigzag-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /************** MUSIC SECTION STYLES **********************/

        .music{
            padding-top: 50px;
            padding-bottom: 50px;
            width: 100%;
            background-image: url(./images/bw-band-music.webp);
            background-size: cover;
        }
        
        .music-section-title{
            padding: 50px 0 50px 0;
            color:#c7b601;
            font-size: clamp(2.5rem, 4.5vw, 4rem);
            text-align: center;

        }

        .music-players{
            display: grid;
            margin: auto;
            justify-content: center;
            align-items: center;
            width: 90%;
            grid-template-columns: 1fr 1fr;
            column-gap: 50px;
            row-gap: 50px;
        }

        .outer-music-box{
            background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
            radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
            padding: 5px;
            border-radius: 20px;
        }

        .follow-link{
             font-family: 'manufacturing consent', sans-serif;
            font-size: 2rem;
            font-weight: 300;
            margin-bottom: .5rem;
            padding-top: 3rem;
            text-align: center;
            margin-bottom: 30px;
        } 
        
        .follow-spotify{
            background-color: #174e06;
            border: white 1px solid;
            border-radius: 20px;          
            padding: 10px 20px;
            color: #eceadc;
        }

        /************** FORM STYLES ********************/
         .form{
            
            width: 100%;
            background-color: #111111ec;
            background-image: url(./images/hero-backgound.webp);
            
         }
        

         .form-container {
            background-color: #171718;
            border: 2px rgba(192, 192, 192, 0.87) solid;
            border-radius: 20px;
            padding: 50px 20px 50px 20px;
            max-width: 600px;
            margin: 100px auto;
            
        }
        
        h1 {
            color:#c7b601;
            text-align: center;
            font-size: 3.5em;
            font-weight: 700;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }
        
        label {
            display: block;
            color: #fff;
            margin-bottom: 5px;
            font-weight: 700;
        }
        
        input, textarea, select {
            width: 100%;
            background: #111;
            border: 2px solid #333;
            color: #fff;
            padding: 12px;
            margin-bottom: 20px;
            font-family: inherit;
            font-size: 14px;
            border-radius: 0;
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #d0e41b;
        }
        
        textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        button {
            background: #8a7c03;
            color: #fff;
            border: none;
            padding: 15px 30px;
            font-family: inherit;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            border-radius: 2px;
        }
        
        button:hover {
            background: #16191b;
        }

        /********* Footer Styles ************/

        .footer{
            position: relative;
            width: 100%;
            background-image: url(./images/band-back-punch.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
            
        .social-icons{
            padding: 50px;
            display: flex;
            gap: 3vw;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .footer-logo{
            width: 10vw;
            height: auto;
        }

        .social-icons a{
            color: #C7A501;
            font-size: clamp(1.75rem, 2.5rem, 6vw);
        } 

        .enforte-section{
            display: flex;
            justify-content: center;
            width: 100%;
            padding: 30px;
        }

        .enforte-a{
           
            color:#C7A501;
            
            
        }

        /* contact section background grid */

        .form-section{
            font-family: 'Outfit', Arial, Helvetica, sans-serif;
            border: 1px solid #0f0e0e;
            position: relative;
            width: 100%;
            background-color: #16191b34;
            
        }

       
        .parent {
            margin:0;
            padding:0;
            height: 100%;
            background-color: #16191b;
            position:absolute;
            display: grid;
            width: 100%;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: none;
            z-index: -1;
        }

        .parent img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.3;
        }
            
        .div1 {
            grid-column: span 2 / span 2;
            grid-row: span 2 / span 2;
        }

        .div2 {
            grid-row: span 2 / span 2;
            grid-column-start: 1;
            grid-row-start: 3;
        }

        .div3 {
            grid-row: span 2 / span 2;
            grid-column-start: 3;
            grid-row-start: 1;
        }

        .div4 {
            grid-column: span 2 / span 2;
            grid-row: span 3 / span 3;
            grid-column-start: 4;
            grid-row-start: 1;
        }

        .div5 {
            grid-column: span 2 / span 2;
            grid-row: span 3 / span 3;
            grid-column-start: 2;
            grid-row-start: 3;
        }

        .div6 {
            grid-column-start: 1;
            grid-row-start: 5;
        }

        .div7 {
            grid-row: span 2 / span 2;
            grid-column-start: 4;
            grid-row-start: 4;
        }

        .div8 {
            grid-column: span 2 / span 2;
            grid-row: span 2 / span 2;
            grid-column-start: 5;
            grid-row-start: 4;
        }

        .div9 {
            grid-column: span 2 / span 2;
            grid-row: span 3 / span 3;
            grid-column-start: 7;
            grid-row-start: 3;
        }

        .div10 {
            grid-row: span 2 / span 2;
            grid-column-start: 6;
            grid-row-start: 2;
        }

        .div11 {
            grid-column: span 2 / span 2;
            grid-row: span 2 / span 2;
            grid-column-start: 7;
            grid-row-start: 1;
        }

        .div12 {
            grid-column-start: 6;
            grid-row-start: 1;
        }
                

     
        /* Responsive styles */
        @media screen and (max-width: 768px) {
            .hamburger {
                display: flex;
            }

            
            
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 70%;
                height: 100vh;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgba(0, 0, 0, 0.9);
                padding-top: 80px;
                transition: all 0.5s ease;
            }
            
            .nav-menu.active {
                right: 0;
            }
            
            .nav-item {
                margin: 1.5rem 0;
                width: 100%;
                text-align: center;
            }

            
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            /* Hamburger animation */
            
            
            .hamburger {
                transition: transform 0.3s ease;
            }
            
            .hamburger.active {
                animation: hamburgerScale .5s ease forwards;
            }

            @keyframes hamburgerScale {
                0% { transform: scale(1); }
                50% { transform: scale(0.25); }
                100% { transform: scale(1); }
            }
            
            .hamburger.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }
            
            .hamburger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(10px, -10px);
            }
            
            /*** Logo SEction ***/

            .hero {
              height: 80vh;
              padding-top:10%;
              justify-content: center;
              align-items: center;
            }
            
            .svg-logo{
                width: 100vw;
                height: auto;
            }
           
            .about{
            flex-direction: column;
            }

            .about-copy{
                padding: 30px;
                font-size: clamp(1rem, 2.5vw, 1.5rem);
            }
        
            .about-frame img{
                width: 100%;
                max-height: 50vh;
            }



            .zigzag-image-accent {
             position: absolute;
             width: 50vw;
            }

            .zigzag-image {
             width: 50vw;
            }
    
            .zigzag-row, .zigzag-row.reverse {
             flex-direction: column;
             margin-bottom: 4rem;
            }
        
            .zigzag-image-container {
             width: 100%;
             margin-bottom: 2rem;
             order: 1;
            }
        
        .zigzag-content {
            width: 100%;
            padding: 1rem 0;
            order: 2;
        }

        
        .zigzag-title {
            font-size: 1.8rem;
        }

         .music-players{
             width: 95%;
             grid-template-columns: 1fr

        }

        .form-container{
            border: #c7b601 1px solid;
            width: 80%;
        }

        .footer-logo{
            width: 20vw;
        }
    
        
        }