*{
   margin: 0;
}

body {
    background-color: white;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.container{
    width: 100%;
    display: grid;
    padding: 0;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: minmax(100px,auto);
    grid-template-areas:
    "header header header header"
    "nav nav nav nav"
    "banner banner banner banner"
    "dresses dresses dresses dresses"
    "dresses dresses dresses dresses"
    "tops tops tops tops"
    "tops tops tops tops"
    "promotion-1 promotion-1 promotion-1 promotion-1"
    "outerwear outerwear outerwear outerwear"
    "outerwear outerwear outerwear outerwear"
    "bottoms bottoms bottoms bottoms"
    "bottoms bottoms bottoms bottoms"
    "promotion-2 promotion-2 promotion-2 promotion-2"
    "active-wear active-wear active-wear active-wear"
    "active-wear active-wear active-wear active-wear"
    "accessories accessories accessories accessories"
    "accessories accessories accessories accessories"
    "promotion-3 promotion-3 promotion-3 promotion-3"
    "banner-1 banner-1 banner-1 banner-1"
    "article article article article"
    "footer footer footer footer";   
}

.container > *{
    font-size: small;
    overflow: hidden;
}

header{
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #03045e;
    color: white;
    text-align: center;
}

header p {
    text-transform: uppercase;
    font-weight: bolder;
    padding: 10px;
}

.logo {
    width: 150px;
    position: relative;
    top: -10px;
}

nav{
    background-color: #48cae4;
    position: fixed;
    top: 200px;
    width: 100%;
    z-index: 1;
}

 nav ul{
    list-style-type: none;
    height: 180px;
    padding: 5px;
}


nav a{
    text-decoration: none;
    color: indigo;
    display: block;
    padding: 10px;
}

.slide-1{
    max-width: 100%;
    position: relative;
    top: 20px;
}

.dresses img, .tops img, .outerwear img, .bottoms img, .active-wear img, #active-page img, #dress-page img, #tops-page img, #outerwear-page img, #b-page img{
    width: 200px;
    height: 260px;
}

.dresses, .tops, .outerwear,.bottoms, .active-wear, .accessories{
    display: block;
    text-align: center;
}

.dresses div, .tops div, .outerwear div, .bottoms div, .active-wear div, .accessories div{
    display: inline-block; 
    margin: 10px;
    padding: 40px; 
}

.dresses  h2{
    text-transform: capitalize;
    font-variant: small-caps;
    font-size: 1.1em;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 18em;
    margin: 0 auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    box-sizing: border-box;
}

.dresses a, .tops a, .outerwear a, .bottoms a, .active-wear a, .accessories a{
    display: block;
    font-size: 25px;
    border: solid 2px black;
    width: 4em;
    margin: auto;
    text-decoration: none;
    border-radius: 4px;
    background-color: #023e8a;
    border: 2px solid #0096c7;
    color: white;
    position: relative;
    top: -10px;
}

button {
    background-color: #0096c7;
    border: 2px solid #023e8a;
}

.tops h2{
    text-transform: capitalize;
    font-variant: small-caps;
    font-size: 1.1em;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 26em;
    margin: auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    max-width: 100%;
    box-sizing: border-box;
}

.promotion-1 img, .promotion-2 img{
    display: block;
    margin: 0 auto;
}

.promotion-1 h2{
    text-align: center;
    text-transform: capitalize;
    font-variant: small-caps;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    border-radius: 3px;
    width: 11em;
    margin: auto;
    padding: 0;
    background-color: #0096c7;
    box-shadow: 3px 3px 4px 4px #023e8a; 
    font-size: 1.2em;
}

