/* Main Body styles */

body {
   font-family: 'arial', sans-serif;
   margin: 0;
   padding: 0;
   background-color: #F2ECE6;
   background-size: 100% 100%;
}


#sand-and-sound {
   background-color: #b74f68;
}
#skybuilders-inc {
   background-color: #eaa259;
}


/* Portfoloio Gallery styles */

.centered-box {
   border: 1px solid #000; /* Border of the box */
   padding: 30px; /* Padding inside the box */
   margin: 0 auto 40px auto; /* Center the box and add bottom margin */
   max-width: 680px; /* Maximum width of the box */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a subtle shadow */
   background-color: #f9f9f9; /* Background color of the box */
}

.centered-box-portfolio {
  border: 1px solid #000; 
  padding: 30px; 
  margin: 0 auto 40px auto;
  max-width: 1080px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
  background-color: #f9f9f9; 
}

.box-two {
   border: 1px solid #000; /* Border of the box */
   padding: 30px; /* Padding inside the box */
   margin: 0 auto 40px auto; /* Center the box and add bottom margin */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a subtle shadow */
   background-color: #f9f9f9; /* Background color of the box */
}

.box-two {
  border: 1px solid #000; 
  padding: 30px; 
  margin: 0 auto 40px auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
  background-color: #f9f9f9; 
}


/* Text styles */


h1, h2, h3, h4, h5, h6 {
   font-family: 'Playfair Display', serif;
}

p {
   font-family: "DM Sans", sans-serif;
   font-weight: 300;
}

.contact-item-sub {
   font-family: "DM Sans", sans-serif;
   font-weight: 300;
}

.thumbnail {
   font-size: 50px;
}

/* Contact page details */

.half-page-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Adjust based on your needs */
}

.contact-item {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-item i {
    margin-right: 10px;
    font-size: 1.5em; /* Adjust icon size */
    color: #333; /* Adjust icon color */
}

.contact-item a {
    text-decoration: none; /* Remove underline */

}

.contact-item a:hover {
    color: #b74f68; /* Add hover effect if desired */
}


/* Navigation styles */

@media (max-width: 600px) {
   .navMenu-container {
       display: none;
   }
   .navMenu-container.w3-show {
       display: block;
   }
}

.social-icons a {
   text-decoration: none;
   padding: 5px;
   font-style: normal; /* Ensures font-style is normal */
}


.top-nav {
   background-color: #F5F2ED;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.top-nav a:hover {
   font-style: italic;
}

.top-nav .social-icons a:hover {
   font-style: normal; /* Ensures font-style remains normal on hover */
   transition: color 0.3s ease;
   color: grey;
}

.w3-padding {
   padding: 8px 8px !important;
}

.navHeading {
   font-size: 20px;
   letter-spacing: 1.2px;
}

/* Mobile Navigation Styling */

.homeNav {
   list-style:none;
 }
.homeNav li{
   display:inline-block; 
   padding:0 7px; 
   position:relative;
 }
 ul li:not(:last-child)::after{
   content:""; 
   border:1px solid #e2e2e2;
   border-width: 1px 1px 0 0;
   position:absolute; 
   right:-3px; 
   top:0; 
   height:100%;
 }

/* Boxed Text styles */

.subHeading {
   width: 50%;
   float: center;
}

hr {
   display: block;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left: auto;
   margin-right: auto;
   border-style: inset;
   border-color: #000;
   width: 80%;
}

.boxText {
font-size: 14px;
font-family: Helvetica, sans-serif;
}

.boxTextHeading {
   font-size: 13px;
   font-family: Helvetica, sans-serif;
   font-weight: 350;
   line-height: 0;
   }


.subText {
   letter-spacing: 3px;
}


ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.centered-text-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%; 
   text-align: center; /* Center text inside the container */
}

.top-line, .bottom-line {
   display: block;
}

.centered-text {
   max-width: 80%;
}

.centered-box {
    border: 1px solid #000; /* Border of the box */
    padding: 30px; /* Padding inside the box */
    margin: 0 auto 40px auto; /* Center the box and add bottom margin */
    max-width: 800px; /* Maximum width of the box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a subtle shadow */
    background-color: #f9f9f9; /* Background color of the box */
}

.centered-box-portfolio {
   border: 1px solid #000; 
   padding: 30px; 

   margin: 0 auto 40px auto; 
   box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
   background-color: #f9f9f9; 
}

