*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f4f4f4;
}

/* TOP BAR */

.topbar{
background:#f6f6f6;
padding:12px 60px;
display:flex;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
justify-content:space-between;
align-items:center;
font-size:14px;
text-align: left;
color:#007C7C
}

.topbar i{
color:#1a75bb;
margin-right:10px;
}

/* NAVBAR */

.navbar{
background:#fff;
padding:18px 0;
text-align:center;
border-bottom:1px solid #eee;
}

.logo img{
height:55px;
margin-bottom:10px;
}

.menu{
display:flex;
justify-content:center;
gap:40px;
list-style:none;
}

.menu a{
text-decoration:none;
color:#444;
font-size:14px;
letter-spacing:1px;
}

.menu a:hover{
color:#ff2c8b;
}

/* HERO */

/*.hero{
height:330px;
background:url(images/img\ 2.png) center/cover no-repeat;
display:flex;
align-items:center;
padding-left:120px;
position:relative;
}

.hero:before{
content:"";
width:6px;
height:40px;
background:#ff2c8b;
position:absolute;
left:95px;
}

.hero h1{
color:#fff;
font-size:48px;
font-weight:500;
}*/

/* MAIN SECTION */

.container{
width:1200px;
margin:auto;
padding:60px 0;
display:flex;
gap:60px;
align-items:flex-start;
}

/* LEFT MENU */

.sidebar{
width:260px;
background:#fff;
border:1px solid #ddd;
}

.sidebar h3{
margin:0;
padding:16px;
background:#2aa1b3;
color:#fff;
font-size:16px;
}

.sidebar ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar ul li{
padding:14px 18px;
border-bottom:1px solid #eee;
cursor:pointer;
font-size:15px;
}

.sidebar ul li:hover,
.sidebar ul li.active{
background:#f7f7f7;
color:#ff2d7a;
}

/* IMAGE */

.product-image{
width:320px;
float:left;
}

.product-image img{
width:100%;
height:auto;
}

/* CONTENT */

.product-content{
max-width:420px;
float:right;
margin-left:50px;
text-align: left;
margin-top: 0px;
}

.product-content h2{
color:#008080;
margin-top:0;
font-size:28px;
}

.product-content p{
color:#555;
line-height:1.7;
font-size:15px;
}

.btn{
display:inline-block;
background:#008080;
color:#fff;
padding:12px 26px;
text-decoration:none;
margin-top:20px;
}

/* YELLOW SHAPE */

.yellow-shape{
position:absolute;
left:0;
bottom:0;
width:220px;
height:220px;
background:#ffd400;
border-top-right-radius:200px;
}

/* FOOTER */

footer{
background:#000;
color:#fff;
text-align:center;
padding:70px 20px;
/*margin-top:40px;*/
}

footer h2{
font-weight:500;
margin-bottom:10px;
}

footer p{
color:#bbb;
font-size:14px;
}

.social{
margin:20px 0;
}

.social i{
font-size:22px;
margin:0 10px;
color:#1a75bb;
}
@media screen and (max-width: 600px) {
	.container{
		width:auto;
		margin:auto;
		padding:60px 0;
		display:block;
		gap:60px;
		align-items:flex-start;
		}
		.sidebar{
		width:auto;
		background:#fff;
		border:1px solid #ddd;
		}
		.product-content{
		max-width:420px;
		float:left;
		margin-inline:0px;
		text-align: left;
		margin-top: 20px;
		}
		.topbar{
		background:#f6f6f6;
		padding:12px 15px;
		display:grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
		justify-content:space-between;
		align-items:center;
		font-size:14px;
		text-align: center;
		}
}