/* Flexbox container */
.containerpopup {     display: flex;    justify-content: space-between;    margin: 292px auto;    padding: 24px;    background-color: #fff;    border-radius: 10px;    max-width: 820px;    box-shadow: 0 5px 79px rgb(0 0 0 / 2%);    height: 400px;    background-color: #26a13405;    border-radius: 8px;    position: relative;}
/* Columns */
.col {    padding: 15px;}

.col-2-5 {    flex: 2;}

.col-3-5 {    flex: 3;    position: relative; }

/* Close Button */
#closebtn {    position: absolute;    top: 10px;    right: 10px;    font-size: 24px;    color: #000;       cursor: pointer;}

/* Form Section Background */
#loginpage, #loginsection {    background-color: aliceblue;    border-radius: 10px !important;    width: 100%;    height: 100%;}

/* Form Section Alignment */
.form-section {    display: flex;    align-items: center;    justify-content: center;    height: 100%;}

a:hover {    color: #26a134;}

/* Title */
.title {    font-size: 24px;    font-weight: bold;}


/* Form */
.form-section {    display: flex;    align-items: center;}

.input-group {    position: relative;    margin-bottom: 20px;}


.input-field:focus {    outline: none;    border-color: #2874f0;}

.input-label {    position: absolute;    top: 10px;    left: 12px;    font-size: 14px;    color: #888;    transition: all 0.2s;    pointer-events: none;}

.input-field:focus + .input-label,.input-field:not(:placeholder-shown) + .input-label {
    top: -10px;    left: 10px;    font-size: 12px;    color: #2874f0;    background-color: #f0f8ff;    padding: 0 5px;}

/* Agreement Text */
.agreement {    font-size: 12px;    color: #777;    margin-bottom: 20px;}

.link {    color: #2874f0;    text-decoration: none;}
.link:hover {    text-decoration: underline;}

/* Button */
.button-group {    margin-bottom: 20px;}

.submit-btn {    width: 100%;    padding: 10px;    font-size: 16px;    color: #fff;    background-color: #2874f0;    border: none;    border-radius: 5px;    cursor: pointer;
    transition: background-color 0.2s;}

.submit-btn:hover {    background-color: #2363d6;}

#loginsection p {    font-size: 1.2rem;    font-weight: 400;}
.apply-button {
  display: flex;
  gap: 10px; /* Adjusts space between buttons */
}

#messenger-btn, #video-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#homeIcon {
  font-weight: 900;
  font-size: 1.6rem;
  margin-right: 10px; /* Space between icon and text */
}


.material-icons.right.more {
  margin-left: auto; /* Push the chevron to the right */
}
.messenger-img-wrapper img {	margin: 105px auto;	width: 125%;}
.btn-icon img {	margin: 0 auto;	top: 0;	padding-right: 15px;}
.inner-title h2 {	background: #2558BF;	background: -webkit-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	background: -moz-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	background: repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	-webkit-background-clip: text;	-webkit-text-fill-color: transparent;}
.inner-text-web {	padding: 38px 15px;}
.inner-text-web h5 {	text-align: left;}
.inner-text-support {	padding: 120px 0px;}
.support-img img {	width: 128%;	margin: 0 -23px}
.feebackside {	color: grey;	cursor: pointer;	position: fixed;	right: 0;	vertical-align: bottom;	width: 35px;	height: 117px;	font-weight: 600;	writing-mode: tb-rl;	text-align: center;	z-index: 9999;	top: 25%;	border-top-left-radius: 10px;	border-bottom-left-radius: 10px;	box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2);	-moz-box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2);	-webkit-box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2);}
.calculate {	font-size: 1rem;}
.video-title h2 {	text-align: center;	font-weight: bold;}
#view-port {	width: 62%;	transform: translate(28%, 0);}
.inner {	transform: translate(0%, 35%);}
.inner-title h2 {	font-weight: bold;}
.inner-subtitle .inner-subtext {	font-size: 2.92rem;	font-weight: bold;}
.inner-subtitle .subtext-container .animated-subtext {	font-size: 2.2rem;	color: #26a349;}
.inner-button {	position: relative;	margin: 10% 0;}
.image-slider span {	display: none;}
.image-slider {	-moz-box-shadow: transform: translate(15%, 35%);	-webkit-box-shadow: transform: translate(15%, 35%);	transform: translate(15%, 35%);}
.inner-subtitle {	position: relative;	overflow: hidden;	margin: 10% 0;}
a#video-btn {	width: 43%;		background: -webkit-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	background: -moz-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	background: repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	color: white;	margin-right: 10px;}
a#messenger-btn {	width: 43%;
	
	background: -webkit-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	
	background: -moz-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);
	background: repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	
	color: white;	
	margin-right: 10px;}
.apply-button a:hover {	background: #2558BF;	background: -webkit-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	background: -moz-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);	background: repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);}
.inner-subtext {	display: block;	float: left;}
.animated-subtext {	display: block;	float: left;	line-height: 2;}
.subtext-container span {	position: absolute;	top: 50%;	line-height: 3;	height: 90px;	margin-top: -49px;	width: 118%;	left: 36%;	color: transparent;	display: none;}
#concent {	width: 35%;	height: 50%;}
#concent {	width: 35%;}
#reapp_confirm_modal {	width: 20%;	top: 28% !important;	border-radius: 10px;}
#reapp_modal {	width: 35% !important;	border-radius: 10px;	top: 25% !important;}

.loader_background {	position: fixed;	z-index: 999;	top: -25%;	left: 0;	bottom: 0;	right: 0;	height: 125%;	width: 100%;	will-change: opacity;	z-index: 1002;	display: block;	opacity: 0.5;	background: none repeat scroll 0 0 black;}
#loading {	width: 20%;	height: 18%;	position: fixed;	display: block;	text-align: center;	border-radius: 5px;	opacity: 1;	background-color: #fff;	z-index: 9999;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);}
#loading-image {	position: absolute;	top: 35%;	left: 50%;	z-index: 100;	transform: translate(-50%, -50%);}
#validate-text {	position: relative;	top: 50%;	left: 50%;	z-index: 100;	transform: translate(-50%, -50%);}
  .inner-text-web h3{    font-weight:bold;  }
.inner-text-support {	text-align: left;}
.inner-text-support h3{  font-weight:bold;}
.inner-text-support p {	width: 83%;}
#applynow-btn {	width: 45%;	display: block;	background: #106ea6;	background: -webkit-repeating-linear-gradient(to bottom right, #106ea6 0%, #3cac5b 100%);	background: -moz-repeating-linear-gradient(to bottom right, #106ea6 0%, #3cac5b 100%);	background: repeating-linear-gradient(to bottom right, #106ea6 0%, #3cac5b 100%);	color: white;	left: 2%;}
#applynow-btn img {	margin: 0 auto;	top: 15%;	padding-right: 15px;}
@-webkit-keyframes fade-in {	from {		opacity: 1;		top: 0px;	}	to {		  opacity: 0;		  top: -5px;			}}
@media only screen and (max-width: 1366px) {
	.inner {		transform: translate(0%, 10%)	}
	.inner-title h2 {		font-size: 2.56rem;	}
	.inner-subtitle .inner-subtext {		font-size: 1.92rem;	}
	.image-slider {		transform: translate(15%, 10%)	}
	.inner-subtitle .subtext-container .animated-subtext {		font-size: 1.7rem;	}
	.subtext-container span {		top: 75%	}
	#apply_elig_modal {		width: 50% !important;		border-radius: 10px;		top: 25% !important;		text-align: center;	}
 .messenger-img-wrapper img {    margin: 23px auto;  }
}
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
   .video-title h2 {		font-size: 1.50rem;	  }
   #web  {		padding: 0 !important;}
   #support{        padding: 0px 0;  }
  .inner-text-support{   padding:0px;  }
  .inner-text-web{     text-align: center;  }
	.inner-text-web h3 {		text-align: center;      font-size: 2.00rem;	}
  .inner-text-support h3{    text-align:center;    font-size: 2.00rem;  }
  .inner-text-support p{    text-align:center;    width:100%;  }
	#concent {		width: 95%;		height: 100vh;	}
	#view-port {		width: 100%;		transform: translate(0, 0);	}
	.inner {		transform: translate(0%, 0%);	}
	.inner-text {		text-align: center;	}
	.messenger-img-wrapper img {		margin: 0px auto;		width: 105%;	}
	.inner h2 {		font-size: 2.0rem;		text-align: center;	}
	.inner-subtitle h3 {		font-size: 1.92rem;	}
	.inner-subtitle .inner-subtext {		display: block;		width: 100%;	}
	.inner-subtitle .animated-subtext {		font-size: 1.8rem;	}
	.inner-subtitle {		text-align: center;	}
		.apply-button {		text-align: center;	}
	.image-slider {		-moz-box-shadow: transform: translate(0%, 15%);		-webkit-box-shadow: transform: translate(0%, 15%);		transform: translate(0%, 15%);	}
	.inner-subtitle {	overflow: visible;	}
	.subtext-container span {		left: 0;		margin-top: 0;		width: 100%;		display: none;	}
	.inner-button {		height: 11vh;	}


	#applynow-btn {		margin: 14px 55px;		width: 60%;		display: block;	}
	.support-img img {		width: 100%;		margin: 0px;	}
	.footer {		margin: 4.5rem 0 1rem 0;	}
	#reapp_confirm_modal {		width: 85% !important;		top: 25% !important;		border-radius: 10px;	}
	#reapp_modal {		width: 90% !important;		border-radius: 10px;	}
	#apply_elig_modal {		width: 98% !important;		border-radius: 10px;	}
	#apply_elig_modal .btn {	width: 85%;		margin: 1rem;		border-radius: 35px;	}
	#apply_elig_modal .modal-content {		padding: 10px !important;	}
	#loading {		width: 80%;		height: 25%;		position: fixed;		display: block;		text-align: center;		border-radius: 5px;		opacity: 1;		background-color: #fff;		z-index: 99999;	top: 50%;	left: 50%;		transform: translate(-50%, -50%);	}
        #calculator, #home, #support, #web {
          
            top: 0px !important;
          
        }
    #homeIcon{
                width: 10px;
            }
            a#messenger-btn {
                right: 1%;
                font-size: 10px;
              }
                a#messenger-btn {
                width: 51%;
                background: -webkit-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);
                background: -moz-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);
                background: repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);
                color: white;
                margin-right: 10px;
               }
                #video-btn {
                    width: 52%;
                    position: absolute;
                    left: 51%;
                    margin-right: 10px;
                    box-sizing: border-box;
                    font-size: 10px;
                }
                    a#video-btn { 
                     width: 52%;
                    background: -webkit-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);
                    background: -moz-repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);
                    background: repeating-linear-gradient(to bottom right, #2558BF 0%, #C830D9 100%);
                    color: white;
                    margin-right: 10px;
                }
  

}
/* Flexbox container */
.containerpopup {
     display: flex;
    justify-content: space-between;
    margin: 292px auto;
    padding: 24px;
    background-color: #fff;
    border-radius: 10px;
    max-width: 820px;
    box-shadow: 0 5px 79px rgb(0 0 0 / 2%);
    height: 400px;
    background-color: #26a13405;
    border-radius: 8px;
    position: relative;
}