.centered-box-about-page  {
   border: 1px solid #000; 
   padding: 30px; 
   margin: 0 auto 40px auto; 
   max-width: 500px; 
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   background-color: #f9f9f9;
}



.centered-container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.centered-text-container {
   text-align: center;
   margin-top: 20px;
}

.sub-text {
   letter-spacing: 3px;
}

 /* Homepage Image Overlay */

 .ImgContainer {
   position: relative;
   width: 100%;
 }
 
 .image {
   display: block;
   width: 100%;
   height: auto;
 }
 
 .overlay {
   position: absolute; 
   bottom: 0; 
   background: rgb(0, 0, 0);
   background: rgba(0, 0, 0, 0.8); /* Black see-through */
   color: #f1f1f1; 
   width: 100%;
   transition: .5s ease;
   opacity:0;
   color: white;
   font-size: 15px;
   padding: 10px;
   text-align: center;
 }
 
 .ImgContainer:hover .overlay {
   opacity: 1;
 }

/* Footer styles */

.footer {
   background-color: #000;
   color: #fff;
   padding: 20px 0;
   width: 100%;
   font-size: 11px;
}

.footer .social-icons {

   padding: 20px;
}

.footer .social-icons a {
   margin: 0 10px;
   color: #fff;
   font-size: 20px;
   transition: color 0.3s ease;
   text-decoration: none;
}

.footer .social-icons a:hover {
   color: #aaa;
}

.signature {
   font-size: 11px;
   line-height: 12px;
}

/* Contact Page Image Styling */

.half-page-container {
   display: flex;
   flex-wrap: wrap;
   height: 100vh;
}

.half-page-image {
   flex: 1;
   background-size: cover;
   background-position: center;
   min-height: 50vh;
}

.half-page-content {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   min-height: 50vh;
   box-sizing: border-box; /* Ensures padding is included in the width and height calculations */
}

@media (max-width: 768px) {
   .half-page-container {
       flex-direction: column;
   }
   .half-page-image,
   .half-page-content {
       flex: none;
       width: 100%;
       height: auto;
   }
}

/* contact Form Styling */

.hrcontactForm {
   display: block;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left: auto;
   margin-right: auto;
   border-style: inset;
   border-color: #eee;
   width: 100%;
}

/* Style inputs with type="text", select elements and text areas */
input[type=text], select, textarea {
   width: 100%; 
   padding: 10px; 
   border: 1px solid #ccc; 
   border-radius: 4px; 
   box-sizing: border-box;
   margin-top: 6px; 
   margin-bottom: 16px; 
   resize: vertical;
 }
 
 input[type=email], select, textarea input[type=email]{
   border: 1px solid #ccc; /* Gray border */
   padding: 10px;
 }
 

 /* Adds a background color and some padding around the form */

 .FormContainer {
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
 }

 /* Email Icon */

 .email-link {
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: black; 
   margin: 0; 
}

.email-link i {
   margin-right: 8px;
}


/* Case Studies - Modal Images */
      
.modal-trigger {
   border-radius: 5px;
   cursor: pointer;
   transition: 0.3s;
}

.modal-trigger:hover {
   opacity: 0.7;
}

/* The Modal (background) */

.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

   /* Modal Content (Image) */ 
.modal-content {
    margin: auto;
    display: block;
    width: 60%;
    max-width: 500px;
}


   /* Add Animation - Zoom in the Modal */
   .modal-content, #caption {
   animation-name: zoom;
   animation-duration: 0.6s;
}

   @keyframes zoom {
   from {transform:scale(0)}
   to {transform:scale(1)}
}

   /* The Close Button */
   .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
}

   .close:hover,
   .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
}

   /* 100% Image Width on Smaller Screens */
     @media only screen and (max-width: 700px) {
      .modal-content {
      width: 100%;
   }
}


   /* Black Out Image Hover */
.image-container {
   position: relative;
   display: inline-block;
   width: 100%;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #000;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.1s, background-color 0.1s;
   border-radius: 6px;  /* Slightly rounded edges */
}

.image-container:hover .overlay {
   opacity: 1;
   background-color: #af3749;
}

.image-container img {
   width: 100%;
   display: block;
}



/********PROJECT PAGE*********/


@keyframes header {
   0% {opacity: 1;}
   50% {opacity: 1;}
   100% {opacity: 0; z-index: -9;}
}

@keyframes arrow {
   0% {opacity: 0;}
   25% {opacity: 1;}
   50% {opacity: 0.5;}
   75% {opacity: 1;}
   100% {opacity: 0;}
}

