@import url(reset.css);

:root {
    /* 2.1 Colours */
    --white-c: #ffffff;
    --lightgray-c:#E2E2E2;
    --medgray-c:#A2A2A2;
    --gray-c:#707070;
    --darkgray-c:#464545;
    --blue:#06aed5;
    --darkblue:#086788;
    --yellow:#f0c808;
    --cream:#fff1d0;
    --red:#dd1c1a;
    --green:#B0D300;


    /* 2.2 Font Sizes */
    --size-0:.4rem;
    --size-1:.8rem; /* 12 pt */
    --size-2:1rem; /* 14 pt */
    --size-3:1.2rem; /* 18 pt */
    --size-4:1.4rem; /* 22 pt */
    --size-5:1.8rem; /*24 pt */

    /* 2.3 Font Families */
    --body-f:'Helvetica Neue', Tahoma, sans-serif;
   /* font faces*/
}
@font-face {
  font-family: 'raleway-extrabold';
  src: url('../fonts/Raleway/Raleway-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'raleway-bold';
  src: url('../fonts/Raleway/Raleway-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'raleway-extralight';
  src: url('../fonts/Raleway/Raleway-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'playfair-italic';
  src: url('../fonts/playfair-display/PlayfairDisplay-Italic.otf') format('opentype');
}
@font-face {
  font-family: 'raleway-regular';
  src: url('../fonts/Raleway/Raleway-Regular.ttf') format('truetype');
}
  
  /* 3.1 General Selectors */
  body {
    font-family: var(--body-f);
}
   /* 3.1.1 Headings Styling */
   h1, h2 {
       font-size: var(--size-3); 
       font-weight: bold;
       letter-spacing: .05em;
       color: var(--white-c);
       font-family: 'raleway-extralight';
     
   }

   h2 {
       color: yellow;
       padding: 0;
   }
   
   h4{
    font-size: var(--size-1);
    font-weight: bold;
    letter-spacing: .05em;
    color: var(--white-c);
 
   }
   span{
    font-size: var(--size-5);
    font-family: var(--body-f);
   }
   .sub-heading{
    font-size: var(--size-2);
   }

   nav a{
    color: var(--font-black);
    font-family: 'raleway-bold';
    font-weight: 700;
    font-style: normal;
  }

   a.open,
  a.open:link,
  a.open:visited {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      text-transform: uppercase;
      text-decoration: none;
      padding: 2%;
      z-index: 1;
      color: var(--white-c);
      font-size:  35pt;
  }
  
  a.close,
  a.close:link,
  a.close:visited {
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      text-transform: uppercase;
      text-decoration: none;
      padding: 2%;
      z-index: 3;
      color: var(--white-c);
      font-size:  35pt;;
  }
  
  .mobile-nav {
      display: none;
      z-index: 2;
      position: fixed;
      top:0;
      width: 100%;
      height: 100%;
      
  }
  
  .mobile-nav a,
  .mobile-nav a:link,
  .mobile-nav a:visited{
      display: block;
      text-align: center;
      font-weight: bold;
      text-transform: uppercase;
      text-decoration: none;  
      padding: 1em;
      color: var(--cream);
      font-size:20pt;
  }
  .mobile-nav li{
    background-color: var(--blue);
    padding:60pt;
  }
  .mobile-nav li:hover{
    background-color: var(--blue);
  }


   /* 3.2 IDs & Classes */
   .main-header {
    position: absolute;
    top: 3%;
  }
  
  .main-header div {
    display: inline-block;
  }
  
  .main-header h1, .main-header h4 {
    display: inline;
    margin: 0;
  }
  .header-hero-layout{
    padding: 0;
  }
  
   .home-hero-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 0;
   }

   .home-hero-link-left a,
   .home-hero-link-left a:link,
   .home-hero-link-left a:visited {
    display: block;
    background-image: url(../images/HOME/images/home-banner-img-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    padding-top: 40vh;
    padding-bottom: 15vh;
    padding-left: 5vw;
    color: yellow;
    transition: all ease 1s;
    font-size: 10vh;
    font-family: 'raleway-extrabold';

   }

  
  .home-hero-link-left a span,
   .home-hero-link-left a:link span,
   .home-hero-link-left a:visited span {
    margin-left: -30vw;
   }
 

   .home-hero-link-left a:hover,
   .home-hero-link-left a:visited,
   .home-hero-link-right a:hover,
   .home-hero-link-right a:visited {
    background-color:var(--blue);
    background-blend-mode: multiply;
   }

   .home-hero-link-left a:hover span,
   .home-hero-link-left a:active span {
    margin-left: 0;
   }
   
   .home-hero-link-right a,
   .home-hero-link-right a:link,
   .home-hero-link-right a:visited {
    display: block;
    background-image: url(../images/HOME/images/home-banner-img-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    padding-top: 40vh;
    padding-bottom: 15vh;
    padding-right: 5vw;
    color: yellow;
    text-align: right;
    transition: all ease 1s;
    font-size: 10vh;
    font-family: 'raleway-extrabold';
   }

   .home-hero-link-right a span,
   .home-hero-link-right a:link span,
   .home-hero-link-right a:visited span {
    margin-right: -30vw;
   
  }

   .home-hero-link-right a:hover span,
   .home-hero-link-right a:active span {
    margin-right: 0;
   }

   .home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 250px); 
    gap: 0px; 
  }
  
  .home-grid img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: grayscale(100%);
  }
  .image-container-top1,
  .image-container-top2,
  .image-container-top3,
  .image-container-top4,
  .image-container-bottom1,
  .image-container-bottom2,
  .image-container-bottom3,
  .image-container-bottom4 {
    position: relative;
  }
  .image-container-top1,
  .image-container-bottom4{
    background-color: var(--yellow);
    opacity: 100%;
    transition: ease-in-out .5s;
  }
  .image-container-top1 img:hover,
  .image-container-bottom4 img:hover{
    mix-blend-mode: multiply;
    transition: ease-in-out.5s;
  }

  .image-container-top2,
  .image-container-bottom3{
    background-color: var(--red);
    opacity: 100%;
    transition: ease-in-out .5s;
  }
  .image-container-top2 img:hover,
  .image-container-bottom3 img:hover{
    mix-blend-mode: multiply;
    transition: ease-in-out.5s;
  }
  .image-container-top3,
  .image-container-bottom2{
    background-color: var(--green);
    opacity: 100%;
    transition: ease-in-out .5s;
  }
  .image-container-top3 img:hover,
  .image-container-bottom2 img:hover{
    mix-blend-mode: multiply;
    transition: ease-in-out.5s;
  }
  .image-container-top4,
  .image-container-bottom1{
    background-color: var(--blue);
    opacity: 100%;
    transition: ease-in-out .5s;
  }
  .image-container-top4 img:hover,
  .image-container-bottom1 img:hover{
    mix-blend-mode: multiply;
    transition: ease-in-out.5s;
  }

  .center-text {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white-c);
    font-size: 3vw;
    text-align: center;
    font-family: 'raleway-extrabold';
  }
  
  
  .image-container-top1:hover .center-text,
  .image-container-top2:hover .center-text,
  .image-container-top3:hover .center-text,
  .image-container-top4:hover .center-text,
  .image-container-bottom1:hover .center-text,
  .image-container-bottom2:hover .center-text,
  .image-container-bottom3:hover .center-text,
  .image-container-bottom4:hover .center-text {
    display: block;
  }
  
  footer {
    display: flex;
    font-family: var(--body-f);
    color: var(--white-c);
  }
  
  .blue-section {
    background-color:var(--blue);
    flex: 2;
  }
  .blue-section p{
    text-align: left;
    display: inline-block;
    margin-top: 40px;
    margin-left: 25%;
    font-size: var(--size-3);
    padding: 20px;
  }
  .centered{
    margin-left: 50%;
  }

  .green-section {
    background-color:var(--green) ;
    flex: 1;
  }
  .green-section p{
    text-align: right;
    padding: 20px;
    margin-right: 25%;
  }
  .t-square{
    background-color: var(--cream);
    padding: 50px;
    text-align: center;
    margin-top: 0%;
  }
  .t-square p {
    max-width: 550px; 
   margin: auto;
   font-family: 'playfair-italic';
  }
  
  .t-square h3{
    color: var(--green);
  }
  .t-square p{
    color: var(--darkblue);
  }
  