.promotion-1 p:nth-of-type(1){
    text-align: center;
    position: relative;
    top: 10px;
    font-size: large;
    text-transform: uppercase;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

.promotion-1 p:nth-of-type(2){
    text-align: center;
    text-align: justify;
    font-size: small;
    width: 16em;
    margin: 0 auto;
    position: relative;
    top: 10px;
    
}

.promotion-1 p:nth-of-type(3){
    text-align: center;
    position: relative;
    top: 20px;
}

.promotion-1 button{
    display: block;
    margin: 0 auto;
    padding: 0;
    background-color: #023e8a;
    color: white;
    border-radius: 4px;
    font-size: large;
}

.outerwear h2{
    text-transform: capitalize;
    font-variant: small-caps;
    font-size: 1.1em;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 26.5em;
    margin: auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    max-width: 100%;
    box-sizing: border-box;
}


.bottoms h2{
    text-transform: capitalize;
    font-variant: small-caps;
    font-size: 1.1em;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 27em;
    margin: auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    max-width: 100%;
    box-sizing: border-box;
}

.promotion-2 h2{
    text-align: center;
    text-transform: capitalize;
    font-variant: small-caps;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 6.5em;
    margin: auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    font-size: 1.2em;
}

.promotion-2 p:nth-of-type(1){
    text-align: center;
    position: relative;
    top: 10px;
    font-size: large;
    text-transform: uppercase;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

.promotion-2 p:nth-of-type(2){
    text-align: center;
    text-align: justify;
    font-size: small;
    width: 16em;
    margin: 0 auto;
    position: relative;
    top: 10px;
    
}

.promotion-2 p:nth-of-type(3){
    text-align: center;
    position: relative;
    top: 20px;
}

.promotion-2 button{
    display: block;
    margin: 0 auto;
    padding: 0;
    background-color: #023e8a;
    color: white;
    border-radius: 4px;
    font-size: large;
}

.active-wear h2{
    text-transform: capitalize;
    font-variant: small-caps;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 30.2em;
    margin: auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    font-size: 1.1em;
    max-width: 100%;
    box-sizing: border-box; 
}


.accessories img, #a-page img{
    height: 200px;
    width: 200px;
}

.accessories h2{
    text-transform: capitalize;
    font-variant: small-caps;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 27em;
    margin: auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    font-size: 1.1em;
    max-width: 100%;
    box-sizing: border-box; 
}


.promotion-3 img{
    display: block;
    text-align: left;
    margin: 0 auto;
    height: auto;
    width: 210px;
}

.promotion-3 h2{
    text-align: center;
    text-transform: capitalize;
    font-variant: small-caps;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    color: white;
    background-color: #023e8a;
    border-radius: 3px;
    width: 8.5em;
    margin: auto;
    box-shadow: 3px 3px 4px 4px #0096c7;
    position: relative;  
    top: 10px;
    font-size: 1.2em;
}

.promotion-3 p:nth-of-type(1){
    text-align: center;
    position: relative;
    top: 10px;
    font-size: large;
    text-transform: uppercase;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

.promotion-3 p:nth-of-type(2){
    text-align: center;
    text-align: justify;
    font-size: small;
    width: 16em;
    margin: 0 auto;
    position: relative;
    top: 10px;
    
}

.promotion-3 p:nth-of-type(3){
    text-align: center;
    position: relative;
    top: 20px;
}

.promotion-3 button{
    display: block;
    margin: 0 auto;
    padding: 0;
    background-color: #023e8a;
    color: white;
    border-radius: 4px;
    font-size: large;
}

.slide-2{
    max-width: 100%;
    height: auto;
}

article h3 {
    text-transform: capitalize;
    font-variant: small-caps;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-size: 2em;
    font-weight: bolder;
    border: 2px solid black;
    border-radius: 3px;
    width: 5em;
    color: aliceblue;
    background-color: #023e8a;
    box-shadow: 3px 3px 4px 4px #0096c7;
    margin: auto;
}

article p{
    line-height: 3rem;
    text-align: center;
}


footer {
    text-align: center;
    background-color: #03045e;
    color: white;
    box-sizing: border-box;
}

footer h4 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.2em;
    position: relative;
    top: 10px;
}

.email{
    height: 30px;
    border: 1px solid black;
    border-radius: 3px;
}

#submit{
    height: 35px;
    font-size: large;
    border: solid 1px black;
    border-radius: 3px;
    background-color: #023e8a;
    background: -webkit-linear-gradient(top, #023e8a 0%, #0096c7 100%);
    background: -moz-linear-gradient(top, #023e8a 0%, #0096c7 100%);
    background: linear-gradient(top, #023e8a 0%, #0096c7 100%);
}

footer ::placeholder {
    text-transform: capitalize;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: black;
}

footer a{
    font-size: 1.6em;
    font-family: arial;
    font-weight: bold;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    position: relative;
    border: 2px solid white;
    border-radius: 8px;
    background-color: #023e8a;
    background: -webkit-linear-gradient(top, #023e8a 0%, #0096c7 100%);
    background: -moz-linear-gradient(top, #023e8a 0%, #0096c7 100%);
    background: linear-gradient(top, #023e8a 0%, #0096c7 100%);
}
/* end of index.html */


/* all product page */
#a-header, #active-header, #b-header, #dress-header, #outerwear-header, #tops-header{
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}

#a-header h2{
    font-variant: small-caps;
    font-size: 1.6em;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    text-transform: capitalize;
    width: 7em;
    color: black;
    border: 4px solid whitesmoke;
    border-radius: 10px;
    background-color: #0096c7;
    margin: auto;
    max-width: 100%;
    box-sizing: border-box;
}

#a-page, #active-page, #b-page, #outerwear-page, #tops-page, #dress-page{
    text-align: center;
    min-height: 100vh;
 }

#a-page div, #active-page div, #b-page div, #outerwear-page div, #tops-page div, #dress-page div{
   padding: 20px;
}


#a-page div p:nth-child(4), #active-page div p:nth-child(4), #b-page div p:nth-child(4),#dress-page div p:nth-child(4), #outerwear-page div p:nth-child(4), #tops-page div p:nth-child(4){
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-family: serif;
    font-size: small;
    width: 18em;
    text-align: center;
    text-align: justify;
    margin: 0 auto;
}

.second-footer{
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#active-header h2{
    font-family: 'Times New Roman', Times, serif;
    width: 7em;
    font-size: 1.6em;
    font-variant: small-caps;
    font-weight: bolder;
    text-align: center;
    border-radius: 10px;
    color: black;
    border: 4px solid whitesmoke;
    background-color: #0096c7;
    box-sizing: border-box;
    margin: auto; 
}

#b-header h2{
    font-family: 'Times New Roman', Times, serif;
    width: 5em;
    font-size: 1.6em;
    font-variant: small-caps;
    font-weight: bolder;
    text-align: center;
    border-radius: 10px;
    color: black;
    border: 4px solid whitesmoke;
    background-color: #0096c7;
    box-sizing: border-box;
    margin: auto; 
}

