@font-face {
    font-family: HDR;
    src: url(./haeder-font/Haeder-Jpzzo.ttf);
}
@font-face {
    font-family: pro;
    src: url(./Fonts/sf-pro-text_regular.ttf);
}

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

}

html,body{
    height:100%;
    width:100%;
}

#nav{
    height:40px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    
    background:linear-gradient(to right,rgb(180, 222, 240),rgb(247, 252, 227));
    gap:110px;
    margin-left:131px;
    width:81.04%;
    font-family:'Times New Roman', Times, serif;
   

}

#b{
    margin-left:130px;
    /* background-color: red; */
    padding-left:80px;
    padding-right:80px;
    padding-top:5px;
    padding-bottom:5px;
    border-radius:10px;
    border:1px solid black;
}

#nav img{
    position:absolute;
    left:1120px;
    height:15px;
}

#hero{
    height:500px;
    width:90%;
    background-color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:70px;
    
}


#container{
    
    display:flex;
    align-items:center;
    height:500px;
    width:90%;
    background:linear-gradient(to right,rgb(180, 222, 240),rgb(247, 252, 227));
}

#right{
    position:relative;
    height:500px;
    width:80%;
    background-image:url(./shirt.webp);
    background-size: cover;
    background-position:center;
    
}

#right h1{
    position:absolute;
    font-family:HDR;
    color:white;
    padding-top:90px;
    font-size:80px;
    height: 500px;
    
}

#p1{
    
   
    position:absolute;
    color:black;
    font-family:serif;
    
    margin-left:80px;
    margin-top:39px;
}

#rpi{
    margin-left:43px;
    position:absolute;
    height:9%;
    margin-top:35px;
    

}

#rp img{
    position:absolute;
    height:9%;
    margin-left:235px;
    margin-top:35px;
}

#p2{
    position:absolute;
   color:black;
   font-family:serif;
   left:500px;
   margin-top:320px;
}

#rpp img{
    position:absolute;
    height:9%;
     left:650px;
     margin-top:320px;
}

#rpp #i{
    left:465px;
}

#left{
    height:500px;
    width:300px;
    /* background-color:red; */
}

#left-cont{
    background-color:rgba(255, 255, 255, 0.904);
    margin-top:180px;
    border-radius:10px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-left:20px;
    padding-right:10px;
    font-size:15px;
    /* background-color: green; */
    margin-right:50px;
    margin-left:40px;

}

#left-cont img{
    height:200px;
    width:275px;
    padding-right:100px;
    margin-right:10px;
}


#bottombar{
    height:66px;
    background-color:rgb(74, 74, 145);
    width:81.20%;
    margin-left:130px;

}

#enter{
    display:flex;
    align-items:center;
    justify-content: space-between;
}

#first{
    position:relative;
    display:flex;
    align-items:center;
    
}

#panch{
    color:white;
    margin-left:360px;
    margin-top:10px;
    font-size:35px;
    
}


#pics{
    display:flex;
    align-items:center;
    position:absolute;
    margin-left:200px;
    margin-top:30px;
    gap:1px;
    margin-bottom:20px;
}

#pics img{
    height:40px;
    border-radius:5px;
    
}

#second button{
    
    margin-right:20px;
    padding-right:70px;
    padding-left:70px;
    padding-top:10px;
    padding-bottom:10px;
    border-radius:5px;
    border:none;
    margin-top:10px;
    
   
}