* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
  background: #fff;
}
a{
	color: rgb(35, 43, 43);
	text-decoration: none;
}
.hero {
	width: 100%;
	height: 70vw;
	float: left;
	position: relative;
	background: linear-gradient(135deg, rgb(30,144,255), skyblue);
	overflow: hidden;
}
.hero .header-1{
	width: 90%;
	margin-top: 2%;
	margin-left: 5%;
	float: left;
}
.hero .header-1 .logo{
	width: 20%;
	margin-top: -1%;
	float: left;
	display: grid;
	grid-template-columns: 20% 75%;
	grid-column-gap: 5%;
	color: white;
}
.hero .header-1 .logo img{
	width: 100%;
	margin: auto;
}
.hero .header-1 .logo h2{
	width: 100%;
	margin: auto;
	font-size: 1.5vw;
	font-weight: lighter;
	text-transform: uppercase;
	color: rgba(35, 43, 43, 1.0);
}
.hero .header-1 .menu{
	width: 15%;
	float: right;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 10%;
	text-align: right;
	font-size: 1.3vw;
	color: white;
}
.hero .header-1 .menu i{
	color: white;
}
.hero .header-1 .menu i:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.hero .header-2{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 5%;
}
.hero .header-2 .sec-1{
	width: 100%;
	margin: auto;
}
.hero .header-2 .sec-1 h1{
	width: 100%;
	float: left;
	font-family: system-ui;
	font-size: 4.5vw;
	color: white;
	text-transform: uppercase;
}
.hero .header-2 .sec-1 p{
	width: 100%;
	float: left;
	text-align: justify;
	font-family: system-ui;
	font-size: 1.2vw;
	color: rgba(35, 43, 43, 1.0);
}
.hero .header-2 .sec-1 a{
	width: 46%;
	padding: 2%;
	margin-top: 10%;
	float: left;
	border: 1px solid white;
	border-radius: 100px;
	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.7);
}
.hero .header-2 .sec-1 a strong{
	width: 100%;
	padding: 5%;
	background-color: white;
	float: left;
	border-radius: 100px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	text-align: center;
	font-family: system-ui;
	font-size: 1.3vw;
	font-weight: bold;
}
.hero .header-2 .sec-2{
	width: 100%;
	margin: auto;
}
.hero .header-2 .sec-2 p{
	width: 22vw;
	height: 22vw;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5px);
	float: left;
  	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.hero .header-2 .sec-2 p:nth-child(1){
	margin-top: -20%;
}
.hero .header-2 .sec-2 p:nth-child(2){
	margin-top: -10%;
	margin-left: 30%;
}
.hero .header-2 .sec-2 p:nth-child(3){
	margin-top: -10%;
	margin-left: %;
}
.hero .header-2 .sec-2 p img{
	width: 21vw;
	height: 21vw;
	margin: 1vw;
	float: left;
	object-fit: cover;
  	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Floating hexagon shapes */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 15vw;
  background: rgba(255, 255, 255, 0.2);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: float 7s ease-in-out infinite;
}

.hero::before {
  top: 15%;
  left: 10%;
}

.hero::after {
  bottom: 20%;
  right: 10%;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40px) rotate(20deg); }
}

/* Floating dots generated by JS */
.dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: floatDots 10s ease-in-out infinite;
}

@keyframes floatDots {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

#hidenmenu{
	width: 24%;
	height: 100%;
	padding: 0% 3%;
	background: linear-gradient(135deg, rgb(30,144,255), skyblue);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 6;
	box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.5);
	display: none;
}
#hidenmenu ul{
	width: 100%;
	margin-top: 35%;
	float: left;
}
#hidenmenu ul li{
	width: 100%;
	padding-bottom: 7%;
	margin-bottom: 7%;
	float: left;
	list-style: none;
	border-bottom: 1px dashed rgba(35, 43, 43, 0.2);
	font-family: system-ui;
	font-size: 2vw;
}
#hidenmenu ul li span{
	float: left;
}
#hidenmenu ul li strong{
	float: right;
	font-weight: lighter;
}
#close{
	width: 100%;
	margin-top: 50%;
	float: left;
	text-align: center;
	font-size: 5vw;
}

