/*01 intro*/

.company-img {
    width: 492px;
    height: 345px;
    position: relative;
    top: -258px;
    left: 818px;
    z-index: 22;
}

/*end of 01 intro*/



/*02 Two*/

.talkies2 {
    position: relative;
    top: 193px;
    width: 68%;
    left: 8%;
    color: #c89615;
    z-index: 2;
 }

  .brief-container2 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    height: 90%;
    position: relative;
    top: 35px;
    left: -7%;
  }

.brief-container2 p {
    font-size: 18px;
}
  
  .image-box2, .text-box2 {
    flex: 1; /* Both boxes will take up equal space */
    max-width: 50%; /* Each box will take up half of the container's width */
  }
  
  .image-box2 img {
    width: 200%;
    display: block;
    height: 60%;
    opacity: 0.9;
    border: 4px solid #000000;
  }
  

 .download-container2 {
    position: relative;
    top: 740px;
    left: 605px;
 }

.download-container2 .fa {
    color: rgb(255, 255, 255);
    margin-left: 8px;
}
  
  .pdf-link2 {
    color: #0f33ff;
    text-decoration: none; 
  }

  .pdf-link2:hover {
    color: #c89615;
    
  }
  
  .download-link2 {
    color: #c89615;
    text-decoration: none; 
    margin-left: 14px; 
  }

  .image-box2, .text-box2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }



.two .intro--options {
    position: relative;
    top: 362px;
    text-align: center;
    width: 624px;
    left: 3%;
}

.two .intro--options h3 {
    color: #c89615;
}

.project-title2 {
    position: relative;
    top: -308px;
    left: 19px;
    width: 81%;
    z-index: 5;
}

.project-title2 h1 {
    color: #c89615;
}

.project-title2  p {
    color: #fff;
}

/*end of 02 Two*/
  


  
/*03 three*/

.talkies3 {
    position: relative;
    top: 65px;
    width: 68%;
    left: 8%;
    color: #c89615;
    z-index: 2;
 }

 .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 93px;
    left: -65px;
    width: 100%;
  }
  
 .horizontal-image {
    /* max-width: 50%; */
    /* height: auto; */
    margin: 10px;
    height: 511px;
    width: 1002px;
    border: 4px solid #000000;
}

.pdf-button-container {
    display: flex;
    flex-direction: row;
    padding: 20px;
    position: relative;
    top: 85px;
    left:-1%;
    width: 100%;
}

.pdf-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    background-color: transparent;
    color: #0f33ff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    height: 20px;
    border: 2px solid rgba(78, 66, 66, 0.187); 
    
}

.pdf-button:hover {
    background-color: white;
   
}

.three .intro--options {
    position: relative;
    top: -380px;
    text-align: center; 
}

.three .intro--options h3 {
color: #c89615;
}

.project-title3 {
    position: relative;
    top: -179px;
    left: 19px;
    width: 81%;
    z-index: 5;
}

.project-title3 h1 {
    color: #c89615;
}

.project-title3  p {
    color: #fff;
}
/*end of 03 three*/




/*04 four*/
.talkies4 {
    position: relative;
    top: 127px;
    width: 68%;
    left: 8%;
    color: #c89615;
    z-index: 2;
 }

.brief-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    height: 90%;
    position: relative;
    top: 137px;
    left: -7%;
  }

.brief-container p {
    font-size: 18px;
}
  
  .image-box, .text-box {
    flex: 1; /* Both boxes will take up equal space */
    max-width: 50%; /* Each box will take up half of the container's width */
  }
  
  .image-box img {
    width: 198%;
    display: block;
    height: 78%;

  }
  
  .text-box {
    padding: 20px;
    position: relative;
    top: -31px;
    left: 36%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
  }
  
  .text-box h2 {
    color:  rgb(255, 255, 255);
    margin-left: 64px;
    text-decoration: underline;
  }

  .text-box p {
    width: 90%;
    margin-left: 12px;
    text-align: center;
  }


  .download-container4 {
    position: relative;
    top: 465px;
    left: 41px;
    z-index: 500;
 }

.download-container4 .fa {
    color: rgb(255, 255, 255);
    margin-left: 8px;
    cursor: pointer;
}
  
  .pdf-link4 {
    color: rgb(208, 26, 26);
    text-decoration: none; 
    cursor: pointer;
  }

  .pdf-link4:hover {
    color: #c89615;
    
  }
  
  .download-link4 {
    color: #c89615;
    text-decoration: none; 
    margin-left: 14px; 
  }
   
  .image-box, .text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  

  #visuals2 {
    position: relative;
    top: -295px;
    }
    
.company-img2 {
    width: 332px;
    height: 287px;
    position: relative;
    top: -245px;
    left: 990px;
    z-index: 22;
    }
    
.company-img3 {
    width: 332px;
    height: 287px;
    position: relative;
    top: -23px;
    left: 657px;
    z-index: 22;
    }
    
.company-img4 {
    width: 332px;
    height: 287px;
    position: relative;
    top: -79px;
    left: 990px;
    z-index: 22
    }

.project-title4 {
        position: relative;
        top: -499px;
        left: 19px;
        width: 81%;
    }

 .project-title4 h1 {
        color: #c89615;
    }
    
 .project-title4  p {
        color: #fff;
    }

/*end of 04 four*/




/*05 five*/


.talkies5 {
    position: relative;
    top: 225px;
    width: 68%;
    left: 8%;
    color: #c89615;
    z-index: 2;
 }

.brief-container5 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    height: 90%;
    position: relative;
    top: 234px;
    left: -7%;
  }

