/**
  
* Name: ALUFANI
* Version 1.1.1
* Author: Alain NICOLAS
* Email: info@alufani.be
* Developed By: ALUFANI srl
* First Release: 08 december 2019
* Last Update : 15 july 2022
* Author URL: www.alufani.be

**/

@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap");

/*  Default CSS  */

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

body{
	width: 100%;
	font-family:'Poppins', sans-serif ;
	background: url(../library/img/bg2.png) no-repeat;
	background-size:cover;
	overflow: hidden;
}

body a{
	text-decoration:  none;
}

body input:focus{
	outline: none;
}

body ul li{
	list-style:none;
}

.container {
	width: 100%;
	height: 100vh;
	background: url(../library/img/personal-computer.png) no-repeat;
	background-size: 95%;
	background-position: 100% 80%;
	display: grid;
	grid-template-columns:8% auto;
}

.nav {
	width: 100%;
	height: 100%;
	border-right: 4px solid #fff;
}

.menu {
	border-bottom: 4px solid #fff;
	padding: 15px 0px;
	cursor: pointer;
}

.menu span {
	width: 52px;
	height: 4px;
	display: block;
	background: #fff;
	margin: 6px auto;
}

.horiMenu ul li a {
	writing-mode: sideways-lr;
	display: block;
	padding: 14px 20px;
	font-size: 15px;
	color: #fff;
}

.horiMenu span {
	display: block;
	width: 4px;
	height: 124px;
	background: #fff;
	margin-left: 32px;
}


/* details wrapper */

header {
	width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
	text-align: right;
	padding: 12px 0px;
}

header a{
	color: #4853a3;
	position: relative;
}

header a::after {
	content: '';
	width: 80%;
	height: 2px;
	background: #fff;
	position: absolute;
	bottom: -1px;
	left: 6px;
}

.search {
	direction: rtl;
	padding-right: 40px;
	cursor: pointer;
}

.icon {
	width: 35px;
	height: 35px;
	background: transparent;
	border:3px solid #4853a3;
	position: relative;
	border-radius: 50%;
}

.icon::after {
	content: '';
	width: 4px;
	height: 20px;
	background: #4853a3;
	position: absolute;
	top: 23px;
	left: 30px;
	transform: rotate(-45deg);
}

/* heading */

.heading {
	padding: 0px 40px;
	overflow: hidden;
}

h1 {
	font-size: 63px;
	color: #a9a7a5;
	padding: 20px 0px;
	text-shadow: 2px 2px #000,
	             2px 2px 5px #000;
	        
}

h1 span{
	color: #4853a3;
}

p {
	width: 31%;
	color: #fff;
	font-size: 15px;
}

.heading a {
	padding: 18px 40px;
	display: inline-block;
	border: 3px solid #4853a3;
	color: #4853a3;
	margin: 180px 0px;
	transition: .5s;
}

.heading a:hover {
	display: inline-block;
	border: 3px solid #4853a3;
	background: #4853a3;
	color: #a9a7a5;
}


/* search bar */

.Soverlay {
	width: 100%;
	height: 100vh;
	background: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 9999;
	background: #4853a3;
	clip-path: circle(0.1% at 97% 5%);
	display: grid;
	place-content: center;
}

.cross{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 9;
}

.searchbox {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 9;
	margin: auto;
}

.searchbox input {
	height: 46px;
	border: 2px solid #000;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	width: 300px;
	font-size: 20px;
	padding: 0px 13px;
	font-family: poppins;
}

.img {
	width: 62px;
	background: #000;
	display: grid;
	place-content: center;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	cursor: pointer;
	height: 46px;
}

.img img {
	width: 36px;
	padding: 5px;
	object-fit: cover;
}


/* hamburger menu */

.hamburger {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #1A1A1A;
  transform: translateX(-100%);
  z-index: 99999;
}

.hamburger .Hclose {
	position: absolute;
	top: 20px;
	right: 40px;
	color: #3399ff;
	font-size: 16px;
}
.hamburger ul {
	padding-left: 8%;
	padding-top: 8%;
}

