body {
  font-family: "Open Sans", sans-serif;
  color: rgb(68, 68, 68);
}

li#tran-track {
    padding: 0px 61px 0 37px !important;
}

pa {
  color: #f5821f;
  text-decoration: none;
}

a:hover {
  color: #F5821F;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Jost, sans-serif;
}

    
    
        a.back-to-top.d-flex.align-items-center.justify-content-center.active {left: 20px !important;}
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #f5821f;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s ease 0s;
}

.back-to-top i {
  font-size: 24px;
  color: rgb(255, 255, 255);
  line-height: 0;
}

.back-to-top:hover {
  background: rgb(107, 193, 233);
  color: rgb(255, 255, 255);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

#header {
  transition: all 0.5s ease 0s;
  z-index: 105;
  padding: 15px 0px;
  position: relative;
  background: white !important;
  margin: 0px !important;
}

#header.header-scrolled, #header.header-inner-pages {
  background: rgba(40, 58, 90, 0.9);
}

#header .logo {
  font-size: 30px;
  margin: 0px;
  padding: 0px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#header .logo a {
  color: rgb(0, 0, 0);
}

#header .logo img {
  max-height: 75px;
}

.navbar {
  padding: 0px;
}

.my-3 {
    display: none !important;
}

.navbar ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  list-style: none;
  align-items: center;
  z-index: 999 !important;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px 10px 30px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  font-family: "Josefin Sans", sans-serif;
  transition: all 0.3s ease 0s;
  color: rgb(0, 0, 0) !important;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #f5821f;
}

.navbar .getstarted, .navbar .getstarted:focus {
  padding: 8px 20px;
  margin-left: 26px;
  border-radius: 50px;
  font-size: 14px;
  border: 2px solid #f5821f;
  font-weight: 600;
  animation: 2s ease 0s infinite normal forwards running myAnim;
  color: rgb(0, 0, 0) !important;
}

@keyframes myAnim {
  0% {
      animation-timing-function: ease-out;
      transform: scale(1);
      transform-origin: center center;
  }

  10% {
      animation-timing-function: ease-in;
      transform: scale(0.91);
  }

  17% {
      animation-timing-function: ease-out;
      transform: scale(0.98);
  }

  33% {
      animation-timing-function: ease-in;
      transform: scale(0.87);
  }

  45% {
      animation-timing-function: ease-out;
      transform: scale(1);
  }
}

.navbar .getstarted:hover, .navbar .getstarted:focus:hover {
  background: #f5821f;
  color: white !important;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 13px;
  margin: 0px;
  padding: 12px 0px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: rgb(255, 255, 255);
  box-shadow: rgba(127, 137, 161, 0.25) 0px 0px 30px;
  transition: all 0.3s ease 0s;
  border-radius: 4px;
  top: 49px !important;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  font-weight: 500;
  color: rgb(12, 60, 83);
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #f5821f;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0px;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0px;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
      left: -90%;
  }

  .navbar .dropdown .dropdown:hover > ul {
      left: -100%;
  }
}

.mobile-nav-toggle {
  color: rgb(0, 0, 0);
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: all 0.5s ease 0s;
}

.mobile-nav-toggle.bi-x {
  color: rgb(255, 255, 255);
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
      display: block;
  }

  .navbar ul {
      display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  inset: 0px;
  background: rgba(103, 58, 183, 0.73);
  transition: all 0.3s ease 0s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  inset: 55px 15px 15px;
  padding: 10px 0px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
  transition: all 0.3s ease 0s;
}

.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: rgb(55, 81, 126);
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #f5821f;
}

.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
  color: rgb(55, 81, 126);
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0px;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: rgb(255, 255, 255);
  box-shadow: rgba(127, 137, 161, 0.25) 0px 0px 30px;
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #f5821f;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

#hero {
  width: 100%;
  height: 80vh;
  background: rgb(55, 81, 126);
}

#hero .container {
  padding-top: 72px;
}

#hero h1 {
  margin: 0px 0px 10px;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: rgb(255, 255, 255);
}

#hero h2 {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 50px;
  font-size: 24px;
}

#hero .btn-get-started {
  font-family: Jost, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 11px;
  border-radius: 50px;
  transition: all 0.5s ease 0s;
  margin: 10px 0px 0px;
  color: rgb(255, 255, 255);
  background: #f5821f;
}

#hero .btn-get-started:hover {
  background: rgb(32, 157, 216);
}

#hero .btn-watch-video {
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: all 0.5s ease 0s;
  margin: 10px 0px 0px 25px;
  color: rgb(255, 255, 255);
  line-height: 1;
}

#hero .btn-watch-video i {
  line-height: 0;
  color: rgb(255, 255, 255);
  font-size: 32px;
  transition: all 0.3s ease 0s;
  margin-right: 8px;
}

#hero .btn-watch-video:hover i {
  color: #f5821f;
}

#hero .animated {
  animation: 2s ease-in-out 0s infinite alternate-reverse both running up-down;
}

@media (max-width: 991px) {
  #hero {
      height: 100vh;
      text-align: center;
  }

  #hero .animated {
      animation: 0s ease 0s 1 normal none running none;
  }

  #hero .hero-img {
      text-align: center;
  }

  #hero .hero-img img {
      width: 50%;
  }
}

@media (max-width: 768px) {
  #hero h1 {
      font-size: 28px;
      line-height: 36px;
  }

  #hero h2 {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 30px;
  }

  #hero .hero-img img {
      width: 70%;
  }
}

@media (max-width: 575px) {
  #hero .hero-img img {
      width: 80%;
  }

  #hero .btn-get-started {
      font-size: 16px;
      padding: 10px 24px 11px;
  }
}

@keyframes up-down {
  0% {
      transform: translateY(10px);
  }

  100% {
      transform: translateY(-10px);
  }
}

section {
  padding: 40px 0px;
  overflow: hidden;
}

.section-bg {
  background-color: rgb(243, 245, 250);
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 40px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: rgb(0 0 0);
}

.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: rgb(221, 221, 221);
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #f5821f;
  bottom: 0px;
  left: calc(50% - 20px);
}

.section-title p {
  margin-bottom: 0px;
  font-family: 'Josefin Sans';
  font-size: 16px !important;
  color: black !important;
}

.clients {
  padding: 12px 0px;
  text-align: center;
}

.clients img {
  max-width: 45%;
  transition: all 0.4s ease-in-out 0s;
  display: inline-block;
  padding: 15px 0px;
  filter: grayscale(1);
}

.clients img:hover {
  filter: none;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .clients img {
      max-width: 40%;
  }
}

.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}

.about .content ul {
  list-style: none;
  padding: 0px;
}

.about .content ul li {
  padding-left: 28px;
  position: relative;
}

.about .content ul li + li {
  margin-top: 10px;
}

.about .content ul i {
  position: absolute;
  left: 0px;
  top: 2px;
  font-size: 20px;
  color: #f5821f;
  line-height: 1;
}

.about .content p:last-child {
  margin-bottom: 0px;
}

.about .content .btn-learn-more {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 4px;
  transition: all 0.3s ease 0s;
  line-height: 1;
  color: #f5821f;
  animation-delay: 0.8s;
  margin-top: 6px;
  border: 2px solid #f5821f;
}

.about .content .btn-learn-more:hover {
  background: #f5821f;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

.why-us .content {
  padding: 60px 100px 0px;
}

.why-us .content h3 {
  font-weight: 400;
  font-size: 34px;
  color: rgb(55, 81, 126);
}

.why-us .content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
}

.why-us .content p {
  font-size: 15px;
  color: rgb(132, 132, 132);
}

.why-us .img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.why-us .accordion-list {
  padding: 0px 100px 60px;
}

.why-us .accordion-list ul {
  padding: 0px;
  list-style: none;
}

.why-us .accordion-list li + li {
  margin-top: 15px;
}

.why-us .accordion-list li {
  padding: 20px;
  background: rgb(255, 255, 255);
  border-radius: 4px;
}

.why-us .accordion-list a {
  display: block;
  position: relative;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding-right: 30px;
  outline: none;
  cursor: pointer;
}

.why-us .accordion-list span {
  color: #f5821f;
  font-weight: 600;
  font-size: 18px;
  padding-right: 10px;
}

.why-us .accordion-list i {
  font-size: 24px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.why-us .accordion-list p {
  margin-bottom: 0px;
  padding: 10px 0px 0px;
}

.why-us .accordion-list .icon-show {
  display: none;
}

.why-us .accordion-list a.collapsed {
  color: rgb(52, 58, 64);
}

.why-us .accordion-list a.collapsed:hover {
  color: #f5821f;
}

.why-us .accordion-list a.collapsed .icon-show {
  display: inline-block;
}

.why-us .accordion-list a.collapsed .icon-close {
  display: none;
}

@media (max-width: 1024px) {
  .why-us .content, .why-us .accordion-list {
      padding-left: 0px;
      padding-right: 0px;
  }
}

@media (max-width: 992px) {
  .why-us .img {
      min-height: 400px;
  }

  .why-us .content {
      padding-top: 30px;
  }

  .why-us .accordion-list {
      padding-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .why-us .img {
      min-height: 200px;
  }
}

.skills .content h3 {
  font-weight: 700;
  font-size: 32px;
  color: rgb(55, 81, 126);
  font-family: Poppins, sans-serif;
}

.skills .content ul {
  list-style: none;
  padding: 0px;
}

.skills .content ul li {
  padding-bottom: 10px;
}

.skills .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #f5821f;
}

.skills .content p:last-child {
  margin-bottom: 0px;
}

.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0px;
}

.skills .progress .skill {
  padding: 0px;
  margin: 0px 0px 6px;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: Poppins, sans-serif;
  color: rgb(55, 81, 126);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: rgb(232, 237, 245);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: all 0.9s ease 0s;
  background-color: rgb(70, 104, 162);
}

.services .icon-box {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 25px 0px;
  padding: 50px 30px;
  transition: all 0.4s ease-in-out 0s;
  background: rgb(255, 255, 255);
}

.services .icon-box .icon {
  margin-bottom: 10px;
}

.services .icon-box .icon i {
  color: #f5821f;
  font-size: 36px;
  transition: all 0.3s ease 0s;
}

.services .icon-box h4 {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 24px;
}

.services .icon-box h4 a {
  color: rgb(55, 81, 126);
  transition: all 0.3s ease-in-out 0s;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0px;
}

.services .icon-box:hover {
  transform: translateY(-10px);
}

.services .icon-box:hover h4 a {
  color: #f5821f;
}

.cta {
  background: linear-gradient(rgba(40, 58, 90, 0.9), rgba(40, 58, 90, 0.9)) 0% 0% / cover, url("../img/cta-bg.jpg") center center fixed;
  padding: 120px 0px;
}

.cta h3 {
  color: rgb(255, 255, 255);
  font-size: 28px;
  font-weight: 700;
}

.cta p {
  color: rgb(255, 255, 255);
}

.cta .cta-btn {
  font-family: Jost, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: all 0.5s ease 0s;
  margin: 10px;
  border: 2px solid rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}

.cta .cta-btn:hover {
  background: #f5821f;
  border: 2px solid #f5821f;
}

@media (max-width: 1024px) {
  .cta {
      background-attachment: scroll;
  }
}

@media (min-width: 769px) {
  .cta .cta-btn-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
  }
}

.portfolio #portfolio-flters {
  list-style: none;
  margin-bottom: 20px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  margin: 10px 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: rgb(68, 68, 68);
  transition: all 0.3s ease 0s;
  padding: 8px 20px;
  border-radius: 50px;
  font-family: Poppins, sans-serif;
}

.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  background: #f5821f;
  color: rgb(255, 255, 255);
}

.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio .portfolio-item .portfolio-img {
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-img img {
  transition: all 0.6s ease 0s;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 15px;
  bottom: 0px;
  z-index: 3;
  right: 15px;
  transition: all 0.3s ease 0s;
  background: rgba(55, 81, 126, 0.8);
  padding: 10px 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  margin-bottom: 0px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: rgb(249, 252, 254);
  font-size: 14px;
  margin-bottom: 0px;
}

.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 40px;
  font-size: 24px;
  top: calc(50% - 18px);
  color: rgb(255, 255, 255);
  transition: all 0.3s ease 0s;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #f5821f;
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 10px;
}

