body {
    background-image:url("landscape1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
	font-size:10;
}
html {
    height: 100%
}

.logo form p{
 border-style:solid;
 border-color:#e2abab;
}


label{
cursor: pointer;

}
.logo div img{
 display:inline-block;
 transform:translatex(-58px) translatey(451px);
}

img{
	
	width:10px;
	
}

/* Image */
#header div img{
 display:inline-block;
 transform:translatex(70px) translatey(100px);
 position:relative;
}

 




@media screen and (orientation:portrait){
	
body {
    background-image:url("p_plain3.jpg");
    background-repeat: repeat-y;
    background-size: 100% 100%;
	font-size:10px;
}

	.landing .content .logo > div{
 position:relative;
 transform:translatex(-60px) translatey(100px);
}


 /* Division */
 .landing .content .logo > div{
  width:261px;
  height:368px;
  padding-left:0px;
  padding-right:0px;
  padding-top:22px;
  padding-bottom:0px;
  font-size:19px;
 }
 
 /* Label */
 .logo a label{
  background-color:#b1c3bd;
  border-style:dotted;
  border-color:#a685bc;
  letter-spacing:0.1px;
  min-width:60px;
  text-align:center;
  color:#4d5279;
  border-width:4px;
  font-size:30px;
 }
 
 /* Image */
 #header a img{
  transform:translatex(45px) translatey(36px) !important;
  top:-50px;
  left:-12px;
 }
 
 /* Content Division */
 .logo div .content{
  height:599px;
  transform:translatex(-22px) translatey(-48px);
  position:relative;
  width:200px;
  left:21px;
  top:-41px;
  font-size:19px;
  text-align:right;
 }
 
 /* Division */
 .logo > div > div{
  height:0px;
  width:78%;
 }
 
 /* Division */
 .landing .logo2 div{
  min-height:43px;
  transform:translatex(-67px) translatey(78px);
  font-size:19px;
  position:relative;
  top:-58px;
  left:12px;
  text-decoration:underline;
  text-shadow:rgb(255, 0, 0) -1px 0px 0px, rgb(0, 255, 255) 1px 0px 0px;
 }
 
 /* Form Division */
 .logo div form{
  position:relative;
  top:-33px;
  left:-4px;
  font-size:13px;
  font-weight:500;
  height:591px;
  max-height:0px;
  word-spacing:0.2px;
  letter-spacing:-0.4px;
 }
 
 /* Division */
 .logo div div .content div{
  max-height:0px;
  height:0px;
 }
 
 /* Paragraph */
 .logo form p{
  font-size:20px;
 }
 
 /* Division */
 .logo > div > div{
  height:0px;
  width:78%;
 }
 
 /* Division */
 .landing .logo2 div{
  min-height:43px;
  transform:translatex(-57px) translatey(84px);
  font-size:19px;
  position:relative;
  top:-58px;
  left:12px;
 }
 
 /* Form Division */
 .logo div form{
  position:relative;
  top:-33px;
  left:-4px;
  font-size:13px;
  font-weight:500;
  height:591px;
  max-height:0px;
  word-spacing:0.2px;
  letter-spacing:-0.4px;
 }
 
 /* Division */
 .logo div div .content div{
  max-height:0px;
  height:0px;
 }


.logo div img{
 display:inline-block;
 transform:translatex(-150px) translatey(250px);
}

img{
	
	width:100px;
	
}

/* Image */
#header div img{
 display:inline-block;
 transform:translatex(40px) translatey(35px);
 position:relative;
}



}







/*

@media (min-width:480) and (orientation:landscape){
.logo div img{
 display:inline-block;
 transform:translatex(-58px) translatey(51px);
}

img{
	
	width:500px;
	
}


#header div img{
 display:inline-block;
 transform:translatex(75px) translatey(30px);
 position:relative;
}
 
}







@media screen and (orientation:portrait) and (max-device-width: 600px) {
 
 .landing .logo div{
  transform:translatex(20px) translatey(112px);
  position:relative;
 }
 
 
 #header div img{
  transform:translatex(87px) translatey(155px);
 }
 
}
*/