main img {
   max-width: 100%;
   max-height: 100%;
}

.imgblock {
   position: relative;
}



#leftbutton {
   position: fixed;
   top: 50%;
   left: 10px;
}

#rightbutton {
   position: fixed;
   top: 50%;
   right: 10px;
}

#content {
   margin-top: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
/*    border: 1px solid red;*/
}

#imgdisplay {
   width: 100%;
   display: block;
   padding: 0px;
   margin: auto;
   flex-flow: column;
}

#imgbox {
   display: flex;
   flex-flow: column;
   align-items: center;
   padding: 0 30px;
}

#imgbox p {
       text-align: center;
       margin: 8% 8%;
   }

#imgbox img {
   margin: 10px 0;
}

#description {
   width: 100%;
   padding: 30px;
   flex-flow: column;
   margin-top: 5%;
/*    border: 1px solid red;   */
}


   
  /********PROJECT PAGE*********/
   
   
   #pageswitchers img {
       display: block;
/*        max-height: 70px;*/
   }   

   #pageswitchers p {
       display: block;
/*        font-size: 50px;*/
   }

   #imgbox {
   padding: 0;  
   }
   
   #imgdisplay {
   width: 82%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   padding: 20px;
/*    margin-bottom: 50px;*/
   }     
   
   #imgdisplay img {
   width: 100%;
/*    max-width: 800px;*/
   }
   
   #ptext1 {
       position: relative;
       opacity: 1;
   }
   
   #description {
   display: flex;
   flex-flow: column;
   }
   
   #description h2 {
   font-size: 2.5rem;
   }
   
   #leftinfo {
   width: 30%;
   }


/************************************************************* DESKTOP VERSION **********************************************************/
   
   /********PROJECT PAGE*********/
/*
   #pageswitchers p {
       font-size: 60px;
   }
*/
   
   #pageswitchers img {
       display: block;
       max-height: 120px;
       margin: 30px;
   }
   
   #leftbutton {
   top: 50%;
   left: 70px;
   }

   #rightbutton {
   top: 50%;
   right: 70px;
}
   
   #description {
   width: 90%;
   flex-flow: row;
   color: #000;
   }
   
   #description h2 {
   font-size: 2.5rem;
   }
   
   #leftinfo {
   width: 30%;
   }


   #leftinfo h1 {
      margin-bottom: 10px; /* Adjust the spacing as needed */
  }
  
  #leftinfo p.boxTextHeading {
      margin-top: 20px; /* Adjust the spacing as needed */
      margin-bottom: 5px; /* Adjust the spacing as needed */
  }
  
  #leftinfo p.boxText {
      margin-top: 10px; /* Adjust the spacing as needed */
      margin-bottom: 10px; /* Adjust the spacing as needed */
  }


  .HeadingHeight {
   padding-bottom: 10px;
  }
   
   #rightinfo {
   width: 65%;  
   margin-left: 80px;
   margin-top: 0px;
   }
   
   #imgbox {
   width: 90%;
   }
   
   #imgdisplay {
/*    border: 1px solid red;*/
   max-width: 1400px;
   display: flex;
   }


   #description {
      border: 1px solid #000; /* Adjust the border width and color as needed */
      padding: 40px; /* Add padding inside the box */
      margin: 20px; /* Add margin outside the box */
      border-radius: 1px; /* Optional: add rounded corners */
      background-color: #f9f9f9; /* Optional: add a background color */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
  }

/* Portfolio Page - Modal Images */
      
.modal-trigger {
   border-radius: 5px;
   cursor: pointer;
   transition: 0.3s;
}

.modal-trigger:hover {
   opacity: 0.7;
}

/* The Modal (background) */

.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

   /* Modal Content (Image) */ 
   .modal-content {
   margin: auto;
   display: block;
   width: 100%; /* Adjusted width */
   max-width: 500px; /* Smaller max width */
}


   /* Add Animation - Zoom in the Modal */
   .modal-content, #caption {
   animation-name: zoom;
   animation-duration: 0.6s;
}

   @keyframes zoom {
   from {transform:scale(0)}
   to {transform:scale(1)}
}

   /* The Close Button */
   .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
}

   .close:hover,
   .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
}

   /* 100% Image Width on Smaller Screens */
     @media only screen and (max-width: 700px) {
      .modal-content {
      width: 100%;
   }
}