:root{
    --primary-color: #ded7f8;
    --primary-color-dark: #b7aef1;
    --hover-color: #9487ea;
    --black-color: #161317;
    --black-color-dark: #000000;
    --default-font: "Lora", serif;
    --heading-font: "Neuton", system-ui;
    --button-font: "Nanum Gothic Coding", system-ui;
}
body{margin:0;padding:0;font-family:var(--default-font);font-weight:400}
h1,h2,h3,h4,h5,h6{font-family:var(--heading-font);font-weight:400;line-height:1}
p{font-size:18px;margin:0}
img{max-width:100%;height:auto}
.btn{display:block;font-family:var(--button-font);background-color:var(--primary-color);min-width:50px;cursor:pointer;padding:14px 24px;border:solid 1px var(--black-color);text-decoration:none;transition:box-shadow .15s cubic-bezier(.215,.61,.355,1);box-shadow:var(--black-color) 4px 4px 0 0;border-radius:3px;font-size:21px;color:var(--black-color-dark);max-width:max-content}
.btn:hover{box-shadow:6px 6px 0 0 var(--black-color);background-color:var(--primary-color-dark)}
.btn.btn-dark{background-color:var(--primary-color-dark);text-transform:uppercase}
.btn.btn-dark:hover{background-color:var(--hover-color)}
.container{width:1360px;margin:0 auto;max-width:calc(100% - 30px)}
header{background-color:var(--primary-color)}
.page-header{display:flex;justify-content:space-between;align-items:center;padding:30px 0}
.logo img{width:157px}
.grid{display:grid;grid-template-columns:1fr 1fr;place-items:center;column-gap:36px;padding:0 45px}
.grid.large-image{grid-template-columns:25% 75%}
.grid-item{display:flex;flex-direction:column;gap:24px}
section.page-section{padding:112px 0}
section.page-section.no-padding{padding:0}
.page-section h1{font-size:56px;margin:0}
.black-wrap h2,.page-section h2{font-size:42px;margin:0}
.page-section img{border-radius:10px}
.grid.large-image img{border-radius:0}
.black-wrap{background-color:var(--black-color);text-align:center;color:var(--primary-color);padding:100px 0}
.black-wrap.bg-img{background-image:url(imgs/bg.jpg);background-size:cover;background-position:center;color:var(--black-color)}
.black-wrap .container{display:flex;flex-direction:column;gap:24px}
.page-footer{padding:24px 45px;display:flex;flex-direction:column;gap:15px}
ul.social-media{display:flex;list-style:none;margin:15px 0;padding:0;gap:5px}
.foo-logo{margin-top:24px}
.foo-logo img{width:200px}
.copyrights p{font-size:14px}

/*Popup form start*/


#contactdiv b {
	font-size: 18px;
	text-shadow: 1px 0px 3px gray;
}

#contactdiv contactdiv#popup {
	padding-top: 80px;
}

#contactdiv .form {
	border-radius: 2px;
	padding: 20px 30px;
	box-shadow: 0 0 15px;
	font-size: 14px;
	font-weight: bold;
	width: 350px;
	margin: 20px 250px 0 35px;
	float: left;
}

#contactdiv input {
	width: 100%;
	height: 35px;
	margin-top: 5px;
	border: 1px solid #999;
	border-radius: 3px;
	padding: 5px;
}

#contactdiv input[type=button] {
	background-color: #123456;
	border: 1px solid white;
	font-family: 'Fauna One', serif;
	font-Weight: bold;
	font-size: 18px;
	color: white;
	width: 49%;
}

#contactdiv textarea {
	width: 100%;
	height: 80px;
	margin-top: 5px;
	border-radius: 3px;
	padding: 5px;
	resize: none;
}

#contactdiv {
	opacity: 0.92;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	display: none;
}


#contactdiv  #contact {
	width: 350px;
	margin: 0px;
	background-color: white;
	font-family: 'Fauna One', serif;
	position: relative;
	border: 5px solid rgb(90, 158, 181);
}

#contactdiv  .img {
	float: right;
	margin-top: -35px;
	margin-right: -37px;
}

#contactdiv  #contact {
	left: 50%;
	top: 50%;
	margin-left: -210px;
	margin-top: -255px;
}

/*Popup form end*/

@media all and (max-width:824px){
    .grid,.grid.large-image{grid-template-columns:repeat(1,1fr);padding:0;column-gap:0;row-gap:36px}
    .page-footer,section.black-wrap,section.page-section,section.page-section.no-padding{padding:50px 0}
    .grid.large-image img{border-radius:10px}
    .black-wrap h2,.page-section h2{font-size:32px}
}