:root {
  /* colors */
  --primary-text: #0c1421;
  --secondary-text: #313957;
  /* all colors */
  --Darker-primary: #3568d4;
  --main-color-primary: #3e7bfa;
  --lighter-primary: #6698fa;
  --Dark-one: #1c1c28;
  --Dark-two: #28293d;
  --Teal: #00cfde;
  --red: #ff3b3b;
  --green: #06c270;
  --blue: #0063f7;
  --purble: #4c0099;
  --light-one: #ffffff;
  /* --light-one: #fafafc; */
  --light-text: #888888;
  --light-text2: #666666;
  --light-text-3: #4d4d4d;
  --mint-green: #03bc6c;
  --linear-blue: #2b6de6;
  --input-bg: #f7fbff;
  --border-main: #d4d7e3;
  /* linear gradiant */
  --linear-main: linear-gradient(
    90deg,
    rgba(98, 98, 98, 0.15) 19%,
    rgba(11, 231, 221, 0.15) 26%,
    rgba(98, 98, 98, 0) 33%,
    rgba(98, 98, 98, 0.15) 62%,
    rgba(205, 169, 52, 0.15) 68%,
    rgba(98, 98, 98, 0.15) 76%
  );
  --linear-text: linear-gradient(45deg, #1d4ed8, #55cbfb);
  /* fonts */
  --font-family-primary: "Cairo", sans-serif;
  --font-family-secondary: "Roboto", sans-serif;
  /* Radius */
  --main-radius: 12px;
}
* {
  font-family: var(--font-family-primary);
}
*::first-letter {
  text-transform: capitalize;
}
/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
header {
  background-color: var(--light-one);

  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}
header > .container-fluid {
  background: var(--linear-main);
}
header nav {
  background-color: #a1a1a1;
  background: rgba(255, 255, 255, 0.2);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  backdrop-filter: blur(10.3px);
  -webkit-backdrop-filter: blur(10.3px);
}
header nav .navbar-brand:focus-visible {
  outline: none;
}
header nav .signUp {
  border: 1px solid var(--Dark-one);
  color: var(--Dark-one);
  border-radius: var(--main-radius);
}
header nav .signIn {
  background-color: var(--blue);
  color: var(--light-one);
  border-radius: var(--main-radius);
}
header nav .avatar .nav-link {
  overflow: hidden;
}
header nav .nav-link.active {
  text-decoration: underline;
}
/*--------------------------------------------------------------
# Main page
--------------------------------------------------------------*/
/*---------------
# hero section
---------------*/
#hero {
  height: 100vh;
  background-image: url(../images/hero_bg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#hero .row {
  height: 100vh;
}
#hero {
  color: var(--light-one);
}
#hero .mainBtn {
  color: var(--light-one);
  background-color: var(--Darker-primary);
}
/*---------------
# Features section
---------------*/
#features .features-card {
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
  box-shadow: 0px 0px 20px hsla(0, 0%, 52%, 0.2);
}
#features .features-card p {
  color: var(--light-text);
}
#features .features-card a {
  background-color: var(--main-color-primary);
  border-radius: var(--main-radius);
  color: var(--light-one);
}
/*---------------
# About section
---------------*/
#about {
  background: url(../images/about_bg.png);
  background-size: cover;
}
#about .services-card {
  background-color: var(--light-one);
  border-radius: var(--main-radius);
  border: 1px solid var(--border-main);
}
#about .services-card h3 {
  color: var(--Dark-one);
}
#about .services-card h3 i {
  background-color: var(--Darker-primary);
  color: var(--light-one);
  padding: var(--main-radius);
}
#about .services-card p {
  color: var(--light-text2);
}
/*---------------
# Pricing section
---------------*/
#pricing h2 span {
  background: var(--linear-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#pricing .container > p {
  color: var(--Dark-one);
}
/* =================================================== */
#pricing .toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  cursor: pointer;
}

#pricing .toggle-switch input[type="checkbox"] {
  display: none;
}

#pricing .toggle-switch-background {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ddd;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #ccc;
  transition: background-color 0.3s ease-in-out;
}

#pricing .toggle-switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

#pricing .toggle-switch::before {
  content: "";
  position: absolute;
  top: -25px;
  right: -35px;
  font-size: 12px;
  font-weight: bold;
  color: #aaa;
  text-shadow: 1px 1px #fff;
  transition: color 0.3s ease-in-out;
}

#pricing .toggle-switch input[type="checkbox"]:checked + .toggle-switch-handle {
  transform: translateX(45px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--lighter-primary);
}

#pricing
  .toggle-switch
  input[type="checkbox"]:checked
  + .toggle-switch-background {
  background-color: var(--lighter-primary);
  box-shadow: inset 0 0 0 2px var(--Darker-primary);
}

