body{
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: white;
	overflow-x: auto;
	overflow-y: scroll;
    }
    
    .cfbtp-main{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
    }
    
    .cfbtp-login{
	display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 1fr;
    width: 50%;
    height: 100vh;
    position: relative;
	background-color: white;
	float: right;
    }

    .cfbtprofileIcon-bird{
	position: absolute;
	width: 1200px;
	top: -145px;
	left: 15px;
    overflow: hidden;
    }
    
    .login-box{
	justify-self: center;
	margin-top: 1rem;
	display: block;
	font-size: 1rem;
	line-height: 1.5rem;
	height: 3rem;
    }
    
    .input-box{
	border: 2px solid #ddd;
	border-radius: 3px;
	box-sizing: border-box;
	padding: 0 15px;
    width: 210px;
    font-family: 'Rubik', sans-serif;
    transition: .2s;
    outline: 0;
    }
    
    .input-box:focus {
	border-color: #4085ad;
    }
    
    ::placeholder{
	font-size: 14px;
	line-height: 20px;
    }
    
    .login-btn{
	background-color: #fff;
    border: 1px solid #4085ad;
	color: #4085ad;
	border-radius: 80px;
	font-weight: 700;
	font-size: 14px;
    width: 70px;
	cursor: pointer;
	margin-top: 5px;
	margin-bottom: 5px;

    }
    .login-btn:hover {
	background-color: #bae0f7;
    transition: all 0.2s;
    }

    .login-link{
	grid-area: 2/2/3/3;
	color: #aab8c2;
	text-decoration: none;
	font-size: 14px;
    }

    .slow-login{
	justify-self: center;
	width: 355px;
	height: 100px;
	color: #14171a;
	font-weight: 700;
	padding:1rem;
    }
    
    .login-bird{
	width: 8rem;
	display: block;
margin-left: auto;
margin-right: auto;
width: 50%; /* or any other percentage */
margin-bottom:1rem;
margin-top:2rem;
    }
    
    .login-small-display{
	display:none; 
    }
    
    .front-para{
	font-size: 2rem;
	line-height: 32px;
	display: block;
	margin-bottom: 3rem;
    }
    
    .join{
	font-size: 18px;
	line-height: 24px
    }
    
    .signup-btn{
    margin-top: 15px;
    background-color: #4085ad;
    border: 1px solid #4085ad;
    color: #fff;
    }
    
    .signin-btn{
	background-color: #fff;
    border: 1px solid #4085ad;
	color: #4085ad;
    }

    .pri-btn{
	border-radius: 100px;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding: 6px 16px;
	margin-bottom: 16px;
	width: 350px;
    }
    .cfbtp-features{

	background-repeat: no-repeat;
	background-size:1200px;
	background-position:0px -140px;
	width: 50%;
	height: 100vh;
	background-color: #4085ad;
	float: left;
    }
    .features-div{
	margin:auto;
	width: 370px;
	margin-top: 2rem;
    display: grid;
    grid-template-columns: auto 1fr; /* For icon and text pairs */
    gap: 1rem; /* Space between icon-text pairs */
    align-items: center;
    }
    .cfbtp-icon{
	position: relative;
	width: 3rem;
	margin-right: 20px;
    align-self: center;
	padding-bottom: 2rem;
    }
    .cfbtp-features p{
    flex: 1;
    transition: 1s;
	position: relative;
	font-size: 1rem;
	font-weight: 700;
	line-height: 16px;
	color: #fff;
	padding-bottom: 2rem;
    margin: 0; /* Remove default paragraph margin */
    display: flex;
    align-items: center; /* Vertically centers text */
    min-height: 100%;
    }

    .animation {
    animation-name: move;
    animation-duration: .4s;
    animation-fill-mode: both;
    animation-delay: 2s;
    }

    .a1 {
    animation-delay: 2s;
    }

    .a2 {
    animation-delay: 2.1s;
    }

    .a3 {
    animation-delay: 2.2s;
    }

    .a4 {
    animation-delay: 2.3s;
    }

    .a5 {
    animation-delay: 2.4s;
    }

    .a6 {
    animation-delay: 2.5s;
    }

    footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	border-top: 1px solid #e6ecf0;
    background-color: #fff;
    }
    ul{
	background: #fff;
    display: flex;
	color: #aab8c2;
    }
    li{
    display: inline-block;
	padding-left: 18px; 
	font-size: 12px;
    }

    footer a{
	color: #aab8c2;
	text-decoration: none;
    }

    .error-li {
	margin:25px 0px;
    }

    .span-fp-error{
	overflow: hidden;
	padding: 5px;
	border: 1px dashed #d89797;
	border-radius: 3px;
	font-size: 13px;
	font-weight: bold;
	color: #a75858;
    }
    
    .bg-cfbtpms {
    background-color: #4085ad!important;
    }
    
    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
    color: beige;
    }
    
    @media only screen and (min-width: 1800px) {
    .login-box{
	margin-top: 1rem;
	display: block;
	font-size: 1rem;
	line-height: 1.5rem;
	height: 3rem;
    }
    
    .features-div{
	margin:auto;
	width: 370px;
	margin-top: 8rem;
    display: grid;
    grid-template-columns: auto 1fr; /* For icon and text pairs */
    gap: 1rem; /* Space between icon-text pairs */
    align-items: center;
    }
    
    .cfbtp-login{
	display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 1fr;
    width: 50%;
    height: 100vh;
    position: relative;
	background-color: white;
	float: right;
    }
    
    }

    @media (max-width:800px){

	.cfbtp-main{
		display: grid;
	}
	
	.cfbtp-login{
		width: 100%;
		height: 60vh;
		position: relative;
	}
	
	.cfbtp-features{
		width: 100%;
		height: 72vh;
		background-size: 80%;
	}
	.features-div{
		margin-top: 2em;
		width: auto;
    grid-template-columns: auto 1fr; /* For icon and text pairs */
    gap: 1rem; /* Space between icon-text pairs */
    align-items: center;
	}
	
	.cfbtp-features p{
    flex: 1;
    transition: 1s;
	position: relative;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 16px;
	color: #fff;
	padding-bottom: 1.5rem;
    margin: 0; /* Remove default paragraph margin */
    display: flex;
    align-items: center; /* Vertically centers text */
    min-height: 100%;
    }
	
	.login-bird{
		margin: auto;
        width: 25%;
	}
	
	.pri-btn {
     width: 300px;
     margin-left:5%;
}
	
    .signup-btn {
    justify-self:center;
    margin-top: 10px;
    background-color: #4085ad;
    border: 1px solid #4085ad;
    color: #fff;
    }
	
	.front-para {
	    margin-left:2rem;
	    font-size:1.5rem;
	}
	
	
	.cfbtp-icon{
	position: relative;
	width: 2rem;
	margin-left: 2rem;
align-self: center;
	padding-bottom: 1.5rem;
    }
    
    .slow-login{
	justify-self: center;
	color: #14171a;
	font-weight: 700;
    }


	/* .cfbtp-login form{
		display: none;
	} */
	.footer{
		display: none;
		text-align: center;
	}
	
	.login-box {
		justify-self: center;
		margin-top: 1rem;

	}
	
	.login-btn {
		border-radius: 100px;
		font-size: 1rem;
		font-weight: bold;
		line-height: 1rem;
		width:90%;
		padding: .5em;
		margin-left: .5rem;
	}
	
	.input-box{
	border: 2px solid #ddd;
	border-radius: 3px;
	box-sizing: border-box;
	padding: .5em;
	line-height: 1rem;
    width: 90%;
    font-family: 'Rubik', sans-serif;
    transition: .2s;
    outline: 0;
    margin-left:.5rem;
    text-align:center;
    }

    .join{
    margin-left:2rem;
	font-size: 18px;
	line-height: 24px
    }

    }

    .con {
	width: 200%;
	text-align: center;
    }

    button:focus {
    outline: none !important;
    }
    
