*{
	font-family:"Quicksand",sans-serif;
	font-size:12pt;
	color:#000;
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body{
	background-color:#fff;
}

#wrapper{
	max-width:1200px;
	min-height:100vh;
	margin:0 auto;
	display:grid;
	grid-template-areas:
	"banner"
	"menu"
	"content";
	grid-template-columns:1fr;
	grid-template-rows:100px 50px minmax(700px,auto);
}

header{
	grid-area:banner;
	display:grid;
	grid-template-areas:
		"logo image company icon";
	grid-template-columns:1fr 1fr 0.5fr 0.5fr;
	margin-bottom:3em; 
	padding:0.5em;
	
}

.logo-text{
	grid-area:logo;
}

.logo-img{
	grid-area:image;
	justify-self: end;
	margin-right: 10px;
}


header h1{
	grid-area:logo;
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
}
header ul{
	grid-area:icon;
	list-style:none;
	display:flex;
	justify-content:flex-end;
	gap:1em;
	padding:0;
	margin:0;
}
button.icon-btn {
    background: none;   
    border: none;         
    padding: 0;        
    margin: 0;
    outline: none;        
    cursor: pointer;    
}	
/*---------------------------------*/
nav{
	grid-area:menu;
	text-align:center;
}

nav ul{
	list-style:none;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-around;
	align-content:center;
}
nav ul li a{
	text-decoration:none;
}
 
nav ul a:hover{
	color:lightblue;
	font-size:1.5em;
}
/*---------------------------------*/
#home{
	grid-area:content;
	display:grid;
	grid-template-areas:
	"content1"
	"content2";
	grid-template-rows:auto auto;
	grid-template-columns:1fr;
	
}
#home h2{
	font-size:2.5em;
	color:grey;
	text-align:center;
}
#home-ct1{
	grid-area:content1;
	position:relative;
	width:100%;
	background-image:url("../img/dogimage1.png");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:80% center;
	min-height:60vh;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-direction:column;
	gap:1em;
	padding:0 7%;
}
.hero-title{
	font-size:2.5em;
	font-weight:bold;
}	
.hero-text{
	font-size:1.2em;
	margin-top:2em;
}

#home-ct1 .btn{
		display:inline-block;
		padding:25px;
		background-color:#b9d6df;
		opacity:90%;
		border-radius:60px;
		text-decoration:none;
		font-size:1.7em;
		font-weight:bold;
		color:white;
		margin-top:1.5em;		
}
.btn:hover{
	transform: scale(1.1);
}

#home-ct2{
	grid-area:content2;
	margin:5em 0;
}

#home-ct2 ul{
	margin-top:5em;
	list-style:none;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:30px;
	justify-content:space-between;
}
#home-ct2 li {
    flex: 1 1 30%;
    box-sizing: border-box;
	background-color:#f5f3db;
	border-radius:10px;
}
li.bestselling{
	display:flex;
	flex-direction:column;
	padding-top:20px;
}
a.bs-card{
	text-decoration:none;
}
.bs-card img:hover{
	transform: scale(1.05);
}
.bs-card span{
	color:white;
	font-size:1.1em;
}
.bs-card{
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items:center;
	text-align:center;
}
.review-box{
	background-color:#d2d7b3;
	border-radius:0 0 10px 10px;
	padding:10px;
	margin-top:1em;
	display:grid;
	grid-template-areas:
	"photo name"
	"comments comments";
	grid-template-rows:1fr 1fr;
	grid-template-columns:1fr 1fr;
}
.review-box img{
	grid-area:photo;
}
p.customer{
	grid-area:name;
}
p.comment{
	grid-area:comments;
}
#home-ct2 .bs-card img {
	max-width:224px;
    width: 100%;        
    height: auto;          
    border-radius: 10px; 
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
#home-ct2 .articles {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}
#home-ct2 ul a:hover{
	font-weight:bold;
}
/*---------------------------------*/
#product{
		grid-area:content;
		display:grid;
		grid-template-areas:
		"content1 content1"
		"content2 content3"
		"content2 content4"
		"content2 content5"
		"content2 content6";
		grid-template-columns:1fr 4fr;
		grid-template-rows:repeat(5,auto); 
}

#product-ct1{
	grid-area:content1;
	background-color:#b9d6df;
	padding:0.5em;
}
#product-ct1 h2{
	font-size:2em;
	color:white;
	text-align:center;
	margin:0.5em auto;
	font-weight:bold;
}
#search-bar {
	display:flex;
	width:80%;
	height:30%;
	margin:auto;
}
#search-bar input{
	flex:1;
	width:100%;
	height:100%;
	box-sizing:border-box;
	font-size:1em;
	border-radius:10px;
}	

#search-bar button{
	padding:0.2em;
	background:none;
	border:none;
	align-items: center;
	justify-content:center;
}

