@charset "utf-8";
/*..............Embaded fonts..............*/


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --primary-color: #2d2f78;
    --secondary-color: #808080;
}

body { margin: 0; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: #222222; text-align: left; ; position: relative; z-index: 1;     min-height: 100vh; display: flex; align-items: center; justify-content: center;}
body:after{background-attachment: fixed; background-image: url(../images/small-white-private-jet-parked-hangar-1.webp); background-position: top; background-repeat: no-repeat; background-size: cover; content: ""; height: 100%; left: 0; opacity: 1; position: fixed; top: 0; width: 100%; z-index: -1;}
body:before { position: absolute; content: ''; width: 100%; height: 100%; inset: 0; background: #0000004a; z-index: 0; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; color: #3d4465; }
h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }
p { margin-top: 0; margin-bottom: 1rem; }

a {color: #2d2f78; background-image: linear-gradient(#cf303000 95%, #2d2f78 0, #2d2f78); background-position-y: bottom; background-repeat: no-repeat; background-position-x: right; background-size: 100% 100%; transition: background-size .3s cubic-bezier(.79, .01, .22, .99) 0s, background-position 0s step-end .3s, color .3s; font-weight: 700; text-decoration: none;} 
a:hover { color: #2d2f78; background-size: 0% 100%; background-position: left; }

input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } 
button, input { overflow: visible; } 
button, select { text-transform: none; } 
select { word-wrap: normal; }

.img-fluid { max-width: 100%; height: auto; }
/* form */
.form-control { display: block; width: 100%; height: 50px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500; line-height: 1.5; color: #495057; background-color: #ffffff; background-clip: padding-box; border: 1px solid #00000020; border-radius: 7px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.form-control::-ms-expand { background-color: transparent; border: 0; }
.form-control:focus { color: #495057; background-color: #f5f6fb; border-color: #1a7ac7; outline: 0; box-shadow: 0 0 0 0.2rem rgba(89, 59, 219, 0.25); }
.form-control::placeholder { color: #6c757d; opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: #f5f6fb; opacity: 1; }
select.form-control:focus::-ms-value { color: #495057; background-color: #f5f6fb; }

/* .btn { display: inline-block; font-weight: 400; color: #BDBDC7; text-align: center; vertical-align: middle; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }  */


.btn { justify-content: center; height: 49px; overflow: hidden; position: relative; z-index: 1; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; padding: 15px 27px; font-size: 16px; line-height: 1;  border-radius: 60px; font-weight: 700;  font-family: 'Inter';  border: 0 !important; background: var(--primary-color);}
/* .btn::before{width: 100%; height: 100%; left: 0; content: ""; position: absolute; top: 0; background-color: var(--primary-color); z-index: -1; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; border-radius: 50px; }
.btn::after { width: 100%; height: 100%; left: -100%; content: ""; position: absolute; top: 0; background-color: var(--secondary-color); z-index: -1; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; border-radius: 50px; } */

.btn:hover { transform: translate(0px, 0px); transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; box-shadow: 0 12px 10px #0000; color: var(--primary-color)!important; border: 1px solid var(--primary-color) !important;  background: transparent;}
/* .btn:hover::after { width: 110%; left: 0; transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; }
.btn:hover::before{background: var(--secondary-color); transition-delay: .4s;} */

.btn:hover { color: #BDBDC7; text-decoration: none; } 
.btn:focus, .btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(89, 59, 219, 0.25); } 
.btn.disabled, .btn:disabled { opacity: 0.65; }

.btn-primary { color: #fff; background-color: #2d2f78 ; border-color: #2d2f78 ; }
.btn-primary:hover { color: #fff; background-color: #3e4087; border-color: #3e4087; } 
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(114, 88, 224, 0.5); } 
.btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: #0b95cd; border-color: #0b95cd; }



label {display: inline-block;  color: #222222; font-weight: 300; font-size: 16px;}


/* form */



/* ============= login css ============= */
.authincation-content { background: #fff; box-shadow: 0 0 35px 0 rgb(154 161 171 / 47%); border-radius: 11px;     position: relative;}
.auth-form { padding: 50px 50px; }
.auth-form .btn { height: 50px; font-weight: 700; }
.img-center { margin: 0 auto; display: block; } 
.form-group { margin-bottom: 1rem; }
.form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; }
.btn-block { display: block; width: 100%;}
.new-account { text-align: center; }
.form-icon { position: absolute; left: 20px; top: 18px; display: block; line-height: 1; width: 20px; aspect-ratio: 1; z-index: 1; }
.form-icon i { display: flex; color: var(--primary-color); }
.form-floating:has(.form-icon) input.form-control, .form-floating:has(.form-icon) select.form-control { padding-left: 50px !important; }
.form-floating:has(.show-pass)  input.form-control { padding-right: 50px; }
.form-floating:has(.form-icon)>label { color: #222222; padding: 0 12px; display: inline-block; height: auto; width: auto; top: 13px; left: 38px; transition: all .4s ease; border-radius: 20px; }

.show-pass { font-size: 20px; color: #6a6a6a; position: absolute; right: 20px; top: 16px; max-width: 24px; height: 24px; cursor: pointer; }

/* .checkbox { display: flex; align-items: center; gap: 7px;     cursor: pointer;     position: relative;}
.form-check-input { position: absolute; width: 0; left: 50px; height: 0; opacity: 0; cursor: pointer; }
.checkbox .checkmark { position: relative; display: block; top: 0; left: 0; width: 21px; height: 21px; background: white; border-radius: 3px; border: 1px solid #acacac; transition: all 0.2s ease; }
.checkbox .checkmark::after { position: absolute; display: block; content: ""; left: 50%; top: 40%; width: 4px; height: 8px; border: 1px solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: all 0.2s ease; }
.checkbox input:checked ~.checkmark { background: var(--primary-color); outline: 1px solid var(--primary-color); } */

.custom-checkbox { display: inline-flex; align-items: center; cursor: pointer; font-size: 16px; user-select: none; gap: 10px; }

/* Hide default checkbox */
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark { width: 20px; height: 20px; border: 2px solid var(--primary-color); border-radius: 4px; position: relative; transition: all 0.2s ease;     flex: 0 0 auto;}
.custom-checkbox:hover .checkmark { border-color: var(--primary-color); }
.custom-checkbox input:checked + .checkmark { background-color: var(--primary-color); border-color: var(--primary-color); }
.checkmark::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.custom-checkbox input:checked + .checkmark::after { opacity: 1; }

/* ============= login css ============= */

@media screen and (max-width: 767px) {
  h3, .h3 { font-size:20px; }
  .auth-form { padding: 30px 16px; }

  .auth-logo { max-width: 200px; margin:  0 auto; } 
  .auth-form h3 { font-size: 16px; }
  .auth-form img { max-width: 200px; }
  .auth-form .btn { height: 48px;}
  .form-control{height: 50px !important; font-size: 14px !important;}
  .form-floating:has(.form-icon)>label{font-size: 14px}
  .authincation-content{border-radius: 5px;}
  .form-group { margin-bottom: 10px; }
  .show-pass { font-size: 16px; height: 17px;}
  .new-account p{margin-bottom: 0;}
  .container { max-width: 95%; }
  
}