/**********box-1*********/
.box-1{
	width: 90%;
	margin-left: 5%;
	float: left;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 10%;
}
.box-1 section{
	width: 100%;
}
.box-1 section span{
	width: 100%;
	float: left;
	border-radius: 100vw;
	text-align: center;
	font-size: 5vw;
	color: orangered;
}
.box-1 section h2{
	width: 100%;
	margin-top: 2%;
	float: left;
	text-align: center;
	font-family: system-ui;
	font-size: 1.5vw;
}
.box-1 section p{
	width: 100%;
	margin-top: 2%;
	float: left;
	text-align: center;
	font-family: system-ui;
	font-size: 1vw;
}


/**********box-2*********/
.box-2{
	width: 100%;
	margin-top: 10%;
	float: left;
}
.box-2 h2{
	width: 90%;
	margin-left: 5%;
	float: left;
	font-family: system-ui;
	font-size: 3vw;
	font-weight: lighter;
}
.box-2 .list{
	width: 90%;
	margin-left: 5%;
	margin-top: 1%;
	float: left;
	position: relative;
}
.box-2 .list .item{
	width: 22vw;
	height: 25vw;
	background-color: rgba(255,69,0,0.2);
	backdrop-filter: blur(5px);
	float: left;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.box-2 .list .item:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.box-2 .list .item:nth-child(4){
	margin-top: -4%;
	margin-left: 12%;
}
.box-2 .list .item:nth-child(5){
	margin-top: -4%;
}
.box-2 .list .item img{
	width: 20vw;
	height: 23vw;
	margin: 1vw;
	float: left;
	object-fit: cover;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.box-2 .list .item section{
	width: 100%;
	height: 30%;
	margin-top: -65%;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	float: left;
	display: grid;
	position: relative;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	font-size: 1vw;
}
.box-2 .list .item section h3{
	width: 70%;
	margin: auto;
	text-align: center;
	font-family: system-ui;
	font-size: 1.3vw;
	font-weight: normal;
	color: rgba(35, 43, 43, 1.0);
}
.box-2 .list .item section time{
	width: 100%;
	margin-right: 10%;
	float: right;
	font-family: system-ui;
	font-size: 1vw;
	font-weight: lighter;
	color: rgba(35, 43, 43, 1.0);
	display: none;
}

/* Floating hexagon shapes */
.list::before,
.list::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 15vw;
  background: orange;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: float 7s ease-in-out infinite;
}

.list::before {
  top: 15%;
  left: 10%;
}

.list::after {
  bottom: 20%;
  right: 10%;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40px) rotate(20deg); }
}

/* Floating dots generated by JS */
.dat {
  position: absolute;
  border-radius: 50%;
  background: orange;
  animation: floatDots 10s ease-in-out infinite;
}

@keyframes floatDots {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}



/**********Contact********/
.contact{
	width: 90%;
	margin-top: 10%;
	margin-left: 5%;
	float: left;
	position: relative;
}
/* Floating hexagon shapes */
.contact::before,
.contact::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 15vw;
  background: skyblue;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: float 7s ease-in-out infinite;
}

.contact::before {
  top: 15%;
  left: 10%;
}

.contact::after {
  bottom: 20%;
  right: 10%;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40px) rotate(20deg); }
}

/* Floating dots generated by JS */
.dut {
  position: absolute;
  border-radius: 50%;
  background: skyblue;
  animation: floatDots 10s ease-in-out infinite;
}