#product-ct2 {
	grid-area:content2;
}

#product-ct2 ul{
	margin-top:2em;
	list-style:none;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	height:50%;
	justify-content:space-between;
	align-content:center;
}
#product-ct2 li{
	text-align:center;
	font-size:1.2em;
}
#product-ct2 ul a{
	font-size:1.1em;
	text-decoration:none;
}
#product-ct2 ul a:hover{
	text-decoration:underline;
	color:grey;
}
#product h3{
		background-color:#f5f3db;  
		font-size:2em;
		font-weight:bold;
		color:#787677;
		margin:1em;
		padding:0.2em;
} 
.items{
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.18);
	margin:0.2em 2em;
}
.items:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.30);
}
#product-ct3{
	grid-area:content3;
}
#product-ct4{
	grid-area:content4;
}
#product-ct5{
	grid-area:content5;
}
#product-ct6{
	grid-area:content6;
	padding-bottom:3em;
}
/*---------------------------------*/
#detail{
	grid-area:content;
	display:grid;
	grid-template-areas:
	"content1"
	"content2"
	"content3";
	grid-template-columns:1fr;
	grid-template-rows:auto auto auto;
}

#detail-ct1{
	grid-area:content1;
	display:grid;
	grid-template-areas:
	"img name"
	"img price"
	"img quantity"
	"img text";
	grid-template-columns:1fr 1.5fr;
	grid-template-rows:auto auto auto auto;
	border-bottom:1px solid grey;
	padding:2em;
}
#detail-ct1 img{
    grid-area: img;
    width: 100%;
	height:100%;
	max-height:340px;
	max-width:340px;
	display:block;
}
#detail-ct1 h2{
	font-size:1.5em;
	grid-area:name;
}
#detail-ct1 h3{
	font-size:1.5em;
	grid-area:price;
}
#detail-ct1 form{
	grid-area:quantity;
}
#detail-ct1 p{
	font-size:1em;
	grid-area:text;
}
#detail-ct2{
	grid-area:content2;
}
#detail-ct3{
	grid-area:content3;
	display:flex;
	flex-direction:row;
	height:100%;
	justify-content:space-around;
	align-items:center;
}
#detail-ct2{
	background-color:#f5f3db;
	grid-area:content2;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2em;
	margin:2.5em 0;
}
#detail-ct2 img{
	padding:2em;
	display:block;
	border-radius:10px;
}
#detail-ct3{
	grid-area:content3;
	display:flex;
	flex-direction:row;
	gap:30px;
	padding:3em;
	height:100%;
	justify-content:space-around;
	align-items:center;
}
#detail-ct3 a{
	padding:20px;
	border-radius:10px;
	display:inline-block;
	text-align:center;
	font-size:1.4em;
	color:white;
	font-weight:bold;
	text-decoration:none;
}
.back-btn{
	background-color:lightgrey;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.18);
}
.add-btn{
	font-weight:bold;
	background-color:#b9d6df;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.18);
}
/*---------------------------------*/
#about{
	grid-area:content;
	display:grid;
	grid-template-areas:
	"content1"
	"content2"
	"content3";
	grid-template-columns:1fr;
	grid-template-rows:1fr 1fr auto;
}
#about-ct1{
	grid-area:content1;
}
#about-ct1 p{
	background-color:#f5f3db;
	color:black;
	font-size:1.1em;
	border:none;
	border-radius:30px;
	width:85%;
	margin:3em auto;
	padding:1.7em;
}

#about-ct1 h2{
	font-size:2em;
	text-align:center;
	color:grey;
	margin:1em auto;
}
#about-ct1 p::first-line{
		font-size:1.4em;
		font-weight:bold;
		color:grey;
}
#about-ct2{
	grid-area:content2;
}
#about-ct2 p{
	background-color:#f5f3db;
	color:black;
	font-size:1.1em;
	border:none;
	border-radius:30px;
	width:85%;
	margin:2em auto;
	padding:1.7em;	
}
#about-ct2 h2{
	font-size:2em;
	text-align:center;
	color:grey;
	margin:0 auto 1em auto;
}

#about-ct3{
	grid-area:content3;
	background-color:#f8e8f3;
	border:none;
	border-radius:30px;
	width:85%;
	margin:2em auto;
	padding:1.7em;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	gap:1.5em;
	margin-bottom:1.5em;
}

