.hero {
     width: 100%;
     height: calc(100vh - 240px)
 }

 /* div{
    border: solid 1px white;
} */
 .heroContainer {
     width: 100%;
     height: 100%;
     max-width: 1920px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

 }


 .heroContent {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

 }

 .nameContainer {
     display: flex;
     flex-direction: column;

 }

 .nameContainer p {
     font-size: 140px;
     color: var(--primary);
     font-weight: bolder;

 }

 .heroTitleContainer {
    width: 100%;
    max-width: 1000px;
     height: 100%;
     display: flex;
     align-items: center;
     position: relative;
 }

 .heroTitle {
     display: flex;
     flex-direction: column;

 }

 .heroTitle span {
     font-size: 48px;
     color: var(--secondary);
 }

 .heroTitle h2 {
     font-size: 40px;
     margin: 0;
 }

 .heroTitle button {
     margin-top: 56px;
 }


 .titlePhoto:not(.contactImage) {
     height: 100%;
     filter: brightness(0.8);
     border-radius: 10px;

 }

 .heroContactBtns {
     width: 80%;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 32px;
     position: absolute;
     bottom: 0px;
     left: 0;
     background-color: var(--text-bg);
     border-radius: 10px;
     box-sizing: border-box;
     padding: 8px;
     opacity: 0.4;
 }

 .heroContactBtnsLink {
     display: flex;
     justify-content: center;
     align-items: center;
     border: solid 1px var(--text-bg);
     border-radius: 10px;
     box-sizing: border-box;
     padding: 8px;
     cursor: pointer;
     transition: border-color 0.5s ease-in-out;
 }

 .heroContactBtnsLink:hover {
     border: solid 1px var(--primary);
 }

 .heroContactBtnsLink:active {
     transform: scale(0.90);
 }

 .contactImage {
     width: 30px;
 }


 @media(max-width:1750px) {
     .nameContainer p {
         font-size: 80px;
     }

     .heroTitle span {
         font-size: 32px;
     }

     .heroTitleContainer{
        max-width: 700px;
     }

 }

 /* @media(max-width:1520px) {
     .nameContainer p {
         font-size: 100px;
     }

     .heroTitle span {
         font-size: 40px;
     }

 } */

 @media(max-width:1520px) {
     .nameContainer p {
         font-size: 80px;
     }

     .heroTitle span {
         font-size: 32px;
     }

     .heroTitle h2 {
         font-size: 32px;
     }
 }

 @media(max-width:1050px) {
     .heroContainer {
         background-image: none;
     }

     .heroContent {
         justify-content: center;
     }

     .heroContactBtns {
         bottom: 56px;
         left: 50%;
         transform: translateX(-50%);
         width: 80%;
     }

     .contactImage {
         width: 20px;
         height: 20px;
     }

     .titlePhoto {
         display: none;
     }

     .heroTitleContainer {
         position: static;
     }

           .heroTitleContainer{
        max-width: unset;
        justify-content: center;
     }
 }

 @media(min-width:1050px) {

     /* .heroContent img {
         display: none;
     } */
     .aboutmePhoto {
         display: none;
     }

  


 }


 /* @media(max-width:900px) {
     .titlePhoto {
         width: 450px;
     }

 } */

 /* @media(max-width:790px) {
     .titlePhoto {
         width: 400px;
     }

 } */
 @media(max-height:1000px) {
    .hero{
        height: calc(100vh - 140px);
    }
 }

 @media(max-width:670px) {

     .heroContainer {
         justify-content: flex-start;
     }

     .nameContainer p {
         font-size: 60px;
     }

     .heroTitle span {
         font-size: 24px;
     }

     .heroTitle h2 {
         font-size: 18px;
     }

     /* .titlePhoto {
         width: 300px;
     } */

 }

 @media(max-width:500px) {

     .heroContainer {
         justify-content: flex-start;
     }

     .nameContainer p {
         font-size: 40px;
     }

     .heroTitle span {
         font-size: 20px;
     }

     .heroTitle {
         margin-bottom: 112px;
     }
 }