#dress-header h2{
    font-family: 'Times New Roman', Times, serif;
    width: 11em;
    font-size: 1.6em;
    font-variant: small-caps;
    font-weight: bolder;
    text-align: center;
    border-radius: 10px;
    color: black;
    border: 4px solid whitesmoke;
    background-color: #0096c7;
    box-sizing: border-box;
    margin: auto;
}

#outerwear-header h2{
    font-family: 'Times New Roman', Times, serif;
    width: 7em;
    font-size: 1.6em;
    font-variant: small-caps;
    font-weight: bolder;
    text-align: center;
    border-radius: 10px;
    color: black;
    border: 4px solid whitesmoke;
    background-color: #0096c7;
    box-sizing: border-box;
    margin: auto;
}

#tops-header h2{
    font-family: 'Times New Roman', Times, serif;
    width: 9em;
    font-size: 1.6em;
    font-variant: small-caps;
    font-weight: bolder;
    text-align: center;
    border-radius: 10px;
    color: black;
    border: 4px solid whitesmoke;
    background-color: #0096c7;
    box-sizing: border-box;
    margin: auto;
}


/* catalogue page */
#catalogue-header{
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}

#catalogue-header h1{
    font-variant: small-caps;
    font-size: 1.6em;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    text-transform: capitalize;
    width: 10em;
    color: black;
    border: 4px solid whitesmoke;
    border-radius: 10px;
    background-color: #0096c7;
    margin: auto;
    max-width: 100%;
    box-sizing: border-box;
}