.portfolio .portfolio-item:hover .portfolio-img img {
  transform: scale(1.15);
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
}

.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgb(255, 255, 255);
  opacity: 1;
  border: 1px solid #f5821f;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #f5821f;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: rgba(55, 81, 126, 0.08) 0px 0px 30px;
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0px;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0px;
}

.team .member {
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 15px;
  padding: 30px;
  border-radius: 5px;
  background: rgb(255, 255, 255);
  transition: all 0.5s ease 0s;
  height: 100%;
}

.team .member .pic {
  overflow: hidden;
  width: 180px;
  border-radius: 50%;
}

.team .member .pic img {
  transition: all 0.3s ease-in-out 0s;
}

.team .member:hover {
  transform: translateY(-10px);
}

.team .member .member-info {
  padding-left: 30px;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
  color: rgb(55, 81, 126);
}

.team .member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: rgb(203, 214, 233);
  bottom: 0px;
  left: 0px;
}

.team .member p {
  margin: 10px 0px 0px;
  font-size: 14px;
}

.team .member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.team .member .social a {
  transition: all 0.3s ease-in-out 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 32px;
  height: 32px;
  background: rgb(239, 242, 248);
}

.team .member .social a i {
  color: rgb(55, 81, 126);
  font-size: 16px;
  margin: 0px 2px;
}

.team .member .social a:hover {
  background: #f5821f;
}

.team .member .social a:hover i {
  color: rgb(255, 255, 255);
}

.team .member .social a + a {
  margin-left: 8px;
}

.pricing .row {
  padding-top: 40px;
}

.pricing .box {
  padding: 60px 40px;
  box-shadow: rgba(20, 45, 100, 0.1) 0px 3px 20px -2px;
  background: rgb(255, 255, 255);
  height: 100%;
  border-top: 4px solid rgb(255, 255, 255);
  border-radius: 5px;
}

.pricing h3 {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 20px;
  color: rgb(55, 81, 126);
}

.pricing h4 {
  font-size: 48px;
  color: rgb(55, 81, 126);
  font-weight: 400;
  font-family: Jost, sans-serif;
  margin-bottom: 25px;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: #f5821f;
  font-size: 18px;
  display: block;
}

.pricing ul {
  padding: 20px 0px;
  list-style: none;
  color: rgb(153, 153, 153);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0px 10px 30px;
  position: relative;
}

.pricing ul i {
  color: rgb(40, 167, 69);
  font-size: 24px;
  position: absolute;
  left: 0px;
  top: 6px;
}

.pricing ul .na {
  color: rgb(204, 204, 204);
}

.pricing ul .na i {
  color: rgb(204, 204, 204);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  display: inline-block;
  padding: 12px 35px;
  border-radius: 50px;
  color: #f5821f;
  font-size: 16px;
  font-weight: 500;
  font-family: Jost, sans-serif;
  transition: all 0.3s ease 0s;
  border: 1px solid #f5821f;
}

.pricing .buy-btn:hover {
  background: #f5821f;
  color: rgb(255, 255, 255);
}

.pricing .featured {
  border-top-color: #f5821f;
}

.pricing .featured .buy-btn {
  background: #f5821f;
  color: rgb(255, 255, 255);
}

.pricing .featured .buy-btn:hover {
  background: rgb(35, 163, 223);
}

@media (max-width: 992px) {
  .pricing .box {
      max-width: 60%;
      margin: 0px auto 30px;
  }
}

@media (max-width: 767px) {
  .pricing .box {
      max-width: 80%;
      margin: 0px auto 30px;
  }
}

@media (max-width: 420px) {
  .pricing .box {
      max-width: 100%;
      margin: 0px auto 30px;
  }
}

.faq .faq-list {
  padding: 0px 0px;
}

.faq .faq-list ul {
  padding: 0px;
  list-style: none;
}

.faq .faq-list li + li {
  margin-top: 15px;
}

.faq .faq-list li {
  padding: 20px;
  background: rgb(255, 255, 255);
  border-radius: 4px;
  position: relative;
}

.faq .faq-list a {
  display: block;
  position: relative;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 0px 30px;
  outline: none;
  cursor: pointer;
  color: #f5821f;
}

.faq .faq-list .icon-help {
  font-size: 24px;
  position: absolute;
  right: 0px;
  left: 20px;
  color: #f5821f;
}

.faq .faq-list .icon-show, .faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.faq .faq-list p {
  margin-bottom: 0px;
  padding: 10px 0px 0px;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: rgb(55, 81, 126);
  transition: all 0.3s ease 0s;
}

.faq .faq-list a.collapsed:hover {
  color: #f5821f;
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
  display: none;
}

@media (max-width: 1200px) {
  .faq .faq-list {
      padding: 0px;
  }
}

.contact .info {
  border-top: 3px solid #f5821f;
  border-bottom: 3px solid #f5821f;
  padding: 30px;
  background: rgb(255, 255, 255);
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 24px 0px;
}

.contact .info i {
  font-size: 20px;
  color: #f5821f;
  float: left;
  width: 44px;
  height: 44px;
  background: rgb(231, 245, 251);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out 0s;
}

.contact .info h4 {
  padding: 0px 0px 0px 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: rgb(55, 81, 126);
  text-align: initial;
}

.contact .info p {
  padding: 0px 0px 10px 60px;
  margin-bottom: 20px;
  font-size: 14px;
  color: rgb(97, 130, 186);
  font-family: 'Josefin Sans' !important;
}

.contact .info .email p {
  padding-top: 5px;
}

.contact .info .social-links {
  padding-left: 60px;
}

.contact .info .social-links a {
  font-size: 18px;
  display: inline-block;
  background: rgb(51, 51, 51);
  color: rgb(255, 255, 255);
  line-height: 1;
  padding: 8px 0px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: all 0.3s ease 0s;
  margin-right: 10px;
}

.contact .info .social-links a:hover {
  background: #f5821f;
  color: rgb(255, 255, 255);
}

.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
  background: #f5821f;
  color: rgb(255, 255, 255);
}

.contact .lorem {
  width: 100%;
  border-top: 3px solid #f5821f;
  border-bottom: 3px solid #f5821f;
  padding: 30px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 24px 0px;
}

.contact .lorem .form-group {
  padding-bottom: 8px;
}

.contact .lorem .validate {
  display: none;
  color: red;
  margin: 0px 0px 15px;
  font-weight: 400;
  font-size: 13px;
}

.contact .lorem .error-message {
  display: none;
  color: rgb(255, 255, 255);
  background: rgb(237, 60, 13);
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .lorem .error-message br + br {
  margin-top: 25px;
}

.contact .lorem .sent-message {
  display: none;
  color: rgb(255, 255, 255);
  background: rgb(24, 210, 110);
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .lorem .loading {
  display: none;
  background: rgb(255, 255, 255);
  text-align: center;
  padding: 15px;
}

.contact .lorem .loading::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0px 10px -6px 0px;
  border-width: 3px;
  border-style: solid;
  border-color: rgb(238, 238, 238) rgb(24, 210, 110) rgb(24, 210, 110);
  border-image: initial;
  animation: 1s linear 0s infinite normal none running animate-loading;
}

.contact .lorem .form-group {
  margin-bottom: 20px;
}

.contact .lorem label {
  padding-bottom: 8px;
  font-family: 'Josefin Sans' !important;
}

.contact .lorem input, .contact .lorem textarea {
  box-shadow: none;
  font-size: 14px;
  border-radius: 4px;
}

.contact .lorem input:focus, .contact .lorem textarea:focus {
  border-color: #f5821f;
}

.contact .lorem input {
  height: 44px;
  font-family: 'Josefin Sans';
  font-size: 14px !important;
}

.contact .lorem textarea {
  padding: 10px 12px;
  font-family: 'Josefin Sans';
  font-size: 14px !important;
}

.contact .lorem button[type="submit"] {
  background: #f5821f;
  border: 0px;
  padding: 12px 34px;
  color: rgb(255, 255, 255);
  transition: all 0.4s ease 0s;
  border-radius: 50px;
  font-family: 'Josefin Sans' !important;
}

.contact .lorem button[type="submit"]:hover {
  background: rgb(245 130 31);
}

@keyframes animate-loading {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

.breadcrumbs {
  padding: 15px 0px;
  background: rgb(243, 245, 250);
  min-height: 40px;
  margin-top: 72px;
}

@media (max-width: 992px) {
  .breadcrumbs {
      margin-top: 68px;
  }
}

.breadcrumbs h2 {
  font-size: 28px;
  font-weight: 600;
  color: rgb(55, 81, 126);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0px 0px 10px;
  margin: 0px;
  font-size: 14px;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: rgb(70, 104, 162);
  content: "/";
}

#footer {
  font-size: 14px;
  background: rgb(19, 19, 19);
}

#footer .footer-newsletter {
  padding: 50px 0px;
  background: rgb(243, 245, 250);
  text-align: center;
  font-size: 15px;
  color: rgb(68, 68, 68);
}

#footer .footer-newsletter h4 {
  font-size: 24px;
  margin: 0px 0px 20px;
  padding: 0px;
  line-height: 1;
  font-weight: 600;
  color: rgb(55, 81, 126);
}

#footer .footer-newsletter form {
  margin-top: 30px;
  background: rgb(255, 255, 255);
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 15px;
  text-align: left;
}

#footer .footer-newsletter form input[type="email"] {
  border: 0px;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 0px;
  font-size: 16px;
  padding: 0px 20px;
  background: #f5821f;
  color: rgb(255, 255, 255);
  transition: all 0.3s ease 0s;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 15px;
}

#footer .footer-newsletter form input[type="submit"]:hover {
  background: rgb(32, 157, 216);
}

#footer .footer-top {
  padding: 60px 0px 30px;
  background: rgb(0, 0, 0);
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {
  font-size: 28px;
  margin: 0px 0px 10px;
  padding: 2px 0px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(255, 255, 255);
}

#footer .footer-top .footer-contact p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0px;
  font-family: Jost, sans-serif;
  color: white !important;
  font-weight: 600 !important;
}

#footer .footer-top h4 {
  font-size: 18px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  position: relative;
  padding-bottom: 12px;
  TEXT-TRANSFORM: uppercase !IMPORTANT;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  WIDTH: 50% !important;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: rgb(245 130 31);
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0px;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0px;
}

#footer .footer-top .footer-links ul a {
  transition: all 0.3s ease 0s;
  display: inline-block;
  line-height: 1;
  font-family: Jost;
  font-weight: 600;
  color: white !important;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #f5821f;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #f5821f;
  color: rgb(255, 255, 255);
  line-height: 1;
  padding: 8px 0px;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: all 0.3s ease 0s;
}

#footer .footer-top .social-links a:hover {
  background: rgb(245 130 31 / 60%);
  color: rgb(255, 255, 255);
  text-decoration: none;
}

#footer .footer-bottom {
  padding-top: 30px;
  padding-bottom: 15px;
  color: rgb(255, 255, 255);
}

#footer .copyright {
  float: left;
  font-family: Jost;
  WIDTH: 100%;
}

#footer .credits {
  float: right;
  font-size: 13px;
  WIDTH: 100% !IMPORTANT;
  font-family: Jost !important;
}

#footer .credits a {
  transition: all 0.3s ease 0s;
}

@media (max-width: 768px) {
    
    .tab {
    display: grid;
    gap: 0 !important;
}

div#port img {
    width: 82% !important;
    margin: 0 auto !important;
}

div#port {
    text-align: center !important;
}

div#ghost-writing img {
    width: 75% !important;
    margin: 0 auto !important;
}

div#ghost-writing {
    margin-bottom: 26px;
    text-align: center !important;
}

.flex-doirecction-ends {
    display: grid;
    gap: 1pc !important;
    justify-content: center !important;
}

#footer .footer-top .footer-links ul {
    margin: 0 auto !important;
    width: 100% !important;
}
  #footer .footer-bottom {
      padding-top: 20px;
      padding-bottom: 20px;
  }

  #footer .copyright, #footer .credits {
      text-align: center;
      float: none;
  }

  #footer .credits {
      padding-top: 4px;
  }
}

footer#footer {
  position: relative;
  top: 0px !important;
}

#footer .footer-top .footer-links p {
  font-family: Jost;
  font-weight: 600;
  color: white !important;
}