.hamburger ul li{
	overflow: hidden;
}

.hamburger ul li a{
  text-decoration: none;
  color: white;
  transition: .8s;
  font-size: 60px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px;
  display: block;
  cursor: pointer;
  position: relative;
 overflow: hidden;
}

.hamburger ul li a::after{
	content: '';
	width: 0%;
	height: 5px;
	background: #3399ff;
	position: absolute;
	top: 50%;
	left: 6px;
  transition: .8s;
}

.hamburger ul li a:hover::after {
   width: 80%;
}

.Himg {
  position: absolute;
  width: 250px;
  filter: grayscale(1);
  height: 300px;
  mix-blend-mode: difference;
  top: 0px;
  left: 0px;
}

.bg1 {
  top: 0px;
  left: 53%;
  background: url(../library/img/bg1.jpg) no-repeat 50% 50%;
  background-size: cover;
  opacity: 0;
  transform: translateY(-50%);
  transition: 1s ease-in-out;
}

.bg2 {
  top: 100px;
  left: 53%;
  background: url(../library/img/bg2.jpg) no-repeat 50% 50%;
  background-size: cover;
  opacity: 0;
  transform: translateY(-50%);
  transition: 1s ease-in-out;
}

.bg3 {
  top: 250px;
  left: 53%;
  background: url(../library/img/bg3.jpg) no-repeat 50% 50%;
  background-size: cover;
  opacity: 0;
  transform: translateY(-50%);
  transition: 1s ease-in-out;
}

.bg4 {
  top: 400px;
  left: 53%;
  background: url(../library/img/bg4.jpg) no-repeat 50% 50%;
  background-size: cover;
  opacity: 0;
  transform: translateY(-50%);
  transition: 1s ease-in-out;
}

.bg5 {
	top: 550px;
	left: 53%;
	background: url(../library/img/bg5.jpg) no-repeat 50% 50%;
	background-size: cover;
	opacity: 0;
	transform: translateY(-50%);
	transition: 1s ease-in-out;
}

.L1:hover ~ .bg1,
.L2:hover ~ .bg2,
.L3:hover ~ .bg3,
.L4:hover ~ .bg4,
.L5:hover ~ .bg5 {
  opacity: 1;
  transform: translateY(0%) skew(-10deg);
  transition: 1s ease-in-out;
}

.hamburger ul li a:hover {
  transition: 2s;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px white;
  font-style: italic;
}

.cta {
	position: absolute;
	padding: 25px;
}

.cta-btn {
	display: inline-block;
	font-size: 2rem;
	letter-spacing: 1px;
	text-decoration: none;
	color: #fff;
	background-color: crimson;
	padding: 1rem 4rem;
	margin-top: 4rem;
	border-radius: 0.4rem;
	box-shadow: 3px 3px 1rem rgba(0, 0, 0, 0.3);
	position: relative;
}

.cta-btn::after {
	content: "";
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: inherit;
	border-radius: inherit;
	z-index: -1;
}

.cta-btn:hover::after {
	transform: scaleX(1.2) scaleY(1.6);
	opacity: 0;
	transition: all 0.5s;
}

.dta-btn {
	display: inline-block;
	font-size: 4rem;
	letter-spacing: 1px;
	text-decoration: none;
	color: #fff;
	background-color: #880e4f;
	padding: 1rem 4rem;
	margin-top: 6rem;
	border-radius: 0.4rem;
	box-shadow: 3px 3px 1rem rgba(0, 0, 0, 0.3);
	position: relative;
}

.dta-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: inherit;
	border-radius: inherit;
	z-index: -1;
}

.dta-btn:hover::after {
	transform: scaleX(1.2) scaleY(1.6);
	opacity: 0;
	transition: all 0.5s;
}

.img-heading {
	display: inline-block;
	padding: 1rem 4rem;
	margin-top: 5rem;
	width: 15%;
	position: relative;
}

.img-heading::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.img-heading:hover::after {
	transform: scaleX(1.2) scaleY(1.6);
	opacity: 0;
	transition: all 0.5s;
}