@keyframes floatDots {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.contact h2{
	width: 100%;
	float: left;
	font-family: system-ui;
	font-size: 3vw;
	font-weight: lighter;
}
.contact .coord{
	width: 25%;
	height: 22vw;
	padding: 2.5%;
	margin-top: 10%;
	margin-left: 10%;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	float: left;
	overflow: hidden;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.contact .coord section{
	width: 100%;
	height: 20vw;
	margin-bottom: 30%;
	float: left;
}
.contact .coord span{
	width: 100%;
	float: left;
	font-family: system-ui;
	font-size: 2vw;
	font-weight: lighter;
}
.contact .coord strong{
	width: 100%;
	margin-top: 5%;
	float: left;
	font-family: system-ui;
	font-size: 2vw;
	font-weight: bold;
}
.contact .coord p{
	width: 100%;
	margin-top: 15%;
	float: left;
	font-family: system-ui;
	font-size: 1vw;
}
.contact .coord p small{
	width: 100%;
	margin-block: 5%;
	float: left;
	border-bottom: 1px solid silver;
}
.contact ul{
	width: 20%;
	margin-top: 10%;
	margin-left: 10%;
	float: left;
}
.contact ul li{
	width: 45%;
	height: 8vw;
	margin: 2.5%;
	background: orange;
	float: right;
	list-style: none;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	display: grid;
}
.contact ul li:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.contact ul li span{
	width: 80%;
	height: 80%;
	margin: auto;
	background: linear-gradient(135deg, rgb(30,144,255), skyblue);
	float: left;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	display: grid;
}
.contact ul li span i{
	width: auto;
	margin: auto;
	font-size: 2vw;
	color: white;
}
.contact .sec-iframe{
	width: 30vw;
	height: 35vw;
	background: rgba(255,165,0,1.0);
	float: right;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	position: relative;
	z-index: 1;
}
.contact .sec-iframe:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.contact .sec-iframe iframe{
	width: 28vw;
	height: 33vw;
	margin: 1vw;
	float: right;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.contact .signature{
	width: 100%;
	float: left;
	font-family: system-ui;
	font-size: 1vw;
	margin-bottom: 3%;
}
.contact .signature span{
	width: 100%;
	float: left;
}






















/***************650px***************/
@media only screen and (max-width: 650px) {

.hero {
	width: 100%;
	height: 125vw;
	float: left;
	position: relative;
	background: linear-gradient(135deg, rgb(30,144,255), skyblue);
	overflow: hidden;
}
.hero .header-1{
	width: 90%;
	margin-top: 2%;
	margin-left: 5%;
	float: left;
}
.hero .header-1 .logo{
	width: 50%;
	margin-top: -1%;
	float: left;
	display: grid;
	grid-template-columns: 20% 75%;
	grid-column-gap: 5%;
}
.hero .header-1 .logo img{
	width: 100%;
	margin: auto;
}
.hero .header-1 .logo h2{
	width: 100%;
	margin: auto;
	font-size: 3.5vw;
	font-weight: lighter;
	text-transform: uppercase;
	color: rgba(35, 43, 43, 1.0);
}
.hero .header-1 .menu{
	width: 30%;
	float: right;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 30%;
	text-align: right;
	font-size: 4.5vw;
	color: white;
}
.hero .header-1 .menu i:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.hero .header-2{
	width: 95%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
	display: grid;
	grid-template-columns: 70% 25%;
	grid-column-gap: 5%;
	overflow: hidden;
}
.hero .header-2 .sec-1{
	width: 100%;
	margin: auto;
	position: relative;
	z-index: 1;
}
.hero .header-2 .sec-1 h1{
	width: 100%;
	float: left;
	font-family: system-ui;
	font-size: 6vw;
	color: white;
	text-transform: uppercase;
}
.hero .header-2 .sec-1 p{
	width: 75%;
	float: left;
	text-align: left;
	font-family: system-ui;
	font-size: 3vw;
	color: rgba(35, 43, 43, 1.0);
}
.hero .header-2 .sec-1 a{
	width: 64%;
	padding: 3%;
	margin-top: 15%;
	float: left;
	border: 1px solid white;
	border-radius: 100px;
	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.7);
}
.hero .header-2 .sec-1 a strong{
	width: 100%;
	padding: 5%;
	background-color: white;
	float: left;
	border-radius: 100px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
	text-align: center;
	font-family: system-ui;
	font-size: 3vw;
	font-weight: bold;
}
.hero .header-2 .sec-2{
	width: 100%;
	margin: auto;
}
.hero .header-2 .sec-2 p{
	width: 35vw;
	height: 35vw;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5px);
	float: left;
  	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.hero .header-2 .sec-2 p:nth-child(1){
	margin-top: 0%;
	margin-left: -12%;
}
.hero .header-2 .sec-2 p:nth-child(2){
	margin-top: -30%;
	margin-left: -80%;
}
.hero .header-2 .sec-2 p:nth-child(3){
	margin-top: -30%;
	margin-left: -12%;
}
.hero .header-2 .sec-2 p img{
	width: 33vw;
	height: 38vw;
	margin: 1vw;
	float: left;
	object-fit: cover;
  	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Floating hexagon shapes */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 15vw;
  background: rgba(255, 255, 255, 0.2);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: float 7s ease-in-out infinite;
}

.hero::before {
  top: 15%;
  left: 10%;
}

.hero::after {
  bottom: 20%;
  right: 10%;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40px) rotate(20deg); }
}

/* Floating dots generated by JS */
.dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: floatDots 10s ease-in-out infinite;
}

