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



:root {

  --white: #ffffff;

  --primary-color: #ff6600;

  --dark-color: #1a1818;

  --text-gray: #6e6e6e;

  --gray-color: #f5f5f5;

  --dark-gray: #333333;

}



a {

  text-decoration: none;

}



ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



h1,

h2,

h3,

h4,

h5,

h6,

p {

  margin: 0;

}



body {

  font-family: "Fira Sans", sans-serif;

  box-sizing: border-box;

  padding: 0;

  margin: 0;

  color: var(--dark-color);

  overflow-x: hidden;

}



.container {

  max-width: 1440px;

  padding: 0 20px;

  margin: 0 auto;

}



/* section space */

.section-space {

  padding: 80px 0;

}



/* section title */

.section-title {

  margin-bottom: 60px;

}



.section-title h2 {

  font-size: 42px;

  font-weight: 700;

}



.section-title h2 span {

  color: var(--primary-color);

}



.section-title p {

  color: var(--text-gray);

  font-size: 20px;

}



/* section box detail */

.sec-box h3 {

  font-size: 22px;

}



.sec-box p {

  font-size: 18px;

  color: var(--text-gray);

}



/* owl dots */

.owl-theme .owl-dots .owl-dot.active span,

.owl-theme .owl-dots .owl-dot:hover span {

  background-color: var(--primary-color) !important;

  height: 10px;

  width: 10px;

  position: relative;

  transition: all 0.5s ease;

}



.owl-theme .owl-dots .owl-dot.active span::after,

.owl-theme .owl-dots .owl-dot:hover span::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  border: 1px solid var(--primary-color);

  border-radius: 50%;

  height: 17px;

  width: 17px;

  transition: all 0.5s ease;

}



/* header start */

.header-section {

  min-height: 70px;

  background-color: var(--white);

  box-shadow: 0 2px 16px 0 rgba(19, 20, 21, 0.1);

  position: fixed;

  top: 0px;

  left: 0px;

  right: 0px;

  width: 100%;

  z-index: 9999;

}



.header-section .navbar-brand img {

  height: 54px;

}



.header-section .navbar-nav {

  gap: 46px;

}



.header-section .navbar-nav li a {

  padding: 0px 4px !important;

  font-weight: 400;

  line-height: 24px;

  color: #000;

  position: relative;

}



.header-section .navbar-nav li a.active,

.header-section .navbar-nav li a:hover {

  color: var(--primary-color);

}



.active-about {

  color: var(--primary-color) !important;

}



.common-btn a {

  font-weight: 700;

  line-height: 24px;

  color: var(--white);

  background: var(--primary-color);

  border: 2px solid transparent;

  border-radius: 50px;

  padding: 10px 31px;

  display: block;

  transition: all 0.5s ease;

}



.common-btn a:hover {

  background-color: transparent;

  color: var(--primary-color);

  border-color: var(--primary-color);

}



.header-section .close-icon {

  position: absolute;

  top: 20px;

  right: 30px;

  z-index: 99;

  cursor: pointer;

  display: none;

}



.header-section .close-icon img {

  height: 25px;

}



/* hero section start */

.hero-section {

  padding-top: 252px;

  padding-bottom: 61px;

}



.hero-section h1 {

  font-size: 62px;

  font-weight: 700;

  line-height: 84px;

  margin-bottom: 24px;

}



.hero-section h1 span {

  color: var(--primary-color);

}



.hero-section .hero-con {

  color: var(--text-gray);

  font-size: 18px;

  font-weight: 500;

  line-height: 27px;

  margin-bottom: 65px;

  display: block;

}



.hero-section .common-btn a {

  padding: 15px 94px;

}



/* work section */

.work-section .work-box {

  border-radius: 16px;

  box-shadow: -4px -4px 11px 0 rgba(255, 102, 0, 0.07),

    4px 4px 11px 0 rgba(255, 102, 0, 0.07);

  position: relative;

  overflow: hidden;

  transition: all 0.5s ease;

}



.work-section .work-box::before {

  content: "";

  height: 100%;

  width: 100%;

  background-color: rgba(255, 102, 0, 0.7);

  position: absolute;

  top: -100%;

  left: 0;

  opacity: 0;

  visibility: hidden;

  transition: all 0.5s ease;

  z-index: -1;

}



.work-section .work-box:hover::before {

  transition: all 0.5s ease;

  top: 0;

  opacity: 1;

  visibility: visible;

}



.work-section .work-box:hover .work-details,

.work-section .work-box:hover .work-details p {

  color: var(--white);

}



.work-section .work-box .work-img {

  padding: 12px;

  padding-bottom: 0;

}