.typing-text{
    font-size: 1rem;
    font-weight: 600;
    min-width: 280px;
}

.typing-text span{
    position: relative;
}

.typing-text span::before{
    content: "Our vision";
    color: #4085ad;
    animation: words 12s infinite;
}

.typing-text span::after{
    content: "";
    position: absolute;
    height: 100%;
    border-right: 3px solid #4085ad;
    left: -4;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 6s steps(888, end), blink-caret 0s step-end infinite;
}



@keyframes words{
    0%, 16%{
        content: "Strengthening Systems";
    }
    17%, 33%{
        content: "Developing Capacity";
    }
    34%, 50%{
        content: "Empowering Learners";
    }
    51%, 66%{
        content: "Strengthening Systems";
    }
    67%, 83%{
        content: "Developing Capacity";
    }
    84%, 100%{
        content: "Empowering Learners";
    }
}

.vision{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
}

.index-content h3{
    font-size: 1.6rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

        @keyframes typing {
            0% { width: 0; }
            33% { width: 33%; }
            66% { width: 66%; }
            100% { width: 100%; }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: #4085ad; }
        }

.frame{
  margin-top: 1rem;
  width: 6rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.btn{
  height: 35px;
  width: 35px;
  border-radius: 3px;
  background: #e0e5ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001,
   inset 0px 0px 0px 0px #fff9,
   inset 0px 0px 0px 0px #0001,
   inset 0px 0px 0px 0px #fff9,        inset 0px 0px 0px 0px #0001;
 transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
  font-size: 1.2rem;
  color: rgba(42, 52, 84, 1);
  text-decoration: none;
}
.btn:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}