@keyframes floatDots {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}


#hidenmenu{
	width: 70%;
	height: 100%;
	padding: 0% 5%;
	background: linear-gradient(135deg, rgb(30,144,255), skyblue);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 6;
	box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.5);
	display: none;
}
#hidenmenu ul{
	width: 100%;
	margin-top: 35%;
	float: left;
}
#hidenmenu ul li{
	width: 100%;
	padding-bottom: 7%;
	margin-bottom: 7%;
	float: left;
	list-style: none;
	border-bottom: 1px dashed rgba(35, 43, 43, 0.2);
	font-family: system-ui;
	font-size: 2vw;
}
#hidenmenu ul li span{
	float: left;
	font-size: 6vw;
}
#hidenmenu ul li strong{
	float: right;
	font-weight: lighter;
	font-size: 6vw;
}
#close{
	width: 100%;
	margin-top: 50%;
	float: left;
	text-align: center;
	font-size: 13vw;
}

/**********box-1*********/
.box-1{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
	display: unset;
}
.box-1 section{
	width: 80%;
	padding: 10%;
	margin-left: 10%;
	margin-bottom: 15%;
	float: left;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.box-1 section span{
	width: 100%;
	float: left;
	border-radius: 100vw;
	text-align: center;
	font-size: 15vw;
	color: orangered;
}
.box-1 section h2{
	width: 100%;
	margin-top: 2%;
	float: left;
	text-align: center;
	font-family: system-ui;
	font-size: 5vw;
}
.box-1 section p{
	width: 100%;
	margin-top: 2%;
	float: left;
	text-align: center;
	font-family: system-ui;
	font-size: 3vw;
}


/**********box-2*********/
.box-2{
	width: 100%;
	margin-top: 10%;
	float: left;
}
.box-2 h2{
	width: 90%;
	margin-left: 5%;
	float: left;
	font-family: system-ui;
	font-size: 7vw;
	font-weight: lighter;
}
.box-2 .list{
	width: 90%;
	margin-left: 5%;
	margin-top: 1%;
	float: left;
	position: relative;
}
.box-2 .list .item{
	width: 45vw;
	height: 50vw;
	background-color: rgba(255,69,0,0.2);
	backdrop-filter: blur(5px);
	float: left;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.box-2 .list .item:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.box-2 .list .item:nth-child(3){
	margin-top: -5%;
	margin-left: 25%;
}
.box-2 .list .item:nth-child(4){
	margin-top: -5%;
	margin-left: 0%;
}
.box-2 .list .item:nth-child(5){
	margin-top: -4%;
}
.box-2 .list .item img{
	width: 43vw;
	height: 48vw;
	margin: 1vw;
	float: left;
	object-fit: cover;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.box-2 .list .item section{
	width: 100%;
	height: 30%;
	margin-top: -65%;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	float: left;
	display: grid;
	position: relative;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	font-size: 3vw;
}
.box-2 .list .item section h3{
	width: 70%;
	margin: auto;
	text-align: center;
	font-family: system-ui;
	font-size: 3vw;
	font-weight: normal;
	color: rgba(35, 43, 43, 1.0);
}
.box-2 .list .item section time{
	width: 100%;
	margin-right: 10%;
	float: right;
	font-family: system-ui;
	font-size: 1vw;
	font-weight: lighter;
	color: rgba(35, 43, 43, 1.0);
	display: none;
}

/* Floating hexagon shapes */
.list::before,
.list::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 15vw;
  background: orange;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: float 7s ease-in-out infinite;
}

.list::before {
  top: 15%;
  left: 10%;
}

.list::after {
  bottom: 20%;
  right: 10%;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40px) rotate(20deg); }
}

