@import url("../css/common.css");

/* navbar section start  */
.main-navbardesign{
  padding: 14px 0px;
  background: var(--white-color);
  transition: all 0.3s;
}
.navbar-psc-Design .navbar-ui li, 
.navbar-psc-Design .navbar-ui li a{
  color: var(--subtitle-text);
  font-weight: 400;
}
.navbar-psc-Design .navbar-ui li.active, 
.navbar-psc-Design .navbar-ui li.active a{
  color: var(--primary-color);
  font-weight: 500;
}
.btn-call-btn i{
  height: 38px;
  width: 38px;
  min-width: 38px;
  background: var(--secondary-color);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--white-color);
}
.btn-call-btn{
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 40px;
  padding: 5px 16px 5px 5px;
  color: var(--white-color);
  font-weight: 500;
  transition: all 0.3s;
}
.btn-call-btn:hover{
  background: transparent;
  color: var(--primary-color);
}
.navbar-psc-Design .brand-logo{
  width: 195px;
  transition: all 0.3s;
}
.navbar-psc-Design .brand-logo:hover{
  transform: scale(0.9);
}
.top-navmail-address li a{
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  color: var(--subtitle-text);
}
.top-nav-links a:hover,
.top-nav-links .active{
  color: var(--title-text1);
  text-decoration: underline;
}
.top-social-icons a:hover,
.top-social-icons .active{
  color: var(--title-text1);
}

/* header section start  */
.header-innner-qabyte{
  background: url(../images/header-bg-trans.png) no-repeat, var(--primary-color);
  background-size: cover;
  border-radius: 30px;
}
.apps-playstore-img .apps-icon{
  width: 160px;
}
.header-design-img{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  animation: up-down 4s ease-in-out infinite;
}
@keyframes up-down {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.header-qabyte-leftside .header-logo{
  width: 200px;
  transition: all 0.3s;
}
.header-qabyte-leftside .header-logo:hover{
  transform: scale(0.9);
}
.header-rating-title{
  border-left: 2px solid var(--white-color);
  padding-left: 10px;
}
.plain-secondary-icon{
  position: absolute;
  bottom: 20%;
  width: 64px;
  left: 38%;
}
.rounded-icon-bg{
  position: absolute;
  top: 10%;
  width: 54px;
  right: 9%;
}
.plain-primary-icon{
  position: absolute;
  top: 12%;
  width: 64px;
  right: 6%;
  animation: left-right-arrow 4s ease-in-out infinite;
}
@keyframes left-right-arrow {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}
.scrolldown-mouse{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 205px;
  background: url(../images/mouse-weel-bg.png);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary-color);
  background-size: 204px;
  background-repeat: no-repeat;
  padding-top: 13px;
  flex-direction: column;
}