.work-section .work-box .sec-box {

  padding: 24px 36px;

}



.work-section .work-box .sec-box h3 {

  margin-bottom: 8px;

  font-weight: 700;

}



/* real work section */

.r-work-section .r-work {

  margin-top: 60px;

  margin-bottom: 161px;

  box-shadow: 0 2px 16px 0 rgba(19, 20, 21, 0.1);

  text-align: center;

  border-radius: 16px;

  padding: 76px 150px;

}



.r-work-section .r-work h2 {

  margin-bottom: 32px;

}



.r-work-section .r-work p {

  font-size: 18px;

}



/* work slider section */

.work-slider-sec .work-slider .work-slider-content {

  padding: 40px 15px 15px 0;

  flex: 1;

}



.work-slider-sec .work-slider .work-slider-content .work-con {

  border-radius: 0 16px 16px 0;

  box-shadow: 0 2px 17px rgba(19, 20, 21, 0.21);

  display: flex;

  align-items: center;

  padding-inline: 83px;

  padding-top: 82px;

  padding-bottom: 130px;

  position: relative;

  flex-wrap: wrap;

}



.work-slider-sec .work-slider .work-slider-img {

  width: 615px;

  height: auto;

  object-fit: contain;

  position: relative;

  z-index: 2;

  margin-right: -10px;

}



.work-slider-sec .work-slider .work-con {

  padding-left: 117px;

}



.work-slider-sec .work-slider .work-con h2 {

  font-size: 26px;

  font-weight: 700;

  margin-bottom: 20px;

}



.work-slider-sec .work-slider .work-con p {

  color: var(--text-gray);

  font-size: 18px;

}



.work-slider-sec .work-slider .owl-nav {

  position: absolute;

  bottom: 120px;

  left: 50%;

  transform: translateX(-20%);

}



.work-slider-sec .owl-theme .owl-nav [class*=owl-] {

  transition: all 0.5s ease;

}



.work-slider-sec .owl-theme .owl-nav [class*=owl-]:hover {

  background-color: var(--primary-color);

  border-color: var(--primary-color);

}



.work-slider-sec .work-slider .owl-nav button {

  height: 40px;

  width: 40px;

  border-radius: 50%;

  border: 1px solid #515151;



}



/* difference section */

.diff-sec {

  background-color: var(--gray-color);

}



.diff-sec .section-title h2 {

  margin-bottom: 12px;

}



.diff-sec .diff-box {

  border-top: 4px solid rgba(255, 102, 0, 0.57);

  border-radius: 16px;

  box-shadow: 0 2px 16px rgba(19, 20, 21, 0.1);

  padding: 32px 36px;

  padding-top: 110px;

  margin-top: 30px;

  position: relative;

  text-align: center;

  transition: all 0.5s ease;

  background-color: #fff;

}



.diff-sec .diff-box .diff-icon {

  height: 120px;

  width: 120px;

  padding: 10px;

  border-top: 4px solid rgba(255, 102, 0, 0.57);

  border-radius: 50%;

  position: absolute;

  top: -30px;

  left: 50%;

  transform: translateX(-50%);

  background-color: var(--gray-color);

  transition: all 0.5s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



.diff-sec .diff-box .diff-icon img {

  height: 64px;

  width: 64px;

}



.diff-sec .diff-box .diff-details h3 {

  margin-bottom: 16px;

  font-weight: 600;

}



.diff-sec .diff-box:hover {

  background-color: rgba(255, 102, 0, 0.57);

}



.diff-sec .diff-box:hover .diff-details,

.diff-sec .diff-box:hover .diff-details p {

  color: var(--white);

}



/* action section start */

.action-section {

  overflow: hidden;

}



.action-section .action-video {

  border-radius: 16px;

  position: relative;

}



.action-section .action-video .video {

  border-radius: 16px;

  height: auto;

  width: 860px;

  }



.action-section .action-video::before {

  content: "";

  position: absolute;

  top: -18px;

  left: -18px;

  height: 100%;

  width: 100%;

  max-width: 734px;

  background-color: rgba(255, 102, 0, 0.15);

  border-radius: 16px;

  z-index: -1;

}



.action-section .action-content {

  padding-left: 72px;

}



.action-section .action-content .action-list {

  margin-top: 42px;

  margin-bottom: 46px;

}



.action-section .action-content .action-list .d-flex {

  gap: 22px;

  margin-bottom: 43px;

}



.action-section .action-content .action-list li:last-child .d-flex {

  margin-bottom: 0;

}



.action-section .action-content .action-list .action-icon {

  height: 60px;

  width: 60px;

  border-radius: 100%;

  background-color: var(--white);

  box-shadow: 0 2px 16px rgba(19, 20, 21, 0.1);

  flex-shrink: 0;

  padding: 15px;

}



.action-section .action-content .action-list .action-detail h3 {

  font-size: 18px;

  font-weight: 500;

  margin-bottom: 2px;

}



.action-section .common-btn a {

  padding: 15px 94px;

}



/* tester section */

.tester-sec {

  background-image: url(../images/tester-bg.webp);

  background-color: rgba(255, 102, 0, 0.03);

  background-size: cover;

  background-repeat: no-repeat;

}



.tester-sec .tester-box {

  border-radius: 16px;

  background: var(--white);

  box-shadow: 0 2px 14px 0 rgba(19, 20, 21, 0.14);

  position: relative;

  padding: 30px;

  min-height: 245px;

}



.tester-sec .tester-box::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: -10px;

  transform: translateX(-50%);

  border-radius: 16px;

  background-color: var(--primary-color);

  opacity: 0.28;

  height: 100%;

  width: 90%;

  z-index: -1;

}



.tester-sec .tester-box .tester-start {

  display: flex;

  gap: 7px;

}



.tester-sec .tester-box .tester-start li img {

  height: 26px;

}



.tester-sec .tester-box .d-flex {

  gap: 18px;

  margin-bottom: 20px;

  margin-top: 22px;

}



.tester-sec .tester-box .d-flex img {

  height: 60px;

  width: 60px;

}



.tester-sec .tester-box .d-flex .tester-detail h3 {

  font-size: 20px;

  font-weight: 700;

}



.tester-sec .tester-box .d-flex .tester-detail span {

  color: var(--text-gray);

}



.tester-sec .tester-box p {

  color: var(--dark-gray);

  font-size: 17px;

}



.work-slider-arrow {

  width: 20px;

  height: 20px;

  margin-bottom: 2px;

}



.owl-prev:hover img,

.owl-next:hover img {

  filter: brightness(0) invert(1);

}



.work-slider-arrow-right {

  transform: scaleX(-1);

}



/* .tester-sec .owl-stage-outer .owl-stage{

    margin: 20px;

} */

.inner-padding-items {

  padding: 30px 15px;

}



.tester-sec .owl-theme .owl-dots .owl-dot span {

  background-color: rgba(106, 106, 106, 0.25);

}



/* work flow section */

.w-flow-section .section-title h2 {

  margin-bottom: 12px;

}



.w-flow-section .section-title .sec-sub-title {

  margin-top: 8px;

  font-size: 20px;

  font-weight: 500;

}



.w-flow-section .w-flow-box {

  box-shadow: 0 2px 16px rgba(19, 20, 21, 0.1);

  border-radius: 16px;

}



.w-flow-section .w-flow-box .w-flow-main {

  padding: 11px;

}



.w-flow-section .w-flow-box .d-flex {

  padding: 16px 24px;

  background-color: #f7f7f7;

  gap: 24px;

  border-radius: 16px;

  margin-bottom: 24px;

  align-items: center;

}



.w-flow-section .w-flow-box .d-flex .w-flow-icon {

  border: 1px solid var(--primary-color);

  height: 84px;

  width: 84px;

  border-radius: 100%;

  padding: 22px;

  flex-shrink: 0;

}



.w-flow-section .w-flow-box .d-flex .w-flow-detail h4 {

  font-size: 22px;

  font-weight: 600;

}



.w-flow-section .w-flow-box p {

  padding-bottom: 30px;

  padding-inline: 25px;

  font-size: 18px;

  color: var(--text-gray);

}



.w-flow-section .common-btn {

  margin-top: 58px;

}



.w-flow-section .common-btn a {

  padding: 15px 94px;

}



/* accordion section */

.accordion-section .accordion {

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  align-items: flex-start;

}



.accordion-section .accordion-button:not(.collapsed)::after,

.accordion-section .accordion-button::after {

  background-image: url(../images/down-arr.webp);

}



.accordion-section .accordion-button:focus {

  box-shadow: none;

}



.accordion-section .accordion-button:not(.collapsed) {

  background-color: transparent;

}



.accordion-section .accordion-button {

  background-color: transparent;

  padding: 22px 20px;

  display: flex;

  gap: 20px;

  position: relative;

  box-shadow: none;

}



.accordion-section .accordion-button::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  background-color: var(--primary-color);

  height: 20px;

  width: 6px;

  border-radius: 0 12px 12px 0;

}



.accordion-section .accordion-button h5 {

  font-size: 24px;

  font-weight: 700;

  color: var(--dark-color);

}



.accordion-section .accordion-button span {

  font-size: 20px;

  color: var(--dark-color);

}



