@import url('./vendors/bootstrapv5.0/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
/*=============*/
/* Reset Style */
body, h1, h2, h3, h4, h5, h6, p {margin: 0;}
a {text-decoration: none; transition: 0.2s all ease-in-out;cursor: pointer;}
a:-webkit-any-link:focus-visible{outline: 0px;}
p {margin: 0;}
ul{list-style: none; padding: 0; margin: 0;}
img{width: 100%;}
/*=============*/
/* General */
.text-primary{color: var(--clr-primary) !important;}
.text-white{color: var(--clr-white) !important;}
.text-hover-primary {transition: 0.2s all ease-in-out;}
.text-hover-primary:hover {color: var(--clr-primary) !important;}
/*=============*/
/* Variables */
:root{
    --bg-body:#FFFDEF;
    --clr-body:#000000;
    --clr-white: #FFFFFF;

    --clr-primary: #D36829;
    --clr-secondary: #E0E0E0;
    --clr-success: #92B29B;

    --clr-social: #303C42;
    --clr-social-hover: #9ABAD6;
}
/*=============*/
/* Components */
/* == Buttons == */
.wsstax-btn{
  display:inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 30px;
  height: 48px;
  text-align: center;
  font-size: 16px;
  font-weight:bold;
  text-decoration: none;
  border-radius: 40vw;
  border:1px solid transparent;
  cursor: pointer;
  background-color: lightgray;
  border-color: gray;
}
.wsstax-btn:hover{text-decoration: none; cursor: pointer;}
.wsstax-btn:focus{outline: 0; box-shadow: 0 0 4px 3px rgba(211,104,41,0.4);}
/* Sizes */
.wsstax-btn.btn-sm{height: 44px;}
.wsstax-btn.btn-lg{padding: 15px 30px; height: 57px;}
/* Colors */
.wsstax-btn.btn-primary{color: var(--clr-white);background-color: var(--clr-primary); border-color: var(--clr-primary);}
.wsstax-btn.btn-dark{color: var(--clr-white);background-color: var(--clr-body); border-color: var(--clr-body);}
/* == == */
/* == Cards == */
.wsstax-card{
  position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 30px;
	word-wrap: break-word;
	background-color: var(--clr-white);
	background-clip: border-box;
	border: 1px solid transparent;
	border-radius: 30px;
	margin-bottom: 30px;
  box-shadow: 0px 0px 34px rgba(70, 85, 78, 0.02);
}
.wsstax-card.card-stretch {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	height: calc(100% - 30px);
}
.wsstax-card .card-body{padding: 0px;}
/* == == */
/* == Forms == */
.form-group{margin-bottom: 25px;}
label{
  color: var(--clr-body);
  font-size: 18px;
  font-weight: 400;
}
label:not(.checkbox){margin-bottom: 15px;}
.form-control{
  position: relative;
  display: inline-block;
  padding: 10px 30px;
  width: 100%;
  height: 55px;
  border: 1px solid var(--clr-secondary);
  border-radius: 60px;
  background: var(--white);
  font-size: 18px;
  font-weight: 400;
  color: var(--clr-body);
}
.form-control:focus {outline: 0; box-shadow: none; background: var(--clr-white); border-color: var(--clr-primary);}
.form-control[readonly] {background-color: var(--clr-secondary) !important;}
.form-control::placeholder {font-size: 18px; font-weight: 400; color: var(--clr-body); opacity: 0.5;}
.wsstax-select{position: relative; display: flex;}
.wsstax-select::before {
  content: '';
  position: absolute;
  background: url('data:image/svg+xml;utf8,<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9699 1L10.3044 5.79213C9.12669 7.00182 7.18308 7.00182 6.00536 5.79213L1.33984 1" stroke="black" stroke-opacity="0.5" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
  width: 16px;
  height: 8px;
  inset-block: 0;
  margin-block: auto;
  inset-inline-end: 30px;
  z-index: 1;
}
select.form-control{padding-inline-end: 50px; cursor: pointer;}
/* checkbox */
.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  transition: all 0.3s ease;
}
.checkbox>input {position: absolute; z-index: -1; opacity: 0;}
.checkbox>span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 3px;
  height: 18px;
  width: 18px;
  background-color: var(--clr-white);
  border: 1px solid var(--clr-secondary);
  transition: all 0.3s ease;
}
.checkbox>input:focus~span {border-color: var(--clr-success);}
.checkbox>input:checked~span {background-color: var(--clr-success); border-color: var(--clr-success); transition: all 0.3s ease;}
.checkbox>span:after {
  content: "";
  position: absolute;
  inset: 0;
  margin: 0 auto;
  inset-block-start: 1px;
  width: 6px;
  height: 10px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.checkbox>input:checked~span:after {display: block; border-color: var(--clr-white);}
/*=============*/
/* Body | RTL */
body{
  padding-top: 10px;
  color: var(--clr-body);
  background: var(--bg-body);
  font-size: 16px;
  font-weight: 400;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}
@media screen and (min-width: 768px) {body{padding-top: 80px;}}
/* == Header == */
/* .wsstax-header-container{padding: 10px; position: sticky; top: 0; transition: 0.2s all ease-in-out;} */
.wsstax-header,
.header-toolbar,
.header-nav ul {display: flex; align-items: center;}
.wsstax-header{justify-content: space-between; gap: 10px;}
.wsstax-header .logo{width: 106px;}
.header-toolbar {gap: 10px;}
@media screen and (min-width: 768px) {.header-toolbar {gap: 40px;}}
.header-nav ul {gap: 35px;}
.header-nav ul li a {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: var(--clr-body);
  line-height: 21px;
}
.header-nav ul li a::before {
  content: none;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--clr-primary);
  bottom: -8px;
  transition: 0.3s all ease-in-out;
}
.header-nav ul li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 5px;
  border-radius: 40vw;
  background-color: var(--clr-primary);
  bottom: -8px;
  inset-inline-start: 7px;
  transition: 0.125s all ease-in-out;
}
.header-nav ul li a:focus::before,
.header-nav ul li:hover a::before{content: '';}
.header-nav ul li a:focus::after,
.header-nav ul li:hover a::after{width: calc(100% - 7px)}
/* == Mobile Menu == */
/* Mobile Menu */
.wsstax-header{position: relative;}
/* .wsstax-header:not(.menu-opened){overflow: hidden;transition: all 0.3s ease-in;}  */
@media screen and (max-width: 767.98px) {.header-nav {display: none;}}

