/* global fontload */

@font-face {
    font-family: 'NewEdge';
    src: url('/data/NEWEDGE666-REGULAR.OTF');
}

/* global hide scrollbar */

::-webkit-scrollbar {
    display: none; 
}

/* Header Grid Layout */
.header {
    display: grid;
    grid-template-columns: repeat(23, 1fr); /* 23 column */
    grid-template-rows: 1fr; /* 1 row */
    gap: 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". notdrinkingtonightlogo notdrinkingtonightlogo . . . honestbrutal honestbrutal honestbrutal . . . home . . . shop . . . ourmission ourmission .";
    width: 100vw; /* width */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px 0; /* headerpadding */
    font-family: "NewEdge", sans-serif;
    
}

/* grid areas */
.notdrinkingtonightlogo {
    grid-area: notdrinkingtonightlogo;
    display: flex;
    align-items: left ;
    justify-content: left;
}

.headerndtlogo{
    height: 100%;
    width: 100%;
}

.honestbrutal {
    grid-area: honestbrutal;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: left;
}

.home {
    grid-area: home;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.shop {
    grid-area: shop;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.ourmission {
    grid-area: ourmission;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.honestbrutal, .home, .shop, .ourmission{
    font-size: 1vw;
}

/* Link Style, Hover States */

.honestbrutal a,
.home a,
.shop a,
.ourmission a {
    text-decoration: none;
    color: black;
    transition: transform 0.3s ease, color 0.3s ease;
}

.honestbrutal a:hover,
.home a:hover,
.shop a:hover,
.ourmission a:hover {
    transform: scale(1.1); /* scale effect */
    color: #FF3600; /* ndt colour on hover */
}

.honestbrutal a:visited,
.home a:visited,
.shop a:visited,
.ourmission a:visited {
    color: black; 
    text-decoration: none; 
}

/* logo animation */
.notdrinkingtonightlogo:hover {
    transform: scale(1.1); 
    transition: transform 0.3s ease;
}

/* media query for header */
@media (max-width: 768px) {
    .header {
        display: grid; /* enable grid */
        grid-template-columns: auto 1fr 1fr 1fr 1fr; 
        grid-template-rows: auto; /* 1 row */
        grid-template-areas: "notdrinkingtonightlogo honestbrutal home shop ourmission"; 
        gap: 15px; /* increase gap */
        padding: 10px 20px; 
        align-items: center; 
        box-sizing: border-box; 
    }

    .notdrinkingtonightlogo {
        grid-area: notdrinkingtonightlogo;
        justify-self: start; 
    }

    .honestbrutal {
        grid-area: auto;
        text-align: left;
        font-size: 3vw; 
        margin-right: 10px; 
    }

    .home {
        grid-area: auto;
        text-align: left;
        font-size: 3vw; 
        margin-left: 10px; 
    }

    .shop,
    .ourmission {
        grid-area: auto;
        text-align: left;
        font-size: 3vw;
        margin-right: 10px;
    }

    .headerndtlogo {
        width: 80%; 
    }

    
    .ourmission {
        margin-right: 10px; 
    }
}




/* Body Section */

body,
html {
    margin: 0;
    padding: 0;
    font-family: "NewEdge", sans-serif;
    scroll-behavior: smooth;
    /* Smooth scrolling */
    height: 100%;
    cursor: none;
    
}

/* Pages */

.page1,
.page2,.page3,.page4, .page5{
    height: 100vh;
    /* full height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    
}

/* Stacked Layout Media Q */
@media (max-width: 768px) {
  body {
      margin: 0;
      padding: 0;
      overflow-x: hidden; 
  }

  .page1,
  .page2,
  .page3,
  .page4,
  .page5 {
      height: auto; 
      min-height: 100vh; 
      width: 100%; 
      display: flex;
      flex-direction: column; 
  }
}

/*Cursor*/

#cursor {
    width: 50px; 
    height: 50px;
    background-image: url('/data/shop/newcustomcursor.gif'); 
    background-size: cover; /* stretch to cover div */
    position: absolute;
    pointer-events: none; /* no clicks */
    transform: translate(-50%, -50%); /* center */
    z-index: 10001; /* z order */
}

/*page 1*/

.page1 {  display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . item3 item3 item3 ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . item3 item3 item3 ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . item3 item3 item3 ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . item3 item3 item3 ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . item3 item3 item3 ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . . . . ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . item3text item3text item3text ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . . . . ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . . . . ."
      ". item1 item1 item1 item1 item1 . . . . . . item2 item2 item2 item2 item2 item2 . . . . ."
      ". . . . . . . . . . . . item2 item2 item2 item2 item2 item2 . . . . ."
      ". item1text item1text item1text item1text item1text . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . item2text item2text item2text item2text item2text item2text . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .item1 { grid-area: item1; }
  
  .item1text { grid-area: item1text; }
  
  .item2 { grid-area: item2; }
  
  .item2text { grid-area: item2text; }
  
  .item3 { grid-area: item3; }
  
  .item3text { grid-area: item3text; }
  
  .item1, .item1text, .item2, .item2text, .item3, .item3text{
    width: 100%;
    height: 100%;
  }

  .item1 img, .item2 img, .item3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; 
}

.item1:hover img {
    content: url('/data/shop/NDTPhotography-92.jpg');
    transform: scale(1.1);
}

.item2:hover img {
    content: url('/data/shop/NDTPhotography-56.jpg');
    transform: scale(1.1);
}

.item3:hover img {
    content: url('/data/shop/NDTPhotography-22.jpg');
    transform: scale(1.1); 
}
  .item1textsvg, .item2textsvg, .item3textsvg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* Media Query Page 1*/

@media (max-width: 768px) {
  .page1 {
      display: grid;
      grid-template-columns: 1fr; 
      grid-template-rows: auto; 
      grid-template-areas:
          "item1"
          "item1text"
          "item2"
          "item2text"
          "item3"
          "item3text";
      gap: 10px; 
      padding: 10px; 
  }

  .item1, .item1text, .item2, .item2text, .item3, .item3text {
      width: 90%;
      height: auto; 
  }

  .item1 img, .item2 img, .item3 img {
      width: 100%; 
      height: auto; 
      object-fit: cover; 
  }

  .item1textsvg, .item2textsvg, .item3textsvg {
      width: 100%; 
      height: auto;
  }
}


  /*page 2*/


.page2 {  display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . . . . . . . . ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . . . . . . . . ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . . . . . . . . ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". . . . . . . . . . . . . . . item5 item5 item5 item5 item5 item5 item5 ."
      ". item4text item4text item4text item4text item4text item4text item4text item4text item4text item4text item4text . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . item5text item5text item5text item5text item5text item5text item5text ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .item4 { grid-area: item4; }
  
  .item4text { grid-area: item4text; }
  
  .item5 { grid-area: item5; }
  
  .item5text { grid-area: item5text; }

  .item4, .item4text, .item5, .item5text{
    width: 100%;
    height: 100%;
  }

  .item4 img, .item5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
  }


  .item4:hover img {
    content: url('/data/shop/NDTPhotography-22.jpg');
    transform: scale(1.1);
}

  .item5:hover img {
    content: url('/data/shop/NDTPhotography-47.jpg');
    transform: scale(1.1);
}

/* Page 2 Media Query */

@media (max-width: 768px) {
  .page2 {
      display: grid;
      grid-template-columns: 1fr; 
      grid-template-rows: auto; 
      grid-template-areas:
          "item4"
          "item4text"
          "item5"
          "item5text";
      gap: 10px; 
      padding: 10px; 
  }

  .item4, .item4text, .item5, .item5text {
      width: 90%; 
      height: auto; 
  }

  .item4 img, .item5 img {
      width: 100%; 
      height: auto; 
      object-fit: cover; 
  }
}


/*Page 3*/

.page3 {  display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7 item7 item7 item7 . . . . . . ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7 item7 item7 item7 . . . . . . ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7 item7 item7 item7 . . . . . . ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7 item7 item7 item7 . . item8 item8 item8 item8 ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7 item7 item7 item7 . . item8 item8 item8 item8 ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7 item7 item7 item7 . . item8 item8 item8 item8 ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7 item7 item7 item7 . . item8 item8 item8 item8 ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . . . . . . . item8 item8 item8 item8 ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . item7text item7text item7text item7text . . item8 item8 item8 item8 ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . . . . . . . . . . . ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . . . . . . . item8text item8text item8text item8text ."
      ". item6 item6 item6 item6 item6 item6 item6 item6 item6 item6 . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". item6text item6text item6text item6text item6text item6text item6text item6text item6text item6text . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .item6 { grid-area: item6; }
  
  .item6text { grid-area: item6text; }
  
  .item7 { grid-area: item7; }
  
  .item7text { grid-area: item7text; }
  
  .item8 { grid-area: item8; }
  
  .item8text { grid-area: item8text; }
  
  .item6, .item6text, .item7, .item7text, .item8, .item8text {
    width: 100%;
    height: 100%;

  }

  .item6 img, .item7 img, .item8 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
  }

  .item6:hover img {
    content: url('/data/shop/NDTPhotography-27.jpg');
    transform: scale(1.1);
}
  .item7:hover img {
    content: url('/data/shop/NDTPhotography-35.jpg');
    transform: scale(1.1);
}

  .item8:hover img {
    content: url('/data/shop/NDTPhotography-41.jpg');
    transform: scale(1.1);
}

/* Page 3 Media QUery */


@media (max-width: 768px) {
  .page3 {
      display: grid;
      grid-template-columns: 1fr; 
      grid-template-rows: auto; 
      grid-template-areas:
          "item6"
          "item6text"
          "item7"
          "item7text"
          "item8"
          "item8text";
      gap: 10px; 
      padding: 10px; 
  }

  .item6, .item6text, .item7, .item7text, .item8, .item8text {
      width: 90%; 
      height: auto; 
  }

  .item6 img, .item7 img, .item8 img {
      width: 100%; 
      height: auto; 
      object-fit: cover; 
  }
}


  /*page 4*/

  .page4 {
    display: grid; 
    grid-template-columns: repeat(23, 1fr); 
    grid-template-rows: repeat(16, 1fr); 
    gap: 0px 0px; 
    grid-template-areas: 
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10 item10 item10 item10 . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10 item10 item10 item10 . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10 item10 item10 item10 . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10 item10 item10 item10 . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10 item10 item10 item10 . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10 item10 item10 item10 . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10 item10 item10 item10 . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . . . . . . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . item10text item10text item10text item10text . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . . . . . . . ."
      ". . . item9 item9 item9 item9 item9 item9 item9 item9 item9 . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . item9text item9text item9text item9text item9text item9text item9text item9text item9text . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."; 
  }
  
  .item9 { grid-area: item9;
    width: 100%;
    height: 100%;

}
  
  .item9text { grid-area: item9text;

    width: 100%;
    height: 100%;

}
  
  .item10 { grid-area: item10;
    width: 100%;
    height: 100%;
}
  
  .item10text { grid-area: item10text;
    width: 100%;
    height: 100%;
   
}

  .item9 img, .item10 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
  }

  .item9:hover img {
    content: url('/data/shop/NDTPhotography-42.jpg');
    transform: scale(1.1);
}

  .item10:hover img {
    content: url('/data/shop/NDTPhotography-36.jpg');
    transform: scale(1.1);
}
  
/* Page 4 Medai Q */

@media (max-width: 768px) {
  .page4 {
      display: grid;
      grid-template-columns: 1fr; 
      grid-template-rows: auto; 
      grid-template-areas:
          "item9"
          "item9text"
          "item10"
          "item10text";
      gap: 10px; 
      padding: 10px; 
  }

  .item9, .item9text, .item10, .item10text{
      width: 90%; 
      height: auto; 
  }

  .item9 img, .item10 img{
      width: 100%; 
      height: auto; 
      object-fit: cover; 
  }
}



  /*Page 5*/

  .page5 {  display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". item11 item11 item11 item11 item11 . . . . . . . . . . . . . . . . ."
      ". item11 item11 item11 item11 item11 . . . . . . . . . . . . . . . . ."
      ". item11 item11 item11 item11 item11 . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". item11 item11 item11 item11 item11 . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". item11 item11 item11 item11 item11 . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". item11 item11 item11 item11 item11 . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". item11 item11 item11 item11 item11 . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". item11 item11 item11 item11 item11 . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". item11 item11 item11 item11 item11 . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". . . . . . . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". item11text item11text item11text item11text item11text . . . . . . item12 item12 item12 item12 item12 item12 item12 item12 item12 item12 ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . item12text item12text item12text item12text item12text item12text item12text item12text item12text item12text ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .item11 { grid-area: item11;
    width: 100%;
    height: 100%;
    
}
  
  .item11text { grid-area: item11text;
    width: 100%;
    height: 100%;
    
}
  
  .item12 { grid-area: item12;
    width: 100%;
    height: 100%;
    
}
  
  .item12text { grid-area: item12text;
    width: 100%;
    height: 100%;
    
}

.item11 img, .item12 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.item11:hover img {
  content: url('/data/shop/NDTPhotography-04.jpg');
  transform: scale(1.1);
}

.item12:hover img {
  content: url('/data/shop/NDTPhotography-31.jpg');
  transform: scale(1.1);
}

/* Page 5 Media Q */

@media (max-width: 768px) {
  .page5 {
      display: grid;
      grid-template-columns: 1fr; 
      grid-template-rows: auto; 
      grid-template-areas:
          "item11"
          "item11text"
          "item12"
          "item12text";
      gap: 10px; 
      padding: 10px; 
  }

  .item11, .item11text, .item12, .item12text{
      width: 90%; 
      height: auto; 
  }

  .item11 img, .item12 img{
      width: 100%; 
      height: auto; 
      object-fit: cover; 
  }
}