#pricing .toggle-switch input[type="checkbox"]:checked + .toggle-switch:before {
  content: "On";
  color: var(--lighter-primary);
  right: -15px;
}

#pricing
  .toggle-switch
  input[type="checkbox"]:checked
  + .toggle-switch-background
  .toggle-switch-handle {
  transform: translateX(20px);
}

/* =================================================== */
#pricing .pro {
  background-color: var(--main-color-primary);
  color: var(--light-one);
  border: none;
}
#pricing .card {
  box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.2);
  border-radius: var(--main-radius);
}
#pricing .card a.btn {
  border: 1px solid var(--main-color-primary);
  color: var(--main-color-primary);
  background-color: var(--light-one);
}
#pricing .card a.btn:hover {
  border: 1px solid var(--light-one);
  color: var(--light-one);
  background-color: var(--main-color-primary);
}
#pricing .list-unstyled i.fa-check {
  color: var(--Darker-primary);
  background-color: #e8edfb;
}
#pricing .list-unstyled i.fa-xmark {
  background-color: #f7f8f9;
  color: var(--Dark-one);
}

/*--------------------------------------------------------------
# create Project Page
--------------------------------------------------------------*/
#createProject h1,
#createProject h4 {
  color: black;
}
#createProject form label {
  color: var(--primary-text);
}
#createProject form input.form-control {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
  line-height: 2;
}
#createProject form .btn {
  border-radius: var(--main-radius);
}
#createProject form .btn:first-child {
  background-color: var(--main-color-primary);
}
#createProject form .btn:last-child {
  background-color: var(--Dark-two);
}
/*--------------------------------------------------------------
# login & register Page
--------------------------------------------------------------*/
#access .card {
  border: none;
}
#access h1 {
  color: var(--primary-text);
}
#access h6 {
  color: var(--secondary-text);
}
#access form button {
  background-color: var(--main-color-primary);
  color: var(--light-one);
}
#access form .form-check a {
  color: var(--main-color-primary);
}
#access form label {
  color: var(--primary-text);
}
#access .socialite a {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
}
#access input.form-control {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
}
#access .form-check-label {
  color: var(--Dark-one);
}
#access input.form-control {
  line-height: 2;
}
/*--------------------------------------------------------------
# create Project Page
--------------------------------------------------------------*/
#createProject h1,
#createProject h4 {
  color: black;
}
#createProject form label {
  color: var(--primary-text);
}
#createProject form input.form-control {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
  line-height: 2;
}
#createProject form .btn {
  border-radius: var(--main-radius);
}
#createProject form .btn:first-child {
  background-color: var(--main-color-primary);
}
#createProject form .btn:last-child {
  background-color: var(--Dark-two);
}
/*--------------------------------------------------------------
# HumanSendFile Page
--------------------------------------------------------------*/
#HumanSendFile .card {
  border: none;
}
#HumanSendFile h1 {
  color: var(--primary-text);
}
#HumanSendFile h6 {
  color: var(--secondary-text);
}
#HumanSendFile form button {
  background-color: var(--main-color-primary);
  color: var(--light-one);
}
#HumanSendFile form .form-check a {
  color: var(--main-color-primary);
}
#HumanSendFile form label {
  color: var(--primary-text);
}
#HumanSendFile .socialite a {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
}
#HumanSendFile select {
  background-color: transparent;
  border: 0;
}
#HumanSendFile select:focus-visible,
#HumanSendFile select:focus {
  outline: none;
  box-shadow: none;
}
#HumanSendFile input.form-control,
#HumanSendFile textarea.form-control {
  background-color: var(--input-bg);
}
#HumanSendFile input.form-control:not([type="file"]) {
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
}
#HumanSendFile input#HsendFileDoc::file-selector-button {
  display: none;
}
#HumanSendFile .form-check-label {
  color: var(--Dark-one);
}
#HumanSendFile input.form-control {
  line-height: 2;
}
#HumanSendFile .fileUpload {
  background-color: var(--main-color-primary);
  color: var(--light-one);
}
/* ===================== */
#HSF .send,
#translation .send {
  background-color: var(--Dark-one);
  color: var(--light-one);
  border-radius: var(--main-radius);
}
#HSF {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 88vh;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 4;
}
#HSF .container > .row {
  min-height: 88vh;
}
#HSF .row .hsf-alert {
  background-color: var(--light-one);
  border-radius: var(--main-radius);
}
#HSF .row .cancel {
  background-color: var(--light-one);
  border-color: var(--Dark-one);
  color: var(--Dark-one);
}
/* =================== */
/*--------------------------------------------------------------
# All-Projects page
--------------------------------------------------------------*/
#allProjects {
  min-height: 85vh;
}
#allProjects .breadcrumb-item a {
  color: black;
  text-decoration: none;
}
#allProjects input,
#allProjects select {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
}
#allProjects input {
  border-top-left-radius: var(--main-radius);
  border-bottom-left-radius: var(--main-radius);
}
#allProjects select {
  border-radius: var(--main-radius);
}
#allProjects #searchBtn {
  border-top-right-radius: var(--main-radius);
  border-bottom-right-radius: var(--main-radius);
  background-color: var(--main-color-primary);
  color: var(--light-one);
}