#catalogue-page{  
    margin: 0 auto;
    min-height: 100vh;
}

#catalogue-page div{
    text-align: center;
    margin: 0 auto;
    padding: 20px;
}


#catalogue-page div img{
    width: 200px; 
    height: 300px; 
}

#catalogue-page div p:nth-child(4){
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-family: serif;
    font-size: small;
    width: 17em;
    text-align: center;
    text-align: justify;
    margin: 0 auto;
}

/* contact */
.c-logo {
    max-width: 100px;
    display: block;
    margin: auto;
    position: relative;
    top: 1px;
}

  #contact-page{
    min-height: 100vh;
    margin: 80px 0;
  }

.about-us {
    line-height: 2.5em;
    width: 90%;
    text-align: center;
    margin-left: 5%;
}

.info{
    position: relative;
    top: 50px;
}

.info p {
    width: 35em;
    text-align: justify;
    line-height: 1.5em;
    margin: auto;
    font-weight: bold;
    font-size: 0.9em;
    font-family: 'Times New Roman', Times, serif;
}

.info form {
    text-align: center;
}

.info input{
    height: 30px;
}

.info input::placeholder {
    text-align: center;
    font-size: 16px;
    text-transform: capitalize;
}

.info textarea {
    height: 150px;
}


.info button {
    font-size: 18px;
    background-color: #023e8a;
    color: aliceblue;
    text-transform: capitalize;
    border-radius: 10px;
}

.info button:hover{
    background-color: #0096c7;
    color: black;
    font-family: 'lucida sans';
}

/* end of contact*/


/* pseudo for index.html */

li:hover a{
    color: white;
    background: #03045e;
}

nav:active{
    color: crimson;
}


button:hover {
    background-color: #023e8a;
    color: white;
    border: 2px solid #0096c7;
    border-radius: 6px;
}

.accessories h2:hover,
.active-wear h2:hover,
.bottoms h2:hover,
.dresses h2:hover,
.outerwear h2:hover,
.tops h2:hover {
    background-color: #0096c7;
    color: black;
    box-shadow: 3px 3px 4px 4px #023e8a;
}

.dresses a:hover {
    background-color: #0096c7;
    color: black;
    border: 2px solid #023e8a;
}

.tops a:hover {
    background-color: #0096c7;
    color: black;
    border: 2px solid #023e8a;
}

.promotion-1 button:hover {
    background-color: #0096c7;
    color: black;
}

.outerwear a:hover {
    background-color: #0096c7;
    color: black;
    border: 2px solid #023e8a;
}

.bottoms a:hover {
    background-color: #0096c7;
    color: black;
    border: 2px solid #023e8a;
}

.promotion-2 button:hover {
    background-color: #0096c7;
    color: black;
}

.active-wear a:hover {
    background-color: #0096c7;
    color: black;
    border: 2px solid #023e8a;
}

.accessories a:hover {
    background-color: #0096c7;
    color: black;
    border: 2px solid #023e8a;
}

.promotion-3 button:hover {
    background-color: #0096c7;
    color: black;
}

article h3:hover {
    background-color: #0096c7;
    color: black;
    box-shadow: 3px 3px 4px 4px #023e8a;
}