/* Columns */
.col {
    padding: 15px;
}

.col-2-5 {
    flex: 2;
}

.col-3-5 {
    flex: 3;
    position: relative; /* To ensure #closebtn stays within this container */
}

/* Close Button */
#closebtn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #000;   
    cursor: pointer;
}

/* Form Section Background */
#loginpage, #loginsection {
    background-color: aliceblue;
    border-radius: 10px !important;
    width: 100%;
    height: 100%;
}

/* Form Section Alignment */
.form-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

a:hover {
    color: #26a134;
}

/* Title */
.title {
    font-size: 24px;
    font-weight: bold;
}


/* Form */
.form-section {
    display: flex;
    align-items: center;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

/*.input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background-color: #f9f9f9;
}*/

.input-field:focus {
    outline: none;
    border-color: #2874f0;
}

.input-label {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 14px;
    color: #888;
    transition: all 0.2s;
    pointer-events: none;
}

.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #2874f0;
    background-color: #fff;
    padding: 0 5px;
}

/* Agreement Text */
.agreement {
    font-size: 12px;
    color: #777;
    margin-bottom: 20px;
}

.link {
    color: #2874f0;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

/* Button */
.button-group {
    margin-bottom: 20px;
}

.submit-btn {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #2874f0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #2363d6;
}

#loginsection p {
    font-size: 1.2rem;
    font-weight: 400;
}

#apply_elig_modal .modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;   
    padding: 0;
    max-height: 70%;
    width: 100%;
    margin: auto;    
    border-radius: 2px;
    will-change: top, opacity;
}
.input-field:focus + .input-label, .input-field:not(:placeholder-shown) + .input-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #2874f0;
    background-color: #f0f8ff;
    padding: 0 5px;
}


.containerpopup {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Width of the modal */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 991px) {
    #loginsection{
        display: none;
    }
    
.containerpopup {
    display: flex;
    justify-content: space-between;
    margin: 292px auto;
    padding: 24px;
    background-color: #fff;
    border-radius: 10px;
 
    background-color: #26a13405;
    border-radius: 8px;
    position: relative;
    margin-right: 33px;
}
.link {
    color: #2874f0;
    text-decoration: none;
}
 
}