/* work html*/
.bg-blend {
        background-image: url(../images/WORK/work-1.jpg);
        background-color: var(--yellow);
        background-blend-mode: multiply;
        background-size: 100%; 
        background-position: top; 
        padding-top: 40vh;
        padding-bottom: 15vh;
        padding-left: 5vw;
        
    }
      
      .bottom-left-text {
        position: absolute;
        top: 42vh;
        left: 10px;
        font-size: 12vh;
        color:var(--cream);
        text-transform: uppercase;
        font-weight: bold;
        margin: 0;
        white-space: nowrap;
      }
      .working-area{
        padding: 10px;
      }
      .row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 8px 4px;
    }
    
    .column {
        padding: 0 4px;
    }
    
    .column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
        transition: .5s;
    }

    /*about page */
    .bg-blend-about{
      background-image: url(../images/ABOUT-US/about-1.jpg);
      background-color: var(--green);
      background-blend-mode: multiply;
      background-size: 100%; 
      background-position: center; 
      padding-top: 60vh;
      padding-bottom: 15vh;
      padding-left: 5vw;
      
  }
  .bottom-left-text-about {
    position: absolute;
    top: 60vh;
    left: 10px;
    font-size: 12vh;
    color:var(--cream);
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    white-space: nowrap; 
  }
  .grid-item.yellow-box {
    background-color:var(--yellow);
    position: relative; 
}

