body{
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-template-rows: repeat(9,100px);
   grid-gap: 10px;
   margin: .5%;
   font-size: calc(16px + 0.390625vw);
}

header{
   margin-top: 1%;
   grid-column: 1/13;
   grid-row:1/2;
   border: 1.5px solid #28847c;
   margin: 0 auto;
   width: 100%;
   height:100%;
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: center;
   
}
img{
   width: 2.5%;
   margin: 0 auto;
}

nav{
   grid-column: 1/13;
   grid-row:2/3;
   
   margin: 0 auto;
   width: 100%;
   height:100%;
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: center;
   border-radius: 15px;
}
nav ul{
   border: 1.5px solid #28847c;
   width: 100%;
   height: 50%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;;
}

.links-container li{
   text-transform: uppercase;
}
.links-container a{
   text-decoration: none;
   color: #28847c;
   font-size: 1.2rem;
   padding: 10px 25px;
   
}
.links-container li:last-child{
border: 1px solid #28847c;
padding: 8px;
border-radius: 5px;
}
.links-container li:last-child:hover{
   border: 1px solid white;
   padding: 8px;
   border-radius: 5px;
   background-color: #28847c;
   }
   .item-link:last-child:hover, .action:hover{
      color: white;
      transition: ease-in-out .5s;
   }
main{
   grid-column: 1/13;
   grid-row:3/9;
   border: 1.5px solid #28847c;
   margin: 0 auto;
   width: 100%;
   height:100%; 
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-template-rows: repeat(3,1fr);
   border-radius: 15px;
}
.ads-banner{
   grid-column: 1/4;
   grid-row:1/2;
   min-width:inherit;
   height:98%;
   background-image: url(../assets/hero-image.jpg);
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 15px;
}
.banner-overlay{
   border: 1px solid white;
   width: inherit;
   min-height: 100%;
   background-color: rgba(0,0,0,.3);
   border-radius: 15px;
}
.banner-overlay h1{
   color: white;
   margin-top:4%;
   margin-left: 5%;
   margin-bottom: .5%;
   font-size: 3rem;
}
.banner-overlay p{
   color: white;
   margin: 1% 5%;
   font-size: 1.5rem;
}
.cards-container{
   grid-column: 1/4;
   grid-row:2/4;
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-template-rows: repeat(1,1fr);
}
.card{
   border: 2.5px solid #28847c;
   margin: 15% auto;
   width: 80%;
   height: 80%;
   border-radius: 15px;
}
.cards1{
   grid-column: 1/2;
   grid-row: 1/2;
}

.cards2{
   grid-column: 2/3;
   grid-row: 1/2;
}
.cards3{
   grid-column: 3/4;
   grid-row: 1/2;
}

/*animations*/

@keyframes animated-bg {
   from{
     width: 95%;
     background-image: url(../assets/Small-garden-landscaping-ideas1.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position:inherit;
   }
   25%{
     width: 95%;
     background-color: rgba(0, 0, 0, 0.5);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: inherit;
   }
   50%{
     width: 95%;
     background-image: url(../assets/neslihan-gunaydin-BduDcrySLKM-unsplash.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position:inherit;
   }
   75%{
     width: 95%;
     background-color: rgba(0, 0, 0, 0.5);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: inherit;
   }
   to{
     width: 95%;
     background-image: url(../assets/Small-garden-landscaping-ideas2.webp);
     background-size: cover;
     background-repeat: no-repeat;
     background-position:inherit;
   }
}
article{
   width: 25%;
   height: 80vh;
   border: 1px solid rgba(0, 0, 0, 0.493);
   border-radius: 1%;
   margin-top: 5%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: auto;
}
article .img-window{
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   border: 1px solid #28847c;
   margin: 2% auto;
   width: 95%;
   height: 50%;
   animation-name: animated-bg;
   animation-duration: 20s;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction:normal;
   animation-timing-function: ease-in-out ;
}

article .appointment{
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   border: 1px solid #28847c;
   margin: 2% auto;
   width: 95%;
   height: 50%;
   background-image: url(../assets/consultation.jpg);
   background-size:cover;
   background-repeat: no-repeat;
}
article .opening{
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   border: 1px solid #28847c;
   margin: 2% auto;
   width: 95%;
   height: 50%;
   background-image: url(../assets/opening\ hours.jpg);
   background-size:cover;
   background-repeat: no-repeat;
}
article .text-window{

   margin: 2% auto;
   width: 95%;
   height: 44%;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
}
article .text-window h1{
   margin-top: 1%;
   text-transform: uppercase;
   font-weight: bold;
   color:#28847c;
   border-bottom: 1px solid #28847c;
   font-size: 1.2rem;
   text-align: center;
}
article .text-window p{
   font-size: 1rem;
   margin: 2% auto;
   width: 95%;
   height: 78%;
   text-align: center;

}
article .text-window ul{
   font-size: 1rem;
   margin: 2% auto;
   width: 95%;
   height: 78%;
   text-align: center;

}
article .text-window button{
   border-radius: 8px;
   border: 1px solid #28847c;
   color: white;
   background-color: #28847c;
   width: 96%;
   height: 20px;
   margin-bottom: 2%;
}
footer{
   grid-column: 1/13;
   grid-row:9/10;
   border: 1.5px solid #28847c;
   margin: 0 auto;
   width: 100%;
   height:100%;
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-template-rows: repeat(1,1fr);
   border-radius: 15px;
}
footer .logo-footer{
   grid-column: 1/2;
   grid-row: 1/2;
   /* border: 1px solid red; */
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;

}
.footer-logo{
   width: 10%;
}
.footer-copy{
   grid-column: 2/3;
   grid-row: 1/2;
   
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evely;
}
.footer-copy p{
   /* border: 1px solid red; */
   height: 45%;
   width:99%;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}