@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');

*{
	margin: 0;
	padding:  0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	direction: rtl;
}
body{
	background-color: rgb(168, 198, 219);
	
	
}


header{
	
    
}
.main-1{
	
	background-color: azure;

}
.custom-shape-divider-bottom-1676119701 {
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(0deg);
    z-index: 1;
}

.custom-shape-divider-bottom-1676119701 svg {
	position: relative;
    display: block;
    width: calc(134% + 1.3px);
    height: 200px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1676119701 .shape-fill {
    fill: #4a4e7e;
}
.btns {
	position: absolute;
    z-index: 1;
    display: inline-block;
    width: 100%;
    text-align: center;
}
.navigation{
	width: 100%;
	font-size: 0.9em;
   
}
.navigation a{
    color: aliceblue;
    text-decoration: none;
    list-style: none;
	font-size: 1.6em;
	font-weight: 500;
    display: inline-block;
    margin: 10px;
    padding: 0.9375em 2.0;
    letter-spacing: 1px;
    border: 2px;
    border-radius: 10px;
    transition: 2.9s ease;
	position: relative
    

}
.navigation a::after{
     content: '';
	 height: 5px;
	 width: 0;
     background: #2e2e2e;
     position: absolute;
     right: 0;
	 bottom: -10px;
	 transition: 0.7s;
}
.navigation a:hover::after{
    width: 100%;
    background-color: aqua;
    transform: scale(1.1);
}
section{
	width: 100%;
	height: 100vh;
	background-image: url(image/offesimgcopy1234.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 34%;
	background-attachment: fixed;
    
	
    

}
.info-1{
	z-index: 1;
	position: absolute;
    display: flex;
    top: 35%;
    margin-block: 0%;
    aspect-ratio: 1331/498;
    width: 82%;
    height: 47%;
    margin: -7% 3%;
    background-position: top center;
    flex-direction: row;
    flex-wrap: wrap;

}
.introduction {
	margin-top: 10%;
    width: 85%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
}


.introduction h1{
	font-size: 5em;
    font-family: monospace;
    font-weight: 600;
    text-align: center;
    display: flex;
    width: 13%;
    margin-block: 1%;
    padding-block: 1%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
.p-1{
	position: absolute;
    width: 100%;
    display: flex;
    height: 100%;
    bottom: 8%;
    overflow: hidden;
    aspect-ratio: 551/497;
    border-radius: 9px;
    color: #ffffff05;
    flex-direction: column;
    flex-wrap: nowrap;
}
.p-1 p{
	position: fixed;
    width: 40%;
}
/* footer{
	background-image: url(/image/footercopy.svg);
    aspect-ratio: 560/500;
    min-height: 350px;
    border-radius: 11px;
    display: block;
    color: #ffffff05
	
	
}
.bak-1{
	background-color: aquamarine;
	opacity: calc(50%);
}
.bak-2{
	;

} */


/* .img-1{
	aspect-ratio: 1726/1450;
    width: 100%;
    min-height: 350px;
    position: relative;
	z-index: -1;
} */

 @media all and (min-width:321px) and (min-width:480px) and (orientation: landscape) {
	body{
		height: 100vh;
		width: 100%;
		flex-direction: row;

	}
	.navigation{
		width: 100%;
        font-size: 0.6em;
		
	}
	.p-1 p {
		position: fixed;
		width: 38%;
	}
	
  }


@media all and (min-height: 680px), screen and (orientation: portrait) {
	body{
		height: 100vh;
		width: 100%;
		flex-direction: column;

	}
	.navigation{
		width: 100%;
        font-size: 0.5em;
		
	}
	section {
		
	}
	.p-1{
		width: 60%;
        margin-top: 7%;
	}
	.p-1 p {
		position: fixed;
		width: 38%;
	}
	
  } 


  @media all and (min-width: 900px){
	body{
		
		
	}
	section {
		height: 100vh;
		width: 100%;
		
	}
	.navigation{
		width: 100%;
        font-size: 0.8em;
		
	}
	.p-1 p {
		position: fixed;
		width: 40%;
		top: 18%;
	}
	
 }




 @media all and (max-width: 450px){
	body{
		width: 100%;
		height: 100vh;
		


	}
	section {
		width: 100%;
		min-height: 250px;
	}
	
	.navigation{
		width: 100%;
        font-size: 0.4em;
		
	}
	.introduction {
		margin-right: 20%
    }
	.introduction h1 {
		font-size: 3em;
		font-family: monospace;
		font-weight: 900;
		text-align: center;
		display: flex;
		width: 100%;
		z-index: 1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
	}
	.p-1 p {
		position: fixed;
		width: 50%;
		top: 32%;
	}
	
}