#footer .footer-top .footer-links ul a::before {
  content: "";
  background: white;
  width: 0px;
  height: 1px;
  position: absolute;
  transition: all 0.5s ease 0s;
  margin: 18px 0px 0px !important;
}

#footer .footer-top .footer-links ul a:hover::before {
  content: "";
  background: #f5821f;
  width: 2%;
  height: 1px;
  position: absolute;
  transition: all 0.5s ease 0s;
  margin: 18px 0px 0px !important;
}

.navbar li.dropdown li:hover {
  background: #f5821f;
  transition: all 0.5s ease 0s !important;
}

.navbar li.dropdown li:hover a {
  color: white !important;
}

div#top-1 {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

div#top-1 .number-section {
  gap: 10px;
  display: flex;
  align-items: stretch;
}

div#top-1 img {
  height: 17px;
  border-radius: 450px;
}

div#top-1 p {
  font-family: "Josefin Sans", sans-serif;
  margin: 0px !important;
  color: white !important;
}

div#secondary-header .social-links.mt-3 {
  margin: 0px !important;
  text-align: end !important;
}

div#secondary-header {
  background: #f5821f;
  padding: 10px 0px !important;
}

#secondary-header i.bx {
  width: 30px;
  border-radius: 32px;
  line-height: 31px;
  color: #f5821f !important;
  background: white !important;
  text-align: center !important;
}

.fadeInLeft {
  animation-name: fadeInLeft;
  animation-duration: 3s;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  0% {
      opacity: 0;
      transform: translate3d(-100%, 0px, 0px);
  }

  100% {
      opacity: 1;
      transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
      opacity: 0;
      transform: translate3d(-100%, 0px, 0px);
  }

  100% {
      opacity: 1;
      transform: none;
  }
}

.zoomInDown {
  animation-name: zoomInDown;
  animation-duration: 3s;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomInDown {
  0% {
      opacity: 0;
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0px, -1000px, 0px);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
      opacity: 1;
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0px, 60px, 0px);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  0% {
      opacity: 0;
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0px, -1000px, 0px);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
      opacity: 1;
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0px, 60px, 0px);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

#banner-section h2 {
  font-size: 33px;
  color: black !important;
}

#banner-section p {
  font-family: "Josefin Sans", sans-serif;
  color: black !important;
  padding: 22px 0px 0px !important;
  font-size: 16px !important;
}

.banner-btn a {
  font-family: "Josefin Sans", sans-serif;
  color: black;
  transition: all 0.5s ease 0s;
  background: rgb(255, 255, 255) !important;
  padding: 12px 36px !important;
  border-radius: 25px !important;
  border: 1px solid;
}

.banner-btn {
  display: flex;
  gap: 23px;
  padding: 18px 0px 0px !important;
}

.banner-btn a#bnr {
  background: #f5821f !important;
  color: white !important;
  border: 1px solid !important;
}

.banner-btn a:hover {
  transition: all 0.5s ease 0s;
  background: #f5821f !important;
  color: white !important;
}

.banner-btn a#bnr:hover {
  transition: all 0.5s ease 0s;
  background: #ffffff00 !important;
  color: black !important;
}

section#banner-section {
  padding: 138px 0px !important;
  background-size: cover !important;
}

@keyframes spin {
  0% {
      transform: rotateY(360deg);
  }

  100% {
      transform: rotateY(0deg);
  }
}

@-webkit-keyframes spin {
  0% {
      transform: rotateY(360deg);
  }

  100% {
      transform: rotateY(0deg);
  }
}

.wrap {
  perspective: 1000px;
  perspective-origin: 5% 100px;
  position: relative;
}

.cube {
  position: relative;
  width: 150px;
  transform-style: preserve-3d;
  animation: 14s linear 0s infinite normal none running spin;
  margin: 0px auto !important;
}

.cube div {
  position: absolute;
  width: 176px;
  height: 0px;
  font: 16px / 12em sans-serif;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 30px inset;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
  opacity: 1;
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: right top;
  opacity: 1;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: left center;
  opacity: 1;
}

.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: center top;
  opacity: 1;
}

.bottom {
  transform: rotateX(90deg) translateY(150px);
  transform-origin: center bottom;
  opacity: 1;
}

.front {
  transform: translateZ(75px);
  opacity: 1;
}

.Container {
  width: 400px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}



div#scroll-ss::-webkit-scrollbar {
  width: 5px;
}

div#scroll-ss::-webkit-scrollbar-track {
  background: rgb(241, 241, 241);
}

div#scroll-ss::-webkit-scrollbar-thumb {
  background: #f5821f;
}

div#scroll-ss::-webkit-scrollbar-thumb:hover {
  background: #f5821f;
}

div#scroll-ss h2 {
  font-size: 46px;
  color: black !important;
}

div#scroll-ss p {
  font-family: Jost;
  line-height: 32px;
  color: black !important;
  font-size: 16px !important;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: #f5821f;
}

div#scroll-ss li {
  font-family: Jost;
  display: flex;
  color: black !important;
  margin: 0px 0px 23px !important;
}

div#scroll-ss li::before {
  content: "\F604";
  position: relative;
  display: block;
  font-family: 'bootstrap-icons';
  font-size: 23px;
  padding:  0 15px 0px 0;
  color: #ff831d;
}

@-webkit-keyframes pulse-icon-color-main {
  70% {
      box-shadow: rgba(255, 87, 64, 0) 0px 0px 0px 20px, rgba(255, 87, 64, 0) 0px 0px 0px 8px;
  }

  100% {
      box-shadow: rgba(255, 87, 64, 0) 0px 0px 0px 0px, rgba(255, 87, 64, 0) 0px 0px 0px 0px;
  }
}

@-webkit-keyframes pulse-icon-color-main3 {
  70% {
      box-shadow: rgba(246, 231, 0, 0) 0px 0px 0px 20px, rgba(246, 231, 0, 0) 0px 0px 0px 7px;
  }

  100% {
      box-shadow: rgba(246, 231, 0, 0) 0px 0px 0px 0px, rgba(246, 231, 0, 0) 0px 0px 0px 0px;
  }
}

div#scroll-ss ul {
  padding: 0px !important;
}

.about-btns a {
  animation: 1.5s ease 0s infinite normal none running pulse-icon-color-main;
  font-family: Jost;
  background: #f5821f !important;
  padding: 11px 35px !important;
  line-height: 79px !important;
  border-radius: 25px !important;
  color: white !important;
}

.about-btns a.blink {
  margin: 0px 0px 0px 13px !important;
}

section#home-sec1 {
  background-size: 100% !important;
  background-repeat: no-repeat !important;
}

div#scroll-ss {
  height: auto !important;
  overflow: auto !important;
}

div#dev::after {
  content: "";
  background-image: url("https://usabookwriters.com/assets/images/vector_01.webp");
  background-position: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  position: absolute;
  width: 215px;
  height: 197px;
  right: 0px;
  background-size: 100% !important;
  margin: -32px 0px 0px !important;
}

section#home-sec1 {
  padding: 60px 0px !important;
}


.image-over-text-card p {
  font-family: "Josefin Sans";
  color: black !important;
  text-align: center !important;
  font-size: 15px !important;
}

.image-over-text-card span {
  font-weight: 800;
  color: black !important;
}

.image-over-text-card {
  background-size: 100%;
  background-repeat: no-repeat !important;
  padding: 75px 0px 150px !important;
}

.image-parallel img {
  width: 200px;
  height: 300px;
  object-fit: contain;
  position: relative;
  animation: 2s linear 0s infinite normal none running MoveUpDown;
  top: -110px;
  margin: 0px auto !important;
}

.image-parallel {
  text-align: center !important;
  HEIGHT: 190PX;
}



div#inner-sect-3one h2 {
  text-align: center;
  font-family: "Josefin Sans";
  font-size: 40px;
  color: black !important;
}

div#inner-sect-3one p {
  font-family: Jost;
  font-size: 16px;
  text-align: center !important;
}

div#inner-sect-3one {
  margin: 33px 0px 42px !important;
}

@keyframes MoveUpDown {
  0%, 100% {
      transform: translateY(0px);
  }

  50% {
      transform: translateY(-5px);
  }
}


/* Carousal */



#toggleContainer label { 
  text-align: center;
  width: 70px;
}

#container {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

#toggleContainer {
  height: 10vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 95vw;
  position: absolute;
}

#tilesContainer {
  min-height: 90vh;
  width: 100vw;
  margin-top: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-content: center;
  
}

.tileItem {
  width: 250px;
  height: 250px;
  margin: 5px;
  border-radius: 5px;
  
  transition: all 0.5s ease;
}

.tileItem:hover {
   transform: scale(1.05);
  transition: all 0.5s ease;
}

#galleryContainer { 
  height: 500px;
  width: 800px;
  background: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

#toggle {
  height: 10vh;
  width: 200px;
  display: flex;
  align-items: center;
  margin: 10px;
}

#tilesView {
  min-height: 100vh;
  width: 100vw;
  background: rgb(246,210,106);
  background: linear-gradient(111deg, rgba(246,210,106,1) 0%, rgba(255,159,0,1) 52%, rgba(251,197,100,1) 100%);
  display: none;
  justify-content: center;
  align-items: center;
  
}

#galleryView {
  height: 100vh;
  width: 100vw;
  background: rgb(246,210,106);
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#outer3 {
  width: 100px;
  height: 40px;
  background-color: white;
  margin: 10px auto;
  border-radius: 3px;
  border: 2px solid white;
  transition: all 0.5s;
}

#slider3 {
  height: 36px;
  width: 46px;
  background-color: orange;
  border-radius: 3px;  
  transition: all 0.5s;
}

#slider3.active {
  -webkit-transform: translatex(50px);
  -ms-transform: translatex(50px);
  -o-transform: translatex(50px);
  transform: translatex(50px);
  transition: all 0.5s;
  background-color: orange;
}

#outer3.outerActive {
  background-color: white;
  border: 2px solid white;
  transition: all 0.5s;
}

#mainView {
  height: 561px;
  width: 373px;
  border-radius: 5px;
  background-color: #eb9100;
  margin-left: 10px;
  margin-right: 10px;
  z-index: 1;
  transition: all 1s;
  background-size: cover !important;
}

#mainView:hover {
  transform: scale(1);
  transition: all 1s;
}

#leftView {
  background-size: cover !important;
  height: 400px;
  width: 150px;
  opacity: 0.5;
  border-radius: 5px;
  transform: skewy(5deg);
  transform-origin: top right;
  background-color: #eb9100;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
}

#leftView:hover {
  opacity: 1;
  transition: all 1s;
}

#rightView {
  height: 400px;
  width: 150px;
  opacity: 0.5;
  border-radius: 5px;
  background-size: cover !important;
  transform: skewy(-5deg);
  transform-origin: top left;
  background-color: #eb9100;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
}

#rightView:hover {
  opacity: 1;
  transition: all 1s;
}

.navBtns {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  position: absolute;
  opacity: 0.8;
  background-color: #f5821f;
  cursor: pointer;
  color: white;
}

.navBtns:hover {
  opacity: 1;
  transition: all 1s;
  background-color: #f5821f;
}

#navLeft {
  left: 28px;
}

#navRight {
  right: 28px;
}

#linkTag {
  cursor: pointer;
  z-index: 0;
  box-sizing: border-box;
}

div#toggleContainer {
    display: none !important;
}


section#home-sec4::before {
  left: 0;
  content: "";
  background: url(https://usabookwriters.com/assets/images/About-me-writting-rev.png);
  position: absolute;
  width: 19%;
  height: 245px;
  background-repeat: no-repeat !important;
  background-size: 100%;
  right: 0;
  margin: 95px 0 0 0 !important;
}

section#home-sec4 h2 {font-size: 40px !important;color: black !important;text-align: center !important;}

section#home-sec4 p {
  color: black !important;
  font-family: 'Josefin Sans' !important;
  text-align: center !important;
}

#mainView {
  background-size: 100% !important;
}

section#home-sec4::after {content: "";background: url(https://usabookwriters.com/assets/images/About-me-books-rev.png);position: absolute;width: 19%;height: 245px;background-repeat: no-repeat !important;background-size: 100%;right: 0;margin: -209px 0 0 0 !important;}

section#home-sec4 h2 {font-size: 40px !important;color: black !important;text-align: center !important;}

section#home-sec4 p {
    color: black !important;
    font-family: 'Josefin Sans' !important;
    text-align: center !important;
}

