* { 
    padding:0; 
    margin: 0 ; 
    list-style: none;
    text-decoration:none ;
    box-sizing: border-box ; 
    font-family: "Roboto", sans-serif;
    
}
:root{ 
    --main-content: blue;
    --bg-color:#0c0c0c; 
    --text-color: #fff ;
    --main-color: #ae8957 ; 
    --big-font: 6.6rem ; 
    --p-font:1rem ;
}
body{ 
    background-color :var(--bg-color);
    color : var(--text-color);
}
body header{ 
    display: flex;
    width : 100%;
    padding : 0 ;
    /* background : rgba(255, 0, 0, 0.071) ; */
    position: fixed  ;
    z-index  : 1000 ; 
    top: 0;
    right: 0    ;
    padding : 35px 7%;
    align-items: center;;
    justify-content: space-between;
    transition: all .50s ease;
    flex-wrap: wrap;
   

}
header .logo img{ 
    width : 100%;height :auto;
    /* the auto for save the resulution of logo  */

}

header .navlist{ 
    display :flex ; 
    align-content : center ;
    justify-content : space-evenly ;
    width:50%;
    
   
}
header .navlist a { 
    color: var(--text-color);
    flex-shrink: 0 ;
    font-size: var(--p-font);
  
    transition: all 0.60s ease;
}

header .navlist a:hover{ 
    color: var(--main-color);

    
}
header .right-content{ 
    display : flex ;

    align-items : center ;
    /* background: gold  ; */
}
header .right-content .nav-btn{ 
  display  :inline-block ;
  padding : 9px 24px ; 
  background: transparent;

  border: 2px solid var(--text-color);
  border-radius : 7px ;
  color: var(--text-color);
  font-size : 15px ;
  font-weight: 500;
  transition: all 0.6s ease ;   

}
header .right-content .nav-btn:hover{ 
    border : 2px solid var(--main-color);
    color : var(--main-color);
    transform: translatey(-7px );
}
#menu-icon{     
    font-size : 42px ;
    z-index:1001 ;
    cursor: pointer;
    margin-left: 24px ;
    display: none;
}
body section{ 
    background-color : gold ; 
    padding: 0 14%;
}
.hero { 
    width:100%;height: 100vh; 
    background:   radial-gradient(circle at center, red, #0d0d0d) no-repeat center/cover;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-content: center;
    align-items: center;
    gap:2rem;
    
}
.hero .hero-image img{ 
    width : 100% ;
    height:auto;
}
.hero .hero-text h1 { 
    font-size :var(--big-font);
    font-weight: 900;
    margin : 15px 0; 
    width: fit-content;
    white-space: nowrap;
}
.hero .hero-text h5{ 
    font-size: 18px ;font-weight: 400;letter-spacing: 1px;
    
} 
.hero .hero-text p{ 
    width :100%;
    max-width:620px;
    font-size : var(--p-font);
    line-height:32px ;color:var(--text-color);
    margin-bottom:40px;
}
.main-hero{ 
    color :red ;
    display:flex;
 
    align-items: center ;
}
.main-hero .btn{ 
    display:inline-block;
    padding : 13px 32px ;
    background: var(--main-color);
    border:2px solid transparent;
    border-radius:7px ;
    color : var(--text-color);
    font-size: 15px ;
    font-weight:500; 
    transition: all 0.6s ease ;
    margin-right:20px ;
}
.btn:hover { 
    scale: 1.1;
}
.price {
    display:flex ; 
    align-items : center ;
    font-size : 28px ;
    font-weight:bold ;
    color : var(--text-color);

}
.price span{ 
    font-size : 17px ;font-weight:400;
    color:var(--main-color);
    margin-left: 10px;
}
*::selection{ 
    background:var(--main-color);
    color : var(--text-color);
}
.icons {
    position : absolute;
    top:50%;
    padding :0 7%;

    transform: translatey(-50%);

}
.icons i{ 
    display: block ; 
    font-size : 23px ; 
    color : var(--main-color);
    margin : 35px 0;
    transition: all 0.6s ease  ;
}
.icons i:hover{ 
    color : var(--text-color);
}
.scroll { 
    position:absolute; 
    top: 92%;right:7%;

    transform: translatey(-50%);
}
.scroll a { 
    font-size:16px ;
    color : var(--text-color);
    transition : all 0.6s ease ;
}
.scroll i { 
    font-size:25px ; 
    color : var(--main-color);
    transition : all 0.6s ease ;
    margin-right: 6px;
}
.scroll i:hover { 
    color : var(--text-color)
}
.scroll a:hover{ 
    color : var(--main-color)
}
@media (max-width:1770px){ 
    header{ 
        padding : 22px 40%;
      
    }
    .icons{ 
        padding : 0 4%;
    }
    .scroll{ 
        padding : 0 4%;
    }
}
@media (max-width:1670px ){ 
    :root{ 
        --big-font:5.5rem ; 
        --p-font: 15px ;
    }

}


@media (max-width:1370px){ 
    .icons { 
        display: none;
    }
    body section{ 
        padding : 0 7%; 
    }
}
@media (max-width:1150px){
    :root { 
        --big-font:  4.6rem ;
    }
    .price{ 
        font-size : 20px;
    }
    .main-hero .btn{ 
        padding :10px 23px ;
    }
}
@media (max-width:950px){ 
    #menu-icon{ 
        display: block;
    }
    body header .navlist{ 
        position: absolute; 
        width:100%;
        height:100vh; 
        padding: 100px  50px;
        top:0 ;
        right: 0;
        left:100%;
        bottom: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px ; 
        justify-content:start;
        backdrop-filter: blur(32px);
        transition: all 0.6 ease-in-out ;
        transition: 0.6s ease-in-out;
    }
   body header .navlist a { 
        display: block;
        padding: 0 ;
        margin: 0 0 25px 0;
        font-size : 1.4rem;
        
    }
    body header .navlist.open{ 
        left:0;

    }

}

@media (max-width:920px){ 
    .scroll { 
        display: none ;
    }
    .hero{ 
        grid-template-columns : 1fr ;
        height: auto
    }
    .hero-text{ 
        padding-top: 130px;
    }
    .hero-image{ 
        height:500px;width:500px ;
        margin : 0 auto;
        
    }
    .hero-image img { 
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
@media (max-width:500px){ 
    
    .hero-image{ 
        height:400px;width:400px ;
        margin : 0 auto;
        
    }
    .hero{ 
        width:100%;height:100vh;
     
    }
    :root{ 
        --big-font:4rem;
    }
}

@media (max-width:440px){ 
    .hero-text h5{ 
        font-size: 15px;
    }
      
    .hero-image{ 
        height:360px;width:360px ;
        margin : 0 auto;
        
    }
    .hero-text{ 
        padding-left: 20px;
        padding-right: 20px;

    }
    body    header{ 
        backdrop-filter: blur(20px );
    }
}
.active{ 

   left : 0%;
   transform: translateX(-100%);
   transition: 0.6s ease-in-out;
}