footer a:hover, #submit:hover{
    background: -webkit-linear-gradient(bottom, #023e8a 0%, #0096c7 100%);
    background: -moz-linear-gradient(bottom, #023e8a 0%, #0096c7 100%);
    background: linear-gradient(bottom, #023e8a 0%, #0096c7 100%);
}

input[type="email"]:focus, input[type="text"]:focus {
    border: 4px dashed #0096c7;
    border-radius: 4px;
    outline: none;
}

input[type="search"]:focus, textarea:focus {
    border: 2px dashed #03045e;
    border-radius: 4px;
    outline: none;
}

/* end of pseudo for index.html */



/* grid areas name */
header{
    grid-area: header;
}
    

nav{
    grid-area: nav;
}

.banner{
    grid-area: banner;
}


.dresses{
    grid-area: dresses;
}


 .tops{
    grid-area: tops;
}


.promotion-1{
    grid-area: promotion-1;
}


.outerwear{
    grid-area: outerwear;
}


.bottoms{
    grid-area: bottoms; 
}


.promotion-2{
    grid-area: promotion-2;
}


.active-wear{
    grid-area: active-wear;
}



.accessories{
    grid-area: accessories;
}


.promotion-3{
    grid-area: promotion-3;
}


.banner-1{
    grid-area: banner-1;
}


article{
    grid-area: article;
}


footer{
    grid-area: footer;
}





/* responsiveness from @media min width: 768px  */
@media screen  and (min-width:768px){
header p {
    text-transform: uppercase;
    font-weight: bolder;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
}

nav{
    top: 190px;
    
}
nav ul{
    display: flex;
    height: 150px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

nav ul li{
    flex: 1 1 0;
}

.dresses div, .tops div, .outerwear div, .bottoms div, .active-wear div, .accessories div{
    display: inline-block; 
    margin: 10px;
    padding: 35px; 
}

.dresses  h2, .tops h2, .active-wear h2, .outerwear h2, .accessories h2, .bottoms h2{
    font-size: 2em;
}

.promotion-1 h2, .promotion-2 h2, .promotion-3 h2{
    font-size: 1.5em;
}

article h3 {
    font-size: 40px;
}

article p{
    line-height: 3rem;
    text-align: center;
}

footer h4 {
    font-size: 2em;
}

footer a{
    font-size: 40px;
}
    

/* all product section */
#a-header, #active-header, #b-header, #dress-header, #outerwear-header, #tops-header{
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}


#a-header h2{
    font-size: 3em;
    width: 6em;
}


#a-page, #active-page, #b-page, #outerwear-page, #tops-page, #dress-page{
    display: block;
    margin: 0;
    padding: 10px;
}


#a-page div, #active-page div, #b-page div, #outerwear-page div, #tops-page div, #dress-page  div{
    display: inline-block;
    width: 12em;
    margin: 50px;
}

#a-page div p:nth-child(4), #active-page div p:nth-child(4), #b-page div p:nth-child(4),#dress-page div p:nth-child(4), #outerwear-page div p:nth-child(4), #tops-page div p:nth-child(4){
    font-size: small;
    width: 15em;
    text-align: justify;
}



#active-header h2{
    font-size: 3em;
    width: 7em;
}


#b-header h2{
    font-size: 3em;
    width: 5em;
}

#outerwear-header h2{
    font-size: 3em;
    width: 6em;
}

#tops-header h2{
    font-size: 3em;
    width: 8em;
}

#dress-header h2{
    font-variant: small-caps;
    font-size: 3em;
    width: 10em;
}

/* catalogue page */
#catalogue-header h1 {
    font-size: 3em;
    width: 10em;
}

#catalogue-page{
    display: block;
    margin: 0;
    padding: 10px;
    text-align: center;
}

#catalogue-page div{
    display: inline-block;
    width: 16em;
    margin: 15px;
}

#catalogue-page div img{
    width: 200px; 
    height: 300px; 
}

#catalogue-page div p:nth-child(4){
    width: 15em;
}


/* contact page */
.info p{
    font-size: 1.6em;
}

.info form {
    text-align: center;
    position: relative;
    top: 50px;
}

.info input {
    position: relative;
    top: 45px;
    margin-left: -290px;
    height: 30px;
}

.info textarea {
    position: relative;
    top: -100px;
    margin-top: -20px;
    margin-left: 230px;
}


.info button {
    font-size: 30px;
    position: relative;
    top: -95px;
    margin-left: 220px;
}
/* end of contact*/

}