#mainView {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}


ul#aniated-icon {
    display: flex;
    margin: 0 0 !important;
    list-style: none !important;
    padding: 0 0 !important;
}

ul#aniated-icon li#tran-track {
    width: 100% !important;
    PADDING: 0 19px 0 0px;
    text-align: center;
    padding-bottom: 15px !important;
}

ul#aniated-icon li#bring-bg {
    width: 20% !important;
    padding: 9px 24px !important;
    background: #f5821f;
    list-style: none !important;
}

ul#aniated-icon h2 {
    font-size: initial;
    color: #f5821f;
    font-size: 35px;
}

ul#aniated-icon p {
    color: black !important;
    font-family: 'Josefin Sans';
    font-size: 15px !important;
    line-height: 30px;
}

ul#aniated-icon h3 {
    font-family: 'Josefin Sans';
    color: black !important;
    margin: 26px 0 26px 0 !important;
}

ul#aniated-icon img {
    width: 21%;
}

ul#aniated-icon li#bring-bg.active {
    background: transparent;
}

ul#aniated-icon li#bring-bg.active h3 {
    color: white !important;
}

ul#aniated-icon li#bring-bg.active p {
    color: white !important;
}

ul#aniated-icon li#bring-bg h3 {
    color: white !important;
    font-size: 20px !important;
}

ul#aniated-icon li#bring-bg p {
    color: white !important;
}

ul#aniated-icon li#bring-bg:hover {

    background-color: #ffc32d;
    transition: 0.4s ease-in-out;

   
}




/* Book animations */


:root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}

.card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card:hover .wrapper::after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}
.card:hover .title {
  transform: translate3d(0%, -50px, 100px);
}

.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}

.card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}




#home-sec6 .card {
    margin: 0 0 !important;
    padding: 0 0 !important;
    border: none !important;
}

#home-sec6  img.cover-image {
    width: 100% !important;
    margin: 0 auto !important;
}

#home-sec6  img.title {
    width: 100% !important;
    left: 36px;
    display: grid;
    position: relative;
    right: 0;
    text-align: center;
    top: 149px;
}

#home-sec6  img.character {
    width: 125% !important;
    left: 0;
}

section#home-sec6 {
    padding: 50px 0 118px 0 !important;
}



/* Animated Cart */





.ag-courses_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  padding: 50px 0;
}
.ag-courses_item {
  -ms-flex-preferred-size: calc(33.33333% - 30px);
  flex-basis: calc(33.33333% - 30px);

  margin: 0 15px 30px;

  overflow: hidden;

  border-radius: 28px;
}
.ag-courses-item_link {
  display: block;
  padding: 30px 20px;
  background-color: #121212;

  overflow: hidden;

  position: relative;
}
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
  text-decoration: none;
  color: #FFF;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
  -webkit-transform: scale(10);
  -ms-transform: scale(10);
  transform: scale(10);
}
.ag-courses-item_title {
  min-height: 87px;
  margin: 0 0 25px;

  overflow: hidden;

  font-weight: bold;
  font-size: 30px;
  color: #FFF;

  z-index: 2;
  position: relative;
}
.ag-courses-item_date-box {
  font-size: 18px;
  color: #FFF;

  z-index: 2;
  position: relative;
}
.ag-courses-item_date {
  font-weight: bold;
  color: #f9b234;

  -webkit-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease
}
.ag-courses-item_bg {
  height: 128px;
  width: 128px;
  background-color: #f9b234;

  z-index: 1;
  position: absolute;
  top: -75px;
  right: -75px;

  border-radius: 50%;

  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
  background-color: #3ecd5e;
}
.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
  background-color: #e44002;
}
.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
  background-color: #952aff;
}
.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
  background-color: #cd3e94;
}
.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
  background-color: #4c49ea;
}



@media only screen and (max-width: 979px) {
  .ag-courses_item {
    -ms-flex-preferred-size: calc(50% - 30px);
    flex-basis: calc(50% - 30px);
  }
  .ag-courses-item_title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) { 
  .ag-format-container {
    width: 96%;
  }

}
@media only screen and (max-width: 639px) {
  .ag-courses_item {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
  .ag-courses-item_title {
    min-height: 72px;
    line-height: 1;

    font-size: 24px;
  }
  .ag-courses-item_link {
    padding: 22px 40px;
  }
  .ag-courses-item_date-box {
    font-size: 16px;
  }
}


section#home-sec8 {
    background: #f5821f;
    text-align: center !important;
    MARGIN: 0 0 0 0 !IMPORTANT;
}

section#home-sec8 h2 {
    color: white !important;
    font-size: 40px;
    width: 66%;
    margin: 15px auto !important;
}

section#home-sec8 p {
    color: white !important;
    font-family: 'Josefin Sans';
    font-size: 16px !important;
}

section#home-sec8 .flection-button-cal_action {
    display: flex;
    justify-content: center;
    gap: 102px;
}

section#home-sec8 a#neuro {
    color: black !important;
    font-family: 'Josefin Sans';
    background: white !important;
    padding: 11px 44px !important;
    border-radius: 25px;
}

section#home-sec8 a#nepo {
    color: white !important;
    padding: 10px 0 0 0 !important;
}


section#home-sec8::before {
  content: "";
  background-image: url(https://bestghostwriters.org/images/cta-before.png);
  position: absolute;
  width: 383px;
  height: 231px;
  background-size: 100%;
  background-repeat: no-repeat !important;
  left: 0;
  margin: -28px 0 0 0 !important;
}

section#home-sec8::after {
  content: "";
  background-image: url(https://bestghostwriters.org/images/inner-pages/author-website/cta-after.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 222px;
  height: 209px;
  position: absolute;
  right: 0;
  margin: -84px 0 0 0 !important;
}

a {
  text-decoration: none !important;
}

section#home-sec6 h2 {
  color: black !important;
  padding: 0 0  120px 0 !important;
  text-align: center !important;
  font-size: 40px;
}


section#inner-banner {background-repeat: no-repeat !important;background-size: 100% !important;background-position: center center !important;}

section#inner-banner h2.aos-init.aos-animate {font-size: 40px;text-transform: capitalize;color: black !important;margin: 0px 0 0 0 !important;}

section#inner-banner p.aos-init.aos-animate {
    font-family: 'Josefin Sans';
    color: black !important;
    margin: 24px 0 0 0 !important;
    width: 81%;
}

section#inner-banner a#dark {
    background: #f5821f;
    color: white !important;
    font-family: 'Josefin Sans';
    padding: 15px 55px !important;
    border-radius: 89px;
}

section#inner-banner a#light {background: transparent;border: 1px solid;padding: 15px 60px !important;border-radius: 26px;font-family: 'Josefin Sans';color: #f5821f;margin: 0 3px  0 14px !important;}

section#inner-banner a#light:hover {
    background: #f5821f;
    color: white !important;
    transition: all 0.5s;
}

div#inner-banner-btn {
    margin: 47px 0 0 0 !important;
}

.form-section {
    background: #ffffff4a !important;
    text-align: center !important;
    width: 75%;
    box-shadow: 0 0 20px 0 #f5821f;
    margin: 0 auto !important;
    padding: 45px 31px !important;
    border-radius: 25px;
    left: 94px;
    position: relative;
    outline: 1px solid #f5821f;
}

.form-section h4 {
    color: #f5821f;
    font-size: 18px !important;
}

.form-section h3 {font-size: 28px;color: black !important;font-weight: 700;margin: 0 0 11px 0 !IMPORTANT;}

.form-section input {
    width: 100% !important;
    padding: 14px 61px !important;
    font-family: 'Josefin Sans';
    color: black !important;
    background: #ffffff4a;
    font-size: 15px !important;
    border-radius: 73px;
    border: 1px solid #eee !important;
    outline: 1px solid #f5821f;
}

.form-section .wrap-iconz i.bi {
    position: absolute;
    left: 2.2pc;
    background: #f5821f;
    color: black !important;
    width: 40px;
    height: 40px;
    line-height: 39px;
    border-radius: 30px;
    margin: 6px 0 0 0;
}

::placeholder {
    color: black !important;
}

.wrap-iconz {
    margin: 0 0 22px 0 !important;
}

.form-section  textarea {
    width: 100% !important;
    height: 88px;
    padding: 12px 1px 0 61px !important;
    font-family: 'Josefin Sans';
    font-size: 15px !important;
    border-radius: 21px;
    border-color: #eee;
    background: #ffffff4a;
    outline: 1px solid #f5821f;
}

.form-section  .text-iconz i {
    position: absolute;
    left: 2.2pc;
    background: #f5821f;
    color: black !important;
    width: 40px;
    height: 40px;
    line-height: 39px;
    border-radius: 30px;
    margin: 6px 0 0 0;
}


.send-query button {
    background: #f5821f;
    color: white !important;
    border: none !important;
    font-family: 'Josefin Sans';
    padding: 14px 0 !important;
    width: 100%;
    border-radius: 45px;
    transition: all 0.5s;
    margin: 16px 0 0 0 !important;
    border: 1px solid black !important;
}

.form-section::before {
    content: "";
    background: #f5821f;
    width: 296px;
    height: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -5px;
    border-radius: 25px;
}

section#inner-sec2 {
  background: #ffffff !important;
  padding: 8px 0 !important;
}

section#inner-sec2 img {
  width: 100% !important;
  height: 98px;
  object-fit: contain;
  background: #f5821f !important;
  padding: 10px 12px !important;
  border-radius: 20px;
}

section#inner-sec3::before {
    left: 0;
    content: "";
    background: url(https://usabookwriters.com/assets/images/About-me-writting-rev.png);
    position: absolute;
    width: 14%;
    height: 240px;
    background-repeat: no-repeat !important;
    background-size: 100%;
    right: 0;
    margin: -40px 0 0 0 !important;
}

section#inner-sec3 h2 {
    font-family: 'Jost';
    color: black !important;
    font-size: 40px;
    text-transform: capitalize !important;
    margin: 143px 0 0 0 !important;
}

section#inner-sec3 p {
    font-family: 'Josefin Sans';
    color: black !important;
    margin: 24px 0 0 0 !important;
}

section#inner-sec3 a#inner-3-dark {
    background: #f5821f !important;
    font-family: 'Josefin Sans';
    color: white !IMPORTANT;
    padding: 15px 45px !IMPORTANT;
    border-radius: 26px !important;
    margin: 0 0 !important;
}

section#inner-sec3 a {
    background: #f5821f00 !important;
    font-family: 'Josefin Sans';
    color: #f5821f !IMPORTANT;
    padding: 15px 45px !IMPORTANT;
    border-radius: 26px !important;
    margin: 0 0 !important;
    border: 1px solid;
}

div#inner-3-btn {
    margin: 37px 0 0 0 !IMPORTANT;
}

section#inner-sec3 img {
    width: 100% !important;
}

section#inner-sec4 {
  background: #f5821f !important;
}

section#inner-sec4 h2 {
  color: white !important;
}

section#inner-sec4 p {
  color: white !important;
  font-family: 'Josefin Sans';
}

section#inner-sec4 div#inner-4btn {
  text-align: center !important;
  margin: 37px 0 0  0 !important;
}

section#inner-sec4 div#inner-4btn a#inne-4btn-dark {
  background: white !important;
  font-family: 'Josefin Sans';
  padding: 15px 38px !important;
  color: black !important;
  border-radius: 26px;
  border: none !important;
}

section#inner-sec4 div#inner-4btn a {
  background: #ffffff00 !important;
  font-family: 'Josefin Sans';
  padding: 15px 38px !important;
  color: white !important;
  border-radius: 26px;
  border: 1px solid;
}


div#focuing {
  background: #f5821f;
  padding: 66px 42px !important;
}



section#inner-sec5 div#focuing {
  color: white !important;
  font-family: 'Josefin Sans';
  font-size: 17px !important;
  transition: all 0.5s;
}

section#inner-sec5 div#focuing h3 {
  font-size: 32px;
}

div#focuing:hover {
  background: #f5821fd1;
  transition: all 0.5s;
}

section#inner-sec5 div#focuing span {
  position: absolute;
  opacity: 0.04;
  font-size: 90px;
  text-align: right !important;
  width: 36%;
  margin-top: -63px;
}