.grid-item.yellow-box p {
    color: white; 
    font-family:'raleway-extrabold' ;
    font-size: 5vh;
    position: absolute;
    bottom: 10%; 
    left: 50%; 
    transform: translateX(-50%); 
    margin: 0; 
    padding: 10px; 
}
.dctp{
  text-align: right;
}
.wwtw{
  text-align: left;
}
.grid-item img {
    width: 100%;
    height: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

}

.grid-item {
    background-color: #f0f0f0; 
    position: relative; 
}

/* contact page*/
.bg-blend-contact{
  background-image: url(../images/CONTACT/negative-space-matt-jones-thank-you-sign.jpg);
  background-color: var(--darkblue);
  background-blend-mode: multiply;
  background-size:140%; 
  background-position:top ; 
  padding-top: 60vh;
  padding-bottom: 15vh;
  padding-left: 5vw;
}
.bottom-left-text-contact {
  position: absolute;
  top: 61vh;
  left: 10px;
  font-size: 12vh;
  color:var(--cream);
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
  white-space: nowrap; 
}
.image-section {
  display: flex;
  justify-content: center; 
  background-color: var(--cream);
}

.image-wrapper {
  padding: 10px;
}

.image-wrapper img {
  max-width: 100%;
  height: 100%; 
}
.map-section {
  display: flex;
  justify-content: center;
  position: relative; 
  background-color: var(--cream);
}

.map-wrapper {
  position: relative;
  margin: 40px 120px; 
}
iframe{
  width: 100%;
}

.divider {
  position: absolute;
  height: 80%;
  width: 20px;
  background-color:var(--darkblue);
  left: calc(50% - 1px);
}

.address {
  color:var(--darkblue);
  text-align: center;
  margin-top: 10px;
  font-size: 30pt;
  text-align: left;
  font-family: 'raleway-regular';
  font-weight: bold;
}
.icon-wrapper {
  display: flex;
  justify-content:left;
  margin-top: 20px; 
}

.icon-wrapper i {
  font-size:100px;
  margin: 0 10px; 
  color: var(--darkblue);
 
}


/* media queries */

/* tablet view */

@media only screen and (max-width: 768px) {
  /* Styling for links in the mobile navigation menu */
  .mobile-nav a,
  .mobile-nav a:link,
  .mobile-nav a:visited {
    padding: 2em;
    font-size: 20pt;
  }

  /* Styling for list items in the mobile navigation menu */
  .mobile-nav li {
    padding-top: 40pt;
    padding-bottom: 40pt;
  }

  /* Styling for the left link in the home hero section */
  .home-hero-link-left a span,
  .home-hero-link-left a:link span,
  .home-hero-link-left a:visited span {
    margin-left: -2vw;
  }

  /* Styling for the right link in the home hero section */
  .home-hero-link-right a span,
  .home-hero-link-right a:link span,
  .home-hero-link-right a:visited span {
    margin-right: -2vw;
  }

  /* Styling for paragraph inside yellow box */
  .grid-item.yellow-box p {   
    font-size: 3vh;
    position: absolute;
    bottom: 10%; 
    left: 50%; 
    transform: translateX(-50%); 
    margin: 0; 
    padding: 10px; 
  }

  /* Styling for the center text */
  .center-text {
    font-size: 3vh;
  }

  /* Margin for the map wrapper */
  .map-wrapper {
    margin: 6vh 8vh;
  }

  /* Styling for iframe */
  iframe {
    width: 100%;
    height: 80%;
  }

  /* Styling for the divider */
  .divider {
    height: 80%;
    width: 10px;
  }

  /* Styling for address */
  .address {
    margin-bottom: 0px;
    margin-top: 1vh;
    font-size: 2vh;
  }

  /* Styling for icon wrapper */
  .icon-wrapper {
    margin-top: 1px;
    margin-bottom: 2vh;
  }

  /* Styling for icons */
  .icon-wrapper i {
    font-size:3vh;
    margin: 1vh 1vh;
  }

  /* Styling for text on about and contact page */
  .bottom-left-text-about,
  .bottom-left-text-contact {
    font-size: 6vh;
    top: 67vh;
  }

  /* Styling for main heading */
  .bottom-left-text {
    top: 42vh;
    left: 10px;
    font-size: 12vh;
  }
  
  /* Styling for blue section paragraph */
  .blue-section p{
    margin-top: 20px;
    font-size: var(--size-2);
    padding: 10px;
    margin-left: 10vw; 
  }
  
  /* Styling for centered */
  .centered{
    margin-left: 25%;
  }

  /* Styling for green section paragraph */
  .green-section p{
    text-align: right;
    margin-right: 10px;
  }
}