.brief-container5 p {
    font-size: 18px;
}
  
  .image-box, .text-box {
    flex: 1; /* Both boxes will take up equal space */
    max-width: 50%; /* Each box will take up half of the container's width */
  }
  .image-box, .text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .image-box img {
    width: 198%;
    display: block;
    height: 78%;

  }
  
  .text-box {
    padding: 20px;
    position: relative;
    top: -31px;
    left: 36%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
  }
  
  .text-box h2 {
    color:  rgb(255, 255, 255);
    margin-left: 64px;
    text-decoration: underline;
  }

  .text-box p {
    width: 90%;
    margin-left: 12px;
    text-align: center;
  }


  .download-container5 {
    position: relative;
    top: 465px;
    left: 41px;
    z-index: 500;
 }

.download-container5 .fa {
    color: rgb(255, 255, 255);
    margin-left: 8px;
    cursor: pointer;
}
  
  .pdf-link5 {
    color:#0f33ff;
    text-decoration: none; 
    cursor: pointer;
    
  }
  
  .pdf-link5:hover {
    color: #c89615;
    
  }
  .download-link5 {
    color: #c89615;
    text-decoration: none; 
    margin-left: 14px; 
  }
   
 
  

  #visuals3 {
    position: relative;
    top: -199px;
    }
    
.company-img7 {
    width: 332px;
    height: 287px;
    position: relative;
    top: -245px;
    left: 990px;
    z-index: 22;
    }
    
.company-img8 {
    width: 332px;
    height: 287px;
    position: relative;
    top: -23px;
    left: 657px;
    z-index: 22;
    }
    
.company-img9 {
    width: 332px;
    height: 287px;
    position: relative;
    top: -79px;
    left: 990px;
    z-index: 22
    }

.project-title5 {
        position: relative;
        top: -398px;
        left: 19px;
        width: 81%;
    }

 .project-title5 h1 {
        color: #c89615;
    }
    
 .project-title5  p {
        color: #fff;
    }

/*end 05 five*/



/*06 six*/


.talkies6 {
    position: relative;
    top:245px;
    width: 68%;
    left: 8%;
    color: #c89615;
    z-index: 2;
 }

 .emoji-reactions {
    display: flex;
    font-size: 1.4em;
    position: relative;
    top: 57px;
    left: 3px;
    gap: 29px;
}

 .social-icons p {
   color: #0f33ff;
 }

 .social-icons p:hover {
    color: #c89615;
  }

 #new-comment::placeholder {
    color: #0f33ff; 
  }
 
  
  .comment-section button {
    padding: 10px 20px;
    background-color: #0f34ff00;
    border: none;
    border-radius: 4px;
    color: #0f33ff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    top: -133px;
    left: 654px;
    border: 2px solid rgba(78, 66, 66, 0.187); 
  }
  
  .comment-section button:hover {
    background-color: #f2f2f2;
    
  }
 

.project-title6 {
    position: relative;
    top: -380px;
    left: 19px;
    width: 81%;
}
.project-title6 h1 {
    color: #c89615;
}

.project-title6  p {
    color: #fff;
}


/*end of 06 six*/




/* 07 contact */

.talkies7 {
    position: relative;
    top:135px;
    width: 38%;
    left: 22%;
    color: #c89615;
    z-index: 2;
 }

.contact--lockup .mod--options a {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-decoration: none;
    color: #fff;
    font-weight: 700
}

/* New CSS rules for button background and border */
.contact--lockup .mod--options a {
    background-color: #000000; 
    border: 2px solid #0f33ff;
    transition: background-color 0.3s, color 0.3s; 
}

/* New CSS rules for hover effect */
.contact--lockup .mod--options a:hover {
    background-color:#ffffff; 
    color: #0f33ff; 
}

.pagination a.active,
.pagination a:hover {
  background-color: #0f33ff;
}

.contact2 {
    position: fixed;
    top: 0;
    left: 5px;
    width: 100%;
    height: 100%;
    background-image: url("../img/contact-visual6.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.keys {
    position: relative;
    top: 480px;
    left: -52px;
    z-index: 100;
    width: 75%;
} 

.ban {
    background-color: #4086f6;
    width: 876px;
    height: 468px;
    position: relative;
    top: 196px;
    left: -105px;
}

.ban img {
    width: 870px;
    height: 466px;
    position: relative;
    top: 1px;
    left: 3px;
}
/* end of 07 contact */






/*  08 hire */

.talkies8 {
    position: relative;
    top: 36px;
    width: 68%;
    left: 2%;
    color: #c89615;
    z-index: 2;
 }

 .skills-request--options label {
    display: block;
    width: 200px;
    margin-bottom: 30px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    background-color: #000000; 
    border: 2px solid #0f33ff; 
    transition: background-color 0.3s, color 0.3s; 
    cursor: pointer;
    -webkit-transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out
}

.skills-request--options label:hover {
    background-color:#ffffff; 
    color: #0f33ff; 
}

 .skills-request input[type="submit"] {
    width: 400px;
    max-width: 100%;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    background-color:#0f33ff;
    border: 2px solid #ffffff;
    border: none;
    border-radius: 0;
}

.skills-request input[type="submit"]:focus {
    outline: none
}

.skills-request--options input[type="checkbox"]:checked+label {
    background-color:#ffffff; 
    color: #0f33ff; 
}


.skills-request input[type="submit"]:hover,
.skills-request input[type="submit"]:focus {
    background-color: #ffffff; /* white background */
    color: #0f33ff; /* blue text */
    border: 2px solid #0f33ff; /* blue border */
    outline: none;
}

.skills-request--options label svg {
    position: relative;
    left: -5px;
    width: 0;
    fill: #c89615;
    -webkit-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out
}

.phone2 {
    height: 564px;
    width: 483px;
    position: relative;
    top: -382px;
    left: 684px;
}
/*  end of 08 hire */