#allProjects a.btn {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
}
#allProjects .card {
  border-radius: var(--main-radius);
  overflow: hidden;
  border: none;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
#allProjects .card .card-body p {
  color: var(--Dark-one);
}
#allProjects .card .card-body p i {
  font-size: 32px;
}
#allProjects a.btn.newProjectBtn {
  background-color: var(--Dark-two);
  color: var(--light-one);
}

#allProjects .card .number {
  width: 40px;
  border-radius: 50%;
  border: 1px solid var(--light-one);
}
/* projects cards color based on type */
/* 
  Video => Vcard
  Audio => Acard
  Image => Icard
  Document => Dcard

*/
#allProjects .Vcard {
  background-color: var(--red);
  color: var(--light-one);
}
#allProjects .Acard {
  background-color: var(--lighter-primary);
  color: var(--light-one);
}

#allProjects .Icard {
  background-color: var(--green);
  color: var(--light-one);
}

#allProjects .Dcard {
  background-color: var(--Teal);
  color: var(--light-one);
}
/*--------------------------------------------------------------
# Way-translate page
--------------------------------------------------------------*/
#Way-translate {
  background-image: url("../images/wayTranslate_bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

#Way-translate .card:last-child a.btn:last-child {
  background-color: var(--main-color-primary);
  color: var(--light-one);
  border-radius: var(--main-radius);
}

#Way-translate .card:first-child a.btn:last-child {
  background-color: var(--green);
  color: var(--light-one);
  border-radius: var(--main-radius);
}

#Way-translate .card {
  background: #fff2f221;
  box-shadow: 0 4px 8px #0000001a;
  box-shadow: 0 15px 15px #00000017;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-radius: 10px;
}
#Way-translate .button {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 9px 9px;
  gap: 8px;
  height: 50px;
  width: 200px;
  border: none;
  color: var(--light-one);
  background-color: #5a5a5a;
  border-radius: 100px;
  cursor: pointer;
}
#Way-translate .icon {
  background-color: #9c9c9c;
  color: var(--light-one);
  width: 40px;
  height: 40px;
  border-radius: 100px;
  padding: 8px 12px;
  margin-left: -5px;
}
#Way-translate .card p {
  color: var(--light-one);
}
/*--------------------------------------------------------------
# Verification, OTP, & Invitation page
--------------------------------------------------------------*/
#invite > .container > .row {
  min-height: 100vh;
}
#invite .inviting {
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
  background-color: var(--light-one);
  box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.2);
}
#invite .social a.btn {
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
  padding-top: 12px;
  padding-bottom: 12px;
}
#invite form .skip {
  border: 1px solid var(--Dark-one);
  color: var(--Dark-one);
  border-radius: var(--main-radius);
}
#invite form button {
  background: var(--linear-text);
  background-repeat: no-repeat;
  color: var(--light-one);
  border-radius: var(--main-radius);
}
#invite,
#OTP,
#verification {
  min-height: 100vh;
  background-image: url(../images/elipse-lg.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#OTP button.btn,
#verification a.btn {
  background: var(--linear-text);
  border-radius: var(--main-radius);
  color: var(--light-one);
  background-repeat: no-repeat;
}
#OTP form input {
  background-color: var(--input-bg);
  border: 1px solid var(--border-main);
  width: 52px;
  height: 52px;
  font-size: 25px;
}
#OTP form input:focus,
#OTP form input:focus-visible {
  outline: none;
}
/*--------------------------------------------------------------
# Translation page
--------------------------------------------------------------*/
#translation {
  min-height: 88vh;
}
#translation select,
#translation textarea,
#translation .switch {
  font-size: 28;
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
}
#translation label {
  color: var(--Dark-one);
}
#translation .download {
  background-color: var(--light-text);
  color: var(--light-one);
  border-radius: var(--main-radius);
}
#translation .save {
  background-color: var(--main-color-primary);
  color: var(--light-one);
  border-radius: var(--main-radius);
}
#QA .send,
#translation .send {
  background-color: var(--Dark-one);
  color: var(--light-one);
  border-radius: var(--main-radius);
}
#QA {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 88vh;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 4;
}
#QA .container > .row {
  min-height: 88vh;
}
#QA .row .sqa-alert {
  background-color: var(--light-one);
  border-radius: var(--main-radius);
}
#QA .row .cancel {
  background-color: var(--light-one);
  border-color: var(--Dark-one);
  color: var(--Dark-one);
}
.hidden {
  display: none;
}
/*--------------------------------------------------------------
# PricePlan page
--------------------------------------------------------------*/
/*--------------------------
# top-content section
--------------------------*/
#top-content {
  background-image: url(../images/background.png);
  background-size: cover;
  background-position: center center;
}

