/* @import url('https://fonts.googleapis.com/css?family=PT+Mono|Press+Start+2P|Source+Code+Pro:300,400&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,200i,300,400,500&display=swap');

@import url('https://fonts.googleapis.com/css?family=Tinos&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:100,200,300,400,700,700i,900&display=swap');

@import url('https://db.onlinewebfonts.com/c/647a7208a3f353750207213a569815d4?family=Chronicle+Display');

/* pre load */
.loader {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
        }

}
.loading-text { 
    

}


/* pre load */

html {
    height: 100%;
    
    margin: 0;
    width: auto;
    display: inline-block;
    box-sizing: border-box;
    
    
    scroll-behavior: smooth;
    
}





main {
    margin: 0;
    width: 100%;
}

body {
    margin: 0;
    background-color: rgb(255, 255, 255);
}
h1, h2, h3, a, p, li, blockquote, label, address{
    /* font-family: 'montserrat', sans-serif; */
    font-family: 'lato', Arial, Helvetica, sans-serif;
    
    /* font-family: 'Source Code Pro', Arial, Helvetica, sans-serif; */
    

    /* text-transform: uppercase; */
    color: rgb(0, 0, 0);
}

/* font sizes */



h2, a, h3, li, address {
    font-weight: 300;
    
}
h3 {
    line-height: 2em;
}

h1, h2, blockquote {
    text-transform: uppercase;
}

h1 {
    margin: 0; 
}

p, li, address {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 2em;
}



a, .status{
    text-decoration: none;
    color: whitesmoke;
    
}

label, input, textarea {
    display: block;
    margin: 1em 0;
}




/* =======Video+++++++ */
video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
    z-index: 1;
    margin: 0;
}

.vid {
    grid-column: 1 /1;
  grid-row: 1;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
   position: relative;
}


.vid iframe {
	position: absolute;

	width: 100%;
	height: 100%;
}
.video--box {
    
}

/* Photo Gallery Section */
.photo-gallery {
    padding: 2rem;
    padding-top: 4em;
    text-align: center;
   
    


    
  }
  
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    overflow: hidden;
  }
  
  .gallery-photo {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    

    width: 100%; /* Ensures the image fills the width of the grid cell */
    height: 100%; /* Ensures the image fills the height of the grid cell */
    object-fit: cover; /* Maintains aspect ratio and fills the container */
    display: block; /* Removes extra space below the image */
    overflow: hidden; /* Prevents the image from overflowing */



}

  .gallery-grid > img {
    aspect-ratio: 1 / 1; /* Ensures square grid items */
    overflow: hidden; /* Hides any overflow caused by cropping */
}
  
  .gallery-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* Fullscreen Zoom */
  .fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Fullscreen width */
    height: 100%; /* Fullscreen height */
    object-fit: contain; /* Ensure the image fits within the screen without distortion */
    z-index: 1000; /* Bring the image to the front */
    background: rgba(0, 0, 0, 0.8); /* Optional: Add a dark background */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .fullscreen:hover {
    transform: scale(1.02);
  }

/* 
  gallery link */
  .highlighted-link {
    text-align: center; /* Centers the link */
    margin: 2rem 0; /* Adds spacing above and below */
padding-top: 5rem;

  }
  
  .highlighted-gallery {
    color: #228B22; /* Text color */
    /* background-color: #ff5733;  */
    padding: 0.5rem 0rem; /* Adds padding around the text */
    text-decoration: none; /* Removes underline */
    border-radius: 5px; /* Rounds the corners */
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 700;
    
  }
  
  .highlighted-gallery:hover {
    /* background-color: #c13d24;  */
    transform: scale(1.05); /* Slightly enlarges the link on hover */
  }


/* =======Video+++++++ */






.navigation--box {
    display: grid;	
    /* display: inline; */
    width: 100%;
    
   color: #000;
    vertical-align: middle;
   padding: 20px 0;
	position:fixed;


	z-index:98;
    background-color: white;
    
    
}

