.elementor-2623 .elementor-element.elementor-element-c6a5fbe{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-1ef83e8{--display:flex;}.elementor-2623 .elementor-element.elementor-element-6090663{--display:flex;}.elementor-2623 .elementor-element.elementor-element-cc6b66c{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2623 .elementor-element.elementor-element-3202fda .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-3202fda.elementor-view-stacked .elementor-icon{background-color:#C9A226;}.elementor-2623 .elementor-element.elementor-element-3202fda.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-3202fda.elementor-view-default .elementor-icon{color:#C9A226;border-color:#C9A226;}.elementor-2623 .elementor-element.elementor-element-3202fda.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-3202fda.elementor-view-default .elementor-icon svg{fill:#C9A226;}.elementor-2623 .elementor-element.elementor-element-35b693f{--display:flex;}.elementor-2623 .elementor-element.elementor-element-fccd28f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-22e1f78 .elementor-button{background-color:#00000000;}.elementor-2623 .elementor-element.elementor-element-eb1cd40{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-676520c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-2623 .elementor-element.elementor-element-92f6a10{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-f931c5c{--display:flex;}.elementor-2623 .elementor-element.elementor-element-910ff0d{--display:flex;}.elementor-2623 .elementor-element.elementor-element-0fc136e .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-e60cf0e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-2623 .elementor-element.elementor-element-c165429{--display:flex;}.elementor-2623 .elementor-element.elementor-element-3a971ae{--display:flex;}.elementor-2623 .elementor-element.elementor-element-0b62a91{--display:flex;}.elementor-2623 .elementor-element.elementor-element-f63aa18{--display:flex;}.elementor-2623 .elementor-element.elementor-element-bc130e1{--display:flex;}.elementor-2623 .elementor-element.elementor-element-230ddb8{--display:flex;}.elementor-2623 .elementor-element.elementor-element-17a792e{--display:flex;}.elementor-2623 .elementor-element.elementor-element-9123926{--display:flex;}.elementor-2623 .elementor-element.elementor-element-56e1dbc{text-align:center;}.elementor-2623 .elementor-element.elementor-element-56e1dbc .elementor-heading-title{color:#3B2414;}.elementor-2623 .elementor-element.elementor-element-f441017{text-align:center;color:#020101;}.elementor-2623 .elementor-element.elementor-element-de8d238.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-de8d238.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-2623 .elementor-element.elementor-element-d02b051{--display:flex;}.elementor-2623 .elementor-element.elementor-element-8caa3bb{text-align:center;}.elementor-2623 .elementor-element.elementor-element-8caa3bb .elementor-heading-title{color:#3B2414;}.elementor-2623 .elementor-element.elementor-element-28e8b53{text-align:center;color:#020101;}.elementor-2623 .elementor-element.elementor-element-7da4aa2.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-7da4aa2.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-2623 .elementor-element.elementor-element-bdefa16{--display:flex;}.elementor-2623 .elementor-element.elementor-element-9200bb8{text-align:center;}.elementor-2623 .elementor-element.elementor-element-9200bb8 .elementor-heading-title{color:#3B2414;}.elementor-2623 .elementor-element.elementor-element-876c2b3{text-align:center;color:#020101;}.elementor-2623 .elementor-element.elementor-element-31b11c2.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-31b11c2.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-2623 .elementor-element.elementor-element-f5bd6f1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-400bb74{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-74f3b3d .et-tabs-horizontal .et-tabs-nav ul{justify-content:center;}.elementor-2623 .elementor-element.elementor-element-0fd0b0e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-f650ebd{--display:flex;}.elementor-2623 .elementor-element.elementor-element-4e577e7{--display:flex;}.elementor-2623 .elementor-element.elementor-element-4c7a287{--display:flex;}.elementor-2623 .elementor-element.elementor-element-d2f82a2{--display:flex;}.elementor-2623 .elementor-element.elementor-element-ba8e6e1 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-ac98303{--display:flex;}.elementor-2623 .elementor-element.elementor-element-97f6843{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-5b3800a .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-5b3800a.elementor-view-stacked .elementor-icon{background-color:#B8892E;}.elementor-2623 .elementor-element.elementor-element-5b3800a.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-5b3800a.elementor-view-default .elementor-icon{color:#B8892E;border-color:#B8892E;}.elementor-2623 .elementor-element.elementor-element-5b3800a.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-5b3800a.elementor-view-default .elementor-icon svg{fill:#B8892E;}.elementor-2623 .elementor-element.elementor-element-5b3800a .elementor-icon{font-size:20px;}.elementor-2623 .elementor-element.elementor-element-5b3800a .elementor-icon svg{height:20px;}.elementor-2623 .elementor-element.elementor-element-cb0947d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-df5f369 .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-df5f369.elementor-view-stacked .elementor-icon{background-color:#B8892E;}.elementor-2623 .elementor-element.elementor-element-df5f369.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-df5f369.elementor-view-default .elementor-icon{color:#B8892E;border-color:#B8892E;}.elementor-2623 .elementor-element.elementor-element-df5f369.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-df5f369.elementor-view-default .elementor-icon svg{fill:#B8892E;}.elementor-2623 .elementor-element.elementor-element-df5f369 .elementor-icon{font-size:20px;}.elementor-2623 .elementor-element.elementor-element-df5f369 .elementor-icon svg{height:20px;}.elementor-2623 .elementor-element.elementor-element-f1f593a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-c11e12f .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-c11e12f.elementor-view-stacked .elementor-icon{background-color:#B8892E;}.elementor-2623 .elementor-element.elementor-element-c11e12f.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-c11e12f.elementor-view-default .elementor-icon{color:#B8892E;border-color:#B8892E;}.elementor-2623 .elementor-element.elementor-element-c11e12f.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-c11e12f.elementor-view-default .elementor-icon svg{fill:#B8892E;}.elementor-2623 .elementor-element.elementor-element-c11e12f .elementor-icon{font-size:20px;}.elementor-2623 .elementor-element.elementor-element-c11e12f .elementor-icon svg{height:20px;}.elementor-2623 .elementor-element.elementor-element-ba4a55b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-2623 .elementor-element.elementor-element-825b757{text-align:center;}.elementor-2623 .elementor-element.elementor-element-823153c{--display:flex;}.elementor-2623 .elementor-element.elementor-element-8d6cfe7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-c19a814{--display:flex;}.elementor-2623 .elementor-element.elementor-element-885201c{--display:flex;}.elementor-2623 .elementor-element.elementor-element-e4ba1d8 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-c7673ce{--display:flex;}.elementor-2623 .elementor-element.elementor-element-28e287d{--display:flex;}.elementor-2623 .elementor-element.elementor-element-2dde065 .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-2dde065.elementor-view-stacked .elementor-icon{background-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-2dde065.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-2dde065.elementor-view-default .elementor-icon{color:#E4C77C;border-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-2dde065.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-2dde065.elementor-view-default .elementor-icon svg{fill:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-2dde065 .elementor-icon{font-size:24px;}.elementor-2623 .elementor-element.elementor-element-2dde065 .elementor-icon svg{height:24px;}.elementor-2623 .elementor-element.elementor-element-47f9fd8 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-95df051{--display:flex;}.elementor-2623 .elementor-element.elementor-element-70a0d4f .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-70a0d4f.elementor-view-stacked .elementor-icon{background-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-70a0d4f.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-70a0d4f.elementor-view-default .elementor-icon{color:#E4C77C;border-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-70a0d4f.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-70a0d4f.elementor-view-default .elementor-icon svg{fill:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-70a0d4f .elementor-icon{font-size:24px;}.elementor-2623 .elementor-element.elementor-element-70a0d4f .elementor-icon svg{height:24px;}.elementor-2623 .elementor-element.elementor-element-2c6eaec .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-ee5726f{--display:flex;}.elementor-2623 .elementor-element.elementor-element-b1edae8 .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-b1edae8.elementor-view-stacked .elementor-icon{background-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-b1edae8.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-b1edae8.elementor-view-default .elementor-icon{color:#E4C77C;border-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-b1edae8.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-b1edae8.elementor-view-default .elementor-icon svg{fill:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-b1edae8 .elementor-icon{font-size:24px;}.elementor-2623 .elementor-element.elementor-element-b1edae8 .elementor-icon svg{height:24px;}.elementor-2623 .elementor-element.elementor-element-defd487 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-fa0ebbd{--display:flex;}.elementor-2623 .elementor-element.elementor-element-5d2777a .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-5d2777a.elementor-view-stacked .elementor-icon{background-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-5d2777a.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-5d2777a.elementor-view-default .elementor-icon{color:#E4C77C;border-color:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-5d2777a.elementor-view-framed .elementor-icon, .elementor-2623 .elementor-element.elementor-element-5d2777a.elementor-view-default .elementor-icon svg{fill:#E4C77C;}.elementor-2623 .elementor-element.elementor-element-5d2777a .elementor-icon{font-size:24px;}.elementor-2623 .elementor-element.elementor-element-5d2777a .elementor-icon svg{height:24px;}.elementor-2623 .elementor-element.elementor-element-be7489a .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-78b0611{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-3438f08{--display:flex;}.elementor-2623 .elementor-element.elementor-element-76acced{--display:flex;}.elementor-2623 .elementor-element.elementor-element-4ef3067 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-a251234{--display:flex;}.elementor-2623 .elementor-element.elementor-element-bc16fca{--display:flex;}.elementor-2623 .elementor-element.elementor-element-269f654 .elementor-heading-title{color:#FFFFFF;}.elementor-2623 .elementor-element.elementor-element-860b83c{--display:flex;}.elementor-2623 .elementor-element.elementor-element-0f5fd84 .elementor-heading-title{color:#FFFFFF;}.elementor-2623 .elementor-element.elementor-element-61e7973{--display:flex;}.elementor-2623 .elementor-element.elementor-element-54ba6ed .elementor-heading-title{color:#FFFFFF;}.elementor-2623 .elementor-element.elementor-element-d5ef267{--display:flex;}.elementor-2623 .elementor-element.elementor-element-9565a8d .elementor-heading-title{color:#FFFFFF;}.elementor-2623 .elementor-element.elementor-element-3e06dc4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-777b77d{--display:flex;}.elementor-2623 .elementor-element.elementor-element-8ba8ffb{--display:flex;}.elementor-2623 .elementor-element.elementor-element-6e82922 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-2f17215{--display:flex;}.elementor-2623 .elementor-element.elementor-element-9785157{--display:flex;}.elementor-2623 .elementor-element.elementor-element-f7f7e47 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-23b9688 .elementor-button{background-color:#00000000;}.elementor-2623 .elementor-element.elementor-element-827aed7{--display:flex;}.elementor-2623 .elementor-element.elementor-element-b41fe8c > .elementor-widget-container{border-radius:20px 20px 20px 20px;}.elementor-2623 .elementor-element.elementor-element-ddd151d .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-27e3a58 .elementor-button{background-color:#00000000;}.elementor-2623 .elementor-element.elementor-element-71d93fc{--display:flex;}.elementor-2623 .elementor-element.elementor-element-4eea758 .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-016aac2 .elementor-button{background-color:#00000000;}.elementor-2623 .elementor-element.elementor-element-d674ea9{--display:flex;}.elementor-2623 .elementor-element.elementor-element-4d0adae .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-9ca7796 .elementor-button{background-color:#00000000;}.elementor-2623 .elementor-element.elementor-element-6656454{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-9ffbb29{--display:flex;}.elementor-2623 .elementor-element.elementor-element-dd8b77b .elementor-heading-title{color:#222222;}.elementor-2623 .elementor-element.elementor-element-a2996a7 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2623 .elementor-element.elementor-element-a2996a7 .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-2623 .elementor-element.elementor-element-86e9896{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2623 .elementor-element.elementor-element-5c3b535 .elementor-icon-wrapper{text-align:center;}.elementor-2623 .elementor-element.elementor-element-fbd157e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-2623 .elementor-element.elementor-element-9ffbb29{--width:25%;}.elementor-2623 .elementor-element.elementor-element-86e9896{--width:75%;}}@media(max-width:1024px){.elementor-2623 .elementor-element.elementor-element-de8d238.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-7da4aa2.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-31b11c2.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-2623 .elementor-element.elementor-element-de8d238.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-7da4aa2.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-31b11c2.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2623 .elementor-element.elementor-element-86e9896{--justify-content:center;}}/* Start custom CSS for container, class: .elementor-element-eb1cd40 *//* ============================================
   OTHER SERVICES — button row inside the hero
   Paste into: Elementor > Site Settings > Custom CSS
   ============================================ */

/* ============ CONTAINER ============ */
.ma-other-services{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

.ma-other-services > *,
.ma-other-services .elementor-widget,
.ma-other-services .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ EACH BUTTON (pill style, matches hero's dark background) ============ */
a.ma-service-btn,
.ma-service-btn a,
.ma-service-btn .elementor-button,
.elementor-button.ma-service-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #E4C77C !important;
  background-color: rgba(255,255,255,0.08) !important;
  background-image: none !important;
  border: 1px solid rgba(228,199,124,0.35) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  box-shadow: none !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

a.ma-service-btn:hover,
a.ma-service-btn:focus,
.ma-service-btn a:hover,
.ma-service-btn a:focus,
.ma-service-btn .elementor-button:hover,
.ma-service-btn .elementor-button:focus,
.elementor-button.ma-service-btn:hover,
.elementor-button.ma-service-btn:focus{
  background-color: rgba(255,255,255,0.16) !important;
  border-color: rgba(228,199,124,0.6) !important;
  color: #F5E9C9 !important;
  transform: translateY(-1px);
}

/* Icon sizing, if you add an icon to the button widget */
.ma-service-btn .elementor-button-icon svg,
.ma-service-btn .elementor-button-icon i{
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: inherit !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 640px){
  .ma-other-services{
    gap: 8px !important;
  }
  a.ma-service-btn,
  .ma-service-btn a,
  .ma-service-btn .elementor-button,
  .elementor-button.ma-service-btn{
    font-size: 12.5px !important;
    padding: 8px 14px !important;
    /* Stronger background + border so these stay legible now that the
       mobile hero overlay is lighter and more of the photo shows through */
    background-color: rgba(20,12,7,0.55) !important;
    border-color: rgba(228,199,124,0.55) !important;
    color: #F0D89B !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }
  a.ma-service-btn:hover,
  a.ma-service-btn:focus,
  .ma-service-btn a:hover,
  .ma-service-btn a:focus,
  .ma-service-btn .elementor-button:hover,
  .ma-service-btn .elementor-button:focus,
  .elementor-button.ma-service-btn:hover,
  .elementor-button.ma-service-btn:focus{
    background-color: rgba(20,12,7,0.7) !important;
    border-color: rgba(228,199,124,0.8) !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6a5fbe *//* ============================================
   ZAD AL-MU'TAMIREEN — HERO SECTION CSS
   Paste into: Elementor > Site Settings > Custom CSS
   (or the section's own Advanced > Custom CSS panel)
   ============================================ */

/* ============ 1. SECTION WRAPPER ============ */
/* Full-bleed fix: breaks .ma-hero out of Elementor's boxed content
   width so the background always spans the full viewport, no matter
   what "Content Width" is set on the Section/Container in Elementor. */
.ma-hero{
  position: relative;
  overflow: hidden;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background-color: #1c110a;
  background-image:
    radial-gradient(ellipse at center, rgba(59,36,20,0.25) 0%, rgba(15,9,5,0.55) 80%),
    linear-gradient(180deg, rgba(28,17,10,0.72) 0%, rgba(38,23,13,0.78) 35%, rgba(20,12,7,0.90) 100%),
    url('https://cdn34110-fc.zad-almaatmren.com/genimage/34110-shahos/2026/09/01054455/omer-f-arslan-GX_qAm0U18M-unsplash-scaled.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center 55%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  padding-top: 120px !important;
  padding-bottom: 86px !important;
  min-height: auto !important;
  direction: rtl;
}

/* ============ 2. CONTAINER ============ */
.ma-hero-inner{
  z-index: 2;
  max-width: 760px;
  min-height: auto !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* Kill Elementor's default widget/container spacing so ONLY the
   margins set below (sections 4-10) control spacing. This must
   stay above those sections so the more specific rules win. */
.ma-hero-inner > *,
.ma-hero-inner .elementor-widget,
.ma-hero-inner .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ 3. BACKGROUND LAYERS ============ */
/* Pattern removed — was a subtle texture for the flat gradient background,
   but reads as a stray/out-of-place shape now that a real photo sits
   behind everything. Set to display:none instead of deleting the rule,
   in case you want it back for a different section later. */
.ma-hero-pattern{
  display: none;
}

.ma-hero-glow{
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 1300px;
  height: 1300px;
  max-width: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.20) 0%, rgba(201,162,39,0) 62%);
  pointer-events: none;
}

/* ============ 4. STAR MARK (icon above eyebrow) ============ */
.ma-hero-mark{
  width: 44px;
  height: 44px;
  margin: 0 auto 18px !important;
}
.ma-hero-mark img,
.ma-hero-mark svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* ============ 5. EYEBROW LABEL ============ */
.ma-hero-eyebrow,
.ma-hero-eyebrow p,
.ma-hero-eyebrow span{
  display: inline-block;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #E4C77C !important;
  margin-bottom: 16px !important;
}

/* ============ 6. MAIN HEADLINE (H1) ============ */
.ma-hero-title,
.ma-hero-title h1{
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: clamp(36px, 5vw, 58px) !important;
  line-height: 1.32 !important;
  color: #FFFFFF !important;
  margin: 0 0 18px !important;
  text-shadow: 0 4px 22px rgba(0,0,0,0.55);
}
/* Wrap the key phrase in <span class="ma-hero-title-accent"> inside the heading text */
.ma-hero-title .ma-hero-title-accent,
.ma-hero-title em{
  font-style: normal;
  color: #E4C77C !important;
}

/* ============ 7. GOLD RULE ============ */
.ma-hero-rule{
  width: 100px;
  height:1px;
  border-top:3px solid #C9A227;
  border-radius: 2px;
  margin: 0 auto 18px !important;
}

/* ============ 8. SUBHEADING ============ */
.ma-hero-sub,
.ma-hero-sub p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7;
  color: rgba(251,247,238,0.94) !important;
  max-width: 560px;
  margin: 0 auto 30px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ============ 9. CTA ROW ============ */
.ma-hero-cta-row{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
}

/* Primary button */
a.ma-btn.ma-btn-gold,
.ma-btn.ma-btn-gold a,
.ma-btn.ma-btn-gold .elementor-button,
.elementor-button.ma-btn.ma-btn-gold{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background-color: #C9A227 !important;
  background-image: none !important;
  color: #3B2414 !important;
  fill: #3B2414 !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
a.ma-btn.ma-btn-gold:hover,
a.ma-btn.ma-btn-gold:focus,
.ma-btn.ma-btn-gold a:hover,
.ma-btn.ma-btn-gold a:focus,
.ma-btn.ma-btn-gold .elementor-button:hover,
.ma-btn.ma-btn-gold .elementor-button:focus,
.elementor-button.ma-btn.ma-btn-gold:hover,
.elementor-button.ma-btn.ma-btn-gold:focus{
  background-color: #E4C77C !important;
  background-image: none !important;
  color: #3B2414 !important;
  border-color: transparent !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -12px rgba(59,36,20,0.45) !important;
}

/* Secondary text link */
.ma-hero-link,
.ma-hero-link a{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #E4C77C !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.ma-hero-link svg{
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}
.ma-hero-link:hover,
.ma-hero-link a:hover{
  text-decoration: underline;
}

/* ============ 10. TRUST ROW ============ */
.ma-hero-trust{
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 46px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 40px !important;
  padding-top: 26px !important;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.ma-hero-trust-item{
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  color: rgba(251,247,238,0.9) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.ma-hero-trust-item svg,
.ma-hero-trust-item img{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #E4C77C;
}

/* ============ 11. RESPONSIVE ============ */
@media (max-width: 767px){
  .ma-hero{
    padding-top: 90px !important;
    padding-bottom: 60px !important;
    /* Lighter overlay on mobile — the earlier darker version was
       making the photo barely visible on narrow screens. Legibility
       is now backed up by stronger text-shadows below instead of a
       heavy dark scrim over the image. */
    background-image:
      radial-gradient(ellipse at center, rgba(59,36,20,0.12) 0%, rgba(15,9,5,0.32) 80%),
      linear-gradient(180deg, rgba(28,17,10,0.32) 0%, rgba(38,23,13,0.40) 35%, rgba(20,12,7,0.52) 100%),
      url('https://cdn34110-fc.zad-almaatmren.com/genimage/34110-shahos/2026/09/01054455/omer-f-arslan-GX_qAm0U18M-unsplash-scaled.webp');
  }
  .ma-hero-trust{
    gap: 22px 30px;
    margin-top: 40px !important;
  }

  /* Text-shadows carry more of the legibility work now that the
     overlay is lighter and more of the photo shows through */
  .ma-hero-eyebrow,
  .ma-hero-eyebrow p,
  .ma-hero-eyebrow span{
    color: #F0D89B !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.85);
  }
  .ma-hero-title,
  .ma-hero-title h1{
    text-shadow: 0 4px 26px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.95);
  }
  .ma-hero-sub,
  .ma-hero-sub p{
    color: rgba(255,255,255,0.98) !important;
    text-shadow: 0 3px 16px rgba(0,0,0,0.85);
  }
  .ma-hero-trust-item{
    color: rgba(255,255,255,0.98) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.85);
  }
}

@media (prefers-reduced-motion: reduce){
  .ma-btn.ma-btn-gold,
  .ma-btn.ma-btn-gold a{
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-92f6a10 *//* ============================================
   ZAD AL-MU'TAMIREEN — CATEGORIES SECTION CSS
   Paste into: Elementor > Site Settings > Custom CSS
   ============================================ */

/* ============ 1. SECTION WRAPPER ============ */
.ma-cats{
  background-color: #FBF7EE !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  direction: rtl;
}

/* ============ 2. CONTAINER ============ */
.ma-cats-inner{
  max-width: 1180px;
  margin: 0 auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* Kill Elementor's default widget/container spacing so ONLY the
   margins/padding set below control spacing. */
.ma-cats-inner *,
.ma-cats-inner .elementor-widget,
.ma-cats-inner .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ 3. HEAD BLOCK ============ */
.ma-cats-head{
  text-align: center;
  margin: 0 auto 34px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ma-cats-title,
.ma-cats-title h2{
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  color: #3B2414 !important;
  margin: 0 0 8px !important;
}

.ma-cats-desc,
.ma-cats-desc p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14.5px !important;
  color: #4A5266 !important;
}

/* ============ 4. SCROLL ROW ============ */
.ma-cats-row{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  overflow-x: auto !important;
  padding: 6px 4px 14px !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #E6DFCB transparent;
}
.ma-cats-row::-webkit-scrollbar{
  height: 5px;
}
.ma-cats-row::-webkit-scrollbar-thumb{
  background-color: #E6DFCB;
  border-radius: 99px;
}

/* ============ 5. EACH CATEGORY ITEM ============ */
.ma-cat-item{
  flex: 0 0 auto !important;
  scroll-snap-align: start;
  width: 108px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer;
  text-decoration: none !important;
}

.ma-cat-ring{
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  padding: 4px !important;
  background: linear-gradient(135deg, #C9A227, #E4C77C) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .22s ease, box-shadow .22s ease;
}
.ma-cat-item:hover .ma-cat-ring{
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 26px -12px rgba(59,36,20,0.35);
}

.ma-cat-photo{
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid #FBF7EE !important;
  background-color: #FFFFFF !important;
}
.ma-cat-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.ma-cat-label,
.ma-cat-label p,
.ma-cat-label span{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #3B2414 !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

/* ============ 6. RESPONSIVE ============ */
@media (max-width: 640px){
  .ma-cats{
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .ma-cats-inner{
    padding-left: 18px;
    padding-right: 18px;
  }
  .ma-cats-head{
    margin-bottom: 26px !important;
  }
  .ma-cats-row{
    gap: 16px !important;
  }
  .ma-cat-item{
    width: 84px !important;
  }
  .ma-cat-ring{
    width: 74px !important;
    height: 74px !important;
  }
  .ma-cat-label,
  .ma-cat-label p,
  .ma-cat-label span{
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .ma-cat-ring{
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-17a792e *//* ============================================
   ZAD AL-MU'TAMIREEN — MAKKAH PRODUCTS SECTION
   Heading + Subheading
   Paste into: Elementor > Site Settings > Custom CSS

   NOTE: fix the typo in Elementor's CSS Classes field first —
   it currently reads "ma-producys-head", these rules target
   the correct spelling "ma-products-head".
   ============================================ */

.ma-products-head,
.ma-products-head h1,
.ma-products-head h2,
.ma-products-head h3{
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.35 !important;
  color: #3B2414 !important;
  text-align: center !important;
  margin: 0 0 14px !important;
}

.ma-products-subh,
.ma-products-subh p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: #4A5266 !important;
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto 40px !important;
}

@media (max-width: 640px){
  .ma-products-head,
  .ma-products-head h1,
  .ma-products-head h2,
  .ma-products-head h3{
    margin-bottom: 10px !important;
  }
  .ma-products-subh,
  .ma-products-subh p{
    font-size: 14.5px !important;
    margin-bottom: 28px !important;
  }
}/* End custom CSS */
/* Start custom CSS for et-advanced-tabs, class: .elementor-element-74f3b3d *//* ============================================
   PRODUCT TABS — active tab color + Add to Cart text fix
   Paste into: Elementor > Site Settings > Custom CSS
   ============================================ */

/* ============ 1. ACTIVE TAB COLOR ============ */
.et-tabs-nav .et-tab-nav.active .et-tab-title,
.et-tabs-nav .et-tab-nav.active{
  color: #B8892E !important;
}
.et-tabs-nav .et-tab-nav.active .et-tab-title::after,
.et-tabs-nav .et-tab-nav.active::after{
  background-color: #B8892E !important;
  border-color: #B8892E !important;
}
/* Some XStore versions use a bottom border/indicator instead of ::after — this covers that case too */
.et-tabs-nav .et-tab-nav.active{
  border-color: #B8892E !important;
}

/* Hover state — inactive tabs turn gold on hover too, matching active color */
.et-tabs-nav .et-tab-nav:hover .et-tab-title,
.et-tabs-nav .et-tab-nav:hover{
  color: #E4C77C !important;
}
.et-tabs-nav .et-tab-nav:hover .et-tab-title::after,
.et-tabs-nav .et-tab-nav:hover::after{
  background-color: #E4C77C !important;
  border-color: #E4C77C !important;
}

/* ============ 2. "ADD TO CART" → ARABIC TEXT ============ */
/* Quick CSS-only fix: hides the English text and swaps in Arabic via ::after.
   This is a visual patch, not a real translation — see explanation below
   for the proper fix if you'd rather do it that way instead. */
.add_to_cart_button,
.ajax_add_to_cart{
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.add_to_cart_button::after,
.ajax_add_to_cart::after{
  content: "أضف إلى السلة";
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.add_to_cart_button:hover,
.ajax_add_to_cart:hover{
  background-color: #E4C77C !important;
  border-color: #E4C77C !important;
  color: #3B2414 !important;
}

/* --- Variable products (has size/color/etc. options) — different button,
   shows "Select options" in English by default --- */
.product_type_variable{
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product_type_variable::after{
  content: "اختر الخيارات";
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.product_type_variable:hover{
  background-color: #E4C77C !important;
  border-color: #E4C77C !important;
  color: #3B2414 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0fd0b0e *//* ============================================
   ZAD AL-MU'TAMIREEN — "عمرة بدل" FEATURED SECTION CSS
   Paste into: Elementor > Site Settings > Custom CSS

   NOTE: .ma-btn.ma-btn-gold is already fully styled in the hero
   CSS snippet (same class reused here for the CTA button) — no
   need to redefine it. This file only adds the NEW ma-btn-outline
   variant for the secondary button, once you add it later.
   ============================================ */

/* ============ 1. SECTION WRAPPER ============ */
.ma-omra{
  background-color: #FBF7EE !important;
  padding-top: 88px !important;
  padding-bottom: 88px !important;
  direction: rtl;
}

/* ============ 2. CONTAINER ============ */
.ma-omra-inner{
  max-width: 1180px;
  margin: 0 auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* Kill Elementor's default widget/container spacing so ONLY the
   margins/padding set below control spacing. */
.ma-omra-inner *,
.ma-omra-inner .elementor-widget,
.ma-omra-inner .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ 3. CARD SHELL ============ */
.ma-omra-card{
  background-color: #FFFFFF !important;
  border: 1px solid #E6DFCB !important;
  border-radius: 22px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(59,36,20,0.25);
}

/* ============ 4. VISUAL SIDE ============ */
.ma-omra-visual{
  position: relative;
  background: radial-gradient(circle at 30% 20%, #6B4224, #3B2414 70%) !important;
  padding: 0 !important;
  display: block !important;
  min-height: 380px;
  overflow: hidden;
}

.ma-omra-badge,
.ma-omra-badge p,
.ma-omra-badge span{
  position: absolute !important;
  z-index: 3 !important;
  top: 10px !important;
  right: 5px !important;
  background-color: #C9A227 !important;
  color: #3B2414 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  display: inline-block;
}

.ma-omra-visual-art{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.ma-omra-visual-art img,
.ma-omra-visual-art svg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* ============ 5. BODY SIDE ============ */
.ma-omra-body{
  padding: 40px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.ma-omra-eyebrow,
.ma-omra-eyebrow p,
.ma-omra-eyebrow span{
  display: inline-block;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #B8892E !important;
  margin-bottom: 14px !important;
}

.ma-omra-title,
.ma-omra-title h3{
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  line-height: 1.3 !important;
  color: #3B2414 !important;
  margin: 0 0 14px !important;
}

.ma-omra-desc,
.ma-omra-desc p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.75;
  color: #4A5266 !important;
  margin: 0 0 20px !important;
}

/* ============ 6. FEATURE LIST ============ */
.ma-omra-features{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
}

.ma-omra-feature-item{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15px !important;
  color: #16213A !important;
}
.ma-omra-feature-item svg{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  color: #B8892E;
}

/* Fallback: if the feature list is Elementor's native Icon List widget,
   these target its real internal markup directly so spacing/order
   are controlled even without custom classes on each item/icon. */
.ma-omra-features .elementor-icon-list-items{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ma-omra-features .elementor-icon-list-item{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ma-omra-features .elementor-icon-list-icon{
  color: #B8892E !important;
  order: 2;
}
.ma-omra-features .elementor-icon-list-icon svg{
  width: 16px !important;
  height: 16px !important;
  fill: #B8892E !important;
}
.ma-omra-features .elementor-icon-list-text{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15px !important;
  color: #16213A !important;
  order: 1;
}

/* ============ 7. PRICE BLOCK ============ */
.ma-omra-price{
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 0 0 18px !important;
}

.ma-omra-price-amount{
  order: 1 !important;
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  color: #3B2414 !important;
  margin: 0 !important;
}

.ma-omra-price-unit{
  order: 2 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15px !important;
  color: #4A5266 !important;
  margin: 0 !important;
}

.ma-omra-price-note,
.ma-omra-price-note p{
  display: block;
  order: 3;
  width: 100%;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 13.5px !important;
  color: #4A5266 !important;
  margin-top: 4px !important;
}

/* ============ 8. CTA ROW ============ */
.ma-omra-cta-row{
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Secondary outline button (new variant — add this class once you
   build the second button) */
a.ma-btn.ma-btn-outline,
.ma-btn.ma-btn-outline a,
.elementor-button.ma-btn.ma-btn-outline{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background-color: transparent !important;
  color: #3B2414 !important;
  border: 1.5px solid #3B2414 !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  transition: background-color .2s ease, color .2s ease;
}
a.ma-btn.ma-btn-outline:hover,
a.ma-btn.ma-btn-outline:focus,
.ma-btn.ma-btn-outline a:hover,
.elementor-button.ma-btn.ma-btn-outline:hover{
  background-color: #3B2414 !important;
  color: #FBF7EE !important;
}

/* ============ 9. RESPONSIVE ============ */
@media (max-width: 900px){
  .ma-omra-card{
    grid-template-columns: 1fr !important;
  }
  .ma-omra-visual{
    min-height: 240px;
  }
}

@media (max-width: 640px){
  .ma-omra{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .ma-omra-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
  .ma-omra-body{
    padding: 32px 24px !important;
  }
  .ma-omra-title,
  .ma-omra-title h3{
    font-size: 26px !important;
  }
}

/* feature list: no bullet dot, icon and text always on one line (also on mobile) */
.ma-omra .ma-omra-feature-item { flex-wrap: nowrap !important; align-items: flex-start !important; }
.ma-omra .ma-omra-feature-item .elementor-widget-icon { flex: 0 0 auto !important; width: auto !important; }
.ma-omra .ma-omra-feature-item .elementor-widget-text-editor { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
.ma-omra .ma-omra-feature-item p, .ma-omra .ma-omra-feature-item li { margin: 0 !important; }
.ma-omra .ma-omra-feature-item ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8d6cfe7 *//* ============================================
   ZAD AL-MU'TAMIREEN — "لماذا زاد المعتمرين" SECTION CSS
   Paste into: Elementor > Site Settings > Custom CSS
   ============================================ */

/* ============ 1. SECTION WRAPPER ============ */
.ma-why{
  background-color: #FBF7EE !important;
  padding-top: 88px !important;
  padding-bottom: 88px !important;
  direction: rtl;
}

/* ============ 2. CONTAINER ============ */
.ma-why-inner{
  max-width: 1180px;
  margin: 0 auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* Kill Elementor's default widget/container spacing so ONLY the
   margins set below control spacing. */
.ma-why-inner *,
.ma-why-inner .elementor-widget,
.ma-why-inner .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ 3. HEAD BLOCK ============ */
.ma-why-head{
  max-width: 640px;
  margin: 0 auto 52px !important;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ma-why-eyebrow,
.ma-why-eyebrow p,
.ma-why-eyebrow span{
  display: inline-block;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #B8892E !important;
  margin-bottom: 16px !important;
}

.ma-why-title,
.ma-why-title h2{
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  line-height: 1.35 !important;
  color: #3B2414 !important;
  margin: 0 0 14px !important;
}

.ma-why-desc,
.ma-why-desc p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7;
  color: #4A5266 !important;
}

/* ============ 4. CARD GRID ============ */
.ma-why-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  width: 100%;
}

/* ============ 5. CARD ============ */
.ma-why-card{
  background-color: #FFFFFF !important;
  border: 1px solid #E6DFCB !important;
  border-radius: 14px !important;
  padding: 30px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: right;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ma-why-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px -12px rgba(59,36,20,0.25);
  border-color: #C9A227 !important;
}

/* Icon chip — color alternates by modifier class */
.ma-why-icon{
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  flex-shrink: 0;
}
.ma-why-icon svg,
.ma-why-icon img{
  width: 24px;
  height: 24px;
  color: #E4C77C;
}
/* Elementor's Icon widget often wraps the actual glyph in extra nested
   elements (.elementor-icon, an <i> font-icon tag, etc.) that can throw
   off true centering even when the outer .ma-why-icon box itself is
   flex-centered — this targets those inner wrappers directly so the
   glyph itself sits dead-center inside the colored chip. */
.ma-why-icon .elementor-icon,
.ma-why-icon i,
.ma-why-icon .elementor-icon-wrapper{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.ma-why-icon i{
  font-size: 24px !important;
}

/* --a = deep green icon chip (cards 1 & 3) */
.ma-why-card--a .ma-why-icon{
  background-color: #0B3D2E !important;
}
/* --b = brown icon chip (cards 2 & 4) */
.ma-why-card--b .ma-why-icon{
  background-color: #3B2414 !important;
}

.ma-why-card-title,
.ma-why-card-title h3{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #3B2414 !important;
  margin: 0 0 10px !important;
}

.ma-why-card-text,
.ma-why-card-text p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.7;
  color: #4A5266 !important;
}

/* ============ 6. RESPONSIVE ============ */
@media (max-width: 980px){
  .ma-why-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px){
  .ma-why{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .ma-why-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
  .ma-why-head{
    margin-bottom: 36px !important;
  }
  .ma-why-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ma-why-card{
    padding: 24px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .ma-why-card{
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-78b0611 *//* ============================================
   ZAD AL-MU'TAMIREEN — "كيف تتم العملية" (STEPS) SECTION CSS
   Paste into: Elementor > Site Settings > Custom CSS
   ============================================ */

/* ============ 1. SECTION WRAPPER ============ */
.ma-steps{
  position: relative;
  background: linear-gradient(180deg, #3B2414 0%, #54331C 62%, #6B4224 100%);
  padding-top: 88px !important;
  padding-bottom: 88px !important;
  direction: rtl;
}

/* ============ 2. CONTAINER ============ */
.ma-steps-inner{
  max-width: 1180px;
  margin: 0 auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* Kill Elementor's default widget/container spacing so ONLY the
   margins set below control spacing. */
.ma-steps-inner *,
.ma-steps-inner .elementor-widget,
.ma-steps-inner .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ 3. HEAD BLOCK ============ */
.ma-steps-head{
  max-width: 640px;
  margin: 0 auto 60px !important;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ma-steps-eyebrow,
.ma-steps-eyebrow p,
.ma-steps-eyebrow span{
  display: inline-block;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #E4C77C !important;
  margin-bottom: 16px !important;
}

.ma-steps-title,
.ma-steps-title h2{
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  line-height: 1.35 !important;
  color: #FFFFFF !important;
  margin: 0 0 14px !important;
}

.ma-steps-desc,
.ma-steps-desc p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7;
  color: rgba(251,247,238,0.75) !important;
}

/* ============ 4. STEPS ROW ============ */
.ma-steps-row{
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  width: 100%;
}

/* ============ 5. INDIVIDUAL STEP ============ */
.ma-step{
  position: relative;
  padding: 0 18px !important;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Connector line: each step (except the last) draws a segment from its
   own center to the next step's center. Since it's scoped per-step,
   it can never overshoot past the final circle. */
.ma-step:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 26px;
  right: 50%;
  width: 100%;
  height: 1px;
  z-index: 1;
  background-image: repeating-linear-gradient(90deg, #C9A227 0 8px, transparent 8px 16px);
}

.ma-step-num{
  position: relative;
  z-index: 2;
  width: 54px !important;
  height: 54px !important;
  margin: 0 auto 22px !important;
  border-radius: 50% !important;
  background-color: #3B2414 !important;
  border: 2px solid #E4C77C !important;
  color: #E4C77C !important;
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Same fix as the "why us" icons: Elementor's Heading/Icon widget often
   wraps the actual number/glyph in a nested element (.elementor-heading-title,
   a <span>, an <i> font-icon) that can carry its own margin/line-height
   and throw off true centering even though the outer circle is flex-centered.
   This targets those inner wrappers directly so the number sits dead-center. */
.ma-step-num .elementor-heading-title,
.ma-step-num span,
.ma-step-num p,
.ma-step-num i{
  display: flex !important;
  align-items: center !important;
  justify-content: cente4 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #E4C77C !important;
}

.ma-step-title,
.ma-step-title h3{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16.5px !important;
  color: #FFFFFF !important;
  margin: 0 0 10px !important;
}

.ma-step-text,
.ma-step-text p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7;
  color: rgba(251,247,238,0.72) !important;
}

/* ============ 6. RESPONSIVE ============ */
@media (max-width: 980px){
  .ma-steps-row{
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 40px !important;
  }
  .ma-step:not(:last-child)::after{
    display: none;
  }
}

@media (max-width: 640px){
  .ma-steps{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .ma-steps-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
  .ma-steps-head{
    margin-bottom: 40px !important;
  }
  .ma-steps-row{
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .ma-step{
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e06dc4 *//* ============================================
   ZAD AL-MU'TAMIREEN — "خدماتنا الأخرى" SECTION CSS
   Paste into: Elementor > Site Settings > Custom CSS
   ============================================ */

/* ============ 1. SECTION WRAPPER ============ */
.ma-services{
  background-color: #FFFFFF !important;
  border-top: 1px solid #E6DFCB;
  border-bottom: 1px solid #E6DFCB;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  direction: rtl;
}

/* ============ 2. CONTAINER ============ */
.ma-services-inner{
  max-width: 1180px;
  margin: 0 auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* Kill Elementor's default widget/container spacing so ONLY the
   margins/padding set below control spacing. */
.ma-services-inner *,
.ma-services-inner .elementor-widget,
.ma-services-inner .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ 3. HEAD BLOCK ============ */
.ma-services-head{
  max-width: 640px;
  margin: 0 auto 48px !important;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ma-services-eyebrow,
.ma-services-eyebrow p,
.ma-services-eyebrow span{
  display: inline-block;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #B8892E !important;
  margin-bottom: 14px !important;
}

.ma-services-title,
.ma-services-title h2{
  font-family: 'Amiri', serif !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.35 !important;
  color: #3B2414 !important;
  margin: 0 0 12px !important;
}

.ma-services-desc,
.ma-services-desc p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.7;
  color: #4A5266 !important;
}

/* ============ 4. CARD GRID ============ */
.ma-services-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100%;
}

/* ============ 5. SERVICE CARD ============ */
.ma-service-card{
  background-color: #FFFFFF !important;
  border: 1px solid #E6DFCB !important;
  border-radius: 14px !important;
  padding: 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  text-align: right;
  transition: transform .2s ease, border-color .2s ease;
}
.ma-service-card:hover{
  transform: translateY(-4px);
  border-color: #C9A227 !important;
}

.ma-service-icon{
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  background-color: #F3ECDC !important;
  color: #3B2414 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.ma-service-icon svg,
.ma-service-icon img{
  width: 22px;
  height: 22px;
}

.ma-service-title,
.ma-service-title h4{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: #3B2414 !important;
  margin: 0 !important;
}

.ma-service-text,
.ma-service-text p{
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7;
  color: #4A5266 !important;
  flex-grow: 1;
  margin: 0 !important;
}

/* ============ 6. SERVICE CTA (text link, not a solid button) ============ */
.ma-service-cta,
.ma-service-cta a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #B8892E !important;
}
.ma-service-cta svg{
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
  transition: transform .2s ease;
}
.ma-service-card:hover .ma-service-cta svg{
  transform: rotate(180deg) translateX(-4px);
}

/* ============ 7. RESPONSIVE ============ */
@media (max-width: 860px){
  .ma-services-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  .ma-services{
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .ma-services-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
  .ma-services-head{
    margin-bottom: 32px !important;
  }
  .ma-services-grid{
    gap: 14px !important;
  }
  .ma-service-card{
    padding: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .ma-service-card,
  .ma-service-cta svg{
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6a34dc3 */.ma-none{
    display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6656454 *//* ===== ma-notice-section : trust/disclaimer banner ===== */
/* Paste this whole block into Elementor > Section > Advanced > Custom CSS,
   OR into your theme's Additional CSS / Elementor global Custom CSS. */

.ma-notice-section{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a3d24 0%, #0e522f 55%, #16703f 100%);
  padding: 56px 40px !important;
}

/* decorative gold circles, matches the original graphic without an image */
.ma-notice-section::before,
.ma-notice-section::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #e6cf94, #c9a24a 70%);
  z-index: 0;
  pointer-events:none;
}
.ma-notice-section::before{
  width:180px; height:180px;
  top:-70px; left:-60px;
  opacity:0.9;
}
.ma-notice-section::after{
  width:120px; height:120px;
  bottom:-50px; right:8%;
  opacity:0.45;
}

/* keep Elementor columns above the decorative circles */
.ma-notice-section > .elementor-container{
  position: relative;
  z-index: 1;
}

/* ---------- Brand / contact column ---------- */
.ma-brand-col{
  background: linear-gradient(160deg, #e6cf94, #c9a24a);
  border-radius: 22px !important;
  padding: 28px 22px !important;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.ma-brand-icon img{
  width: 64px;
  height: auto;
  margin: 0 auto 14px;
  display: block;
}

.ma-brand-name{
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: #0a3d24 !important;
  margin-bottom: 14px !important;
}

/* buttons: phone + website */
.ma-phone-btn .elementor-button,
.ma-website-btn .elementor-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width: 100%;
  background: #0a3d24 !important;
  color: #fdf9f0 !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  direction: ltr;
  transition: transform .15s ease, background .15s ease;
}
.ma-phone-btn .elementor-button:hover,
.ma-website-btn .elementor-button:hover{
  background: #16703f !important;
  transform: translateY(-1px);
}
.ma-phone-btn{ margin-bottom: 10px !important; }

/* ---------- Message column ---------- */
.ma-message-col{
  background: #fdf9f0;
  border-radius: 22px !important;
  padding: 36px 40px !important;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.ma-warn-icon{
  flex: none;
  color: #0e522f !important;
  font-size: 48px !important;
  line-height: 1;
}
.ma-warn-icon svg{
  width: 48px;
  height: 48px;
  fill: #0e522f;
}

.ma-message-text{
  font-size: 1.05rem !important;
  line-height: 2 !important;
  color: #12233f !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.ma-message-text strong{
  font-weight: 800 !important;
  color: #0a3d24 !important;
}

/* license number stays LTR inside RTL paragraph */
.ma-message-text .ma-lic{
  direction: ltr;
  unicode-bidi: embed;
  font-weight: 800;
  color: #0a3d24;
}

/* ===================== RESPONSIVE ===================== */

/* Tablet — Elementor default breakpoint 768px */
@media (max-width: 1024px){
  .ma-notice-section{ padding: 40px 24px !important; }

  .ma-brand-col{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }
  .ma-brand-icon img{ margin: 0; }

  .ma-message-col{
    padding: 26px 22px !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ma-message-text{
    font-size: 0.98rem !important;
    line-height: 1.9 !important;
  }
}

/* Mobile — Elementor default breakpoint 480px */
@media (max-width: 480px){
  .ma-brand-col{ padding: 20px 16px !important; }
  .ma-message-col{ padding: 22px 16px !important; }
  .ma-message-text{ font-size: 0.92rem !important; }
  .ma-warn-icon, .ma-warn-icon svg{ width: 36px !important; height: 36px !important;
 
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fbd157e *//* ============================================
   ZAD AL-MU'TAMIREEN — STICKY SIDE TAB (left, vertically centered)
   Paste into: Elementor > Site Settings > Custom CSS
   ============================================ */

.ma-sticky-cta{
  position: fixed !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  width: auto !important;
}

a.ma-sticky-cta-btn,
.ma-sticky-cta-btn a,
.elementor-button.ma-sticky-cta-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;
  background-color: #C9A227 !important;
  color: #3B2414 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 10px 16px !important;
  border: none !important;
  box-shadow: 4px 0 14px -4px rgba(59,36,20,0.3);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, padding .2s ease;
}
a.ma-sticky-cta-btn:hover,
.ma-sticky-cta-btn a:hover,
.elementor-button.ma-sticky-cta-btn:hover{
  background-color: #E4C77C !important;
  padding-left: 22px !important;
  box-shadow: 6px 0 18px -4px rgba(59,36,20,0.4);
}

@media (max-width: 640px){
  a.ma-sticky-cta-btn,
  .ma-sticky-cta-btn a{
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  a.ma-sticky-cta-btn{
    transition: none !important;
  }
}/* End custom CSS */