*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins',sans-serif;
    }

    body{
      background:#070707;
      color:#fff;
      overflow-x:hidden;
    }

  
    header{
      width:100%;
      padding:25px 8%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom:1px solid rgba(255,255,255,0.1);
      position:fixed;
      top:0;
      left:0;
      z-index:1000;
      background:#070707;
    }

    .logo{
     width: 200px;
    }

   
    nav{
      display:flex;
      gap:20px;
    }

    nav a{
      color:#ddd;
      transition:0.3s;
      position:relative;
    }

    nav a:hover,
    nav a.active{
      color:#dba34b;
    }

    nav a.active::after{
      content:'';
      position:absolute;
      bottom:-8px;
      left:0;
      width:100%;
      height:2px;
      background:#dba34b;
    }

    .contact-btn{
      border:1px solid #dba34b;
      padding:12px 28px;
      border-radius:12px;
      color:#dba34b;
      transition:0.3s;
    }

    .contact-btn:hover{
      background:#dba34b;
      color:#000;
    }

    .hero{
        
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:140px 8% 50px;
      gap:40px;
    }

    .hero-text{
      flex:1;
      max-width:  50%;
    }

    .subtitle{
      color:#dba34b;
      font-size:18px;
      margin-bottom:20px;
      font-family:cursive;
    }

    .hero-text h1{
      font-size:40px;
      line-height:1.1;
      margin-bottom:25px;
      font-weight:800;
    }

    .hero-text h1 span{
      color:#dba34b;
    }

    .hero-text p{
      color:#cfcfcf;
      line-height:1;
      margin-bottom:20px;
      font-size:14px;
    }

    .buttons{
      display:flex;
      gap:8px;
      margin-top:40px;
    }

    .btn-primary{
      background:#dba34b;
      color:#000;
      padding:18px 35px;
      border-radius:14px;
      font-weight:600;
      transition:0.3s;
    }

    .btn-primary:hover{
      transform:translateY(-3px);
    }

    .btn-secondary{
      border:1px solid rgba(255,255,255,0.2);
      padding:18px 35px;
      border-radius:14px;
      color:#fff;
      transition:0.3s;
    }

    .btn-secondary:hover{
      border-color:#dba34b;
      color:#dba34b;
    }

    .socials{
      margin-top:50px;
    }

    .socials p{
      margin-bottom:20px;
      color:#999;
    }

    .icons{
      display:flex;
      gap:25px;
      font-size:28px;
    }

    .icons a{
      color:#ccc;
      transition:0.3s;
    }

    .icons a:hover{
      color:#dba34b;
    }

    .hero-image{
      color: #ddd;
      flex:1;
      display:flex;
      justify-content:center;
      position:relative;
    }

    .circle{
      /* 
      background:#dba34b;
      border-radius:50%;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      filter:blur(0px);
      box-shadow:0 0 80px rgba(219,163,75,0.4); */
      filter:blur(0px);
      background-image: url("img/img_back-.png");
      background-repeat: no-repeat;
      background-size: contain;
      width:600px;
      height:600px;
      
    }

    .hero-image img{
      width:480px;
      position:relative;
      z-index:2;
      border-radius:20px;
    }

    @media(max-width:1100px){
      .hero{
        flex-direction:column;
        text-align:center;
      }

      .buttons{
        justify-content:center;
      }

      .icons{
        justify-content:center;
      }

      .hero-text h1{
        font-size:55px;
      }

      .circle{
        width:380px;
        height:380px;
      }

      .hero-image img{
        width:350px;
      }

      nav{
        display:none;
      }
    }