/* newsletter ad */
.newsletter-ad {
    height: 275px;
    width: 100%;
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2% 5%;
    background-color: hsl(215, 19%, 30%);
}

.newsletter-ad-col h2 {
    height: auto;
    text-align: center;
    padding: 0;
    font-size: 3.5rem;
    padding-bottom: 15px;
    color: hsl(215, 19%, 65%);
}

.newsletter-ad-col p {
    height: auto;
    text-align: center;
    font-size: 1.1rem;
    color: hsl(215, 19%, 60%);
    margin-left: 12.5%;
    margin-right: 12.5%;
}

.newsletter-ad-col {
    height: 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#col1 {
    width: 65%;
}

#col2 {
    width: 35%;
}

.newsletter-ad-col img {
    width: fit-content;
    margin-left: 2em;
    height: 100%;
}

.newsletter-ad-col form {
    height: 17.5%;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8em;
}

.newsletter-ad-col input {
    height: 100%;
    width: 15em;
    border-radius: 2.5em;
    border: 1px solid hsl(215, 19%, 10%);
    background-color: hsl(215, 19%, 20%);
    color: hsl(215, 12%, 70%);
    padding: 0em 2em;
    text-align: center;
}

.newsletter-ad-col input::placeholder {
    color: hsl(215, 12%, 70%);
}

.newsletter-ad-col input :hover {
    background-color: hsl(215, 19%, 10%);
    color: hsl(215, 12%, 60%);
    border: none;
    font-size: .75rem;
}

.newsletter-ad-col input :active {
    background-color: hsl(215, 19%, 15%);
    color: hsl(215, 12%, 60%);
    border: none;
    font-size: .75rem;
}


.newsletter-ad-col button {
    height: 100%;
    width: 6em;
    border-radius: 2.5em;
    padding: 0em 2em;
    text-align: center;
    padding: 0px 20px;
    border: 1px solid hsl(215, 19%, 10%);
    background-color: hsl(215, 19%, 20%);
    color: hsl(215, 12%, 70%);
}

.newsletter-ad-col button:hover {
    background-color: hsl(215, 19%, 15%);
    color: hsl(215, 12%, 60%);
}





/* product section */
.products {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    display: grid;
    gap: 1.5em;
    grid-template-columns: repeat(2, auto);
    grid-template-areas:
        "product1 product2"
        "product1 product3"
        "product4 product5";

}

.product {
    border-radius: 2em;
    border: 1px solid hsl(215, 19%, 25%);
    padding: .75em 1em;
    height: 20em;
    display: flex;
    align-items: end;
    background-size: 100%;
    transition: background-size 800ms;
}

.product:hover{
    background-size: 105%;
}

.product1 {
    grid-area: product1;
    height: 41.5em;
    background-image: url(images/clothing1.jpg);
}

.product2 {
    grid-area: product2;
    background-image: url(images/clothing2.jpg);
}

.product3 {
    grid-area: product3;
    background-image: url(images/clothing3.jpg);
}

.product4 {
    grid-area: product4;
    background-image: url(images/clothing4.jpg);
}

.product5 {
    grid-area: product5;
    background-image: url(images/clothing5.png);
}

.product-details {
    background-color: hsl(215, 19%, 40%);
    border-radius: 1.5em;
    border: 2px solid hsl(215, 19%, 35%);
    padding: .75em;
    width: 100%;
    display: flex;
    gap: 5%;
    justify-content: space-between;
    transition: transform 800ms;
}

.product:hover .product-details{
    transform: translateY(.5em);
}

.product-details-left {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
}

.product-details-left h2 {
    font-weight: 800;
    color: hsl(215, 19%, 65%);
}

.product-details-left p {
    margin-left: 5px;
    margin-right: auto;
    font-weight: 600;
    color: hsl(215, 19%, 60%);
}

.product-details-right {
    width: 20%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-details-right h2 {
    font-weight: 800;
    color: hsl(215, 19%, 70%);
}

.arrow {
    width: 80%;
    margin: 0;
    margin-top: .1em;
    border-radius: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(215, 19%, 42.5%);
    border: 2px solid hsl(215, 19%, 37.5%);
}

.arrow:hover{
    background-color: hsl(215, 19%, 40%);
    border: 2px solid hsl(215, 19%, 35%);
}

.arrow a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow svg {
    padding: 5px;
    width: 2em;
    transition: transform .5s;
}

.arrow:hover svg{
    transform: translateX(.75em);
}