#top-content p,
#top-content span {
  color: var(--light-one);
}
/* =================================================== */
#top-content .toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  cursor: pointer;
}

#top-content .toggle-switch input[type="checkbox"] {
  display: none;
}

#top-content .toggle-switch-background {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--light-one);
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px var(--light-one);
  transition: background-color 0.3s ease-in-out;
}

#top-content .toggle-switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background-color: var(--Darker-primary);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

#top-content
  .toggle-switch
  input[type="checkbox"]:checked
  + .toggle-switch-background {
  background-color: var(--lighter-primary);
  box-shadow: inset 0 0 0 2px var(--light-one);
}

#top-content
  .toggle-switch
  input[type="checkbox"]:checked
  + .toggle-switch:before {
  content: "On";
  color: var(--lighter-primary);
  right: -15px;
}

#top-content
  .toggle-switch
  input[type="checkbox"]:checked
  + .toggle-switch-background
  .toggle-switch-handle {
  transform: translateX(20px);
  background-color: var(--light-one);
}

/*--------------------------
# pricePlan section
--------------------------*/
#pricePlan {
  margin-top: -150px;
}

#pricePlan .pro {
  background-color: var(--main-color-primary);
  color: var(--light-one);
  border: none;
}
#pricePlan .card {
  box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.2);
  border-radius: var(--main-radius);
}
#pricePlan .card a.btn {
  border: 1px solid var(--main-color-primary);
  color: var(--main-color-primary);
  background-color: var(--light-one);
}

#pricePlan .card a.btn:hover {
  border: 1px solid var(--light-one);
  color: var(--light-one);
  background-color: var(--main-color-primary);
}

#pricePlan .list-unstyled i.fa-check {
  color: var(--Darker-primary);
  background-color: #e8edfb;
}

#pricePlan .list-unstyled i.fa-xmark {
  background-color: #f7f8f9;
  color: var(--Dark-one);
}
/*--------------------------
# pricePlan section
--------------------------*/
#moreDetails .details-card {
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
  box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.2);
}
/*--------------------------------------------------------------
# Reels page
--------------------------------------------------------------*/
#reels-hero {
  background: var(--linear-text);
  color: var(--light-one);
}
#reels-hero a.btn {
  background-color: var(--light-one);
  color: var(--main-color-primary);
  border-radius: var(--main-radius);
}
/*--------------------------------------------------------------
# profile page
--------------------------------------------------------------*/
#profile {
  background: var(--linear-text);
  color: var(--light-one);
}
#profile label {
  border: 1px solid var(--light-one);
  border-radius: var(--main-radius);
  color: var(--light-one);
}
#editProfile form > .row,
#profileDetails > .container > .row {
  border: 1px solid var(--border-main);
  border-radius: var(--main-radius);
}
#editProfile button.btn,
#profileDetails a.btn {
  background: var(--linear-text);
  background-repeat: no-repeat;
  color: var(--light-one);
  border-radius: var(--main-radius);
}
#editProfile label,
#profileDetails label {
  color: var(--light-text-3);
  font-size: 20px;
}
#editProfile input.form-control,
#profileDetails input.form-control {
  font-size: 24px;
  line-height: 28px;
  color: var(--Dark-one);
  border-radius: var(--main-radius);
}
#editProfile input.form-control {
  font-size: 20px;
  background-color: var(--input-bg);
  border-color: var(--border-main);
}
#profileDetails input.form-control {
  border: none;
}
#editProfile select {
  background-color: transparent;
  border: 0;
}
#editProfile select:focus-visible,
#editProfile select:focus {
  outline: none;
  box-shadow: none;
}
#editProfile a.btn {
  color: var(--Dark-one);
  border: 1px solid var(--Dark-one);
  border-radius: var(--main-radius);
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
  background: var(--linear-main);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  color: black;
}
/*--------------------------------------------------------------
# Error 404 page
--------------------------------------------------------------*/
#error404 .container {
  min-height: 85vh;
}
/*--------------------------------------------------------------
# media Query
--------------------------------------------------------------*/
@media (max-width: 992px) {
  #invite,
  #OTP,
  #verification {
    background-image: url(../images/elipse-md.png);
  }
}

@media (max-width: 576px) {
  #invite .inviting {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  #invite,
  #OTP,
  #verification {
    background-image: url(../images/elipse-sm.png);
  }
  #error404 .container {
    min-height: 75vh;
  }
}