.navigation--box--two {
    text-align: right;
	/* display: flex;
	justify-content: flex-end;
    flex-direction: row ; */
    margin: 0 2em;
    color: rgb(0, 0, 0);
}
.nav-a {
	/* justify-content: right; */
	margin: 0 7px;
    color: rgb(0, 0, 0);

}

.landing--img {
    height: 100vh;

    /* background: linear-gradient(180deg,rgb(202, 202, 202) 0%,  rgb(145, 145, 145) 99%); */
    
    /* background-image: url(imgs/images/laptopbackground.jpg); */
    
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    
    
    
    
    
}
.background-img {
    background-image: url(imgs/images/logobackground2.png);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    background-repeat: no-repeat;
    
    /* grid-template-columns: repeat(2, 1fr); */
    place-items: center;
    
}

.landing--img h1{
    
    font-size: 3rem;
    /* text-shadow: rgba(92, 92, 92, 0.322) 1px 1px 1px;
     */
    
    /* text-shadow: 8px 20px 4px rgba(0, 112, 177, 0.35),
                 6px 15px 3px rgba(255, 51, 51, 0.35),
                 4px 10px 2px rgba(251, 255, 0, 0.35),
                 2px 5px 1px rgba(255, 0, 0, 0.35); */
                 

}
.landing--img h2 {
    
    /* text-shadow: rgba(92, 92, 92, 0.322) 1px 1px 1px; */

}
.landing-img-png {
    margin: auto;
    /* filter: saturate(1); */
    max-height: 60em; 

    width: 100%; 
       display: grid;
    place-items: justify;
    

    
   
   
    
}

.logoimg {
    max-width: 100%; /* Ensures the image scales down to fit its container */
    height: auto; /* Maintains the aspect ratio */
    object-fit: cover; /* Ensures the image covers its container without distortion */
    display: block; /* Removes extra space below the image */
}


.intro-subtitle {
    /* height: 0px; */
    
   
    text-align: left;
    width: 70%;
    
    /* background-color: coral; */
    
    /* display: grid;
    place-items: center; */
   
    /* line-height: 1em; */
    
    
}

.contact-btn-div {
    /* margin: 35px 0; */
}

.contact-btn {
    /* background-color: rgb(255, 133, 111); */
    border-radius: 8px;
    
    margin-top: 10px;
    color: #228B22;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.8rem;
    
}

.contact-btn:hover {
    color: rgb(255, 209, 111);
}

/* scroll overlay animation */
/* scroll overlay animation */
.overlay, .overlay-two {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(34, 34, 34);
    width: 100%;
    height: 100%;
}
/* scroll overlay animation */
/* scroll overlay animation */

/* image boxes */



.studio-image {
    
    
}

.studio-image, .studio-image-2, .profile-image, .studio-image-mix {
    
    background-position: center;
    background-size: cover;
    min-height: 30em;
    max-width: 52em;
    
     
    
}


.studio-image {
    background-image: url(imgs/images/workers2.png);
    margin: auto;
    /* filter: saturate(0); */
    
}

.studio-image-2 {
    background-image: url(imgs/images/apple-laptop.jpg);
    margin: auto;
    
}


.studio-image-mix {
    background-image: url(imgs/mixer.jpg);
    margin: auto;
}


.profile-image {
    background-image: url(imgs/images/mainlogo.png);
    margin: auto;
    border-radius: 3%;

}





/* video links */
/* video links */

.video-links-row-one, .video-links-row-two  {
    display: grid;
    margin: 0;
    min-width: 100%;
    min-height: 100%;
    
}


.video-links-row-one {
   
    grid-template-columns: 50% 50%;
    
}

.video-links-row-two {
    grid-template-columns: 36% 64%;
}
.img-links img {
    width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
  
  
  
}

.image-width {
    max-width:90em;
    display: block;
    margin: auto;
    /* background-color: lightcoral; */
    
}