div#un-focuing {
  color: #0a0a0a !important;
  font-family: 'Josefin Sans';
  font-size: 17px !important;
  transition: all 0.5s;
  background: #ffffff;
  padding: 66px 42px !important;
}

div#un-focuing span {
  position: absolute;
  opacity: 0.04;
  font-size: 90px;
  text-align: right !important;
  width: 34%;
  margin-top: -63px;
}

#inner-sec5 h2 {
  text-align: center;
  font-size: 40px;
  color: black !important;
  margin-bottom: 100px;
}

#inner-sec5 h2::before {
  content: "";
  background: #000000;
  position: absolute;
  width: 204px;
  height: 4px;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-top: 57px;
}

#inner-sec5 h2::after {
  background: #f5821f;
  content: "";
  width: 100px;
  height: 10px;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 54px !important;
  margin: 0 auto;
}

#inner-sec5 p {
  text-align: center !important;
  font-family: 'Josefin Sans';
  margin: 51px auto !important;
  width: 51%;
}

#inner-sec5  div#un-focuing p {
  width: 100% !important;
  width: 100% !important;
  text-align: left !important;
  margin: 12px 0 !important;
}

#inner-sec5 #focuing p {
  width: 100% !important;
  text-align: left !important;
  margin: 12px 0 !important;
}





section#inner-sec6 h2 {
    text-align: center;
    margin: 0 0 98px 0 !important;
    text-align: center;
    font-size: 40px;
    color: black !important;
}



section#inner-sec6 .flection-aniation-section h3 {
    font-family: 'Josefin Sans';
    font-size: 18px !important;
    position: relative;
    top: -17px;
    transition: all 0.5s;
}

section#inner-sec6 .flection-aniation-section span {
    font-size: 96px;
    position: absolute;
    text-align: center !important;
    font-family: 'Josefin Sans';
    opacity: 0.02;
    margin: -45px 0px 0px -40px  !important;
    font-weight: bold;
    transition: all 0.5s !important;
}

section#inner-sec6 .flection-aniation-section p {
    font-family: 'Josefin Sans';
    z-index: 142;
    padding: 32px 0 0  0 !important;
    position: relative !important;
    transition: 0.5s all;
}

.doted-animated {
    background: #f5821f !IMPORTANT;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 25px;
}

.flection-aniation-section:hover h3 {
    transition: 0.5s all;
    color: #f5821f !important;
    transform: translateY(-27px);
}

.flection-aniation-section:hover span {
    color: #f28120 !important;
    z-index: 139;
    position: absolute;
    background: white !important;
    opacity: 1 !important;
    transition: all 0.5s;
}



.flection-aniation-section:hover {
    border: 1px solid #eee;
    transition: all 0.5s;
    border-radius: 21px;
}

.flection-aniation-section {
    transition: all 0.5s !important;
}

section#inner-sec6 h2::before {
    content: "";
    background: #000000;
    position: absolute;
    width: 190px;
    height: 4px;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 57px;
}



section#inner-sec6 h2::after {
    background: #f5821f;
    content: "";
    width: 100px;
    height: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 54px !important;
    margin: 0 auto;
}


section#inner-sec6 h2 {
    text-align: center;
    margin: 0 0 98px 0 !important;
    text-align: center;
    font-size: 40px;
    color: black !important;
}



section#inner-sec6 .flection-aniation-section h3 {
    font-family: 'Josefin Sans';
    font-size: 18px !important;
    position: relative;
    top: -17px;
    transition: all 0.5s;
}

section#inner-sec6 .flection-aniation-section span {
    font-size: 96px;
    position: absolute;
    text-align: center !important;
    font-family: 'Josefin Sans';
    opacity: 0.02;
    margin: -45px 0px 0px 0px  !important;
    font-weight: bold;
    transition: all 0.5s !important;
    text-align: center !important;
    width: 100%;
}

section#inner-sec6 .flection-aniation-section p {
    font-family: 'Josefin Sans';
    z-index: 142;
    padding: 32px 0 0  0 !important;
    position: relative !important;
    text-align: center !important;
    transition: 0.5s all;
    height: 100px;
}

.doted-animated {
    background: #f5821f !IMPORTANT;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 25px;
}

.flection-aniation-section:hover h3 {
    transition: 0.5s all;
    color: #f5821f !important;
    transform: translateY(-27px);
}

.flection-aniation-section:hover span {
    color: #f2812073 !important;
    z-index: 139;
    position: absolute;
    background: white !important;
    opacity: 1 !important;
    transition: all 0.5s;
}



.flection-aniation-section:hover {
    border: 1px solid #eee;
    transition: all 0.5s;
    border-radius: 21px;
}

.flection-aniation-section {
    transition: all 0.5s !important;
}

section#inner-sec6 h2::before {
    content: "";
    background: #000000;
    position: absolute;
    width: 190px;
    height: 4px;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 57px;
}


section#inner-sec6 h2::after {
    background: #f5821f;
    content: "";
    width: 100px;
    height: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 54px !important;
    margin: 0 auto;
}

#inner-sec5 h3 {
    text-align: left !important;
}


.col-md-4.level0pf-wifth.aos-init.aos-animate .form-section {
  width: 100% !important;
  left: 24px !important;
  margin: -92px 0 0 0 !important;
  z-index: 100;
}

ul#aniated-icon li#bring-bg:hover {
    background: #f5821f !important;
}

ul#aniated-icon li#bring-bg.active {
    background: black !important;
}

ul#aniated-icon li#bring-bg.active:hover {
    background: #000000 !important;
}

ul#aniated-icon li#bring-bg.active:hover h3 {
    color: white !IMPORTANT;
    transition: all 0.5s;
}

ul#aniated-icon li#bring-bg.active:hover p {
    color: white !important;
    transition: all 0.5s;
}

section#inner-sec6 h3 {
    text-align: center !important;
}

.header-testimonials {
  display: flex;
  gap: 10px;
}

.header-testimonials h6 {
  margin: 0 0 !important;
  color: black !important;
}

.header-testimonials span {
  font-family: 'Josefin Sans';
  font-size: 11px;
  margin: 0 0;
}

.header-testimonials i {
  width: 40px;
  text-align: center !important;
  background: #f5821f !important;
  font-size: 19px !important;
  height: 40px !important;
  color: white !important;
  line-height: 38px;
  border-radius: 28px;
}

.header-testimonials h6::after {
  content: "";
  background: #f5821f;
  position: absolute;
  width: 35px;
  height: 1px;
  margin: 14px 0 0 0 !important;
}



#inner-sec7 p {
  color: black !important;
  font-family: 'Josefin Sans';
  font-size: 14px !important;
  height: 100px;
  padding-top: 14px;
}

#inner-sec7 .icon {
  display: flex;
  gap: 6px;
}

#inner-sec7 .icon i {
  background: #f5821f !important;
  height: 30px;
  width: 30px;
  text-align: center !important;
  font-size: 14px !important;
  color: white !important;
  border-radius: 27px;
  line-height: 29px !important;
}

section#home-sec1 img {
  width: 100% !important;
}
#footer img {width: 67% !important;margin-bottom: 12px;margin-left: -25px;}



.main-box {
  box-shadow: 0 0 20px 0 #eee !important;
  padding: 28px 23px !important;
  border-radius: 25px;
}

section#inner-sec7 {
  padding: 50px 0 83px 0 !important;
}

section#inner-sec7 h2 {font-size: 40px;color: black;text-align: center !important;margin: 0 0 65px 0 !important;}

section#inner-sec7 h2::before {
  background: #f5821f;
  content: "";
  width: 100px;
  height: 8px;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 54px !important;
  margin: 0 auto;
}




.flection-aniation-section {
  border: 1px solid #f5821f;
  border-radius: 25px;
  border-top: none !important;
}

.flection-aniation-section {
  border: 1px solid #f5821f;
  border-radius: 25px;
  border-top: none !important;
}

section#inner-sec7 h2::after {
  content: "";
  background: rgb(0, 0, 0);
  position: absolute;
  width: 190px;
  height: 4px;
  margin: 56px auto 0px;
  left: 0px;
  right: 0px;
  z-index: -3 !important;
}

.flection-aniation-section {
    border: 1px solid #f5821f;
    border-radius: 25px;
    border-top: none !important;
}

section#inner-sec7 h2::after {
    content: "";
    background: rgb(0, 0, 0);
    position: absolute;
    width: 190px;
    height: 4px;
    margin: 56px auto 0px;
    left: 0px;
    right: 0px;
    z-index: -3 !important;
}

@keyframes blink {
  50% {
      opacity: .2;
  }

  100% {
      opacity: 1;
  }
}




#banner-section .form-section h4 {
    color: black !important;
    line-height: 2 !important;
}

.send-query button:hover {
    border: 1px solid black !important;
    transition: all 0.5s;
    background: transparent !important;
    color: black !important;
}




div#image-section-book img {
  position: absolute;
  width: 598px !important;
  top: 13pc;
  left: -82px;
  z-index: 125;
}

section#contact {
  PADDING-TOP: 0  !important;
}

section#home-sec4 {
  PADDING-BOTTOM: 01PX !important;
}



section#inner-banner .form-section {
  background: white !important;
}

section#contact.form-pills {padding-top: 51px !important;}

section#about-sec1 ul {
    padding: 0px 0px 0 30px !important;
}

section#about-sec1 h2 {
    font-size: 40px;
    color: black;
    margin-bottom: 20px !important;
    margin-top: 44px;
}

section#about-sec1 p {
    font-family: 'Josefin Sans';
}

section#about-sec1 li {
    list-style: none !important;
    padding: 0px  0 !important;
    line-height: 18px;
}

section#about-sec1 a {
    font-family: 'Josefin Sans';
    color: black !important;
}

section#about-sec1 li::before {
    content: "\F26A";
    font-family: 'bootstrap-icons';
    color: #f5821f !important;
    font-size: 13px !important;
    left: -26px;
    position: relative;
    width: 13px;
    top: 19px;
    display: block;
}

div#about-btns a#link {
    background: transparent;
    padding: 12px 32px !important;
    border: 1px solid;
    border-radius: 25px !important;
    color: #f5821f;
    font-family: 'Josefin Sans' !important;
}

div#about-btns a#about-link {
    background: #f5821f !important;
    padding: 12px 39px !important;
    border-radius: 25px !important;
    color: white !important;
    font-family: 'Josefin Sans' !important;
}

div#about-btns {
    display: flex !important;
    gap: 19px !important;
    padding: 30px 0 0 0 !important;
}

#about-sec1 img {
    width: 75% !important;
    margin: 0 auto !important;
}


section#about-sec2 {
  padding: 50px 0 !important;
  background: #f5821f !important;
  text-align: center !important;
}

section#about-sec2 h2 {
  color: white !important;
  font-size: 40px !important;
  text-transform: uppercase !important;
}



section#contact-sec1 {
  background: #f5821f !important;
  text-align: center !important;
  margin-bottom: 60px;
}

section#contact-sec1 h2 {
  font-family: 'Josefin Sans';
  font-weight: 800;
  font-size: 40px;
  text-transform: uppercase !important;
  color: white !important;
  margin: 37px 0 !important;
}

section#inner-sec7.extra-pad2 {
  padding: 60px 0 60px 0 !IMPORTANT;
}

#faq img {
    width: 100% !important;
}


