:root{
	--color_Blue:#054691;
	--color_Blue_hover:#032b58a4;
	--color_Dark1: #0e0230fb;
	--color_Dark2: #02024b;
	--color_Light1: #dfdfdf;
	--color_Light2: #c4c4c4;
	--color_user:#a77b03;
	--color_user_dark:#705302;
	--color_shadow:#06d4f8;
	--color_btn:#fa460a;
	--color_menulist:#020838;
    --gradient:linear-gradient(to top right, rgba(19, 16, 0, 0.925), rgba(5, 1, 39, 0.74), rgba(2, 48, 49, 0.5), rgba(7, 3, 59, 0.5) );
}
html{
    background: var(--color_Light2);
}

.banner{
     background:linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.40),
     rgba(5, 2, 54, 0.925), rgba(3, 1, 41, 0.911)), url(images/img11.jpeg);
}
.mission{
    position: relative;
    width:100%;
    background: var(--color_Light2);
    top: 80px;
}
.content-mission{
    width:100%;
    height:100vh;
    display:grid;
    grid-template-columns: repeat(2,2fr);
}
.mission-text{
    padding:30px;
    padding-top: 100px;
}
.mission-text p{
    font-size: 23px;
    color: var(--color_Dark1);
}
.mission h2{
    text-align: center;
    color: var(--color_Dark1);
    font-size: 35px;
}
.button{
	display: grid;
	grid-template-columns: repeat(1, 150px);
	grid-template-rows: 45px;
	margin-top: 20px;
 }
button{
	border: none;
	background-color:var(--color_btn);
	letter-spacing: 0.8px;
	font-family:cursive;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
 }
button a{
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
 }
 .cta{
	color: #fff;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
 }
 .cta:hover{
	color: #fff;
 }
 .item .content button:hover{
	background-color:#d43906;
 }
.mission-image{
    position: relative;
    top:80px;
    width: 400px;
    height:200px;
    left:10%;
    box-shadow: 10px 10px 20px #373837;
}
.mission-image img{
    width:450px;
    height: 400px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.mission-image::after{
    content: '';
    position: absolute;
    left: 35%;
    top:60%;
    width: 370px;
    height: 400px;
    z-index: 1;
    background: url(images/imgrig.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.corevalue-wrap{
    width: 100%;
    height: fit-content;
    position: relative;
    top: 200px;
    padding-bottom: 170px;
    display: flex;
    flex-direction:column;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.content-area{
    position: relative;
    width: 100%;
    height: max-content;
    padding: 30px ;
    background: var(--color_Light1);
    display: grid;
    gap:30px;
    grid-template-columns: repeat(2, 1fr);
    color:var(--color_Dark1);
}
.safety{
    background: var(--color_Light2);
    box-shadow: 0 10px 40px var(--color_Dark2);
    padding: 30px;
}
.content-vision{
    width:100%;
    height:fit-content;
    display:grid;
    padding-top: 80px;
    grid-template-columns: repeat(2,2fr);
    padding-bottom: 60px;
}
.vision-image{
    position: relative;
    top:50px;
    padding: 30px;
}
.vision-image img{
    width:100%;
    height: 400px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.vision-text{
    padding: 30px;
    padding-top: 100px;
}
.vision-text h2{
    text-align: center;
    color: var(--color_Dark1);
    font-size: 35px;
}
.vision-text p{
    font-size: 23px;
    color: var(--color_Dark1);
}
footer{
    background: var(--color_Dark2);
    height: 25vh;
}
.footer{
    top: 95px;
 }
 .azempire-icon{
    top: 95px;
    left: 75%;
 }

 @media screen and (max-width:1200px){
    #cvw{
        grid-template-columns: repeat(2, 1fr);
    }
    .content-mission{
        grid-template-columns: repeat(1,1fr);
        gap: 400px;
        height: fit-content;
        padding-bottom: 70px;
    }
}
 @media screen and (max-width:1000px){
    #cvw{
        grid-template-columns: repeat(1, 1fr);
    }
}
@media screen and (max-width:800px){
    .content-area{
        grid-template-columns: repeat(1, 1fr);
        padding: 20px;
    }
    .safety{
        position: relative;
        width: 80%;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        padding: 20px;
}
    .content-vision{
        height:fit-content;
        grid-template-columns: repeat(1,1fr);
        padding-bottom: 70px;
    }
    .azempire-icon{
        top: 95px;
        left: 65%;
     }
 
 }
 @media screen and (max-width:700px){
 
    .content-mission{
        grid-template-columns: repeat(1,1fr);
        gap: 250px;
        height: fit-content;
        padding-bottom: 70px;
    }
    .mission-image{
        width: 300px;
        height:200px;
    }
    .mission-image img{
        width:300px;
        height: 300px;
    }
    .mission-image::after{
        width: 270px;
        height: 300px;
    }

    
   
 }
 @media screen and (max-width:600px){
    .azempire-icon{
        top: 95px;
        left: 50%;
     }
 }
 @media screen and (max-width:500px){
    .content-vision{
        padding-top: 0;
    }
.safety h2{
    font-size: 25px;
}
.sh h2{
    font-size: 20px;
}
#corevalue{
font-size: 25px;
}
.corevalue-wrap{
    top: 10px;
    padding-bottom: 0;
}
    .content-mission{
        gap: 100px;
    }
.mission-text h2{
    font-size: 30px;
}
.vision-text h2{
    font-size: 30px;
}
    .mission-image{
        width: 200px;
        height:180px;
        left: 6%;
    }
    .mission-image img{
        width:100%;
        height: 100%;
    }
    .mission-image::after{
        width: 200px;
        height: 180px;
        top: 40%;
    }
    .vision-image img{
        width:100%;
        height: 180px;
    }
    .button{
        grid-template-columns: repeat(1, 120px);
     }

 }

    @media screen and (max-width:300px){
    .mission-image{
        width: 150px;
        height:130px;
        left: 6%;
    }

    .mission-image::after{
        width: 130px;
        height: 130px;
    }
    .mission h2{
        font-size: 20px;
    }
    .mission p{
        font-size: 18px;
    }
    .vision-image img{
        height: 130px;
    }
    .vision-text h2{
        font-size: 20px;
    }
    .vision-text p{
        font-size: 18px;
    }
    .wrapper,
     .singlecard{
        height: 430px;
     }
     .front{
        width: 200px;
     }
     .back{
        width: 200px;
     }
     .f1 .text p{
        font-size: 30px;
    }
    .b1 .text p{
        font-size: 17px;
    }
    .text p.last{
        font-size: 23px;
    }

 }