.link-heading {
    height: 100%;
    display: flex;
    
}
.link-heading h1 {
    align-self: flex-end;
    padding: 1em;
    font-size: 1.5rem;
}


.link-relative {
    position: relative;
    height: 100%;
    width: 100%;
}
.link-title {
    opacity: 0;
    display: grid;
    place-items: center;
    height: 100%;
    
    /* top: 50%;
    transform: translateY(-50%);
    transform: translateX(-0%); */
    width: 100%;
    /* text-align: center; */
    position: absolute;
    text-align: center;
    /* line-height: 0; */
    transition-duration: 1110ms;
    font-weight: 100;
    font-size: 3rem;
    margin: auto;
    
    
}

.link-title h3 {
    font-weight: 100;
}

.desaturate-img {
    /* filter: saturate(0.2);
    transition-duration: 10ms; */
}

.desaturate-img:hover {
    filter: saturate(1);
}

.link-title:hover {
    opacity: 1;
    text-shadow: rgba(92, 92, 92, 0.322) 1px 1px 1px;
    
}

/* video boxes */

.grid-photo {
    margin-top: 10em;
    position: relative;
    overflow: hidden;
    grid-column: 8/ span 3;
    
}

.content-box-two-grid {
    margin-top: 10em;
    grid-column: 4/ span 6;
    text-align: justify;
    
}

.content--box--one, .content--box--video, .content--box--video-two, .content-box-two {
    display: grid;
    /* place-items: center; */
    
    
    margin: 0;
    min-width: 100%;
    }

    .content--box--one, .content-box-two {
        grid-template-columns: repeat(12, 1fr);

    }
    .content--box--video {
        grid-template-columns: 64% 36%;
        
        /* grid-auto-rows: 2fr; */

    }
    
    .content--box--video-two {
        grid-template-columns: 36% 64% ;
        
        
        /* grid-auto-rows: 2fr; */

    }

    .text--box {
        /* display: block;
        position: relative; */
        
        /* background-color: lightcoral; */
    }

    .content--box--one {
       padding-top: 3em;
        
    }
.content--box--one img {
    min-width: 100%;
}

.heading--description {
    display: table;
    height: 100%;
    color: whitesmoke;
    grid-column: 3/ span 8;
    
}


.heading--table {
    
    display: table-cell;
    vertical-align: middle;
    padding: 0 3em;
    /* font-size: 1.5rem; */
    text-align: justify;
    
}
.indent--parent{
    display: grid;
    width: 100%;
    
}
.indent--bio {
    display: table;
    width: 100%;
    
    grid-column:3/ span 12;
}
.indent--bio2 {
    display: table;
    width: 100%;
    
    grid-column: 3/ span 12;
}
.title-pad {
    /* padding-top: 4em; */
}



.heading--table p {
    /* font-size: .9rem; */

}


.soundcloud {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    
    
}

.soundcloud-player {
    margin: auto;
    width: 70%;
    max-width: 20em;
    padding: 5em 0;
    
}

.divider {
    
    margin-left: 2em;
    height: 5em;
    
/* background: linear-gradient(180deg,rgb(145, 145, 145) 0%, rgb(255, 255, 255) 79%); 
background: linear-gradient(180deg, rgba(26,26,26,1) 0%, rgba(77,77,77,1) 88%); */
    /* margin: 5em 0; */
    /* border-bottom: rgb(190, 186, 186) solid 1px; 
  border-top: rgb(190, 186, 186) solid 1px;  */

}
.divider h1 {
    /* margin: 1em;
    font-weight: 300; */
}

.divider-two {

    height: 20em;
    /* background: linear-gradient(180deg, rgba(26,26,26,1) 0%,rgb(43, 43, 43)49%, rgb(26, 26, 26) 88%); */
}

.divider-links {
    height: 25vh;
    background: linear-gradient(180deg,rgb(54, 54, 54) 0%, rgba(33,33,33,1) 41%, rgba(34, 34, 34,1 ) 79%);

}