.modal {
  position: fixed;
  top: 50%;
  width: 53%;
  height: 600px !important;
  left: 50%;
  transform: translate(-50%, calc(-50% - 10px));
  display: flex;
  min-width: 550px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
  border-radius: 12px;
  box-shadow: 0 5px 26px -8px rgba(0, 0, 0, 0.3);
  z-index: 20;
  transition: all 0.1s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 999999 !important;
}
.modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: all 0.4s ease;
  opacity: 0;
  z-index: 99999;
}
.modal__overlay.active {
  opacity: 1;
}
.modal__close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}
.modal__left {
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
  background-color: #242424;
  color: #fefefe;
  border-radius: 12px;
  box-shadow: 17px 0 17px -8px rgba(0, 0, 0, 0.3);
  padding: 26px 20px;
}
.modal__left span {
  display: block;
  font-size: 36px;
}
.modal__discount {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 3px;
  color: #ebff00;
  margin-top: 32px;
}
.modal__discount span {
  font-size: 60px;
}
.modal__right {width: 50% !important;}
.modal__text {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.modal__info {
  color: #222;
  margin-bottom: 12px;
}
.modal__button {
  align-self: flex-start;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #ff5555;
  border-radius: 12px;
  padding: 10px 32px;
  cursor: pointer;
}



.modal.active {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.modal__right {
    text-align: center !important;
    padding: 33px 28px !important;
}

.form_flextion {
    display: grid !important;
    gap: 10px;
    margin: 9px 0 10px 0 !important;
}

.form_flextion input {
    width: 100% !important;
    padding: 12px 53px !important;
    border-radius: 25px !important;
    border: 1px solid #f5821f;
    font-family: 'Josefin Sans' !important;
    font-size: 14px !important;
    box-shadow: 0 0 8px 0 #ff980052;
    background: #ffffff;
    backdrop-filter: blur(6px);
}

.form_flextion .input-inner-ico {
    width: 100% !important;
}

.form_flextion .number_inner-ico {
    width: 100%;
}

.form_flextion i.bi.bi-person {
    position: absolute;
}

.form_flextion .number_inner-ico i.bi.bi-envelope {
    position: absolute;
}

.form_flextion i {
    background: #f68b1f !important;
    width: 40px !important;
    height: 40px;
    font-size: 16px !important;
    border-radius: 25px;
    z-index: 12;
    margin: 3px 3px 0 4px !important;
    line-height: 39px;
    color: black !important;
}

.services-input {
    margin-bottom: 10px;
}

.services-input select#selected {
    width: 100% !important;
    padding: 15px 57px !important;
    border-radius: 41px;
    border: 1px solid #f5821f;
    font-size: 14px;
    box-shadow: 0 0 8px 0 #ff980052;
    font-family: 'Josefin Sans';
    backdrop-filter: blur(6px);
    background: #ffffff;
}

.services-input  i.bi.bi-list-check {
    position: absolute;
    background: #f68b1f !important;
    width: 40px !important;
    height: 40px;
    font-size: 16px !important;
    border-radius: 25px;
    margin: 3px 3px 0 4px !important;
    line-height: 39px;
    color: black !important;
    z-index: 13;
}

#selected option {
    background: transparent;
    padding: 0 0 !important;
    font-family: 'Josefin Sans' !important;
    margin: 36px 0 !important;
    border-bottom: 1px solid !important;
    line-height: 109px !IMPORTANT;
}

.message_modals {}

.message_modals textarea {
    width: 100% !important;
    height: 100px !important;
    border: 1px solid #f5821f;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 0 8px 0 #ff980052;
    backdrop-filter: blur(6px);
    padding: 9px 62px !IMPORTANT;
    font-family: 'Josefin Sans';
    font-size: 15px !important;
    text-transform: capitalize !important;
}

.message_modals i.bi.bi-chat-dots {
    position: absolute;
    position: absolute;
    background: #f68b1f !important;
    width: 40px !important;
    z-index: 124;
    height: 40px;
    font-size: 16px !important;
    border-radius: 25px;
    margin: 3px 3px 0 4px !important;
    line-height: 39px;
    color: black !important;
    padding: 0  !important;
}

.textarea-_modals {}

.textarea-_modals button {
    width: 100% !important;
    font-family: 'Josefin Sans';
    padding: 10px 0 !important;
    border-radius: 45px;
    border: 1px solid #f5821f;
    color: #000000 !important;
    background: #ffffff;
    backdrop-filter: blur(3px);
}

::before {}

.textarea-_modals  i.bi.bi-arrow-right {
    background: white !important;
    position: relative;
    display: initial;
    color: black !important;
    padding: 6px 5px 4px 5px !important;
    border-radius: 28px;
    line-height: 19px;
}

.modal__right h2 {
    font-size: 31px;
    color: white !important;
    font-weight: 700 !important;
    border-bottom: 1px solid;
    width: 66%;
    margin: 0 auto;
}

.modal__right p {
    font-family: 'Josefin Sans';
    font-size: 15px !important;
    margin: 13px 0 !important;
    color: white !important;
}

.modal__close-btn i {
    background: white !important;
    width: 50px !important;
    height: 50px;
    text-align: center !important;
    border-radius: 26px;
    line-height: 50px;
    color: #f5821f !important;
    box-shadow: 0 0 20px 0 #000;
    transition: all 0.5s;
    position: relative;
    display: inline-block;
}

.modal__close-btn i:hover {
    transition: all 0.5s;
    transform: rotate(360deg);
}

.modal__overlay.active {backdrop-filter: blur(5px);}

section#popup-maker {
  padding: 0 0 !important;
}



.form__poppup_modal img {
    width: 60% !important;
    margin: 17px 0 !important;
}

.modal__left {
    width: 50%;
    box-shadow: none !important;
    background: transparent;
}

.service-page {padding: 50px 0 !important;}

.service-page h2 {
    padding: 60px 0 14px 0 !important;
}




/* Portfolio */

.portfolio-section {
  padding: 50px 0;
  background-color: white !important;
}
.portfolio-section h2 {
  font-size: 28px;
  font-weight: 600;
  color: #000;
  text-transform: capitalize;
  font-size: 40px;
}
.portfolio-menu {
  text-align: center;
}
.control {
  background: #000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  margin: 5px;
  cursor: pointer;
  -webkit-transition: all 05s ease;
  -moz-transition: all 05s ease;
  -ms-transition: all 05s ease;
  -o-transition: all 05s ease;
  transition: all 0.5s ease;
  border: none !important;
  font-family: 'Josefin Sans' !important;
  font-size: 15px !important;
}
.control:hover {
  background: #f5821f;
}
.mixitup-control-active {
  color: #fff;
  background: #f5821f;
}
.fancybox-container button:focus {
  outline: 0;
  box-shadow: none;
}
.portfolio-item {
  padding-top: 30px;
}
.pd {
  padding: 0;
  padding: 10px;
}
.pd img {
  height: 180px;
  transition: all 0.5s;
}
.portfolio-overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  background: rgb(0 0 0 / 74%);
  width: 100%;
  height: 100%;
  text-align: center;
  visibility: hidden;
  transition: all 0.5s;
  transform: scale(0);
}
.portfolio-overlay p,
.portfolio-overlay a {
  position: relative;
  z-index: 4;
}
.portfolio-overlay::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 0;
  position: absolute;
  left: 10%;
  top: 10%;
  transition: 50ms height ease 150ms;
  z-index: 3;
}
.portfolio-overlay::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 0;
  position: absolute;
  right: 10%;
  bottom: 10%;
  transition: 100ms width ease 200ms;
  z-index: 3;
}
.portfolio-item:hover .portfolio-overlay::before {
  width: 80%;
  height: 80%;
  border-top: 1px solid #f5821f;
  border-right: 1px solid #f5821f;
  transition: width 0.1s ease 0.3s, height 0.1s ease 0.5s;
}
.portfolio-item:hover .portfolio-overlay::after {
  width: 80%;
  height: 80%;
  border-bottom: 1px solid #f5821f;
  border-left: 1px solid #f5821f;
  transition: width 0.1s ease 0.6s, height 0.1s ease 0.7s;
}
.portfolio-item li:hover .portfolio-overlay {
  visibility: visible;
  transform: scale(1);
}
.portfolio-overlay .category {
  margin-top: 170px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}
.portfolio-overlay .magnify-icon {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background: #ffffff;
  margin: 0 5px;
  cursor: pointer;
  display: inline-block;
  line-height: 46px;
  transition: all 0.25s;
}
.portfolio-overlay .magnify-icon:hover {
  background: #f5821f;
}
.portfolio-overlay .magnify-icon p span i {
  font-size: 15px;
  color: #000;
  line-height: 40px;
  cursor: pointer;
}

li {
  list-style: none !important;
}

section#potfolio-header {
    text-align: center !important;
    background: #f5821f !important;
    padding: 65px 0 !important;
    margin: 0 0 0px 0 !important;
}

section#potfolio-header h2 {
    font-family: 'Josefin Sans' !important;
    color: white !important;
    font-size: 35px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    margin: 0 0 !important;
}

.portfolio-section p {
    font-family: 'Josefin Sans' !important;
    font-size: 16px !important;
}

.pd img {
    width: 100% !important;
    height: 400px;
}

section#inner-banner h2.aos-init.aos-animate {
    padding-top: 100px !important;
}

.social-links.mt-3 {
}

/*******Responsive media query******/

/* Extra small devices (portrait phones, less than 576px)*/


/* End */



section#about-banner {
  background-size: 100% !important;
  background-repeat: no-repeat !important;
}

section#about-banner img {
  width: 100% !important;
}

section#about-banner h2 {
  font-size: 40px !important;
  color: black !important;
  padding: 125px 0 16px  0 !important;
}

section#about-banner p {
  font-family: 'Josefin Sans';
  margin-bottom: 25px !important;
}

section#about-banner h3 {
  font-size: 20px;
  color: black !important;
  text-transform: uppercase !important;
  font-weight: 600;
}

section#about-banner .icon-flextion-dev {
  display: flex;
  gap: 10px !important;
  margin: 20px 0 0 0 !important;
}

section#about-banner .icon-flextion-dev i {
  background: #f38120 !important;
  color: white !important;
  width: 50px;
  text-align: center !important;
  height: 50px !important;
  line-height: 50px;
  font-size: 17px;
  border-radius: 25px !important;
}


/* image-slider */


.container__slider img {
  max-width: 100%;
  width: auto;
  height: auto;
}
.container__slider {
  transition: transform 0.3s ease-in-out;
  height: 400px;
  max-width: 1000px;
  position: relative;
  text-align: center;
  margin: 0 auto !important;
}
.image--0 {
  transform: translateX(20%);
}
.image--1 {
  transform: translateX(10%);
}
.image--2 {
  transform: translateX(0);
}
.image--3 {
  transform: translateX(-10%);
}
.image--4 {
  transform: translateX(-20%);
}
.image {
  width: 30%;
  display: inline-block;
  position: relative;
  perspective: 900px;
}
.image + .image {
  margin-left: -23%;
}
.image--current {
  z-index: 5;
}
.image--past + .image--past, .image--future + .image--future {
  margin-left: -20%;
}
.image--past {
  z-index: 1;
}
.image__content {
  transform: rotatey(0deg) scale(1);
  transform-origin: center center;
  opacity: 0.99;
}
.image--past > .image__content {
  transform: rotatey(60deg) scale(0.7);
  transform-origin: left center;
  opacity: 0.8;
}
.image--future {
  z-index: 1;
}
.image--future > .image__content {
  transform: rotatey(-60deg) scale(0.7);
  transform-origin: right center;
  opacity: 0.8;
}
.image__content {
  cursor: pointer;
  transition: all 0.35s ease-in-out;
}
.image--past {
  z-index: 0;
}
.image--past + .image--past {
  z-index: 1;
}
.image--past + .image--past + .image--past {
  z-index: 2;
}
.image--past + .image--past + .image--past + .image--past {
  z-index: 3;
}
.image--future {
  z-index: 3;
}
.image--future + .image--future {
  z-index: 2;
}
.image--future + .image--future + .image--future {
  z-index: 1;
}
.image--future + .image--future + .image--future + .image--future {
  z-index: 0;
}

/* Liquid Responsive Css */

@media screen and (max-device-width:768px), screen and (max-width:100px) {
    
    .tab {
    display: grid !important;
    gap: 0 !important;
}

.number_inner-ico.lumber-one span.position-absoluting {
    left: -162px !important;
}

body .services-input select#selected {
    color: black !important;
    padding: 0 0px 0 55px !important;
}
.container.footer-bottom.clearfix {
    display: grid !important;
    justify-items: center !important;
    justify-content: space-between !important;
}

.flex-sec-payment {
    justify-content: center !important;
}

#footer .flex-sec-payment img {
    width: 65% !important;
}
div#top-1 p {
    color: white !important;
}

div#port img {
    width: 82% !important;
    margin: 0 auto !important;
}

div#port {
    text-align: center !important;
}

div#ghost-writing img {
    width: 75% !important;
    margin: 0 auto !important;
}

div#side-tabs {
    display: none !important;
}

div#ghost-writing {
    margin-bottom: 26px;
    text-align: center !important;
}


body .flex-doirecction-ends{
    display: grid !important;
    gap: 1px !important;
    justify-content: center !important;
}

#footer .footer-top .footer-links ul {
    margin: 0 auto !important;
    width: 100% !important;
}

  #banner-section h2 {
    font-size: 19px !important;
    text-align: center !important;
    line-height: 24px;
}

