.elementor-1360 .elementor-element.elementor-element-72b4e3c{--display:flex;}.elementor-1360 .elementor-element.elementor-element-cb95e6e{--display:flex;}.elementor-1360 .elementor-element.elementor-element-7527e65{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-b63417b */.toec-portfolio{
  font-family: "Almarai", Arial, sans-serif;
  padding: 90px 16px;
  color:#fff;
  max-width: 1400px;
  margin: 0 auto;
}

.toec-portfolio-head{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 50px;
}

.toec-badge{
  display:inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(214,107,69,.18);
  border: 1px solid rgba(214,107,69,.45);
  font-weight: 900;
  margin-bottom: 16px;
}

.toec-portfolio-head h2{
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 900;
  margin-bottom: 12px;
  color:#fff;
}

.toec-portfolio-head p{
  color: rgba(255,255,255,.9);
  line-height: 1.8;
  font-size: 15px;
}

/* Grid */
.toec-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.toec-item{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  transform: translateY(18px);
  opacity: 0;
  animation: toecFadeUp .8s ease forwards;
}

.toec-item:nth-child(n){
  animation-delay: calc(var(--i, 1) * 0.05s);
}

.toec-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .5s ease;
}

.toec-item:hover img{
  transform: scale(1.08);
}

/* Animation */
@keyframes toecFadeUp{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* Mobile */
@media(max-width:600px){
  .toec-portfolio{
    padding: 70px 12px;
  }
}/* End custom CSS */