/* Floating dots generated by JS */
.dat {
  position: absolute;
  border-radius: 50%;
  background: orange;
  animation: floatDots 10s ease-in-out infinite;
}

@keyframes floatDots {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}



/**********Contact********/
.contact{
	width: 90%;
	margin-top: 10%;
	margin-left: 5%;
	float: left;
	position: relative;
}
/* Floating hexagon shapes */
.contact::before,
.contact::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 15vw;
  background: skyblue;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: float 7s ease-in-out infinite;
}

.contact::before {
  top: 15%;
  left: 10%;
}

.contact::after {
  bottom: 20%;
  right: 10%;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40px) rotate(20deg); }
}

/* Floating dots generated by JS */
.dut {
  position: absolute;
  border-radius: 50%;
  background: skyblue;
  animation: floatDots 10s ease-in-out infinite;
}

@keyframes floatDots {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.contact h2{
	width: 100%;
	float: left;
	font-family: system-ui;
	font-size: 7vw;
	font-weight: lighter;
}
.contact .coord{
	width: 80%;
	height: 65vw;
	padding: 5%;
	margin-top: 10%;
	margin-left: 10%;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	float: left;
	overflow: hidden;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.contact .coord section{
	width: 100%;
	height: 20vw;
	margin-bottom: 65%;
	float: left;
}
.contact .coord span{
	width: 100%;
	float: left;
	font-family: system-ui;
	font-size: 5vw;
	font-weight: lighter;
}
.contact .coord strong{
	width: 100%;
	margin-top: 5%;
	float: left;
	font-family: system-ui;
	font-size: 7vw;
	font-weight: bold;
}
.contact .coord p{
	width: 100%;
	margin-top: 15%;
	float: left;
	font-family: system-ui;
	font-size: 3vw;
}
.contact .coord p small{
	width: 100%;
	margin-block: 5%;
	float: left;
	border-bottom: 2px solid silver;
}
.contact ul{
	width: 80%;
	margin-top: 10%;
	margin-left: 10%;
	float: left;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 7%;
}
.contact ul li{
	width: 100%;
	height: 15vw;
	margin: 2.5%;
	background: orange;
	float: right;
	list-style: none;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	display: grid;
}
.contact ul li:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.contact ul li span{
	width: 80%;
	height: 80%;
	margin: auto;
	background: linear-gradient(135deg, rgb(30,144,255), skyblue);
	float: left;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	display: grid;
}
.contact ul li span i{
	width: auto;
	margin: auto;
	font-size: 4vw;
	color: white;
}
.contact .sec-iframe{
	width: 40vw;
	height: 45vw;
	margin-top: 5%;
	background: rgba(255,165,0,1.0);
	float: left;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	position: relative;
	z-index: 1;
}
.contact .sec-iframe:hover{
	transform: scale(1.1);
	transition: 1s;
	cursor: pointer;
}
.contact .sec-iframe iframe{
	width: 38vw;
	height: 43vw;
	margin: 1vw;
	float: right;
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.contact .signature{
	width: 50%;
	margin-top: 35%;
	float: right;
	font-family: system-ui;
	font-size: 3vw;
	margin-bottom: 3%;
}
.contact .signature span{
	width: 100%;
	float: left;
}









}