#banner-section p {
    FONT-SIZE: 14px !important;
    TEXT-ALIGN: center !IMPORTANT;
}

.banner-btn {
    JUSTIFY-CONTENT: center !IMPORTANT;
    padding: 0 0 !important;
}

.banner-btn a#bnr {
    FONT-SIZE: 14px !IMPORTANT;
    PADDING: 10px 17px !important;
}

.banner-btn a {FONT-SIZE: 14px !important;padding: 10px 17px !important;}

.col-md-4.level0pf-wifth.aos-init.aos-animate .form-section {
    position: relative;
    margin: 0  !important;
    left: 0 !important;
}

div#image-section-book {
    display: none !important;
}

div#secondary-header .social-links.mt-3 {
    display: flex;
    gap: 7px;
    justify-content: center !important;
    margin: 6px 0 0 0 !important;
}

#secondary-header i.bx {
    width: 25px;
    height: 25px;
    line-height: 26px;
}

div#top-1 {
    justify-content: center !important;
}

div#top-1 p {
    font-size: 14px !important;
}

section#banner-section {
    padding: 31px 0 !important;
}

#header .logo img {
    max-width: 68% !important;
}

.col-md-4.level0pf-wifth.aos-init.aos-animate .form-section {
    width: 86% !important;
    margin: 0 auto !important;
}

.form-section input {
    font-size: 13px !important;
}

.form-section .wrap-iconz i.bi {
    margin: 5px 0 0 0 !important;
}

.form-section textarea {
    font-size: 14px !important;
}

.send-query button {
    padding: 9px 0  !important;
    font-size: 14px !important;
}

div#scroll-ss h2 {
    text-align: center !important;
    font-size: 20px !important;
}

div#scroll-ss {
    text-align: center !important;
}

div#scroll-ss p {
    font-size: 14px !important;
}

div#scroll-ss li {font-size: 14px !important;}

div#dev::after {
    display: none;
}

.about-btns a {
    font-size: 14px !important;
    height: 46px;
    line-height: 24px !important;
}

.about-btns {
    display: flex !important;
    justify-content: center !important;
}

ul#aniated-icon {
    display: grid !important;
}

ul#aniated-icon li#tran-track {
    width: 100% !important;
    text-align: center !important;
    padding: 0 14px !important;
}

ul#aniated-icon h2 {
    font-size: 20px !important;
    line-height: 23px;
    margin: 0 0 10px 0 !important;
}

ul#aniated-icon p {
    font-size: 14px !important;
    line-height: 19px;
}

ul#aniated-icon li#bring-bg {
    width: 100% !important;
    text-align: center !important;
    padding: 34px 23px !important;
}

ul#aniated-icon img {
    width: 15%;
}

ul#aniated-icon li#bring-bg h3 {
    margin: 13px 0 !important;
    font-size: 14px !important;
}

ul#aniated-icon li#bring-bg p {}

div#inner-sect-3one h2 {
    font-size: 20px !important;
}

div#inner-sect-3one p {
    font-size: 14px !important;
}

.image-over-text-card {
    width: 100%;
    background-size: contain !important;
    background-position: center !important;
}

div#bg-range {
    margin: 20px 0 !important;
}

section#home-sec3 {
    padding: 0 0 0 0 !important;
}

section#home-sec6 h2 {
    font-size: 20px !important;
}

#home-sec6 .card {
    width: 100% !important;
    height: 711px;
    display: grid;
}

#home-sec6 img.cover-image {
    width: 100% !important;
    margin: 0 auto !important;
}

#home-sec6 img.title {
    width: 50% !important;
    left: 0 !important;
    margin: 0 auto !important;
    top: 0;
    justify-content: center !important;
}

#home-sec6 img.character {
    width: 70% !important;
    margin: 0 auto !important;
    left: 0;
    right: 0;
}

.wrapper::before {
    width: 85% !important;
}



section#home-sec8::before {
    display: none;
}

section#home-sec8 h2 {
    font-size: 20px !important;
    width: 100% !important;
    margin-top: 0 !important;
}

section#home-sec8 p {
    font-size: 14px !important;
}

section#home-sec8 .flection-button-cal_action {
    gap: 17px;
    display: flex !important;
}

section#banner-section .wrap {
  height: 400px;
  top: 48px;
}

section#home-sec8::after {
    display: none;
}

#mainView {
    background-size: cover !important;
    width: 200px;
    background-repeat: no-repeat !important;
    height: 300px;
}

#rightView {
    width: 100px;
    height: 200px;
    background-size: cover !important;
}

div#leftView {
    width: 100px;
    height: 200px;
    background-size: cover !important;
}

div#galleryView {
    height: 51vh;
}

#container {
    height: 72vh;
}

section#home-sec4 h2 {
    font-size: 20px !important;
}

#galleryContainer {
    position: relative;
    top: 55px;
}

section#home-sec4::after {
    height: 100px;
    margin: -93px 0 0 0  !important;
}

.navBtns {
    width: 40px;
    height: 40px;
}

.section-title h2 {
    font-size: 20px !important;
}

.section-title p {
    font-size: 14px !important;
}

#footer .footer-top .footer-contact {
    text-align: center !important;
}

#footer img {
    width: 47% !important;
}

#footer .footer-top .footer-links {
    text-align: center !important;
}

#footer .footer-top .footer-links ul li {
    justify-content: center !important;
}

section#home-sec6 h2 {
    padding: 0 0 !important;
}

section#inner-banner {
  background-size: cover !important;
  background-position: right !important;
}

section#inner-banner h2 {
  text-align: center !important;
  font-size: 20px !important;
}

section#inner-banner p {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
}

section#inner-banner a#dark {
  background: white !important;
  color: black !important;
}

section#inner-banner a#light {
  background: white !important;
  color: black !important;
  border: none !important;
}

section#inner-banner .form-section {
  width: 90% !important;
  margin: 0 auto 40px auto !important;
  left: 0 !important;
}

section#inner-banner a#dark {
  font-size: 14px !important;
  padding: 12px 24px !important;
}

section#inner-banner a#light {
  margin: 0 0 !important;
  padding: 12px 30px !important;
  font-size: 14px !important;
}

.form-section h3 {
  font-size: 14px !important;
}

section#inner-sec2 img {
  width: 60% !important;
  margin: 6px auto !important;
}

#inner-sec2 .col-md-2.col-sm-12.aos-init.aos-animate {
  text-align: center !important;
}

section#inner-sec3 h2 {
  margin: 0 0 !important;
  text-align: center !important;
  font-size: 20px !important;
}

section#inner-sec3 p {
  text-align: center !important;
  font-size: 14px !important;
}

div#inner-3-btn {
  display: flex;
  gap: 10px;
  justify-content: center !important;
}

div#inner-3-btn a {
  padding: 9px 24px !important;
  font-size: 14px !important;
}

section#inner-sec3 a#inner-3-dark {
  padding: 11px 23px !important;
  font-size: 14px !important;
}

section#inner-sec4 h2 {
  text-align: center !important;
  font-size: 20px !important;
}

section#inner-sec4 p {
  font-size: 14px !important;
  text-align: center !important;
  margin: 20px 0  0 0 !important;
}

section#inner-sec4 div#inner-4btn a {
  font-size: 14px !important;
}

#inner-sec5 h2 {
  font-size: 20px !important;
}

#inner-sec5 h2::after {
  height: 5px;
  width: 70px !important;
  margin-top: 35.4px !important;
}

#inner-sec5 h2::before {
  content: "";
  background: #000000;
  position: absolute;
  width: 122px;
  height: 2px;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-top: 37px;
}

#inner-sec5 p {
  margin: 34px 0 0 0 !important;
  width: 100% !important;
  font-size: 14px !important;
}

section#inner-sec5 div#focuing h3 {
  text-align: center !important;
  font-size: 20px !important;
}

div#focuing {
  text-align: center !important;
  margin: 28px 0 0 0 !important;
}

#inner-sec5 #focuing p {
  text-align: center !important;
}

#inner-sec5 h3 {
  text-align: center !important;
  font-size: 20px !important;
}

#inner-sec5 div#un-focuing p {
  text-align: center !important;
}

section#inner-sec6 h2 {
  font-size: 20px !important;
}

section#inner-sec6 h2::before {
  height: 2px;
  width: 97px;
  margin-top: 33px;
}

section#inner-sec6 h2::after {
  height: 5px;
  width: 53px;
  margin-top: 31px !important;
}

.flection-aniation-section {
  margin-bottom: 73px;
  width: 73%;
  margin: 0 auto 75px auto !important;
}

section#inner-sec6 .flection-aniation-section span {
  font-size: 56px !important;
  left: 0;
  margin-top: -23px !important;
}

section#home-sec4 {
  padding-top: 41px !important;
}

section#inner-sec7 h2 {
  font-size: 20px !important;
}

div#inner-banner-btn {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
}

section#about-banner {
  background-size: cover !important;
  background-position: center !important;
}

section#about-banner h2 {
  text-align: center !important;
  padding: 0 0 !important;
  font-size: 20px !important;
}

section#about-banner p {
  text-align: center !important;
  font-size: 14px !important;
  padding: 8px  0 0  0 !important;
}

section#about-banner h3 {
  justify-content: center !important;
  text-align: center !important;
  font-size: 20px;
  text-transform: capitalize !important;
  font-weight: 400 !important;
}

section#about-banner .icon-flextion-dev {
  justify-content: center !important;
}

#about-sec1 img {
  width: 80% !important;
  margin: 0 auto !important;
}

.col-md-6.col-sm-12.aos-init.aos-animate {
  text-align: center !important;
}

.portfolio-item {
  padding: 20px 0 !important;
  text-align: center !important;
}

.pd img {
  width: 93%  !important;
  height: 450px;
  margin: 0 auto !important;
}

section#contact.contact.contactus {
  padding: 30px 0 38px 0 !important;
}

.modal.active {
  background-size: cover !important;
  width: 23% !important;
  background: #f68b1f !important;
}

.modal__left {
  width: 0 !important;
}

.modal__right {
  width: 71% !important;
  padding: 0 0 !important;
  margin: 0 38px !important;
}



.modal__close-btn {
  right: 18px;
}

.pd {
  text-align: center !important;
}

.portfolio-overlay {
  width: 96%;
  margin: 0 auto !important;
  left: 0;
  right: 0;
}

section#about-sec1 h2 {
  font-size: 20px;
}

section#about-sec1 p {
  font-size: 14px !important;
}

section#about-sec1 a {
  font-size: 14px !important;
}

div#about-btns {
  justify-content: center !important;
}

section#inner-sec7 h2::before {margin-top: 31px !important;height: 5px;width: 91px;}

section#inner-sec7 h2::after {
  width: 125px;
  margin-top: 32.64px;
  height: 2px;
}

.main-box {
  width: 82% !important;
  text-align: center !important;
  margin: 0 auto 29px auto !important;
}

.header-testimonials {
  justify-content: center !important;
}

#inner-sec7 .icon {
  justify-content: center !important;
}


section#inner-sec7 {
    padding-bottom: 0 !important;
}

section#home-sec8 a#neuro {
    padding: 7px 23px !important;
    font-size: 13px !important;
}

section#home-sec8 a#nepo {
    font-size: 13px;
    padding: 8px 0 0 0 !important;
}

div#un-focuing {
    border: 1px solid #eee;
}

.modal.active {
    min-width: 389px !important;
    justify-content: center !important;
}

.modal__left {
    padding: 0 0 !important;
}

.services-input select#selected {
    height: 48px;
    PADDING: 0 53px !IMPORTANT;
}

.modal .modal__right h2 {
    width: 100% !important;
    font-size: 20px;
    border: none !important;
}



section#home-sec6 {
    padding-bottom: 49px !important;
}


section#portfoilo___section {
    display: none !important;
}


/*   Last was not close */

}

/* End */





.flex-doirecction-ends {
    display: flex;
    gap: 135px !important;
}

.container.footer-bottom.clearfix {
    display: flex;
    justify-content: space-between;
}

.flex-sec-payment {
    display: flex;
    GAP: 10PX;
    JUSTIFY-CONTENT: end;
}

#footer .flex-sec-payment img {
    width: 56.5% !important;
    MARGIN: 0 0 !IMPORTANT;
    HEIGHT: 34PX;
    BORDER-RADIUS: 5PX !IMPORTANT;
}



.number_inner-ico.lumber-one i {
    background: #f68b1f !important;
    width: 40px !important;
    height: 40px;
    font-size: 16px !important;
    border-radius: 25px;
    z-index: 12;
    margin: 3px 3px 0 4px !important;
    line-height: 39px;
    color: black !important;
    position: absolute;
}

.message_modals textarea {
    height: 80px !important;
}

.number_inner-ico.lumber-one input[type="text"] {
    padding-left: 83px !important;
}

.number_inner-ico.lumber-one span.position-absoluting {
    position: absolute;
    width: 1.5%;
    margin: 11px auto !important;
    font-family: 'Josefin Sans';
    left: 165px;
    right: 0;
}

.contact-top .lorem .validate {
  display: none;
  color: red;
  margin: 0px 0px 15px;
  font-weight: 400;
  font-size: 13px;
}

.contact-top .lorem .error-message {
  display: none;
  color: rgb(255, 255, 255);
  background: rgb(237, 60, 13);
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact-top .lorem .error-message br + br {
  margin-top: 25px;
}

.contact-top .lorem .sent-message {
  display: none;
  color: rgb(255, 255, 255);
  background: rgb(24, 210, 110);
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact-top .lorem .loading {
  display: none;
  background: rgb(255, 255, 255);
  text-align: center;
  padding: 15px;
}

.contact-top .lorem .loading::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0px 10px -6px 0px;
  border-width: 3px;
  border-style: solid;
  border-color: rgb(238, 238, 238) rgb(24, 210, 110) rgb(24, 210, 110);
  border-image: initial;
  animation: 1s linear 0s infinite normal none running animate-loading;
}



.form__poppup_modal .lorem .validate {
  display: none;
  color: red;
  margin: 0px 0px 15px;
  font-weight: 400;
  font-size: 13px;
}

.form__poppup_modal .lorem .error-message {
  display: none;
  color: rgb(255, 255, 255);
  background: rgb(237, 60, 13);
  text-align: left;
  padding: 15px;
  font-weight: 600;
}
section#about-sec1 {
    padding: 0 0 40px 0 !important;
}

.form__poppup_modal .lorem .error-message br + br {
  margin-top: 25px;
}

.form__poppup_modal .lorem .sent-message {
  display: none;
  color: rgb(255, 255, 255);
  background: rgb(24, 210, 110);
  text-align: center;
  padding: 15px;
  font-weight: 600;
}





#side-tabs span i.bi {
    background: #000000;
    color: white !important;
    width: 50px;
    display: inline-block;
    text-align: center !important;
    font-size: 24px;
    height: 50px;
    line-height: 46px;
    border-radius: 2px;
}

div#side-tabs {
    position: fixed;
    right: 0px;
    overflow: hidden !important;
    z-index: 161;
    top: 6pc;
    height: 400px;
}

div#side-tabs p {
    background: #f5821f !important;
    font-family: 'Jost';
    font-size: 16px !important;
    transition: all 0.5s !important;
    position: relative;
    color: black;
    right: -14.6pc;
    border-radius: 25px 0px 0px 25px;
    cursor: pointer;
}

div#side-tabs p:hover {
    transition: all 0.5s;
    right: 0 !important;
}
div#socials-factso {
    display: none !important;
}

.form__poppup_modal .lorem .loading {
  display: none;
  background: rgb(255, 255, 255);
  text-align: center;
  padding: 15px;
}

.form__poppup_modal .lorem .loading::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0px 10px -6px 0px;
  border-width: 3px;
  border-style: solid;
  border-color: rgb(238, 238, 238) rgb(24, 210, 110) rgb(24, 210, 110);
  border-image: initial;
  animation: 1s linear 0s infinite normal none running animate-loading;
}

.livechatdev {
    background: #f5821f;
    color: black !important;
    text-transform: uppercase;
    width: 197px;
    text-align: center;
    transform: rotate(-90deg);
    padding: 15px 0 !important;
    right: -145px;
    position: relative;
    cursor: pointer;
    top: 73px;
    z-index: 161;
}

.livechatdev h6 {
    margin: 0 0 !important;
}



/*chatbox-poppup*/

.popup-link{
  display:flex;
  flex-wrap:wrap;
}

.popup-link a{
    background: #000000;
    color: #fff;
    padding: 14px 30px;
    font-size: 15px;
    CURSOR: pointer;
    margin: 0px;
    FONT-FAMILY: 'Jost';
    text-transform: uppercase !important;
    transform: rotate(-90deg);
    right: -11.5pc;
    position: relative;
    top: 53px !important;
}

.popup-container {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px);
}
.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0px;
    border: 10px solid #f5821f;
    width: 75%;
}
.popup-content p{
    font-size: 17px;
    padding: 10px;
    line-height: 20px;
}
.popup-content a.close{
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background: none;
    padding: 0;
    margin: 0;
    text-decoration:none;
}

.popup-content a.close:hover{
  color:#333;
}

.popup-content span:hover,
.popup-content span:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popup-container:target{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.popup-container h3{
  margin:10px;
}
/*End popup styles*/

/* Additional styles */
.popup-style-2{
  transform: scale(0.3);
  
}

.popup-style-2:target{
  transform: scale(1);
}

/*end*/



div#side-tabs  .popup-content p {
    padding: 0 0 !important;
    left: 0 !important;
    background: transparent !important;
}

.flextion-method {
    display: flex;
    gap: 10px;
}

.div-aaa {
    width: 50%;
}

.div-bbb {
    width: 50%;
    padding-right: 10px;
}

.div-aaa input {
    width: 100% !important;
    padding: 13px 13px !important;
    font-family: 'Jost';
    font-size: 13px !important;
    margin-bottom: 16px;
    background: #F0F0F0;
    border: 1px solid #d9d6d9;
    color: #495057;
}

.div-aaa input::placeholder {
    color: #495057 !important;
}

.div-bbb textarea {
    width: 100% !important;
    padding: 13px 13px !important;
    font-family: 'Jost';
    font-size: 13px !important;
    margin-bottom: 16px;
    background: #F0F0F0;
    height: 189px;
    border: 1px solid #d9d6d9;
    color: #49505A !important;
}

.div-bbb textarea::placeholder {
    color: #495057 !important;
}



div#popup2 img {}

div#side-tabs .popup-content p {
    font-size: 14px !important;
}

div#side-tabs {
    color: black;
    font-size: 29px;
}

.popup-content .col-md-5 {
    padding: 0 0 !important;
}

div#side-tabs  .col-md-7 {
    padding: 0 0 31px 0 !important;
}

.button-prepoppup {
    text-align: end !important;
}

.button-prepoppup button {
    background: #f5821f;
    padding: 13px 62px !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    font-family: 'Jost';
    border: none !important;
    border-radius: 25px 0px 0px 25px;
}

#popup2 .row {
    margin: 0 0 !important;
    width: 100% !important;
}

.wrap img {
    width: 100% !important;
}


.div-aaa input#Name {position: relative;top: -5px;}

.div-aaa input#Email {
    position: relative;
    top: -4px;
}

.popup-content a.close {
    left: -11px;
    position: relative;
}

.col-md-6.col-sm-12.devops-eng.aos-init.aos-animate {
    text-align: center !important;
    padding-top: 40px;
}


.image-over-text-card 
 p#nathan {
    color: white !important;
}

.image-over-text-card p#nathan span {
    color: white !important;
}


.side__images img {width: 100% !important;}



section#inner-sec6 .flection-aniation-section p {
    padding: 11px 12px !important;
}


/* Style the tab */
.tab {
  overflow: hidden;
  text-align: center !important;
  display: flex;
  justify-content: center !important;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  font-family: 'Jost';
}

/* Change background color of buttons on hover */
.tab button:hover {
}

/* Create an active/current tablink class */
.tab button.active {}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

div#top-1 i {
    color: white !important;
}
div#port img {
    width: 100% !important;
}

.tab button.active:before {
    content: "";
    background: #f5821f !important;
    width: 69px;
    height: 1px;
    position: absolute;
    margin-top: 26px;
    transition: 0.5s;
}

div#author-websites img {width: 100%;}

div#author-websites {
    height: 400px;
    overflow: auto;
}

div#ghost-writing img {
    width: 100% !important;
}



.error-message.d-block {
    DISPLAY: NONE !important;
}
.number-section a {
    display: flex;
    gap: 6px;
}

.contact .info a {
    color: #6283bb;
}


body button.tawk-custom-color.tawk-custom-border-color.tawk-button.tawk-button-circle.tawk-button-large {
    background: #f5821f !important;
}

#footer .footer-top .footer-contact a {
    color: white !important;
}

.container.privacy-org {}

.container.privacy-org h3 {
    font-size: 20px !important;
    color: black;
    text-transform: uppercase;
}

.container.privacy-org p {
    font-family: 'Josefin Sans';
}




/*Footer-thankyou*/

.header-heading h2 {
    font-family: 'Josefin Sans' !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: black !important;
    text-align: center !important;
    padding: 59px 0 0  0 !important;
    border-top: 1px solid #eee;
    margin-top: 25px !important;
}

.icon-check {
    text-align: center !important;
}

.icon-check i.bi.bi-check-circle {
    background: orange;
    width: 100px;
    display: block;
    height: 100px !important;
    font-size: 40px;
    color: black !important;
    line-height: 92px !important;
    border-radius: 74px !important;
    margin: 33px auto 50px  auto !important;
    border: 3px solid !important;
}

.footer-bottom-para p {
    text-align: center !important;
    color: black !important;
    font-family: 'Jost';
    font-size: 17px !important;
    width: 50% !important;
    line-height: 23px !important;
    margin: 0 auto -2px auto  !important;
}

.footer-buuton-to-go__home a {
    background: orange;
    padding: 18px 32px !important;
    font-family: 'Josefin Sans';
    color: black !important;
    text-decoration: none !important;
    font-size: 16px !important;
    border-radius: 5px !important;
    text-align: center !important;
    line-height: 122px;
}

.footer-buuton-to-go__home {
    text-align: center !important;
    border-bottom: 1px solid #eee;
    margin-bottom: 50px !important;
    padding-bottom: 11px;
}
.contact .lorem textarea#extra__space__for-tag {
    padding: 12px 14px 65px  13px !important;
}
div#loom-companion-mv3 {
    display: none !important;
}
#live-btn{color: black !important;
  font-family: 'Josefin Sans';
  background: white !important;
  padding: 11px 44px !important;
  border-radius: 25px;}


  div#img_book_pub_visible img {
    width: 100% !important;
}

div#nepdfter {
    padding: 79px 0 0 0 !important;
}

div#nepdfter h2 {
    font-family: 'Josefin Sans';
    font-size: 40px;
    color: black;
}

div#nepdfter strong {
    color: #de9607;
}

div#nepdfter p {
    font-family: 'Jost';
    font-size: 16px;
    line-height: 33px;
    padding-top: 20px;
}

div#ctn_shelf_book {
    display: flex;
    gap: 10px;
}

div#ctn_shelf_book a {
    background: #f5821f;
    color: white;
    font-family: 'Jost';
    font-size: 16px;
    padding: 11px 19px !important;
    border-radius: 38px;
}


/* slider thinking */

.slider {
  display: flex;
  gap: 20px;
  transition: transform 1s ease-in-out;
  padding: 12px 1px !important;
}

.slide {
  min-width: calc(34.33% - 20px);
  overflow: hidden;
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 1px 1px 7px #00000069;
  background: #ffffff24;
  backdrop-filter: blur(11px);
}

.slide img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.5s ease;
}

.slide img:hover {
  transform: scale(1.05);
}

@keyframes slide {
  0% { transform: translateX(0); }
  20% { transform: translateX(-100%); }
  40% { transform: translateX(-200%); }
  60% { transform: translateX(-300%); }
  80% { transform: translateX(-400%); }
  100% { transform: translateX(0); }
}

.slider-container {
  overflow: hidden;
}

/* end thinking */


/* checkbox customization for dialpad */

div#main_defter_checkbox_permission label {
  display: flex !important;
  align-items: baseline;
}

div#main_defter_checkbox_permission label p {
  font-size: 12px !important;
  line-height: 13px;
}

div#main_defter_checkbox_permission label p a {
  color: white !important;
}

/* end dialpad bachodi */