@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

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

html{
	font-size: 62.5% !important;
}

a{
	text-decoration: none;
	color:white;
	text-transform: uppercase;
	display: inline-block;
}

.main{
	background: linear-gradient(to right,#93afc4,#fff);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container{
	max-width: 115.2rem;
	margin:0 auto;
	background-image: url("./images/bg.png");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 70%;
	padding:0 5rem;
	box-shadow: 0 0 1rem rgba(0,0,0,0.3);
	position: relative;
}

.container .nav-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:1rem 0;
}

.container .nav-bar .logo img{
	width: 5.8rem;
	height: 5.8rem;
}

.container .nav-bar .nav_open{
	margin-top:-2.8rem;
	cursor: pointer;
}

.container .nav-bar .nav_open,
.container .nav-bar .close_nav{
	width: 2.5rem;
	display: none;
}

/* show nav in lower res devices css */

.show_nav{
	display: block !important;
	position: absolute !important;
	right: 0;
	top:0;
	height: 100vh;
	background-color: rgba(0,0,0,0.4);
	width: 100vw;
	text-align: center;
}

.show_nav .nav-primary{
	margin:0 !important;
}

.show_nav .nav-primary,.close_nav{
	margin-top: 2rem !important;
}

.show_nav .close_nav{
	display:inline-block !important;
}

.show_nav .nav-primary{
	display: flex !important;
	flex-direction: column;
	margin-bottom: 6rem !important;
	gap:2rem;
}

.show_nav .nav-primary li + li{
	margin:0 !important;
}

/* show nav in lower res devices css end */


.container .nav-bar nav ul {
	list-style: none;
}

.container .nav-bar nav ul,
.container .nav-bar nav ul li{
	display: inline-block;
}

.container .nav-bar .nav-primary {
	margin-right: 5rem;
}


.container .nav-bar .nav-primary li{
	font-weight: 400;
	font-size: 1.6rem;
}

.container .nav-bar .nav-primary li + li{
	margin-left: 1.6rem;
}

.container .nav-bar .nav-primary li a:hover{
	font-weight: 700;
	transition: font-weight 0.5s;
}


.container .nav-bar .nav-auth li{
	font-weight: 700;
	font-size: 1.8rem;
}

.container .nav-bar .nav-auth li + li{
	margin-left: 1.2rem;
}

.container .nav-bar .nav-auth li a{
	padding:0.8rem 2rem;
	border-radius:2rem;
}


.container .nav-bar .nav-auth li:first-child a{
	background:linear-gradient(to bottom ,#3b88d5,#4182bc);
}

.container .nav-bar .nav-auth li:nth-child(2) a{
	background:linear-gradient(to bottom ,#d2d2d2,#fff);
	color: #8ea6d2;
}

.container .landing{
	display: flex;
	color:white;
	margin:4rem 0;
}

.container .landing .description {
	display: flex;
	flex-direction: column;
	width: 41%;
}


.container .landing .description h1{
	font-weight: 700;
	font-size: 4rem;
	text-transform: uppercase;
	letter-spacing: .2rem;
	/*width: 50%;*/
	margin-bottom: 2rem;
}

.container .landing .description h1 span{
	font-size: 4.8rem;
}

.container .landing .description p{
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: .1rem;
	line-height: 1.3;
	margin-bottom: 3.6rem;
	text-align: justify;
}

.container .landing .description .buy-now-cta{
	background:linear-gradient(to bottom ,#d2d2d2,#fff);
	padding: 1rem 2rem;
	border-radius: 2rem;
	color:black;
	font-weight: 700;
	font-size: 1.6rem;
	width: max-content;
	align-self: center;
}

.container .landing .pepsi_image{
	flex:1;
	display: flex;
	justify-content:flex-end;
}

.container .landing .pepsi_image img{
	width:20rem;
	margin-right: 10rem;
}

@media(max-width: 991px){
	.container .landing .description {
    	width: 57%;
	}

	.container .landing .pepsi_image img{
		margin:0;
	}

	.container .landing .pepsi_image {
    	justify-content: center;
	}
}

@media(max-width: 840px){
	.container .landing .description {
    	width: 52%;
	}

	.container .landing .description h1 {
	    font-size: 2rem;
	}

	.container .landing .description h1 span {
    	font-size: 3.6rem;
	}

	.container .nav-bar nav{
		display: none;
	}

	.container .nav-bar .nav_open{
		display:block;
	}

	.container .landing .pepsi_image {
    	justify-content: flex-end;
	}
}

@media(max-width: 600px){
	.container .landing {
    	flex-direction: column;
    	gap: 6rem;
	}

	.container .landing > div{
		width:100% !important;
	}

	.container .landing .pepsi_image {
    	justify-content:center;
	}
	.container .landing .pepsi_image img {
    	width: 18rem;
	}
}

@media(max-width: 371px){
	.container {
    	padding: 0 1.5rem;
	}
}