#about-ct3 h2{
	flex-basis:100%;
	font-size:2.5em;
	color:white;
	text-align:center;
	margin-bottom:0.4em;
	text-shadow:2px 2px 2px black;
}
.oodle-card{
	flex-grow:1;
	flex-shrink:1;
	flex-basis:48%;
	min-height:400px;
	max-width:500px;
	border:2px;
	border-radius:30px;
	padding:1.2em;
	background-color:white;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.oodle-card img{
	border-radius:15px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
}
.oodle-card h3{
	font-size:1.5em;
	color:grey;
	margin:1em auto;
}
.oodle-card p{
	margin:0;
}
/*---------------------------------*/
#contact{
	grid-area:content;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:center;
	align-items:flex-start;
	gap:3em;
}
#contact h2{
	flex-basis:100%;
	font-size:2.4em;
	font-weight:bold;
	color:grey;
	text-align:center;
	margin:1em auto 0 auto;
}
#contact-ct1{
	background-color:#b9d6df;
	display:flex;
	flex-direction:column;
	gap:1em;
	padding:1em;
	max-width:550px;
	width:100%;
	min-height:500px;
	margin:1em auto 1em auto;
	border-radius:15px;
}

.contact-detail{
	border-radius:30px;
	background-color:white;
	padding:0.5em;
	display:flex;
	align-items:center;
	margin-bottom:1em;
}
.contact-detail img{
	transform:scale(0.6);
	margin:0 1em 0 0.5em;
}

.contact-detail span{
	font-size:1.3em;
	font-weight:bold;
}
.contact-location img{
	transform:scale(0.6);
	margin:0 1em 0 0.5em;
}
.icn-name{
	display:flex;
	align-items:center;
	margin-bottom:1em;
}
.contact-location span{
	font-size:1.3em;
	font-weight:bold;
}
.contact-location iframe{
	display:block;
	margin:0 auto;
}
.contact-location{
	border-radius:30px;
	background-color:white;
	padding:0.5em;
}
	
#contact-ct2{
	flex:1 1 350px;
	max-width:550px;
	width:100%;
	margin:0 auto;
}

#contact-ct2 fieldset{
	background-color:#f8e8f3;
	padding:1.5em;
	min-height:500px;
	border:none;
	border-radius:15px;
}

#contactform legend{
	font-weight:bold;
	font-size:2em;;
	text-align:center;
	margin:1em auto;
}

#contactform label{
	display:flex;
	align-items:center;
	gap:0.5em;
	margin-bottom:0.5em;
}
#contactform label input{
	flex:1;
}
#contactform select{
	display:block;
	width:100%;
	margin-bottom:0.5em;
}
#contactform textarea{
	display:block;
	width:100%;
	height:332px;
	margin-bottom:0.5em;
}
#contactform button{
    padding: 0.5em;
    font-size: 1.2em;
}
.form-group {
    position: relative;
    margin-bottom: 1.5em;
}

.tooltip {
	display: block;
    position: absolute;
    visibility: hidden;
    top: 20px;
    left: 105%;
    width: 10em;
    padding: 0.5em;
    color: #fff;
    background-color: #88A61B;
    border: solid 2px #0E3D59;
}
.error {
	color: #D92525;
}
span.error{
	padding-left: 10px;
}
.success {
	color: #88A61B;
}
span.success{
	padding-left: 10px;
}
/*---------------------------------*/
footer{
	background-color:#d8c8a4;
	max-width:100%;
	padding: 0.4em 2em;
	
}
#footer-content{
	max-width:1200px;
	margin:0 auto;
	display:grid;
	grid-template-areas:
	"subscribe subscribe subscribe subscribe"
	"about shop help socialmedia";
	grid-template-columns:repeat(4,1fr);
	grid-template-rows:repeat(2,1fr);
	justify-content:center;
	text-align:center;
}
footer h2{
	color:#fff;
	font-size:1.3em;	
}
footer h3{
	color:#fff;
	font-size:1.1em;	
}
footer p{
	margin:0.5em;
	gap:0.5em;
}
#aboutus{
	grid-area:about;
}
#shop{
	grid-area:shop;
}
#help{
	grid-area:help;
}
#subscribe{
	grid-area:subscribe;
}
#subscribe-form{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0.5em;
	border-bottom:1px solid grey;
	padding-bottom:2em;
	margin-bottom:1em;
} 
#subscribe-form label{
	display:none;
} 
#subscribe-form input{
	flex:1;
	border:1px solid grey;
	font-size:1.3em;
	padding:0.2em 0.5em;
	max-width:450px;
	min-width:250px;
}
#subscribe-form button{
	font-size:1.3em;
	padding:0.2em 1em;
	cursor:pointer;
	border-radius:10px;
	border:none;
}
#subscribe h2{
	font-size:1.5em;
	font-weight:bold;
	margin-bottom:1em;
}
#social-link{
	grid-area:socialmedia;
}
.social-img{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:0.4em;
}
/*-------------------------------*/
@media (max-width: 800px) {
   .logo-img {
        display: none;
    }
	
	.logo-text{
		content:url("../img/logo1.png");
		width:auto;
		height:auto;
	}
    header {
        grid-template-areas: 
            "logo company icon";
        grid-template-columns: 1fr 1fr 1fr;
	}
	#home-ct2 li {
        flex: 1 1 45%; 
	}
}