@media screen and (orientation:portrait) and (min-device-width: 768px) and (max-device-width: 1024px) {
.logo div img{
 display:inline-block;
 transform:translatex(-58px) translatey(251px);
}

.logo div .content{
  height:599px;
  transform:translatex(142px) translatey(-48px);
  position:relative;
  width:500px;
  
 }
 
 /* Division */
 .logo > div > div{
  height:0px;
  width:80%;
 }

img{
	
	width:130px;
	
}

.hidd{

    display: none;
}
/* Image */
#header div img{
 display:inline-block;
 transform:translatex(70px) translatey(59px);
 position:relative;
}

/* Label */
label{
 background-color:#b8d3d4;
 border-color:#9e88c8;
 border-width:0px;
 text-align:center;
 color:#355ca5;
 font-style:italic;
 font-size:50px;
 border-width:3px;
 border-style:dashed;
 border-color:#9b5994;
}

.logo a label{
  font-size:36px;
  padding-left:20px;
  padding-right:20px;
 }


}




@media screen and (orientation:landscape) and (min-device-width: 768px) and (max-device-width: 1024px) {
.logo div img{
 display:inline-block;
 transform:translatex(-58px) translatey(51px);
}
.hidd{

    display: none;
}
img{
	
	width:100px;
	
}


 /* Content Division */
 .logo div .content{
  transform:translatex(7px) translatey(-58px) !important;
  top:-41px;
  left:-21px;
 }
 
 /* Division */
 .landing .logo2 div{
  top:-41px;
 }


body{
	font-size:10;
    background-image:url("l_plain3.jpg");
    background-repeat: repeat-y;
    background-size: 100% 100%;
	
}
/* Image */
#header div img{
 display:inline-block;
 transform:translatex(75px) translatey(30px);
 position:relative;
}


.landing .content .logo > div{
 transform:translatex(100px) translatey(88px) !important;
}
/* Label */
label{
 background-color:#b8d3d4;
 border-color:#9e88c8;
 border-width:0px;
 text-align:center;
 color:#355ca5;
 font-style:italic;
 font-size:22px;
 border-width:3px;
 border-style:dashed;
 border-color:#9b5994;
}

@import url("//fonts.googleapis.com/css2?family=Cairo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Label */
label{
 font-family:'Cairo', sans-serif;
 letter-spacing:4.6px;
}

/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Almarai:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

.logo div label{
 width:110px;
}

/* Content Division */
.logo div .content{
 transform:translatex(-56px) translatey(-24px);
}

/* Input */
.logo > div > div > input{
 transform:translatex(-506px) translatey(91px) !important;
}

/* Division */
.landing .logo2 div{
 font-size:26px !important;
 
 text-align:center;
}

/* Content Division */
.logo div .content{
 position:relative;
}

/* Division */
.logo > div > div{
 position:relative;
 transform:translatex(-139px) translatey(69px);
 font-size:16px;
 text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 1px;
}

/* Division */
.landing .logo2 div{
 position:relative;
 min-height:36px;
 transform:translatex(-35px) translatey(115px);
 font-size:23px;
 font-style:normal;
 text-decoration:none;
 text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 1px;
 letter-spacing:0.3px;
 font-family:'Almarai', sans-serif;
}

/* Image */
#header a img{
 transform:translatex(167px) translatey(70px) !important;
}

/* Input */
.logo > div > div > input{
 position:relative;
 transform:translatex(-376px) translatey(87px);
 width:110px;
 box-shadow:0px 0px 1px 3px #b56dab inset;
}


.logo div .card-header{
 background-color:transparent;
}
.landing .content .logo > div{
 background-color:transparent;
}


.hidd{

    display: none;
}


.landing .content .logo > div{
 position:relative;
 transform:translatex(-28px) translatey(86px);
}



/* Image */
#header div img{
 display:inline-block;
 transform:translatex(129px) translatey(29px);
 position:relative;
}

img{
	
	width:100px;
	
}

.logo div .content{
  transform:translatex(7px) translatey(-58px) !important;
 }
 
 
}



