body,
 h1,
 ul,
 li,
 h4,
 h3,
 h2,
 h5,
 h6 {
   margin: 0;
   padding: 0;
   /* user-select: none; */
   direction: rtl ;
   font-family: 'IranSans', sans-serif ;
 }
 body {
 
  font-size: 1.1rem !important;
}
/* DMS Tejarat Custom Styles */
.card {
  border-radius: 10px;
  overflow: hidden;
}

.card-header {
  font-weight: 600;
}

.table th {
  font-weight: 500;
}

.badge {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.btn-link:hover {
  text-decoration: none;
}

.no-account {
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.input-group-text {
  background-color: #f8f9fa;
}
.wallet-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.wallet-button:hover {
  background-color: #e0e0e0;
}
.wallet-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.wallet-button:hover {
  background-color: #e0e0e0;
}

.wallet-icon {
  font-size: 20px;
  margin-right: 10px;
}
.subscription-upgrade-card {
direction: rtl;
background: linear-gradient(135deg, #4b6cb7, #182848);
border: 1px solid rgba(255, 255, 255, 0.1);
}
subscription-upgrade-card {
direction: rtl;
background: linear-gradient(135deg, #4b6cb7, #182848);
border: 1px solid rgba(255,255,255,0.1);
}

.price-box {
background: rgba( 255, 255, 255, 0.05 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 11px );
-webkit-backdrop-filter: blur( 11px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.fa-ul {
padding-right: 1.5em;
}

.fa-li {
right: -1.5em;
left: auto;
}

.balance-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.info-icon {
  font-size: 18px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.info-icon:hover {
  opacity: 0.7;
}
.wallet-icon {
  font-size: 20px;
  margin-right: 10px;
}

.balance-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.info-icon {
  font-size: 18px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.info-icon:hover {
  opacity: 0.7;
}
a{
  text-decoration: none!important;
}
.btn {
  font-size: 1.1rem !important;}

label {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  color: #000000!important;
  font-weight: 500;
}
.invoice-filters .btn-primary{
  color: black!important;
}
 .table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
  font-size: 1.1rem !important;
}
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
  border: 1px solid #f4f4f4;
  font-size: 1.1rem !important;
}
 .user-footer {
  padding: 10px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.footer-nav-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.nav-group {
  display: flex;
  gap: 10px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.profile-btn {
  background-color: #4e73df!important;
  color: white;
}

.dashboard-btn {
  background-color: #1cc88a!important;
  color: white;
}

.logout-btn {
  background-color: #e74a3b!important;
  color: white;
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.nav-btn i {
  font-size: 16px;
}

@media (max-width: 576px) {
  .footer-nav-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .nav-group {
    justify-content: space-between;
    width: 100%;
  }
  
  .nav-group:last-child {
    margin-top: 5px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
  }
  
  .nav-btn {
    flex-grow: 1;
    justify-content: center;
  }
}

 .fancy-heading {
  color: white;
  background: #366B78;
 padding: 10px;
 border-radius: 10px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
 @font-face {
   font-family: 'IranSans';
   src: url('/fonts/Sans-a4fran3.eot');
   /* IE9 and older */
   src: url('/fonts/Sans-a4fran3.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
     url('/fonts/Sans-a4fran3.woff') format('woff'),
     /* Modern Browsers */
     url('/fonts/IRANSans_Medium.ttf') format('truetype');
   /* Safari, Android, iOS */
   font-weight: normal;
   font-style: normal;
 }

 .nav-menu {
   background-color: #333;
   overflow: hidden;
   text-align: right;
   direction: rtl;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   direction: rtl;
   font-family: 'IranSans', sans-serif ;

 }

 .logo img {
   width: 20% ;
   /* Adjust width as needed */
   height: auto;
 }

 .logo-container {
   margin-right: 15px;
 }

 /* Style the navigation menu links */
 .nav-menu ul li {
   display: inline;

 }

 /* Style the navigation menu links */
 .nav-menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
 }

 .nav-menu ul li a {
   float: right;
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
 }

 /* Change color on hover */
 .nav-menu ul li a:hover {
   background-color: #ddd;
   color: black;
 }

 /* Container */
 .login-container {
   text-align: center;
   max-width: 500px;
   margin: 0 auto;
   padding: 20px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }

 /* Title */
 .login-title {
   font-size: 2rem;
   margin-bottom: 20px;
 }

 @media screen and (max-width: 768px) {
  .quote {
 
    /* width: 60%; */
    width: 100%!important;
    
}
   .nav-menu ul {
     flex-direction: column;
     align-items: flex-start;
   }

   .nav-menu ul li {
     display: block;
     width: 100%;
   }

   .nav-menu ul li a {
     padding: 10px;
     text-align: left;
     width: 100%;
   }

   .logo-container {
     display: none;
     /* Hide logo on mobile */
   }
 }

 /* Form */
 .login-form {
   border: 1px solid #ccc;
   padding: 20px;
   border-radius: 5px;
 }

 /* Form Groups */
 .form-group {
   margin-bottom: 15px!important;
   direction: rtl!important ;
 }

 /* Labels */
 .form-label {

   display: inline-block;
   margin-bottom: 5px;
 }

 /* Inputs */
 .form-input {
   direction: rtl ;

   width: 100%;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 3px;
 }

 /* Login Button */
 .login-button {
   padding: 10px 20px;
   background-color: #007bff;
   color: #fff;
   border: none;
   border-radius: 3px;
   cursor: pointer;
 }

 .login-button:hover {
   background-color: #!important;
 }

 /* Create Account Section */
 .create-account {
   margin-top: 20px!important;
 }

 /* Create Account Button */
 .create-button {
   padding: 10px 20px!important;
   background-color: #28a745!important;
   color: #fff;
   border: none;
   border-radius: 3px;
   cursor: pointer;
 }

 .create-button:hover {
   background-color: #218838!important;
 }

 .containers {
   max-width: 600px!important;
   margin: auto;
   padding: 20px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 h1 {
   text-align: center;
   margin-bottom: 30px;
 }

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

 label {
   display: block;
   margin-bottom: 8px;
   font-weight: bold;
 }

 input {
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
   border: 1px solid #ccc;
   font-family: 'IranSans', sans-serif ;

   border-radius: 4px;
 }

 button {
   background-color: #007bff!important;
   color: white!important;
   padding: 10px 20px!important;
   border: none!important;
   border-radius: 4px!important;
   font-family: 'IranSans', sans-serif ;

   cursor: pointer;
 }

 /* styles.css */

 .container {
   max-width: 1200px;
   margin: auto;
   padding: 20px;
 }

 .row {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 20px;
 }

 .col-lg-6,
 .col-12 {
   padding: 15px;
 }

 .img-fluid {
   max-width: 100%;
   height: auto;
 }

 /* Responsive styles */
 @media (max-width: 992px) {
   .col-lg-6 {
     flex: 0 0 100%;
     max-width: 100%;
   }
 }

 /* Responsive styles */


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

 label {
   display: block;
   margin-bottom: 8px;
   font-weight: bold;
 }

 input,
 textarea {
   width: 100%;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }


 button {
   background-color: #007bff;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }

 .img-fluid {
   max-width: 100%;
   height: auto;
 }

 .img_fac {
   transition: transform 0.3s ease;
   /* Adding smooth transition */
 }

 .img_fac:hover {
   transform: scale(1.1);
 }

 .bg-primary {
   --bs-bg-opacity: 1;
   /* background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity)); */
   background-color: #60B5C6 ;
 }

 .wave-bg {
   position: relative;
 }

 .wave-bg:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 150px;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 140" preserveAspectRatio="none"><path fill="%23FFFFFF" d="M0,128 C 320,128 960,0 1280,128 L 1280,256 L 0,256 Z"></path></svg>');
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }

 @media (max-width: 767.98px) {
   .wave-bg:after {
     height: 80px;
   }
 }

 .feature-box {
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }

 .feature-box:hover {
   box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
   transform: translateY(-10px);
 }

 .feature-box h3 {
   font-size: 1.5rem;
   font-family: iransans;
   margin-bottom: 10px;
 }

 .feature-box p {
   font-family: 'IranSans', sans-serif ;

   font-size: 1rem;
 }

 /* Testimonials */
 .testimonial-box {
   font-family: 'IranSans', sans-serif ;

   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 20px;
   margin: 10px;
   background-color: #f9f9f9;
 }

 /* Call to Action */
 .cta {
   font-family: 'IranSans', sans-serif ;

   background-color: #f2f2f2;
   color: #333;
 }

 .cta-button {
   display: inline-block;
   background-color: #007bff;
   color: #fff;
   padding: 10px 30px;
   border-radius: 5px;
   text-decoration: none;
 }

 .cta-button:hover {
   background-color: #0056b3;
 }


 /* Help Box */
 .help-box {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 12px;
   padding: 20px;
   position: relative;
 }

 /* Arrow */
 .arrow-right {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid rgba(255, 255, 255, 0.2);
   position: absolute;
   right: -10px;
   top: 50%;
   transform: translateY(-50%);
 }

 /* Last arrow removal */
 .help-box:last-child .arrow-right {
   display: none;
 }


 /* Custom Accordion Styles */
 .accordion-button:focus {
   box-shadow: none;
 }

 .accordion-button:not(.collapsed) {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
 }

 .accordion-item {
   background: linear-gradient(135deg, #f3f4f6, #ffffff);
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.05);
   /* 3D effect */
   transition: background 0.3s ease, box-shadow 0.3s ease;
 }

 .accordion-body {
   background: rgba(255, 255, 255, 0.05);
 }

 .accordion-button::after {
   display: none;
 }

 /* Smooth background and hover styles for the accordion */
 .accordion-item {
   background: #272626;
   transition: background 0.3s ease;
 }

 .accordion-item:hover {
   background: linear-gradient(135deg, #e6e7e9, #f3f4f6);
 }

 /* Accordion button styles */
 .accordion-button {
   background-color: 272626;
   color: #333;
   text-align: center;
   /* Center-align text */
   transition: color 0.3s ease;
 }

 .accordion-button:hover {
   color: #5DB6C7;
 }

 .accordion-body {
   background: rgba(255, 255, 255, 0.9);
   border-top: 1px solid #ccc;
   text-align: center;
   /* Center-align text */
 }
 .col-12 {
  /* padding: 15px; */
  width: 100%;
}
.company-dashboard {
  background: linear-gradient(135deg, #f9fafb 0%, #f0f2f5 100%);
  padding-bottom: 3rem;
}

.dashboard-header {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  position: relative;
}

@media (min-width: 768px) {
  .dashboard-grid {
      grid-template-columns: repeat(2, 1fr);
      /* gap: 2rem; */
      margin: 30px;
  }
}

.dashboard-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5, #10b981);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.dashboard-card:hover::before {
  opacity: 1;
}

.card-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.dashboard-card:hover .card-icon img {
  transform: scale(1.1);
}

.dashboard-card h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.card-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #e5e7eb, #9ca3af, #e5e7eb);
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
}

.dashboard-card:hover .card-divider {
  background: linear-gradient(90deg, #4f46e5, #10b981);
  width: 60px;
}

.card-hint {
  font-size: 0.85rem;
  color: #6b7280;
  display: block;
  transition: color 0.3s ease;
}

.dashboard-card:hover .card-hint {
  color: #4f46e5;
}
.btn-danger {
  color: #fff;
  background-color: #fd625e!important;
  border-color: #fd625e!important; }
  .btn-danger:hover {
    color: #fff;
    background-color: #d75350;
    border-color: #ca4e4b; }
/* Creative Separators */
.vertical-divider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60%;
  width: 1px;
  background: linear-gradient(to bottom, 
      transparent 0%, 
      rgba(0,0,0,0.1) 20%, 
      rgba(0,0,0,0.1) 80%, 
      transparent 100%);
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40; }
  .btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40; }

.horizontal-divider {
  grid-column: span 2;
  height: 1px;
  background: linear-gradient(to right, 
      transparent 0%, 
      rgba(0,0,0,0.1) 20%, 
      rgba(0,0,0,0.1) 80%, 
      transparent 100%);
  margin: 0.5rem 0;
}

/* Individual Card Colors */
.card-1:hover { color: #4f46e5; }
.card-2:hover { color: #10b981; }
.card-3:hover { color: #f59e0b; }
.card-4:hover { color: #ef4444; }
 /* Title Section with Smooth Background */
 .bg-title {
   background-image: url('/images/tax-calc.jpg')!important;
   background-size: cover!important;
   background-position: center!important;
   background-repeat: no-repeat!important;
   color: #fff!important;
   text-align: center!important;
   padding: 1rem!important;
   border-radius: 8px!important;
   position: relative!important;
   /* Added for the glass effect */
 }

 .bg-titles {
   background-image: url('/images/cts.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   color: #000000;
   text-align: center;
   padding: 1rem;
   border-radius: 8px;
   position: relative;
   /* Added for the glass effect */
 }

 /* Glass effect for the text */
 .glass {
   backdrop-filter: blur(10px);
   /* Create blur */
   background-color: rgba(255, 255, 255, 0.1);
   /* Semi-transparent background */
   padding: 1rem;
   border-radius: 8px;
   margin: 0;
 }
 .form-control {
                         
  transition: width 0.3s ease, height 0.1s ease;
  /* Smooth transition for size changes */
}

.form-control:focus {
  /* Increased size when focused */
  width: 190px;
  /* Larger width */
  /* height: 35px; */
  /* Larger height */
}
 /* Navbar color to match logo */
 .nav-menu {
   background-color: #3f68b4;
   /* ... existing styles ... */
 }

 .nav-menu ul li a:hover {
   background-color: #387a86;
   color: #fff;
 }

 /* Login and Create Account Button */
 .login-button,
 .create-button {
   background-color: #5DB6C7;
 }

 .login-button:hover,
 .create-button:hover {
   background-color: #49a0b0;
 }

 .accordion {
   counter-reset: accordion-counter;
 }

 .custom-title {
   margin-top: 10px;
   font-size: 2rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   border-bottom: 4px solid #5DB6C7;
   /* Same color as your logo */
   padding-bottom: 0.5rem;
   transition: all 0.3s ease;
   /* For smooth hover effect */
   background: linear-gradient(135deg, #fbfbfb50, #ebedee23);
   /* Smooth background */

 }

 /* Hover effect for the title */
 .custom-title:hover {
   color: #5DB6C7;
   /* Same color as your logo */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
   transform: scale(1.05);
   /* Slightly enlarge the element */
 }

 .custom-box {
   background-color: rgba(93, 182, 199, 0.1);
   /* Semi-transparent background */
   backdrop-filter: blur(10px);
   /* Create blur */
   padding: 1rem;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   /* Add a subtle shadow */
   transition: all 0.3s ease;
   /* Add transition for smooth hover effect */
 }

 /* Custom box hover */
 .custom-box:hover {
   background-color: rgba(93, 182, 199, 0.2);
   transform: scale(1.05);
   /* Slightly enlarge the element */
 }

 /* Custom title */
 .custom-title {
   color: #5DB6C7;
   /* Same color as your logo */
   font-size: 1.5rem;
 }

 /* Custom text */
 .custom-text {
   color: #333;
 }

 .btn-help {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50px;
   padding: 10px;
   background-color: orange;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   z-index: 4;
 }

 .invoice-filters button {
   margin: 0 10px;
 }

 .invoice-filters button:hover {
   background: #0069d9;
 }

 .invoice-filters .btn-primary {
   background: #007bff;
   border-color: #007bff;
 }

 .invoice-filters {

   color: #fff;
   text-align: center;
   padding: 1rem;
   position: relative;
   /* Added for the glass effect */
   background-color: #e1dcdc;
   padding: 50px 0;
   /* border-radius: 10px; */
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
 }

 .invoice-filters button {
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 10px;
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
 }

 .vertical-menu {
   width: 250px;
   position: fixed;
   z-index: 6;
   background-color: #272626;
   right: 0;
   height: 100%;
 }

 .menu-btn {
   text-decoration: none;
   direction: rtl;
    background-color: #737687;

   margin-bottom: 15px ;
   background: #424656;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   cursor: pointer;
   display: block ;
   margin: 5px;
   padding: 5px;
   text-align: right;
   color: rgb(0, 0, 0);
   transition: all 0.3s ease;
   width: 100%;
   transition: background-color 0.3s ease; /* Updated for specific property */
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6); /* More pronounced shadow for 3D effect */
   transform: translateZ(0); /* Prepares the element for a 3D transformation */
   transition: background-color 0.3s ease, transform 0.3s ease; /* Transition for background color and transform */

   

 }

 .menu-btn:hover {
   background-color: #11191b;
/* 
   transform: translateY(-5px);
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); */
 }

 .menu-btn i {
   direction: rtl;

   margin-right: 5px;
 }


 .accordion-button:not(.collapsed) {
   color: white ;
   background-color: #272626 ;
   /* box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); */
 }

 .menu-containers {
   display: flex;
   margin: 0;
   padding: 0;
   height: 0px;
 }


 .vertical-menu {
   position: fixed;
   width: 15%;

   display: flex;
   flex-direction: column;
   justify-content: space-around;
   /* Adjust as needed */
   align-items: flex-end;
   /* Align menu to the right */
   /* background-color: #efefef; */
   background-image: linear-gradient(to top, #272626, #3c3338, #464353, #41586d, #3f68b4);

   /* 3D Effect */
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6); /* Adjust as necessary */
   transform: translateZ(0) scale(1.05); /* Gives a subtle 3D 'popped out' effect */
   transition: transform 0.3s ease; /* Smooth transition for the transform */
 

   /* Adjust background color */
    /* Adjust menu width as needed */
   position: fixed;
   /* Make the menu fixed */
   top: 0;
   left: 0;
   bottom: 0;
 }

 /* Style for the hamburger menu button */
 .hamburger-icon {
  display: none;
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
 }

 .nav-menu {
   background-color: #3f68b4;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
 }

 .nav-menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
 }

 .nav-menu ul li {
   margin-right: 10px;
   /* Adjust spacing between menu items */
 }

 .nav-menu ul li a {
   color: #fff;
   text-decoration: none;
   padding: 10px 15px;
   display: block;
 }
 .print-title {
  text-align: center;
  size: landscape;

  font-size: 20px;
  font-weight: bold;

  margin-bottom: 20px;
}

@media print {
  @page {
      size: landscape;
  }

  body {
      margin: 0;
      font-size: 10pt; /* Adjust the font size for the entire document */
  }

  table {
      font-size: 10pt; /* Adjust the font size for the table */
      width: 100%; /* Make the table take up the full width of the printed page */
      margin-bottom: 10pt; /* Add a margin at the bottom of the table for separation */
  }
 
}
 .nav-menu ul li a:hover {
   background-color: #387a86;
   color: #fff;
 }

 .login-buttons {
   display: flex;
 }

 .login-button,
 .create-button {
   background-color: #5DB6C7;
   margin-right: 10px;
   /* Adjust spacing between buttons */
 }

 .login-button:hover,
 .create-button:hover {
   background-color: #49a0b0;
 }

 /* Hide the hamburger icon on larger screens */
 .hamburger-menu-btn {
   display: none;
   cursor: pointer;
   font-size: 24px;
   color: #fff;
 }

 /* Media query for responsiveness */
 @media (max-width: 768px) {
   .vertical-menu {
     display: flex;
     flex-direction: column;
     background-color: #333;
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     max-height: 100vh;
     overflow-y: auto;
     z-index: 1;
     /* Ensure it's above other content */
   }

   .container {
     padding: 20px;
     font-family: 'IranSans', sans-serif ;

   }

   .nav-menu ul {
     display: none;
     flex-direction: column;
     /* position: absolute; */
     top: 60px;
     left: 0;
     width: 100%;
     background-color: #3f68b4;
   }

   .nav-menu ul.show {
     display: flex;
   }

   .nav-menu ul li {
     margin-right: 0;
     margin-bottom: 10px;
   }

   .hamburger-icon {
    display: block;
   }

   .login-buttons {
     display: none;
   }
 }


 .site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}
a{
  text-decoration: none;
}


.content {
  margin: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    gap: 30px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(30px);
    border-radius: 20px;
    /*width: min(900px, 100%);*/
    width: 80%;
    box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10;
  }
  
  .info {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 450px;
    padding: 0 35px;
    text-align: justify;
  }
  
  .info p{
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.5;
  }
  
  .movie-night {
    background: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
  }
  
  .btns {
    display: block;
    padding: 10px 40px;
    margin: 10px auto;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    outline: none;
    text-decoration: none;
    color: #784ba0;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
  }
  
  .btns:hover, .btns:focus, .btns:active, .btns:visited {
      transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
      animation: gelatine 0.5s 1;
  }
  
  @keyframes gelatine {
    
    0%, 100% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(0.9, 1.1);
    }
    50% {
      transform: scale(1.1, 0.9);
    }
    75% {
      transform: scale(0.95, 1.05);
    }
  }
  
  /* SWIPER */
  
  .swiper {
    width: 250px;
    height: 450px;
    padding: 50px 0;
  }
  
  .swiper-slide {
    position: relative;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    height:350px;
  }
  
  .swiper-slide span {
    
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    padding: 7px 18px;
    margin: 10px;
    border-radius: 20px;
    letter-spacing: 2px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.095);
    box-shadow: inset 2px -2px 20px rgba(214, 214, 214, 0.2), inset -3px 3px 3px rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
  }
  
  .swiper-slide h2 {
    
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0 0 20px 20px;
  }
  
  .swiper-slide:nth-child(1n) {
    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(https://mandegaracc.com/wp-content/uploads/2023/12/happy-businessman-using-touchpad-laptop-while-working-business-reports-office_637285-809.webp)
        no-repeat 50% 50% / cover;
  }
   
   
   
  
  /* ANIMATED BACKGROUND */
  
  .circles{
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .circles li{
    
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background-color: #ff3cac;
    background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
    animation: animate 25s linear infinite;
    bottom: -150px;
  }
  
  .circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
  }
  
  .circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
  }
  
  .circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
  }
  
  .circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
  }
  
  .circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
  }
  
  .circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
  }
  
  .circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
  }
  
  .circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
  }
  
  .circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
  }
  
  .circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
  }
  
  @keyframes animate {
  
    0%{
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
    }
  
    100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
    }
  
  }
  @media only screen and (max-width: 600px) {
   .swiper-slide {
    position: relative;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  /*width:100%;*/
  display:none;
       
   }
  }
  .sf{
    
       margin: 0px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2E2A2E;
    min-height: 20vh;
    overflow: hidden;
   
  }
  .styled {
    list-style: none;
    padding: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  }

  .styled li {
    text-align: center;
    background: #fff;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 1.1em;
    margin: 10px 5px;
    padding: 12px 15px;
    transition: 0.2s ease;
  }

  .styled li:hover {
    background: #ddd;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }
  
.quote {
  background-color: #fff;
  padding: 30px; 
  width: 60% ;
  margin: 20px auto;
  perspective: 1000px;
 }

.text {
  background-color: #f2f9fc; 
  padding: 30px;
  border-radius: 5px;
  box-shadow: 
    inset 0 5px 10px rgba(0,0,0,0.1),
    2px 4px 5px rgba(0,0,0,0.3);  
  transition: transform 0.3s;  
  transform: rotateX(0deg) translateZ(0px);
}

.quote:hover .text{
  transform: rotateX(-10deg) translateZ(50px);
  box-shadow: 
    inset 0 5px 10px rgba(0,0,0,0.1), 
    5px 10px 10px rgba(0,0,0,0.3);
}

.text:before,
.text:after {
  font-size: 30px;
  color: #3990C2;
  content: '\201C';  
}

.text:after {
  content: '\201D';
}

.card-body {
  height: 220px;
  /* Adjust the height as needed */
  overflow-y: auto;
  /* Add this if you want to allow scrolling for overflowing content */
}

.coupon-container {
  text-align: center;
  background-color: #f0f0f0;
  /* Light gray background */
  padding: 20px;
  border-radius: 10px;
  /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
  margin-bottom: 20px;
  /* Add some spacing below */
}

/* Coupon Title */
.coupon-title {
  font-size: 1.5em;
  /* Larger font size */
  font-weight: bold;
  /* Bold text */
  margin-bottom: 10px;
}

.btn-animated {
  animation: pulse 5s infinite;
  border-radius: 20px;
  /* Rounded corners for a softer look */
  padding: 10px 20px;
  /* Adjust padding for better proportion */
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }

  50% {
      transform: scale(1.1);
  }

  100% {
      transform: scale(1);
  }
}

/* Coupon Code */
.coupon-code {
  display: inline-block;
  /* Allow inline placement */
  background-color: #3f68b4;
  /* Orange background */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  /* All caps */
}

.copy-icon {
  margin-left: 10px;
  /* Add spacing between code and icon */
  cursor: pointer;
  /* Change cursor to pointer on hover */
  color: inherit;
  /* Inherit color from coupon code */
  transition: transform 0.2s ease;
  /* Add transition for hover effect */
}

.copy-icon:hover {
  transform: scale(1.1);
  /* Scale up slightly on hover */
}

/* Coupon Message */
.coupon-message {
  font-size: 0.9em;
  margin-top: 10px;
}

.stunning-button {
  background-color: #007bff;
  color: white;
  font-size: 1.2em;
  border-radius: 8px;
  padding: 10px 20px;

  gap: 10px;
  transition: background-color 0.3s ease;
}

.stunning-button:hover {
  background-color: #0056b3;
}
.multiple-card-slider .carousel-inner {
  padding: 1em;
}
.multiple-card-slider .card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
}
.multiple-card-slider .carousel-control-prev,
.multiple-card-slider .carousel-control-next {
  background-color: #e1e1e1;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.card img {
  max-width: 100%;
  max-height: 100%;
}
@media (min-width: 768px) {
  .multiple-card-slider .carousel-item {
    margin-right: 0;
    flex: 0 0 calc(100% / 5);
    display: block;
    backface-visibility: visible;
  }
  .multiple-card-slider .carousel-inner {
    display: flex;
  }
  .h5, h5 {
    font-size: 1rem;
}
  
}