@font-face {
    font-family:go-medium;
    src: url(../fonts/GothamBook.ttf);
  }

  @font-face {
    font-family:go-light;
    src: url(../fonts/Gotham-Light.otf);
  }

  @font-face {
    font-family:p-title;
    src: url(../fonts/Alexandria-Bold.ttf);
  }

  @font-face {
    font-family:b-title;
    src: url(../fonts/Alexandria-Black.ttf);
  }





body{
    background-color: black;
}


  .main-menu{
    position: fixed;
    right: -320px;

    height: 100vh;
    min-width: 320px;

    font-family: go-medium;
    font-size: 24px;
    color: black;
    background-color: #FFFFFF;
    height: 100vh;
    border: red 0.5px;
    z-index: 10;
  }

  .menu-list{
    padding-left: 20px;
    margin-top: 70px;
  }

  .menu-link{
    width: 200px;
    text-decoration: none;
    padding-top: 60px;
    border-bottom: 0.5px solid black; 
    padding-bottom: 2px;
    letter-spacing: -1px;
    font-weight: 100;

    user-select: none;
    cursor: pointer;
  }


  .footer{
    
    background-color: #00837b;
    padding-bottom: 70px;  
    display: flex;
    flex-flow: wrap;
    align-items: flex-end;
    justify-content: space-around; 

  }

  .footer .column{
          
    min-width: 200px;
    padding-top: 30px;
    

  }

  

  .footer .link{
    
    color:white;
    padding-top:15px;
    border-bottom: 0.5px solid white; 
    padding-bottom: 10px;
    font-family: go-medium;
    font-size: 20px;
    font-weight: 100;
    user-select: none;

    cursor: pointer;
  }

  .footer .link2{
    
    color:black;
    padding-top: 15px;
    border-bottom: 0.5px solid #00837b; 
    padding-bottom: 10px;
    font-family: go-medium;
    font-size: 20px;
    font-weight: 100;
    user-select: none;

    cursor: pointer;
  }

  .footer hr {
    
    width: calc(100vw - 40px); /* Subtract 20px from each side */
    border: none;
    border-top: 0.5px solid white; /* Adjust thickness and color */
    
  }


  .footer .container {
    width: calc(100vw - 40px); /* Adjust width based on your requirements */
    display: flex;
    justify-content: space-between;
    margin: 0 20px; /* 20px margin on each side */
    padding-bottom: 20px;
}

.footer .left {
    flex: 0 0 auto;
    align-self: center;
}

.footer .center {

  font-family: go-light;
  font-size: 10px;
  letter-spacing: 2px;
  vertical-align: bottom;
  /* max-width: 150px; */
  color: white;
  text-align: center;
    
}


.footer .center2 {

  font-family: go-light;
  font-size: 10px;
  letter-spacing: 2px;
  vertical-align: bottom;
  /* max-width: 150px; */
  color: black;
  text-align: center;
  
}
.footer .right {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.footer .svg-container {
    margin-left: 10px; 
}


.footer .location{
    padding-top: 12px;
    color: white;
    font-family: b-title;
    font-size: 20px;
}

.footer .location2{
  padding-top: 12px;
  color: black;
  font-family: b-title;
  font-size: 20px;
}


.footer .location-details{
    font-family: go-light;
    font-size: 9px;
    color: white;
    letter-spacing: 1.5px;
}

.footer .location-details2{
  font-family: go-light;
  font-size: 9px;
  color: black;
  letter-spacing: 1.5px;
}


  /*---------  inner pages styles --------*/

.content-frame{
    padding-top:100px;
    padding-left: 250px;
    padding-bottom: 30px;
    padding-right: 30px;

    min-height: calc(100vh - 350px);
    position: relative;
    font-family: go-light;

}


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

    .content-frame{
        padding-left: 40px;
    }

} 

.left-body{
    padding-left:50px;
    width: 400px; 
    
    
    background-image: url('../assets/svg/pattern.svg'); 
    background-position:bottom;
    background-repeat: no-repeat ;
}