.mobile-menu{
  position: absolute;
  top: 100%;
  /* padding: 15px 20px; */
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  min-width: 250px;
  background: var(--clr-body);
  border-radius: 0 0 20px 20px;
  margin-top: 10px;
  max-height: 0px;
  min-height: 0;
  /* clip: rect(0 0 0 0); */
  -moz-transition: max-height 600ms ease-out, min-height 600ms ease-in;
  -o-transition: max-height 600ms ease-out, min-height 600ms ease-in;
  -webkit-transition: max-height 600ms ease-out, min-height 600ms ease-in;
  transition: max-height 600ms ease-out, min-height 600ms ease-in;
}
@media screen and (max-width: 767.98px) {
  .menu-opened .mobile-menu{ z-index: 1;}
}
.menu-opened .mobile-menu{
  -moz-transition: max-height 800ms ease-in, min-height 500ms ease-out;
  -o-transition: max-height 800ms ease-in, min-height 500ms ease-out;
  -webkit-transition: max-height 800ms ease-in, min-height 500ms ease-out;
  transition: max-height 800ms ease-in, min-height 500ms ease-out;
  /* clip: auto; */
  min-height: 8em;
  max-height: 100em;
}
.mobile-menu li a{visibility: hidden; transition: visibility 500ms ease-out;}
.menu-opened .mobile-menu li a{visibility: visible; transition: visibility 300ms ease-in; transition-delay: 0.2s;}
.mobile-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--clr-white);
  border-bottom: 1px solid var(--clr-secondary);
}
.mobile-menu li:last-child a {border: 0;}
/* == Mobile Menu || Icon == */
.menu-icon {
  position: relative;
	display:  inline-block;
	width: 30px;
	height: 30px;
}
@media screen and (min-width: 768px) {.menu-icon{display: none;}}
.menu-icon span {margin: 0 auto; position: relative; top: 12px;}
.menu-icon span,
.menu-icon span::before,
.menu-icon span::after {
  display: block;
  width: 30px;
	height: 6px;
	background-color: var(--clr-body);
	border-radius: 40vw;
}
.menu-icon span::before,
.menu-icon span::after {content: ''; position: absolute;}
.menu-icon span:before {margin-top: -12px;}
.menu-icon span:after {margin-top: 12px;}
/* Transition Menu Icon */
.menu-icon span {
	-webkit-transition-duration: 0s; transition-duration: 0s;
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.menu-opened .menu-icon span {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.menu-icon span:before {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.menu-opened .menu-icon span:before {
	margin-top: 0;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.menu-icon span:after {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.menu-opened .menu-icon span:after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
/* ========= */
/* == == */
/* == Hero == */
.wsstax-hero-container{
  position: relative;
  padding: 40px 20px 100px;
}
@media screen and (max-width: 767.98px){
    .wsstax-hero-container{padding: 100px 20px;}
    .wsstax-hero .hero-image {padding-top: 50px;}
}
.wsstax-hero-container::before{
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  background-image: url('./imgs/texture.png');
  background-repeat: no-repeat;
  background-size: 531px 1027px;
  background-position: right bottom;
  width: 531px;
  height: 1027px;
  z-index: -1;
  max-width: 100%;
}
.wsstax-hero {display: flex; align-items: center;}
.wsstax-hero .hero-image svg{width: 100%; height: auto;}
@media screen and (max-width: 767.98px) {.wsstax-hero{flex-wrap: wrap;} .wsstax-hero .hero-content,.wsstax-hero .hero-image{flex: auto;}}
.hero-content h2{font-size: 40px; font-weight: 700; line-height: 60px; margin-bottom: 20px;}
.hero-content p{font-size: 16px; font-weight: 400; line-height: 31px; margin-bottom: 30px;}
@media screen and (min-width: 768px) {.hero-content p{max-width: 85%;}}
.hero-content{flex: 1;}
.hero-image{flex: 0.85;}
/* == == */
/* == About == */
.wsstax-about-container{padding: 100px 0; background: linear-gradient(180deg, #F3F1DF 0%, var(--clr-white) 100%);}
.wsstax-about{text-align: center;}
.wsstax-about h2{font-size: 40px; font-weight: 700; line-height: 60px; color: var(--clr-body); margin-bottom: 65px;}
.wsstax-about .wsstax-card{text-align: start;}
.wsstax-about .card-body {padding-top: 50px;}
.about-icon{margin-bottom: 30px;}
.about-icon.icon-check{width: 77px;}
.about-icon.icon-xml{width: 75px;}
.about-icon.icon-zatca{width: 83px;}
.about-icon.icon-store{width: 98px;}
.about-icon.icon-invoice{width: 84px;}
.about-icon.icon-otp{width: 94px;}
.wsstax-about h3{font-size: 22px; font-weight: 500; line-height: 31px; color: var(--clr-body); margin-bottom: 23px;}
.wsstax-about p{font-size: 16px; font-weight: 400; line-height: 30px; color: var(--clr-body); opacity: 0.6;}
/* == == */
/* == Benefits == */
.wsstax-benefits-container{padding: 100px 10px; background-color: var(--clr-primary);}
.wsstax-benefits h2{font-size: 40px; font-weight: 700; line-height: 60px; color: var(--clr-white); margin-bottom: 20px;}
.wsstax-benefits p{font-size: 16px; font-weight: 400; line-height: 30px; color: var(--clr-white); margin-bottom: 80px;}
.wsstax-benefits .img-container{max-width: 389px; margin-bottom: 50px;}
.wsstax-benefits .wsstax-card{padding: 40px 30px;}
.benefits-icon{margin-bottom: 23px;}
.benefits-icon.icon-changes{width: 75px;}
.benefits-icon.icon-matching{width: 82px;}
.benefits-icon.icon-dashboard{width: 76px;}
.benefits-icon.icon-eInvoices{width: 82px;}
.benefits-icon.icon-precision{width: 76px;}
.benefits-icon.icon-implementation{width: 85px;}
.wsstax-benefits h3{font-size: 22px; font-weight: 500; line-height: 31px; color: var(--clr-body);}
/* == == */
/* == Contact == */
.wsstax-contact-container{padding: 100px 10px; background-color: var(--clr-white);}
.wsstax-contact h2{font-size: 40px; font-weight: 700; line-height: 60px; color: var(--clr-body); margin-bottom: 5px;}
.wsstax-contact p{font-size: 20px; font-weight: 400; line-height: 30px; color: var(--clr-body); margin-bottom: 65px;}
@media screen and (min-width: 768px) {.wsstax-contact p{max-width: 60%; min-width: 380px}}
.wsstax-contact .img-container{max-width: 489px; margin-bottom: 50px;}
.wsstax-contact .wsstax-card{padding: 40px; box-shadow: 0px 0px 34px rgba(70,85,78,0.1); border-radius: 30px;}
.wsstax-contact .checkbox{margin-bottom: 45px;}
/* == == */
/* == Footer == */
.wsstax-footer{
  padding: 90px 20px;
  text-align: center;
  color: var(--clr-white);
  background-color: var(--clr-body);
}
.footer-logo{width: 65px ;margin: auto; margin-bottom: 3px;}
.footer-content p{font-size: 20px; font-weight: 400; line-height: 36px;}
.footer-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  margin-top: 60px;
}
.footer-links li a{display: inline-flex; align-items: center; width: 24px; height: 24px; color: var(--clr-social);}
.footer-links li a:focus,
.footer-links li a:hover{color: var(--clr-social-hover);}
/* == == */
/* Animation || Micro Interactions */
.about-icon,
.benefits-icon{transition: 0.3s all ease-in-out;}
.wsstax-card:hover .about-icon{transform: translate(-100px, -30px) scale(1.5) rotate(-345deg); transition: 0.3s all ease-in-out;}
.wsstax-card:hover .benefits-icon{transform: translateY(-20px); transition: 0.3s all ease-in-out;}
/* == == */
/* BTN Hover */
.wsstax-btn{position: relative; overflow: hidden; border: 0; transition: 0.2s all ease-in-out;}
.wsstax-btn:hover{transform: translateY(-3px)}
.wsstax-btn:active{transform: translateY(2px); outline: 0; box-shadow: none;}
.wsstax-btn span{z-index: 1}
.wsstax-btn:before {
  content: "";
  z-index: -1 !important;
  position: absolute;
  width: 102%;
  height: 102%;
  top: 50%;
  inset-inline-end: -102%;
  aspect-ratio: 1;
  border-radius: 40vw;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  transition: transform 0.2s ease-in-out;
  /* border:1px solid var(white); */
}
#message{text-align:center;}
#message p{margin-bottom:0 !important; max-width:100%; width:100%;}
.wsstax-btn.btn-primary:before{background: var(--clr-body);}
input.wsstax-btn.btn-dark:hover,
.wsstax-btn.btn-dark:before{background: var(--clr-primary);}
.wsstax-btn:hover:before {
  transform: translateY(-50%) scale(2);
}
.wsstax-btn.btn-dark:hover {box-shadow: 0px 2px 0px 1px rgb(0 0 0 / 80%);}
.wsstax-btn.btn-primary:hover {box-shadow: 0px 2px 0px 1px rgb(211 104 41 / 80%);}
/* == == */
/* Cards Hover */
.wsstax-about .wsstax-card,
.wsstax-benefits .wsstax-card{transition: 0.4s transform ease-in-out}
.wsstax-about .wsstax-card:hover {
  transform: translateY(-10px);
  transition: 0.4s transform ease-in-out;
}
.wsstax-benefits .wsstax-card:hover {
  transform: rotate(3deg) translateY(-10px);
  transition: 0.4s transform ease-in-out;
}
/* == == */

/* Scroll Top */
.scrolltop {
  position: fixed;
  opacity: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  bottom: 40px;
  inset-inline-end: 20px;
  cursor: pointer;
  z-index: 101;
  background-color: var(--clr-primary);
  box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.075);
  transition: color 0.15s ease, background-color 0.15s ease,
      border-color 0.15s ease, box-shadow 0.15s ease;
  border-radius: 8px !important;
  padding: 9px;
}
.scrolltop svg [fill] {
  transition: fill 0.3s ease;
  fill: var(--clr-white);
}
.scrolltop svg:hover [fill] {
  transition: fill 0.3s ease;
}
.scrolltop:hover svg [fill] {
  transition: fill 0.3s ease;
  fill: var(--clr-white);
}
.scrolltop:hover svg:hover [fill] {
  transition: fill 0.3s ease;
}
[data-scrolltop="on"] .scrolltop {
  opacity: 0.3;
  -webkit-animation: animation-scrolltop 0.4s ease-out 1;
  animation: animation-scrolltop 0.4s ease-out 1;
  display: flex;
}
[data-scrolltop="on"] .scrolltop:hover {
  transition: color 0.15s ease, background-color 0.15s ease,
      border-color 0.15s ease, box-shadow 0.15s ease;
  opacity: 1;
}
@media (max-width: 991.98px) {
  .scrolltop {
      bottom: 3rem;
      inset-inline-end: 1.5rem;
      width: 30px;
      height: 30px;
  }
}
@-webkit-keyframes animation-scrolltop {
  0% {
      margin-bottom: -1.5rem;
  }

  to {
      margin-bottom: 0;
  }
}
@keyframes animation-scrolltop {
  0% {
      margin-bottom: -1.5rem;
  }

  to {
      margin-bottom: 0;
  }
}

.checkbox{
    width: 20px;
    height: 20px;
    margin-top: 6px;
    position: relative;
    top: 3px;
    margin-left: 5px;
}