/* Awesome Features section */
.features-box-awesome{
  background: #F5834533;
  border-radius: 20px;
  margin-top: 30px;
  border: 1px solid #F5834533;
  cursor: pointer;
  transition: all 0.3s;
}
.features-box-awesome:hover{
  transform: translateY(-5px);
}
.features-box-awesome.primary-bg{
  background: #54c5d024;
  border-color: #54c5d024;
}
.features-box-awesome.primary-bg:hover{
  transform: translateY(-5px);
}
.features-icons{
  width: 64px;
  height: 64px;
  border-radius: 100%;
  background: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29px;
  color: var(--white-color);
  margin: auto;
  margin-top: -48px;
  border: 5px solid var(--white-color);
}
.primary-bg .features-icons{
  background: #54C5D0;
}
.features-content h4{
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.features-content p{
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.awesome-books-position{
  position: absolute;
  right: 10%;
  top: 9%;
  width: 80px;
  animation: up-down-book 6s ease-in-out infinite;
}
@keyframes up-down-book {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.awesome-bulb--position{
  position: absolute;
  left: 8%;
  top: 6%;
  width: 70px;
  animation: left-right-arrow 7s ease-in-out infinite;
}
.left-downlaod-our-main{
  background: var(--primary-color);
  border-radius: 200px 0px 0px 200px;
}
.right-downlaod-our-main{
  background: var(--secondary-color);
  border-radius: 0px 200px 200px 0px;
}
.contents-download-our a{
  background: var(--white-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 10px 26px;
  display: inline-block;
  border-radius: 43px;
  font-weight: 500;
  transition: all 0.3s;
}
.contents-download-our a:hover{
  border-color: var(--white-color);
  background: transparent;
  color: var(--white-color);
}
.contents-join-our a{
  background: var(--white-color);
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  padding: 10px 26px;
  display: inline-block;
  border-radius: 43px;
  font-weight: 500;
  transition: all 0.3s;
}
.contents-join-our a:hover{
  border-color: var(--white-color);
  background: transparent;
  color: var(--white-color);
}
.icon-download-our{
  height: 80px;
  width: 80px;
  min-width: 80px;
  background: #54C5D0;
  border: 1px solid #54C5D0;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--white-color);
  transition: all 0.3s;
}
.icon-download-our:hover{
  background: transparent;
  color: #54C5D0;
}
.icon-join-our{
  height: 80px;
  width: 80px;
  min-width: 80px;
  background: #00000026;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--white-color);
  border: 1px solid #00000026;
  transition: all 0.3s;
}
.icon-join-our:hover{
  background: transparent;
  color: #00000026;
}
.center-join-man{
  position: absolute;
  width: 172px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  transition: all 0.3s;
  transform-origin: bottom;
}
.center-join-man:hover{
  transform: scale(0.9);
}

/* Students Feedback section */
.inner-feedback-bg{
  background: url(../images/student-feedbak-bg.png) no-repeat, var(--primary-color);
  background-size: cover;
  border-radius: 30px;
}
.left-customer-icon img{
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 100%;
  object-fit: cover;
}
.single-feedback{
  background: linear-gradient(239.18deg, rgba(255, 255, 255, 0.16) 17.93%, rgba(255, 255, 255, 0.04) 81.51%);
  backdrop-filter: blur(40px);
  border: 1px solid #0000001A;
  border-radius: 20px;
}
.single-feedback.slick-current{
  background: var(--white-color);
}
.single-feedback.slick-current p,
.single-feedback.slick-current h4{
  color: var(--title-text);
}
.feedback-slider .slick-prev{
  position: absolute;
  bottom: -24px;
  right: 46%;
  font-size: 0;
  background: transparent;
  border: none;
  z-index: 9;
}
.feedback-slider .slick-prev::before{
  content: "\ebe6";
  font-size: 22px;
  font-family: 'boxicons';
  background: #FE97381A;
  border: 1px solid var(--third-color);
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--white-color);
}
.feedback-slider .slick-next{
  position: absolute;
  bottom: -24px;
  left: 46%;
  font-size: 0;
  background: transparent;
  border: none;
  z-index: 9;
}
.feedback-slider .slick-next::before{
  content: "\ebe6";
  font-size: 22px;
  font-family: 'boxicons';
  background: var(--third-color);
  border: 1px solid var(--third-color);
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--white-color);
  transform: rotate(180deg);
}
.apps-screen-items img{
  transform: scale(0.9);
}
.apps-screen-items.slick-current img{
  transform: scale(1);
}
.apps-screen-slider .slick-prev{
  position: absolute;
  bottom: -28px;
  right: 45.7%;
  font-size: 0;
  background: transparent;
  border: none;
  z-index: 9;
}
.apps-screen-slider .slick-prev::before{
  content: "\ebe6";
  font-size: 22px;
  font-family: 'boxicons';
  background: #FE97381A;
  border: 1px solid var(--third-color);
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--third-color);
}
.apps-screen-slider .slick-next{
  position: absolute;
  bottom: -28px;
  left: 45.7%;
  font-size: 0;
  background: transparent;
  border: none;
  z-index: 9;
}
.apps-screen-slider .slick-next::before{
  content: "\ebe6";
  font-size: 22px;
  font-family: 'boxicons';
  background: var(--third-color);
  border: 1px solid var(--third-color);
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--white-color);
  transform: rotate(180deg);
}