.divider-links-bottom {
    height: 26em;
    /* background: rgb(38,38,38); */
    
background: linear-gradient(180deg,rgba(34, 34, 34,1) 0%, rgba(33,33,33,1) 41%, rgb(48, 48, 48) 79%);
/* background: linear-gradient(180deg, rgba(26,26,26,1) 0%, rgba(77,77,77,1) 88%); */
    /* margin: 5em 0;
    border-bottom: rgb(190, 186, 186) solid 1px; */
    /* border-top: rgb(190, 186, 186) solid 1px; */
}

/* Scroll animation */

.scroll-section {
    padding: 3em;
    height: 100vh;
    position: relative;
    box-sizing: border-box;

}

.scroll-section-pre {
    height: 100%;
    text-align: right;
    display: grid;
    align-items: flex-end;
    
    
    /* padding: 0 3rem; */
    
    /* position: relative; */
    /* box-sizing: border-box; */
    
    
    /* top: 70%; */
    

}

.scroll-section-pre h1 {
    font-size: 1.5rem;
    /* font-weight: 500; */
    padding: 1rem 2rem;
}



.scroll-section:nth-child(even) {
    background: rgb(49, 49, 49);
}

blockquote {
    font-size: 2rem;
    width: 30%;
    margin-top: 17%;
    position: absolute;
}

span {
    width: 100%;
    background-color: blueviolet;
    display: block;
    height: 5px;
    margin-top: 20px;
}

.imgsanimation {
    position: absolute;

}

.imgsanimation:nth-of-type(1) {
    width: 40%;
    right: 0;
    top: 20%;
}

.imgsanimation:nth-of-type(2) {
    width: 25%;
    right: 70%;
    top: 29%;
    margin-top: 15%;
}

#box {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid rgb(110, 110, 110);
    border-radius: 50%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    
    

}
.ball{

    height: 100%;
    display: grid;
   
}
.ball h1 {
    margin: auto;
   
}



/* Scroll animation */
/* testemonial section */


.testimonials-section {
  max-width: 60em;
  margin: 3em auto;
  padding: 2em 1em;
  text-align: center;
}

.testimonials-title {
  font-size: 2rem;
  margin-bottom: 1.5em;
  color: #333;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em 1.5em;
}

.testimonial {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 1.5em 1em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-size: 1.05em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}

.testimonial h3 {
  margin-top: 1em;
  font-size: 0.95em;
  color: #888;
  font-style: italic;
  margin-top: auto; 
  
}


@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* contact section */

/* contact section */

.contact-box {
    height: 88.5vh;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(1, 1fr);
    text-align: justify;
    padding: 0 3em;
    
    }
.contact {
    font-size: .8rem;
    color: rgb(0, 0, 0);
}
.contact a 
{
    font-size: 1rem;
    color: rgb(0, 0, 0);
}





/* contact section */

/* contact section */



/* footer */


#parent {
	display: flex;
	  align-items: center;
	  justify-content: center;
      place-items: center;
      background-color: rgb(255, 255, 255);
      padding: 3em 0;
      
}

footer a {
    
    padding: 0 1em;
    font-size: .6rem;
    font-weight: 100;
    text-transform: none;
}



/* media queries */
/* ipad pro */

