*{
box-sizing:border-box;
}


body{
margin:0;
background:#d8eafe;
background:#ffffff;
font-family: Poppins, Arial, sans-serif; 
color:#212427;
}

.main{
background:#002B57;
color:#fff;
}

.flex{
display:flex;
}

.gap{
gap:10px;
}

.gap-20{
gap:20px;
}
.gap-30{
gap:30px;
}


.column{
flex-direction:column;
}

.center{
justify-content:center;
}

.column-center{
align-items:center;
}

.column{
align-items:unset;
justify-content:unset;	
}

.column.center{
align-items:center;
}

.column.column-center{
justify-content:center;
}

.column.column-bottom{
justify-content:flex-end;
}

.column-bottom{
align-items:flex-end;
}

.w-100{
	width:100%;
}

.w-50{
width:50%;
}

.left{
	justify-content:flex-start;
}
.right{
	justify-content:flex-end;
}

.column.right{
align-items:flex-end;
justify-content:unset;
}

.top{
align-items:flex-start;
}

.bottom{
	align-items:flex-end;
}

.wrap{
flex-wrap:wrap;
}

.social{
gap:50px;
margin:20 0;
}


.background .rightcontent{
padding-left: 5%;
padding-right: 5%;
row-gap:50px;
}

.background .w-50 img{
margin-bottom:20px;
scale:.8;
}

header{
width:100%;
height:90px;
padding:0 3%;
}

.main{
height:auto;
padding:10%;
margin-top:-1px;
padding-top:0;
width:100%;
gap:20px;
position:relative;
align-items:center;
flex-direction:column;
}


.logo{
max-height:70px;
}

.bodyContainer{
background:#fff;
}
.item:first-child{
padding-bottom:0;
}
.item{
padding:2.5% 10%;
gap:5%;
}

.cards i{
font-size:50px;	
}

.cards:first-child{
background:#fff5f5;
}


.cards:nth-child(2){
background:#f5f5ff;
}

.cards:nth-child(3){
background:#fef6fc;
}

.cards:nth-child(4){
background:#fcf9f7;
}

.cards{
width:100%;
min-height:300px;
padding:50px 30px;
margin-bottom:50px;
border-radius:20px;
}

.lleft, .lright, .lcenter{
width:100%;
}

.leftcontent{
width:100%;
}

.rightcontent{
width:100%;
}

.companies{
	font-size: 20px;
    gap: 20px;
}

.background.item{
background: #002B57;
color:#fff;
padding-top:5%;
padding-bottom:5%;
}

header .button{
display:none;
margin-left:auto;
background:transparent;
color:#050c9c;
}

header .button.home{
display:block;
min-width:unset;
}

.companies h3{
	margin:0;
}

footer{
padding:5% 5%;
padding-bottom:3%;
background:#ffffff;
border-top:1px solid #eee;
}

footer .bio{
margin-top:20px;
}

footer img{
max-width:100px;
}

img{
max-width:100%;
/*animation: bounce 2.5s; 
animation-direction: alternate; 
animation-timing-function: cubic-bezier(.5, 0.05, 1, .5); 
animation-iteration-count: infinite; */
bborder-radius:20px 20px 0 0;
}


span{
opacity:.6;
font-size:14px;
}
.button{
border:0;
background:#050c9c;
background:#ffffff;
font-family: Poppins, Arial, sans-serif; 
color:#212427;
padding:15px 10px;
min-width:180px;
max-width:200px;
display:block;
text-align:center;
cursor:pointer;
border-radius:10px;
margin-top:10px;
outline:0;
}

.button:focus{
outline:0;
}

.button:hover{
background:#ffffff;
color:#050c9c;
}


h1{
    line-height: 1.4;
	}

a{
color:inherit;
text-decoration:none;
}

img.right, img.left{
position:fixed;
opacity:.6;
max-width:50px;
}

img.left{
top:15%;
display:none;
left:10%;
}

img.right{
top:15%;
right:10%;
}

p{
opacity:.8;
}

svg{
position:fixed;
top:-30%;
opacity:.1;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7)); }
}

.slider {
    height: 100px;
	width:100%;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: inline-block;
	white-space:nowrap;
    width: calc(250px * 14);
}

.slider .slide {
    height: 100px;
    width: 250px;
	display:inline-block;
}




.login-text-div{
    display: flex;
    flex-direction: column;
    gap:.5rem;
	margin-bottom:10px;
	width:100%;
}
.login-text-div h1{
    font-size: 31px;
}

.small-text{
    font-size: 14px;
}

.label{
	opacity:.8;
}



.hide{
    display:none ;
}




.group{
width:100%;	
}

form{
display:flex;
flex-direction:column;
gap:20px;
width:100%;
}

input, textarea{
padding:10px;
border-radius:5px;
width:calc(100% - 200px);
background:#fff;
color:#eee;
border:1px solid #eee;
font-family: Poppins, Arial, sans-serif; 
color:#212427;
}

input:focus{
outline:.5px solid #d8eafe;
border:0;
}

form input, form textarea{
    width: 100%;
    font-size: 14px;
    padding: 1rem;
    padding-left: 1rem;
    border-radius: 8px;
    font-weight:500;
    margin-top:5px;
}

button{
width:100%;
border:0;
font-family: Poppins, Arial, sans-serif; 
font-weight:600;
background:#050c9c;
color:#ffffff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
    height:fit-content;
    padding: 0.8rem;
    border-radius:10px ;
    border:none;
    box-shadow: 0;
}


@media only screen and (min-width: 768px){
.main{
padding:0 5%;
gap:0;
height:calc(100% - 90px);
flex-direction:row;
}
.cards{
width:47.5%;
}

form{
width:40%;
}

.leftcontent, .rightcontent{
width:47.5%;
}


header .button{
display:block;
}

.lleft{
width:40%;
}

.lcenter{
width:30%;
}

.lright{
width:30%;
}

.item{
padding:2.5% 5%;
}

.heroimage{
width:49%;
}


.title{
align-items:center;
width:49%;
}

.title h1{
margin:0;
}


img.left{
display:block;
}

}


} 
          
        @keyframes bounce { 
            from { 
                transform: translate3d(0, 0, 0); 
            } 
            to { 
                transform: translate3d(0, 200px, 0); 
            } 
        } 
        /* Prefix Support */ 
          
        ball { 
            -webkit-animation-name: bounce; 
            -webkit-animation-duration: 0.5s; 
            -webkit-animation-direction: alternate; 
            -webkit-animation-timing-function: cubic-bezier( 
            .5, 0.05, 1, .5); 
            -webkit-animation-iteration-count: infinite; 
        } 
          
        @-webkit-keyframes bounce { 
            from { 
                -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0); 
            } 
            to { 
                -webkit-transform: translate3d(0, 200px, 0); 
                transform: translate3d(0, 200px, 0); 
            } 
        } 


.hide{
display:none;
}


.sectcontainer .secticon.errorcontainer{
background:#ffe6e6;
color:#ff6666;
}

.erroroverlay  .message{
text-align:center;
}

.sectcontainer{
gap:30px;
}

.sectcontainer .secticon{
width:200px;
font-size:60px;
height:200px;
max-width:100%;
border-radius:50%;
background:#d8eafe;
}