/* mobile view */

@media only screen and (max-width:400px)  {

  .home-hero-link-left h2 span{
    font-size: var(--size-3);
  }
  .home-hero-link-right h2 span{
    font-size: var(--size-3);
  }

  .main-header h1 {
    text-align: center;
    padding-left: 8px;
}

.main-header .sub-heading {
    display: block;
    font-size: var(--size-2); 
    letter-spacing: .05em;
    padding-left: 8px;
   }
   a.open,
   a.open:link,
   a.open:visited {
       display: block;
       position: absolute;
       top: 3vh;
       right: 5vw;
       text-transform: uppercase;
       text-decoration: none;
       padding: 2%;
       z-index: 1;
       color: var(--white-c);
       font-size:20pt;;
   }
   
   a.close,
   a.close:link,
   a.close:visited {
       display: block;
       position: fixed;
       top: 3vh;
       right: 5vw;
       text-transform: uppercase;
       text-decoration: none;
       padding: 2%;
       z-index: 3;
       color: var(--white-c);
       font-size:  20pt;;
   }
   
   .mobile-nav {
       display: none;
       z-index: 2;
       position: fixed;
       top:0;
       width: 97%;
       height: 100%;
       
   }
   
   .mobile-nav a,
   .mobile-nav a:link,
   .mobile-nav a:visited{
       display: block;
       text-align: center;
       font-weight: bold;
       text-transform: uppercase;
       text-decoration: none;  
       padding: 1em;
       color: var(--cream);
       font-size:15pt;
   }
   .mobile-nav li{
     background-color: var(--blue);
     padding:30pt;
   }
   .mobile-nav li:hover{
     background-color: var(--blue);
   }
   .home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(4, auto); /* Adjust rows as needed */
    gap: 0px;
}

.home-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}
.image-container-top1,
  .image-container-bottom4{
    background-color: var(--yellow);
     mix-blend-mode: multiply;
  } 
 
  .image-container-top1:hover .center-text,
  .image-container-top2:hover .center-text,
  .image-container-top3:hover .center-text,
  .image-container-top4:hover .center-text,
  .image-container-bottom1:hover .center-text,
  .image-container-bottom2:hover .center-text,
  .image-container-bottom3:hover .center-text,
  .image-container-bottom4:hover .center-text {
    display: block;
  }
  .bottom-left-text-about,
  .bottom-left-text-contact {
    font-size:23pt;
    top: 69vh;
    left: 5px;
  }

  .bottom-left-text {
    top: 47vh;
    left: 10px;
    font-size: 40pt;
  }
  .bg-blend-about{
    background-image: url(../images/ABOUT-US/about-1.jpg);
    background-color: var(--green);
    background-blend-mode: multiply;
    background-size: 200%; 
    background-position: center; 
    padding-top: 60vh;
    padding-bottom: 15vh;
    padding-left: 0vw;
  }
  .working-area {
    overflow-y: auto; /* Add vertical scroll */
    height: 40vh; /* Set a fixed height to enable scrolling */
}

.row {
    display: grid;
    grid-template-columns: 1fr; /* One column */
    gap: 8px;
    padding: 10px 4px;
}

.column {
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    max-width: 100%; /* Prevent image overflow */
    transition: .5s;
}
.map-wrapper {
  margin: 60px 40px;
}

iframe {
  width: 90%;
  height: 50%;
}

.divider {
  height: 90%;
  width: 10px;
}

.address {
  margin-bottom: 0px;
  margin-top: 10px;
  font-size: 10pt;
}

.icon-wrapper {
  margin-top: 1px;
  margin-bottom: 20px;
}

.icon-wrapper i {
  font-size: 3vh;
  margin: 10px 10px;
}
.grid-item.yellow-box p {
  color: white; 
  font-family:'raleway-extrabold' ;
  font-size: 20px;
  position: absolute;
  bottom: 10%; 
  left: 50%; 
  transform: translateX(-50%); 
  margin: 0; 
  padding: 10px; 
}


.blue-section p{

  text-align: left;
  margin-left: 10px;
  font-size: var(--size-1);
  padding: 0px;
}
.centered{
  margin-left: 5%;
}

.green-section {
  background-color:var(--green) ;
  flex: 1;
}
.green-section p{
  text-align: right;
  margin-right: 10px;
  font-size: var(--size-1);
  padding: 15px;
}
.bg-blend{  
background-color: var(--yellow);
background-blend-mode: multiply;
background-size: 100%; 
}
}