* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Inter Tight", sans-serif;
 }

 body {
     background-color: black;
 }

 .main {
     background: linear-gradient(rgba(0, 0, 0, 0.7),
             rgba(0, 0, 0, 0.7)), url("back.jpg");

     height: 80vh;
     background-position: center center;
     position: relative;
     background-size: cover;
     background-repeat: no-repeat;
     background-size: max(1200px, 100vw);
 }
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 80vw;
     margin: auto;
     height: 70px;
     position: relative;
     z-index: 10;
 }

 nav img {
     color: red;
     width: 154px;
     position: relative;
     z-index: 20;

 }

 nav button {
     position: relative;
     z-index: 10;
     gap: 10px;
 }

 .first-button {
     padding: 8px 20px;
     background-color: transparent;
     color: white;
     border-radius: 4px;
     border: 1px solid white;
     font-size: 15px;
      backdrop-filter:blur(3px);
 }

 .second-button {
     padding: 8px 20px;
     background-color: red;
     color: white;
     border-radius: 4px;
     border: none;
     font-size: 15px;
 }

 .text {
     text-align: center;
     color: white;
     margin-top: 20vh;
     position: relative;
     z-index: 10;
     font-size: 30px;
     font-family: "Inter Tight", sans-serif;
 }

 .text h4 {
     font-size: 20px;
     margin-top: 20px;
 }

 .text2 {
     font-size: 15px;
     margin-top: 30px;
     position: relative;
 }

 .email {
     margin: 20px;
 }

 .email input {
     padding: 22px;
     border-radius: 5px;
     padding-left: 20px;
     padding-right: 200px;
     /* background-color: transparent ; */
      background: rgba(0, 0, 0, 0.3);
     border: 1px solid white;
     color: white;
     font-family: "Inter Tight", sans-serif;
     font-size: 15px;
     backdrop-filter: blur(5px);
     
 }

input::placeholder {
  color: white;  
  font-size: 16px;
}
 
 .email button {
     padding: 20px 50px;
     background-color: red;
     color: white;
     border-radius: 4px;
     border: none;
     font-size: 100;
     font-size: 20px;
     
 }

 .line {
     height: 11px;
     background-color: gray;
 }

 .tred {
     color: white;
     margin: 20px 105px;
     font-size: 15px;
     font-family: "Inter Tight", sans-serif;
 }

 .trendphoto {
     display: flex;
     justify-content: center;
     gap: 50px;
 }

 .trendphoto img {
     border-radius: 8px;
 }

 .more {
     color: white;
     margin: 20px 150px;
     padding-top: 50px;
     font-family: "Inter Tight", sans-serif;
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin: 20px 144px;
 }

 .box-grid {
     padding-top: 25px;
     padding-bottom: 130px;
     padding-left: 20px;
     padding-right: 10px;
     font-family: "Inter Tight", sans-serif;
     color: white;
     background-color: #946ad24f;
     border-radius: 12px;
 }

 .box-grid h2 {
     padding-bottom: 30px;
 }

 .freq {
     color: white;
     margin: 20px 150px;
     padding-top: 50px;
     font-family: "Inter Tight", sans-serif;
 }

 .long {
     display: grid;
     gap: 10px;
     color: white;
     margin: 20px 150px;
     font-family: "Inter Tight", sans-serif;

 }

 .long-box {
     height: 80px;
     display: flex;
     padding-left: 20px;
     font-size: 25px;
     font-family: "Inter Tight", sans-serif;
     color: white;
     background-color: rgb(64, 64, 64);
     align-items: center;
 }

 .last-part {
     display: flex;

     justify-content: center;
 }

 .last-text {
     color: white;
     font-family: "Inter Tight", sans-serif;
 }

 .last-items {
     display: flex;
     justify-content: center;
     gap: 10px;
 }

 .last-text {
     margin-bottom: 20px;
     margin-top: 50px;
 }

 .last-email input {
     padding: 17px;
     padding-right: 300px;
     padding-left: 20px;
     border-radius: 4px;
     border: none;
     font-size: 15px;
     background-color: black;
     border: 1px solid white;
     color: white;
     font-family: "Inter Tight", sans-serif;
 }

 .last-btn button {
     padding: 15px 50px;
     background-color: red;
     color: white;
     border-radius: 4px;
     border: none;
     font-size: 100;
 }

 .footer-div {
     margin-bottom: 50px;
 }

 .footer {
     margin: 20px 150px;
     padding-top: 50px;
     font-family: "Inter Tight", sans-serif;
     color: white;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);

 }

 .footer-box {
     margin-bottom: 15px;
     font-family: "Inter Tight", sans-serif;
 }

 a {
     color: white;
 }

 .footer-btn button {
     padding: 3px 30px;
     color: white;
     background-color: black;
     border-radius: 4px;
     box-sizing: border-box;
     border: 1px solid white;
     margin-top: 40px;
     margin-bottom: 30px;
     font-size: 100;
 }

 .last-line {
     color: white;
     font-size: 12px;
     margin-top: 35px;
     margin-bottom: 100px;
     font-family: "Inter Tight", sans-serif;
 }
  @media (max-width: 768px) {

     nav {
         max-width: 90vw;
     }

     nav img {
         width: 110px;
     }

     .first-button {
         padding: 6px 12px;
         font-size: 13px;
     }

     .second-button {
         padding: 6px 12px;
         font-size: 13px;
     }

     .text {
         font-size: 22px;
         margin-top: 15vh;
         padding: 0 20px;
     }

     .text h4 {
         font-size: 16px;
     }

     .text2 {
         font-size: 13px;
         padding: 0 10px;
     }

     .email {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 10px;
         margin: 15px 20px;
     }

     .email input {
         padding: 16px 20px;
         padding-right: 20px;
         width: 100%;
         max-width: 420px;
     }

     .email button {
         padding: 16px 40px;
         font-size: 17px;
         width: 100%;
         max-width: 420px;
     }

     .tred {
         margin: 20px 30px;
     }

     .trendphoto {
         gap: 15px;
         overflow-x: auto;
         justify-content: flex-start;
         padding: 10px 20px;
         scrollbar-width: none;
     }

     .trendphoto::-webkit-scrollbar {
         display: none;
     }

     .trendphoto img {
         width: 130px;
         height: auto;
         flex-shrink: 0;
     }

     .more {
         margin: 20px 20px;
         padding-top: 30px;
     }

     .grid {
         grid-template-columns: repeat(2, 1fr);
         margin: 20px 20px;
         gap: 15px;
     }

     .box-grid {
         padding-bottom: 60px;
     }

     .freq {
         margin: 20px 20px;
         padding-top: 30px;
     }

     .long {
         margin: 20px 20px;
     }

     .long-box {
         font-size: 18px;
     }

     .last-text {
         font-size: 14px;
         padding: 0 20px;
         text-align: center;
     }

     .last-items {
         flex-direction: column;
         align-items: center;
         gap: 10px;
         padding: 0 20px;
     }

     .last-email input {
         padding: 15px 20px;
         padding-right: 20px;
         width: 100%;
         max-width: 420px;
     }

     .last-btn button {
         width: 100%;
         max-width: 420px;
         padding: 15px;
         font-size: 16px;
     }

     .last-btn button h2 {
         font-size: 18px;
     }

     .footer {
         margin: 20px 20px;
         padding-top: 30px;
     }

     .footer-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }