* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #080909;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
    }

    .about-section { position: relative; padding: 50px 0px 50px 0px; overflow: hidden; 
        background: linear-gradient(rgba(212, 165, 45, 0.035) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(212, 165, 45, 0.035) 1px, transparent 1px), #080807; background-size: 50px 50px; } 
        .about-section::before { content: ""; position: absolute; width: 500px; height: 500px; left: -220px; top: 80px;
             background: rgba(212, 165, 45, 0.12); filter: blur(130px); border-radius: 50%; pointer-events: none; } 
             .about-section::after { content: ""; position: absolute; width: 450px; height: 450px; right: -200px; 
                bottom: -100px; background: rgba(212, 165, 45, 0.09); filter: blur(130px); border-radius: 50%; pointer-events: none; 
            } .about-container { position: relative; z-index: 2; max-width: 1140px; margin: auto; padding: 36px; display: grid;
                 grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 42px; 
                 background: linear-gradient( 120deg, rgba(116, 85, 25, 0.42), rgba(28, 25, 18, 0.94) ); 
                 border: 1px solid rgba(212, 165, 45, 0.32); border-radius: 30px; 
                 box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
                  .about-image { height: 365px; overflow: hidden; border-radius: 18px; border: 1px solid rgba(212, 165, 45, 0.22);
                     position: relative; } .about-image::after { content: ""; position: absolute; inset: 0; 
                        background: linear-gradient( 135deg, rgba(212, 165, 45, 0.08), transparent 45%, rgba(0, 0, 0, 0.35) ); 
                        pointer-events: none; } .about-image img { width: 100%; height: 100%; object-fit: cover; display: block;
                             transition: transform 0.6s ease; } .about-image:hover img { transform: scale(1.04); }
                              .about-content { padding: 8px 5px; } .about-tag { display: inline-flex;
                                 align-items: center; gap: 10px; margin-bottom: 18px; padding: 9px 17px; color: #e2b735; 
                                 font-size: 11px; font-weight: 700; letter-spacing: 3px; border: 1px solid rgba(212, 165, 45, 0.38);
                                  border-radius: 30px; background: rgba(212, 165, 45, 0.07); } .about-tag::before {
                                     content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e2b735;
                                      box-shadow: 0 0 10px rgba(226, 183, 53, 0.8); } .
                                      about-content h2 { margin: 0 0 25px; color: #ffffff; font-size: clamp(38px, 4vw, 57px); line-height: 1.02; font-weight: 500; letter-spacing: -2px; } .about-content h2 span { color: #dcb333; } .about-content p { margin: 0 0 17px; color: #b5b2aa; font-size: 15px; line-height: 1.8; font-weight: 400; } .about-content p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .about-section { padding: 80px 5%; } .about-container { grid-template-columns: 1fr; padding: 25px; gap: 35px; } .about-image { height: 390px; } } @media (max-width: 600px) { .about-section { padding: 60px 4%; } .about-container { padding: 18px; border-radius: 22px; } .about-image { height: 280px; border-radius: 14px; } .about-content h2 { font-size: 39px; letter-spacing: -1.5px; } .about-content p { font-size: 14px; line-height: 1.75; } .about-tag { font-size: 10px; letter-spacing: 2px; } }