.right-body{
    flex-grow: 1;
}


  .page-title{
    font-family: b-title;
    font-size: 62px;
    color:black;
  }

  .page-text{
    padding-top: 50px;
    font-family: go-light;
    font-size: 18px;
    color:black;
 
  }



/* -----------------works page -------------*/
  
  .grid {
    display: grid;
    grid-template-columns: 50vw 50vw;
    width: 100vw;
  }
  
  .grid-item {
    height: 350px;
    min-width: 250px;
    position: relative;
    overflow: hidden;
  }
  
  .item-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .media-works{
    width:100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  @media (max-width: 600px) {
    
    .grid {
      grid-template-columns: 100%;
    }

    .left-side{
      padding-left: 30px;    
    }

  }


  .item-content .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
  }
  
  .item-content:hover .overlay {
    display: block;
  }
  
  .info {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    /* text-align: center; */
    z-index: 2;
    color: white;
  }
  
  .logo {
    width: 50px; /* Set your logo width */
    height: auto;
    display: inline-block;
    /* vertical-align: middle; */
    margin-right: 5px; /* Adjust spacing */
  }
  
  .project-title {

    font-family: p-title;
    font-size: 18px;        
    /* position:absolute; 
    top:35%;
    right:0px;  */
    color:white;    
    padding-top: 12px;
  }
  

  /*---------  Contact Information -------------*/


  .contact-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
  }


.container-contact {
    display: flex;
    flex-wrap: wrap;
    padding: 0px !important;    
}

.c-media {
  min-height: calc(100vh - 490px);
}

.contact-label{
    position: absolute;
    
    font-family: p-title;
    font-size: 30px;
    color:white;
    text-align: center;
    padding-left: 20px;

    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);

    user-select: none;

}

/* .contact-box:hover .overlay {
    display: block;
  }
 */

.contact-box {
    position: relative;
    width: 33.3333%; 
    
}

.contact-sheet{
    overflow: hidden; 
    display:flex; 
    flex-flow: row; 
    width:100%;
    height:0px;
    position: relative;
}

.close-sheet-btn{
    position: absolute;
    top:30px;
    right:30px;

    z-index: 4;
}

.sheet-info{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%);
}

.sheet-info a{
  color:white;
  
}

.place-label{
    color:white; 
    font-size: 11px;
    font-family:go-light;
}

.display-location{
    font-family: b-title; 
    color:white; 
    font-size: 36px;
}

.contact-details{
    color:white; 
    font-size: 14px ;
    font-family:go-light;
}


.contact-left-sheet{
    height:600px; 
    width: 50%; 
    min-width: 300px; 
    background-image: url('../assets/contact/beirut.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
}

.contact-right-sheet{
    height:600px; 
    width: 50%; 
    min-width: 300px; 
    background-color: #f0f1f3
}

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

    .contact-box {
        width: 100%; 
    }

    .contact-sheet {        
        flex-flow: column;
    }

    .contact-left-sheet{
        width: 100%;
    }

    .contact-right-sheet{
        width: 100%;
    }

} 


/* Form styles */
.form-container{
    padding: 25px;
    padding-top: 90px;
}

.form-group {
    margin-bottom: 20px;
}

/* Updated form styles */

.form-input {

    text-transform: uppercase;
    font-family: go-light;

    width: calc(100% - 16px);
    padding: 8px;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
    border-bottom: 1px solid #CCCCCC;
}

.form-input::placeholder {
    color: #333333;
    font-family: 'go-light', sans-serif;
}

.submit-btn {
    background-color: #2a7d82;
    color: white;
    width: 120px;
    padding: 12px;
    border: none;
    text-transform: uppercase;
    font-family: go-light;
    margin-top: 20px; /* Add margin-top to the submit button */
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; /* Add margin between rows */
}

.form-field {
    flex: 1; /* Make each field take up equal space within a row */
    margin-right: 10px; /* Add spacing between fields */
}