/* Learning Psctalks section */
.inners-psc-talkmain{
  background: url(../images/learning-talk-bg.png) no-repeat, var(--primary-color);
  background-size: cover;
  border-radius: 30px;
}
.learning-bulb{
  width: 45px;
}
.video_postdata video{
  object-fit: cover;
}
.video_postdata .video-js{
  width: 100% !important;
  height: 320px !important;
  border-radius: 12px;
  overflow: hidden;
}
.video_postdata{
  overflow: hidden;
  position: relative;
}
.video_postdata .video-js .vjs-tech{
  border-radius: 0px;
}
.video_postdata .video-js .vjs-big-play-button {
  font-size: 30px;
  height: 52px;
  width: 52px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  border-radius: 100%;
  margin: auto;
  line-height: 52px;
  background: var(--white-color);
  border: 1px solid var(--white-color);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  color: var(--third-color);
}
.video_postdata .video-js .vjs-control{
  box-shadow: none;
}
.video_postdata .video-js .vjs-control-bar {
  width: 97%;
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  background-color: #1c1c1c61;
  margin: auto;
  border-radius: 0px;
}
.video_postdata .vjs-poster{
  background-size: cover;
}
.man-pscbotoms{
  position: absolute;
  bottom: 0;
  right: -4%;
  z-index: 1;
  width: 192px;
}

.inners-download-apps{
  background: url(../images/learning-talk-bg.png) no-repeat, var(--secondary-color);
  background-size: cover;
  border-radius: 30px;
}
.inners-download-border{
  border: 1px dashed var(--white-color);
  border-radius: 24px;
}
.lefts-dowload-appscontents{
  border-bottom: 1px solid #ffffff40;
}
.right-apps-man{
  margin-top: -100px;
}
.right-apps-man img{
  transform: scale(1);
  transform-origin: bottom;
  transition: all 0.3s;
}
.right-apps-man img:hover{
  transform: scale(0.8);
}
.common-store-btn{
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white-color);
  padding: 4px 18px 4px 4px;
  border-radius: 46px;
  transition: all 0.3s;
}
.common-store-btn:hover{
  transform: translateY(-5px);
}
.common-store-btn .store-img{
  height: 48px;
  width: 48px;
  min-width: 48px;
}
.download-bulb--position{
  position: absolute;
  left: 2%;
  top: 30%;
  width: 70px;
  animation: up-down-book 3s ease-in-out infinite;
}
.chain-box--position{
  position: absolute;
  right: 2%;
  top: 0%;
  width: 70px;
  animation: left-right-arrow 7s ease-in-out infinite;
}
.carpet-img--position{
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 70px;
  animation: up-down-book 10s ease-in-out infinite;
}