@media (max-width: 1024px) {
    
    #zlogo {
        font-size: 2rem;
        
    }


    .intro-subtitle {
        font-size: .61rem;
        width: 80%;
        line-height: 4em;
        margin: 0;
        padding: 0;
        height: 100%;
        grid-row: 2 /2 ; 
        text-align: center;
        /* display: grid;
    place-items: center;
    text-align: left; */
        
    }
    /* nav { width: 200px;} */
  /* .nav-a {
        margin: 0 ;
    } */
    
    .navigation--box {
        /* display: grid;
        display: inline; */
        /* margin: auto;
        justify-content: center; */
        /* flex-direction: row ; */
        padding: 20px 0%;
        
        
        
    }

    .navigation--box--two {
        margin: auto;
    }

    .landing--img {
        
        
        grid-template-columns: repeat(1, 1fr);
        

 
    }
    
    .content-box-two, .content--box--one, .content--box--video, .content--box--video-two, .soundcloud {
        grid-template-columns: repeat(1, 1fr);

    }
    .content-box-two-grid {
        padding: 1em;
        
    }
    .heading--description, .grid-photo, .content-box-two-grid {
        
        grid-column: 1;
       
    }

    
    
    .soundcloud-player {
        margin: auto;
        width: 70%;
        max-width: 20em;
        grid-row: 2 /2 ; 
        
    }
    .text--box {
        margin-top: 25em;
        
    }
    .heading--table {
        
        padding: 2em 1em;
        
           
    }

     h1 {
        font-size: 1.3rem;
        
    }

    .scroll-section-pre h1 {
        font-size: 1rem;
    }

    .link-title {
        font-size: 1rem;
        opacity: 1;
        font-weight: 500;
        place-items: center;
        text-shadow: rgba(43, 43, 43, 0.336) 2px 2px 5px,
                     rgba(77, 77, 77, 0.178) -2px -2px 5px;
        /* background: rgb(238,174,202); */
        /* background: linear-gradient(0deg, rgba(238,174,202,0) 20%, rgba(102, 75, 87, 0.4) 50%, rgba(81,127,181,0) 80%);
         */
    }

   

    .desaturate-img {
        filter: saturate(1);
        transition-duration: 1110ms;
    }

    .contact {
        font-size: .8rem;
    }

    .divider-links {
        height: 15vh;
        background: linear-gradient(180deg,rgb(54, 54, 54) 0%, rgba(33,33,33,1) 41%, rgba(26,26,26,1) 79%);
    
    }

    .contact-btn {
        font-size: 1.2rem;
        
    }
    
    

}


/* ipad */

@media (max-width: 768px) {
    .intro-subtitle {
        font-size: .61rem;
        
    }
    .text--box {
        margin-top: 20em;
        
    }
    .landing-img-png {
        
        max-height: 14.5em; 
        max-width: 100%;
        width: auto; /* Ensures the width adjusts proportionally */
        height: auto; /* Maintains the aspect ratio */
        object-fit: contain; /* Prevents distortion */
       
        
    }

    

}


/* social icons */

.social-icon {
    width: 40px; /* Adjust the size of the icons */
    height: 40px;
    margin: 0 10px; /* Add spacing between icons */
    transition: transform 0.3s ease; /* Add a hover effect */
  }
  
  .social-icon:hover {
    transform: scale(1.1); /* Slightly enlarge the icon on hover */
  }
  
  .footer-link {
    display: inline-block; /* Ensures the icons are inline */
  }



/* iphone plus*/

@media (max-width: 414px) {
    .intro-subtitle {
        font-size: .51rem;
    }

    .link-title {
        font-size: 1rem;
    }

    .text--box {
        margin-top: 10em;
        
    }

    .landing-img-png {
        
        /* max-height: 10em;  */
        max-width: 100%;
        width: auto; /* Ensures the width adjusts proportionally */
        height: auto; /* Maintains the aspect ratio */
        object-fit: contain; /* Prevents distortion */
        
       
        
    }

   
    
}



/* iphonx x */

@media (max-width: 375px) {
    .intro-subtitle {
        font-size: .41rem;
    }

    
}

/* iphone se */

@media (max-width: 320px) {
   

    .text--box {
        margin-top: 9em;
        
    }

    .link-title {
        font-size: .8rem;
    }

    .landing-img-png {
        
        /* max-height: 8em;  */
        max-width: 100%;  
        width: auto; /* Ensures the width adjusts proportionally */ 
        height: auto; /* Maintains the aspect ratio */
        object-fit: contain; /* Prevents distortion */
          
       
        
    }

   
    
}