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


html,
body {
    background-color: rgb(247, 242, 239);
    width: 100%;
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgb(241, 141, 66);
    padding: 5px;
}

main {
    background-color: rgb(249, 243, 236);

    min-height: 100%;
    border-radius: 20px;
    overflow: hidden;

}

nav {
    background-color: #f7f2ef;
    border-radius: 15px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;

    padding: 10px 40px;


}

nav>:first-child {
    display: flex;

    gap: 70px;
}

nav>:first-child h1 {
    font-size: 26px;
}


a {
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(104, 99, 97);
    font-size: 12px;
    font-weight: 600;

}


nav>:last-child {
    display: flex;

    align-items: center;
    gap: 40px;
}


nav>div:first-child>div {
    display: flex;

    align-items: center;
    gap: 60px;
}

.hero-section {

    padding: 10px 40px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    /* background-color: red; */
}

.left {
    display: flex;
    flex-direction: column;

}






.left {

    width: 17.6%;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ny {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
}

.left h1 {
    letter-spacing: 3px;
    font-size: 17px;

}

.description {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.description p {
    font-size: 10px;
    text-transform: lowercase;
}

.description h4 {
    font-size: 11px;
}

.description h5 {
    font-size: 9px;
}

.two {
    color: rgb(215, 96, 23);
}

.read-more {
    display: flex;
    align-items: center;
    gap: 12px;

}


.materail {
    display: flex;
    align-items: center;
    gap: 46px;
}

.shipping {
    display: flex;
    align-items: center;
    gap: 30px;
}


hr {

    border: 1px solid rgba(218, 218, 218, 0.82);
}

.box1 {
    background-color: rgb(245, 237, 231);
    width: 20px;
    height: 20px;
    border-radius: 5px;
    padding: 2px;
    font-weight: 400;
    text-align: center;
    font-size: 12px;


}

.box2 {
    background-color: rgb(230, 94, 4);
    color: white;
}

.boxes {
    display: flex;
    align-items: center;
    gap: 15px;
}

.right {
    margin-top: 12px;

    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 10px;



}

.right h3 {
    margin-right: 55px;
    font-size: 10px;
    font-weight: 500;

}

.color {
    margin-right: 50px !important;
}


.size {
    display: flex;
    gap: 6px;
    margin-right: 30px;

    align-items: center;
    font-size: 8px;
    font-weight: 700;

}

.right hr {
    width: 65%;
}


.jackets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 40%;


}

.jackets img {
    width: 100%;
    height: 100%;

}

.jbox {
    background-color: rgb(235,229,224);
    width: 50px;
    height: 53px;
    border-radius: 10px;
    overflow: hidden;
}

.with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.with-text p {
    font-size: 10px;
    font-weight: 500;
}

button {
    display: flex;
    justify-content: center;
    gap: 16px;
    text-transform: uppercase;
    font-size: 8px;
    border: none;
    font-weight: 700;
    border-radius: 15px;
    padding: 7px 10px;
}

.collection {


    width: 95%;
    display: flex;
    gap: 15px;
    justify-content: center;
    border-radius: 14px;
    padding: 10px;
    border: 1px solid rgba(218, 218, 218, 0.779);
    background-color: rgb(247, 239, 233);



}

.collections {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.collection-img {

    width: 70px;
    height: 80px;

    border-radius: 13px;

    border: 1px solid rgba(218, 218, 218, 0.977);
}

.collection-img img {
    width: 100%;
    height: 100%;
}

.collection-content {
    display: flex;
    align-items: center;
    gap: 20px;

}

.collection h4 {
    text-transform: uppercase;
    font-size: 10px;
}

.collection-text p {
    font-size: 8px;
    width: 130px;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 10px 40px;
    border-radius: 13px;

    border: 1px solid rgba(218, 218, 218, 0.977);
}

.footer-content {
    display: flex;
    align-items: center;

    gap: 15px;

}

.footer-content h5 {
    text-transform: uppercase;
    font-size: 10px;
}

.footer-content p {
    width: 150px;
    font-size: 9px;
}

.border-footer {
    border: 1px solid rgba(218, 218, 218, 0.779);
}


.feather {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    gap: 40px;
    position: absolute;
    bottom: 175px;
    left: 450px;
}


.div{
    display: flex;
    align-items: center;
    gap: 15px;
}

.big-jacket{
    width: 390px;
    height: 350px;
  

}

.big-jacket img{
   filter: drop-shadow(0 18px 6px rgba(0,0,0,0.25));
}

.jackets-center{
        position: absolute;
    top: 70px;
    left: 270px;
    display: flex;
}

.big-jacket img{width: 100%; height: 100%;}