@import url('https://fonts.googleapis.com/css2?family=Lateef:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
/* Fonts */
:root {
    --nav-font: "Lateef", serif;
    --hS-font: "Tajawal", sans-serif;
    --reg-font: "Cairo", sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--hS-font);
}
tbody, td, tfoot, th, thead, tr{
    border-color: transparent;
    border-style: none;
    border-width: 0;
}

.header .logo img {
    max-height: 100px;
    margin-right: 0px;
}
.hero h1 span {
  font-family: var(--hS-font);
}
.hSfont{
  font-family: var(--hS-font);
}

.navmenu{
    margin-right: auto;
    margin-left: auto;
}
.hero .btn-watch-video i {
    margin-right: 8px;
    margin-left: 8px;
  }

  .navmenu a, .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 2em;
    font-family: var(--nav-font);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
}
.about{
  padding-bottom: 100px;
  background-image: url(../img/bg/abstract_blue-wide.jpg);
  background-position: center;
  background-size: cover;
  opacity: .8;
}
.about .content h3{
  color:aliceblue;
}
.more-features .features-image img {
  border-radius: 30px;
  background: #e0e0e0;
  box-shadow:  -20px -20px 60px #bebebe,
               20px 20px 60px #ffffff;
}
.pricing .description {
  font-size: 1.0em;
  color: whitesmoke;
}
.pricing li{
  font-family: var(--reg-font);
  font-size: 0.9em;
  color: whitesmoke;
  text-align: right;
}
.priceBG{
  background-image: url(../img/bg/ultimate_vista-wide.jpg);
  background-position: center;
  background-size: cover;
}
.pricing h2{
  color: whitesmoke;
}

.pricing .pricing-item {
  background-color: #2e394f;
  /* background-color: color-mix(in srgb, var(--accent-color), transparent 96%) */
  padding: 40px 40px;
  height: 100%;
  border-radius: 20px;
  
}
.pricing-item h3{
  color: whitesmoke;
}
.pricing-item table{
  background-color: #45536e;
  border-radius: 15px;
  width: 100%;
  height: 60px;
  margin-bottom: 20px;
}
.tbltxt{
  font-family: var(--reg-font);
  color: antiquewhite;
  font-size: 1.2em;
}
.pricing ul .na {
  color: color-mix(in srgb, whitesmoke, transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, whitesmoke, transparent 60%);
}

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





.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  font-family: var(--hS-font);
}





#contact{
  --background-color: 
  color-mix(in srgb, var(--accent-color), transparent 97%);
}
#footer{
  background: rgb(210,218,235);
background: linear-gradient(0deg, rgba(210,218,235,1) 0%, rgba(97,112,175,1) 100%);

}

@media (max-width: 480px){
  .more-features .features-image img {
    padding-right: 10px;
    padding-left: 10px;
  }
}

.whatsapp-button {
  background-color: #45536e;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1.2em;
  cursor: pointer;
  width: 100%;
  border-radius: 20px;
}

.whatsapp-button:hover {
  background-color: #626f88;
}

.footer .copyright {
  padding-top: 25px;
  /* padding-bottom: 25px; */
  border-top: 1px solid 
  color-mix(in srgb, var(--default-color), transparent 90%);
}
.footer .footer-links ul a {
  color:whitesmoke;
  display: inline-block;
  line-height: 1;
}
.footer .footer-about .logo span{
  font-family: var(--nav-font);
  color: whitesmoke;
}
.footer h4{
  font-family: var(--nav-font);
  color: whitesmoke;
}

.partners-slider {
  width: 100%;
  position: relative;
  height: 80px;
  background: transparent;
  overflow: hidden;
  direction: ltr;
}

.partners-slider .slide-track {
  display: flex;
  width: calc(60px * 12 + 32px * 12); /* logo width * num + margin * num */
  animation: scroll-logos 30s linear infinite;
}

.partners-slider img {
  height: 60px;
  object-fit: contain;
  filter: grayscale(0.1) brightness(0.97);
  transition: filter 0.3s;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0001;
}
.partners-slider img:hover {
  filter: grayscale(0) brightness(1.05) drop-shadow(0 2px 8px #2221);
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.client-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.client-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 24px #0a4a8622;
}
.product-card {
  transition: transform 0.25s, box-shadow 0.25s;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 8px 24px #0a4a8622;
}
.product-img {
  max-height: 180px;
  object-fit: cover;
  transition: transform 0.3s;
}
.product-card:hover .product-img {
  transform: scale(1.07) rotate(-2deg);
}

/* Optional: Enhance forms and contact cards */
#contact .form-control:focus {
  border-color: #0a4a86;
  box-shadow: 0 0 0 2px #0a4a8622;
}
#contact .btn-primary {
  background: #0a4a86;
  border: none;
}
#contact .btn-primary:hover {
  background: #06325a;
}
#contact .btn-success {
  background: #22b573;
  border: none;
}
#contact .btn-success:hover {
  background: #198754;
}
#contact .input-group input {
  border-radius: 1rem 0 0 1rem;
}
#contact .input-group .btn {
  border-radius: 0 1rem 1rem 0;
}