@media screen and (min-device-width: 320px)   and (max-device-height: 960px) and (orientation: landscape) {

body{
	font-size:14px;
    background-image:url("l_plain3.jpg");
    background-repeat: repeat-y;
    background-size: 100% 100%;
	
}

label{
 background-color:#b8d3d4;
 
 
 text-align:center;
 color:#355ca5;
 font-style:italic;
 font-size:22px;
 border-width:3px;
 border-style:dashed;
 border-color:#9b5994;
}
/*
label{
 background-color:#b8d3d4;
 border-color:#9e88c8;
 border-width:0px;
 text-align:center;
 color:#355ca5;
 font-style:italic;
 font-size:16px;
}
*/
@import url("//fonts.googleapis.com/css2?family=Cairo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Label */
label{
 font-family:'Cairo', sans-serif;
 letter-spacing:4.6px;
}

/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Almarai:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

.logo div label{
 width:100px;
}




.landing .content .logo > div{
 position:relative;
 transform:translatex(-28px) translatey(-10px);
}
.hidd{

    display: none;
}
.logo div img{
 display:inline-block;
 transform:translatex(-58px) translatey(5px);
}

img{
	
	width:67px;
	
}




/* Image */
#header div img{
 display:inline-block;
 transform:translatex(75px) translatey(5px);
 position:relative;
}



}





content{
  height : 100vh;
  display : flex;
  flex-direction : column;
  align-items: center;
  justify-content : space-around;
}
.logo{
  flex:1 1 auto;
  display:flex;
  flex-direction :column;
  justify-content : center;
  align-items : center;
}

.logo2{
  flex:1 1 auto;
  display:flex;
  flex-direction :column;
  justify-content : center;
  align-items : left;
}

.ex{
  flex:2;
  display : flex;
}
.ex p{
  align-self: flex-start;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}






@media screen and (orientation:landscape) and (min-device-width: 1025px) {
/* Division */
/* Division */
.landing .content .logo > div{
 transform:translatex(100px) translatey(88px) !important;
}
/* Label */
label{
 background-color:#b8d3d4;
 border-color:#9e88c8;
 border-width:0px;
 text-align:center;
 color:#355ca5;
 font-style:italic;
 font-size:22px;
 border-width:3px;
 border-style:dashed;
 border-color:#9b5994;
}

@import url("//fonts.googleapis.com/css2?family=Cairo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Label */
label{
 font-family:'Cairo', sans-serif;
 letter-spacing:4.6px;
}

/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Almarai:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

.logo div label{
 width:110px;
}

/* Content Division */
.logo div .content{
 transform:translatex(-56px) translatey(-24px);
}

/* Input */
.logo > div > div > input{
 transform:translatex(-506px) translatey(91px) !important;
}

/* Division */
.landing .logo2 div{
 font-size:26px !important;
 
 text-align:center;
}

/* Content Division */
.logo div .content{
 position:relative;
}

/* Division */
.logo > div > div{
 position:relative;
 transform:translatex(-139px) translatey(69px);
 font-size:16px;
 text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 1px;
}

/* Division */
.landing .logo2 div{
 position:relative;
 min-height:36px;
 transform:translatex(-35px) translatey(115px);
 font-size:23px;
 font-style:normal;
 text-decoration:none;
 text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 1px;
 letter-spacing:0.3px;
 font-family:'Almarai', sans-serif;
}

/* Image */
#header a img{
 transform:translatex(167px) translatey(70px) !important;
}

/* Input */
.logo > div > div > input{
 position:relative;
 transform:translatex(-376px) translatey(87px);
 width:110px;
 box-shadow:0px 0px 1px 3px #b56dab inset;
}


.logo div .card-header{
 background-color:transparent;
}
.landing .content .logo > div{
 background-color:transparent;
}


.hidd{

    display: none;
}


.landing .content .logo > div{
 position:relative;
 transform:translatex(-28px) translatey(86px);
}



/* Image */
#header div img{
 display:inline-block;
 transform:translatex(129px) translatey(29px);
 position:relative;
}

img{
	
	width:100px;
	
}

.landing .logo2 div{
 top:-53px;
 left:-29px;
}

/* Division */
.logo > div > div{
 top:-95px;
}
.landing .logo{
 position:relative;
 top:66px;
}

/* Division */
.landing .logo2 div{
 top:5px !important;
}



}





/*(max-device-width: 768px ) and (max-device-width: 1024px)and (orientation: portrait)*/