.accordion-section .accordion-item {

  border-radius: 12px;

  border: 1px solid rgba(26, 24, 24, 0.21);

  box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.08);

  position: relative;

}



.accordion-section .accordion-item .accordion-body {

  color: var(--text-gray);

}



/* try section */

.try-section .try-box {

  background-image: url(../images/try-bg.webp);

  background-size: cover;

  background-repeat: no-repeat;

  padding: 86px;

  color: var(--white);

  border-radius: 16px;

}



.try-section .try-box .section-title p {

  color: var(--white);

  margin-top: 20px;

}



.try-section .try-box .common-btn a {

  padding: 15px 47px;

}



/* footer */

.footer-sec {

  background-image: url(../images/footer-bg.webp);

  background-size: cover;

  background-repeat: no-repeat;

}



.footer-sec .main-footer {

  padding: 56px 10px;

}



.footer-sec .footer-logo {

  height: 71px;

}



.footer-sec .footer-con {

  color: var(--white);

  margin-top: 24px;

  width: 60%;

}



.footer-sec .main-footer h6 {

  color: var(--primary-color);

  font-size: 18px;

  font-weight: 500;

  margin-bottom: 14px;

}



.footer-sec .main-footer ul li a {

  color: var(--white);

  margin-bottom: 12px;

  display: inline-block;

  transition: all 0.5s ease;

}



.footer-sec .main-footer ul li a:hover {

  color: var(--primary-color);

}



.footer-sec .main-footer .footer-social {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

}



.footer-sec .main-footer .footer-social li a {

  height: 40px;

  width: 40px;

  border-radius: 50px;

  background-color: rgba(255, 255, 255, 0.1);

  margin-bottom: 0;

  padding: 11px;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.5s ease-in;

}



.footer-sec .main-footer .footer-social li a:hover {

  background-color: rgba(255, 102, 0, 0.4);

}



.footer-sec .main-footer .footer-social li a img {

  height: 15px;

}



.footer-sec .foorer-copy {

  background: rgba(255, 255, 255, 0.04);

  text-align: center;

  color: var(--white);

  padding: 11px;

  opacity: 0.8;

  font-size: 14px;

}

.footer-sec .pages-link li:last-child a{
  margin-bottom: 0;
}



/* =========== about page =========== */

/* hero section */

.about-hero {

  padding-top: 135px;

  padding-bottom: 10px;

}



/* about section */

.about-section .about-detail {

  padding-left: 80px;

}



.about-section .about-detail h2 {

  font-size: 42px;

  font-weight: 700;

  margin-bottom: 30px;

}



.about-section .about-detail span {

  color: var(--primary-color);

}



.about-section .about-detail p {

  margin-bottom: 20px;

}



.about-section .about-detail p:last-child {

  margin-bottom: 0;

}



/* about work section */

.work-a-section .section-title h2 {

  margin-bottom: 32px;

}



.work-a-section .work-a-content {

  text-align: center;

  border-top: 3px solid var(--primary-color);

  border-radius: 16px;

  background-image: url(../images/sec-obj-bg.webp);

  padding: 76px 151px;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  box-shadow: 0 2px 16px rgba(19, 20, 21, 0.1);

}



/* follow section */

.follow-sec .section-title {

  margin-bottom: 40px;

}



.follow-sec .f-social-box {

  border-radius: 16px;

  border: 1px solid rgba(26, 24, 24, 0.13);

  box-shadow: 0 2px 16px 0 rgba(19, 20, 21, 0.1);

  display: flex;

  align-items: center;

  padding: 26px 40px;

  gap: 20px;

  transition: all 0.5s ease;

}



.follow-sec .f-social-box:hover {

  background-color: #ff660017;

}



.follow-sec .f-social-box .f-social-icon {

  height: 64px;

  width: 64px;

  border: 1.5px solid var(--primary-color);

  border-radius: 50px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.follow-sec .f-social-box .f-social-icon img {

  width: 26px;

  height: 26px;

}



.follow-sec .f-social-box .f-social-name {

  font-size: 20px;

  font-weight: 500;

  color: #000;

}



.work-slider-sec {

  padding-bottom: 80px;

}

/* privacy policy start */
.hero-section.privacy-hero{
  padding-top: 135px;
  padding-bottom: 80px;
}

.policy-section .policy-image{
  min-height: 500px;
  height: 100%;
}

.privacy-page .footer-sec .main-footer, .terms-page .footer-sec .main-footer{
  margin-top: 100px;
}

#pdf-container {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
}
canvas {
  margin: 10px 0;
  max-width: 982px;
  width: 100%;
  background: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}