/* pricing section start  */
.heading-plans .plans-icon{
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.inner-plans-box{
  background: #FDF0E8;
  border-radius: 20px;
  border: 1px solid #0000001a;
}
.heading-plans{
  border-bottom: 1px solid #E8EAF1;
}
.plans-details-list li{
  display: flex;
  gap: 8px;
  font-weight: 400;
  color: var(--subtitle-text);
  margin: 12px 0px;
}
.plans-details-list li.light{
  color: #B2B6C5;
}
.plans-details-list li img{
  height: 18px;
  width: 18px;
  object-fit: contain;
  min-width: 18px;
}
.btn-pricing-plan{
  width: 100%;
  background: #27272714;
  color: var(--title-text);
  border: none;
  padding: 12px 14px;
  border-radius: 60px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}
.btn-pricing-plan:hover{
  color: var(--white-color);
  background: var(--black-color);
}
.inner-plans-box.current-plan{
  background: var(--primary-color);
}
.current-plan .heading-plans{
  border-color: #ffffff2a;
}
.current-plan .plans-details-list li{
  color: var(--white-color);
}
.current-plan .btn-pricing-plan{
  background: var(--third-color);
  color: var(--white-color);
}
.current-plan .btn-pricing-plan:hover{
  background: var(--secondary-color);
}
.inner-plans-box.teams-plan{
  background: #E8FAFD;
  border-color: #0000001A;
}
.carpet-carps--position{
  position: absolute;
  right: 21%;
  top: 6%;
  width: 72px;
  animation: left-right-arrow 8s ease-in-out infinite;
}
.world-img-position{
  width: 72px;
  position: absolute;
  left: 7%;
  bottom: 8%;
  animation: left-right-arrow 4s ease-in-out infinite;
}
.cutting-img-position{
  position: absolute;
  right: 0;
  top: 10%;
  width: 60px;
  animation: up-down-book 6s ease-in-out infinite;
}
.world-img-std-position{
  position: absolute;
  left: 7%;
  top: 10%;
  width: 66px;
  animation: left-right-arrow 9s ease-in-out infinite;
}
.vectore-img-position{
  position: absolute;
  right: 6%;
  bottom: 10%;
  width: 60px;
  animation: up-down-book 3s ease-in-out infinite;
}


/* contact us section */
.left-contact-contents h4::before{
  content: "";
  height: 1px;
  width: 20px;
  background: var(--third-color);
}
.right-contact-forms{
  border: 1px solid #2727273b;
  border-radius: 20px;
}
.common-input-field .input-field{
  width: 100%;
  height: 48px;
  padding: 8px 18px;
  border-radius: 40px;
  border: 1px solid var(--border-color);
  outline: none;
  font-size: 15px;
  color: var(--title-text);
}
.common-input-field .textare-field{
  width: 100%;
  height: 160px;
  padding: 13px 18px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  outline: none;
  font-size: 15px;
  color: var(--title-text);
}
.btn-form-submit{
  width: 100%;
  display: inline-block;
  padding: 12px 12px;
  border-radius: 40px;
  border: 1px solid var(--third-color);
  background: var(--third-color);
  color: var(--white-color);
  font-weight: 500;
  transition: all 0.3s;
}
.btn-form-submit:hover{
  background: transparent;
  color: var(--third-color);
}
.bg-contect-inner{
  background: url(../images/contact-bg-map.png) no-repeat 0% 0%;
}

/* footer section strat  */
.inners-common-footer{
  background: var(--primary-color);
  border-radius: 30px;
}
.footer-subscribe-plan{
  border-bottom: 1px solid #ffffff24;
}
.subscribe-input-field .btn-sent-email{
  position: absolute;
  right: 3px;
  top: 3px;
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: #54C5D0;
  border: 1px solid #54C5D0;
  color: var(--white-color);
  transform: rotate(145deg);
  font-size: 20px;
}
.subscribe-input-field .btn-sent-email:hover{
  background: transparent;
  color: #54C5D0;
}
.subscribe-input-field .email-icon{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px;
  align-content: center;
  font-size: 19px;
  color: var(--subtitle-text);
}
.subscribe-input-field input{
  width: 100%;
  background: var(--white-color);
  height: 48px;
  border-radius: 40px;
  border: none;
  outline: none;
  padding: 8px 50px 8px 44px;
  color: var(--title-text);
  font-weight: 400;
}
.footer-left-logo .footer-logo{
  width: 158px;
}
.ui-footer-links li a{
  color: var(--white-color);
  display: flex;
  margin-top: 10px;
  font-weight: 400;
  transition: all 0.3s;
  opacity: 0.75;
  gap: 4px;
}
.ui-footer-links li a:hover{
  margin-left: 4px;
  opacity: 1;
}
.inners-motors-footer{
  border-bottom: 1px solid #ffffff2b;
}
.footer_socialmedia .footer-icon{
  color: #979BA9;
  font-size: 20px;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border: 1px solid #ffffff36;
}
.footer_socialmedia .footer-icon:hover{
  color: var(--white-color);
  background: #FE9738;
  border-color: #FE9738;
}
.custom-tooltip {
  --bs-tooltip-bg: var(--black-color);
}
.bottom-footer-design{
  border-top: 1px solid #ffffff24;
}
.privacy-terms{
  display: flex;
  align-items: center;
  background: #D9D9D91A;
  width: max-content;
  padding: 9px 14px;
  border-radius: 43px;
  gap: 6px;
}
.privacy-terms .centr-ln{
  height: 12px;
  width: 1px;
  background: var(--white-color);
}